[Blocks Editor] Link popover save button disabled state (#18332)

* link save button disabled attribute added

* updated Link text field placeholder

* removed empty url check from submit

* minor changes

packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/tests/useBlocksStore.test.js

@@ -293,6 +293,33 @@ describe('useBlocksStore', () => {
     expect(screen.queryByLabelText(/Edit/i, { selector: 'button' })).toBeInTheDocument();
   });
 
+  it('renders link fields to edit when user clicks the edit option and check save button disabled state', async () => {
+    const { result } = renderHook(useBlocksStore, { wrapper: Wrapper });
+
+    render(
+      result.current.link.renderElement({
+        children: 'Some link',
+        element: { url: 'https://example.com', children: [{ text: 'Some' }, { text: ' link' }] },
+        attributes: {},
+      }),
+      {
+        wrapper: Wrapper,
+      }
+    );
+    const link = screen.getByRole('link', 'Some link');
+    await user.click(link);
+    const editButton = screen.queryByLabelText(/Edit/i, { selector: 'button' });
+    await user.click(editButton);
+
+    const linkTextInput = screen.getByPlaceholderText('Enter link text');
+    const SaveButton = screen.getAllByRole('button', { type: 'submit' });
+    expect(SaveButton[1]).not.toBeDisabled(); // SaveButton[1] is a popover save button
+
+    // Remove link text and check if save button is disabled
+    userEvent.clear(linkTextInput);
+    expect(SaveButton[1]).toBeDisabled();
+  });
+
   it('renders a code block properly', () => {
     const { result } = renderHook(useBlocksStore, { wrapper: Wrapper });
 

packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js

@@ -272,8 +272,9 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
   );
   const [isEditing, setIsEditing] = React.useState(element.url === '');
   const linkRef = React.useRef(null);
-
   const elementText = element.children.map((child) => child.text).join('');
+  const [linkText, setLinkText] = React.useState(elementText);
+  const [linkUrl, setLinkUrl] = React.useState(element.url);
 
   const handleOpenEditPopover = (e) => {
     e.preventDefault();
@@ -282,22 +283,15 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
 
   const handleSave = (e) => {
     e.stopPropagation();
-    const data = new FormData(e.target);
 
-    if (data.get('url') === '') {
+    // If the selection is collapsed, we select the parent node because we want all the link to be replaced
-      removeLink(editor);
+    if (Range.isCollapsed(editor.selection)) {
-      setIsEditing(false);
+      const [, parentPath] = Editor.parent(editor, editor.selection.focus?.path);
-      setPopoverOpen(false);
+      Transforms.select(editor, parentPath);
-    } else {
-      // If the selection is collapsed, we select the parent node because we want all the link to be replaced
-      if (Range.isCollapsed(editor.selection)) {
-        const [, parentPath] = Editor.parent(editor, editor.selection.focus?.path);
-        Transforms.select(editor, parentPath);
-      }
-
-      editLink(editor, { url: data.get('url'), text: data.get('text') });
-      setIsEditing(false);
     }
+
+    editLink(editor, { url: linkUrl, text: linkText });
+    setIsEditing(false);
   };
 
   const handleCancel = () => {
@@ -346,9 +340,10 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
                   name="text"
                   placeholder={formatMessage({
                     id: 'components.Blocks.popover.text.placeholder',
-                    defaultMessage: 'This text is the text of the link',
+                    defaultMessage: 'Enter link text',
                   })}
-                  defaultValue={elementText}
+                  value={linkText}
+                  onChange={(e) => setLinkText(e.target.value)}
                 />
               </Field>
               <Field width="300px">
@@ -358,7 +353,12 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
                     defaultMessage: 'Link',
                   })}
                 </FieldLabel>
-                <FieldInput name="url" placeholder="https://strapi.io" defaultValue={element.url} />
+                <FieldInput
+                  name="url"
+                  placeholder="https://strapi.io"
+                  value={linkUrl}
+                  onChange={(e) => setLinkUrl(e.target.value)}
+                />
               </Field>
               <Flex justifyContent="end" width="100%" gap={2}>
                 <Button variant="tertiary" onClick={handleCancel}>
@@ -367,7 +367,7 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
                     defaultMessage: 'Cancel',
                   })}
                 </Button>
-                <Button type="submit">
+                <Button type="submit" disabled={!linkText || !linkUrl}>
                   {formatMessage({
                     id: 'components.Blocks.popover.save',
                     defaultMessage: 'Save',

packages/core/admin/admin/src/translations/en.json

@@ -628,7 +628,7 @@
   "components.Blocks.modifiers.code": "Code",
   "components.Blocks.link": "Link",
   "components.Blocks.popover.text": "Text",
-  "components.Blocks.popover.text.placeholder": "This text is the text of the link",
+  "components.Blocks.popover.text.placeholder": "Enter link text",
   "components.Blocks.popover.link": "Link",
   "components.Blocks.popover.save": "Save",
   "components.Blocks.popover.cancel": "Cancel",