Implements a link validation feature in the edit panel to check the validity of entered links, change input border colors accordingly, and enable the preview button for valid links.
Validation Logic: Adds a validateLink function in src/code/index.js that validates links against a regex pattern to check if they start with http, https, or mailto. This function is triggered on input change for all text inputs within the edit section.
UI Feedback: Modifies input border color to red for invalid links and green for valid links directly within the validateLink function. Additionally, displays an error message under the input field if the link is invalid, using absolute positioning to avoid layout shifts.
Preview Button: Enables the preview button next to the input field if the entered link is valid, ensuring users can only preview valid links.
Styling: Updates src/code/style.css to include styles for valid and invalid input states, such as changing the input border color and styling the error message displayed for invalid links.
Related to #41
Implements a link validation feature in the edit panel to check the validity of entered links, change input border colors accordingly, and enable the preview button for valid links.
validateLink
function insrc/code/index.js
that validates links against a regex pattern to check if they start withhttp
,https
, ormailto
. This function is triggered on input change for all text inputs within theedit
section.validateLink
function. Additionally, displays an error message under the input field if the link is invalid, using absolute positioning to avoid layout shifts.src/code/style.css
to include styles for valid and invalid input states, such as changing the input border color and styling the error message displayed for invalid links.