diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js index eb4beebce3f25..61b6f974cdce3 100644 --- a/packages/format-library/src/link/index.js +++ b/packages/format-library/src/link/index.js @@ -48,17 +48,6 @@ function Edit( { return; } - // Close the Link popover if there is no active selection - // after the link was added - this can happen if the user - // adds a link without any text selected. - // We assume that if there is no active selection after - // link insertion there are no active formats. - if ( ! value.activeFormats ) { - editableContentElement.focus(); - setAddingLink( false ); - return; - } - function handleClick( event ) { // There is a situation whereby there is an existing link in the rich text // and the user clicks on the leftmost edge of that link and fails to activate @@ -78,7 +67,7 @@ function Edit( { return () => { editableContentElement.removeEventListener( 'click', handleClick ); }; - }, [ contentRef, isActive, addingLink, value ] ); + }, [ contentRef, isActive ] ); function addLink( target ) { const text = getTextContent( slice( value ) ); diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 7d0594981c290..3528e8561aab8 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -23,7 +23,7 @@ import { store as blockEditorStore, useCachedTruthy, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -53,15 +53,22 @@ function InlineLinkUI( { // Get the text content minus any HTML tags. const richTextText = richLinkTextValue.text; - const { createPageEntity, userCanCreatePages } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - const _settings = getSettings(); - - return { - createPageEntity: _settings.__experimentalCreatePageEntity, - userCanCreatePages: _settings.__experimentalUserCanCreatePages, - }; - }, [] ); + const { selectionChange } = useDispatch( blockEditorStore ); + + const { createPageEntity, userCanCreatePages, selectionStart } = useSelect( + ( select ) => { + const { getSettings, getSelectionStart } = + select( blockEditorStore ); + const _settings = getSettings(); + + return { + createPageEntity: _settings.__experimentalCreatePageEntity, + userCanCreatePages: _settings.__experimentalUserCanCreatePages, + selectionStart: getSelectionStart(), + }; + }, + [] + ); const linkValue = useMemo( () => ( { @@ -123,8 +130,23 @@ function InlineLinkUI( { inserted, linkFormat, value.start, - value.end + newText.length + value.start + newText.length ); + + onChange( newValue ); + + // Close the Link UI. + stopAddingLink(); + + // Move the selection to the end of the inserted link outside of the format boundary + // so the user can continue typing after the link. + selectionChange( { + clientId: selectionStart.clientId, + identifier: selectionStart.attributeKey, + start: value.start + newText.length + 1, + } ); + + return; } else if ( newText === richTextText ) { newValue = applyFormat( value, linkFormat ); } else {