Skip to content

Commit

Permalink
Close link preview if collapsed selection when creating link (#58896)
Browse files Browse the repository at this point in the history
Return caret to after the link boundary so typing can continue if no text is selected when creating a link.
  • Loading branch information
jeryj authored and youknowriad committed Feb 13, 2024
1 parent 5f03c58 commit d1155e0
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 23 deletions.
13 changes: 1 addition & 12 deletions packages/format-library/src/link/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ) );
Expand Down
44 changes: 33 additions & 11 deletions packages/format-library/src/link/inline.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
__experimentalLinkControl as LinkControl,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useDispatch, useSelect } from '@wordpress/data';

/**
* Internal dependencies
Expand Down Expand Up @@ -52,15 +52,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(
() => ( {
Expand Down Expand Up @@ -122,8 +129,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 {
Expand Down

0 comments on commit d1155e0

Please sign in to comment.