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)} + /> -