From 2865dd984337a7f747123886d367f565641e49ae Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 9 Feb 2024 11:16:08 -0600 Subject: [PATCH 1/2] Close link preview if collapsed selection when creating link --- packages/format-library/src/link/index.js | 13 +------------ packages/format-library/src/link/inline.js | 7 ++++++- 2 files changed, 7 insertions(+), 13 deletions(-) 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..a6b282f82d192 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -123,8 +123,13 @@ function InlineLinkUI( { inserted, linkFormat, value.start, - value.end + newText.length + value.start + newText.length ); + + onChange( newValue ); + // If there was no selection, move straight back to editing content flow + stopAddingLink(); + return; } else if ( newText === richTextText ) { newValue = applyFormat( value, linkFormat ); } else { From a48cac8e809d70f0302806956ce68c3369cfe041 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 9 Feb 2024 15:50:41 -0600 Subject: [PATCH 2/2] Return caret to after the link boundary so typing can continue --- packages/format-library/src/link/inline.js | 39 ++++++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index a6b282f82d192..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( () => ( { @@ -127,8 +134,18 @@ function InlineLinkUI( { ); onChange( newValue ); - // If there was no selection, move straight back to editing content flow + + // 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 );