diff --git a/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/tests/useBlocksStore.test.js b/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/tests/useBlocksStore.test.js
index c89ebfe817..4b74a4b0f9 100644
--- a/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/tests/useBlocksStore.test.js
+++ b/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 });
diff --git a/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js b/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js
index d505a04dfc..28908aa57e 100644
--- a/packages/core/admin/admin/src/content-manager/components/BlocksEditor/hooks/useBlocksStore.js
+++ b/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') === '') {
- removeLink(editor);
- setIsEditing(false);
- setPopoverOpen(false);
- } 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);
+ // 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: 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)}
/>
@@ -358,7 +353,12 @@ const Link = React.forwardRef(({ element, children, ...attributes }, forwardedRe
defaultMessage: 'Link',
})}
-
+ setLinkUrl(e.target.value)}
+ />
-