Add a link completer for inline links to posts (#29172)

* adds a link completer for inline link to post creation * adds icons and removes blank title items * updated icon for post and added shortcut to modal * update snapshot and place the shortcut near other link shortcuts Co-authored-by: Andrei Draganescu <[email protected]>
WordPress · Mar 4, 2022 · 6933f93 · 6933f93
1 parent b4ed630
commit 6933f93
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 0 deletions.
diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { Icon, page, post } from '@wordpress/icons';
+
+const SHOWN_SUGGESTIONS = 10;
+
+/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
+
+/**
+ * Creates a suggestion list for links to posts or pages.
+ *
+ * @return {WPCompleter} A links completer.
+ */
+function createLinkCompleter() {
+	return {
+		name: 'links',
+		className: 'block-editor-autocompleters__link',
+		triggerPrefix: '[[',
+		options: async ( letters ) => {
+			let options = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/search', {
+					per_page: SHOWN_SUGGESTIONS,
+					search: letters,
+					type: 'post',
+					order_by: 'menu_order',
+				} ),
+			} );
+
+			options = options.filter( ( option ) => option.title !== '' );
+
+			return options;
+		},
+		getOptionKeywords( item ) {
+			const expansionWords = item.title.split( /\s+/ );
+			return [ ...expansionWords ];
+		},
+		getOptionLabel( item ) {
+			return (
+				<>
+					<Icon
+						key="icon"
+						icon={ item.subtype === 'page' ? page : post }
+					/>
+					{ item.title }
+				</>
+			);
+		},
+		getOptionCompletion( item ) {
+			return <a href={ item.url }>{ item.title }</a>;
+		},
+	};
+}
+
+/**
+ * Creates a suggestion list for links to posts or pages..
+ *
+ * @return {WPCompleter} A link completer.
+ */
+export default createLinkCompleter();
diff --git a/packages/block-editor/src/autocompleters/style.scss b/packages/block-editor/src/autocompleters/style.scss
@@ -5,3 +5,11 @@
 		margin-right: $grid-unit-10;
 	}
 }
+
+.block-editor-autocompleters__link {
+	white-space: nowrap;
+
+	.block-editor-block-icon {
+		margin-right: $grid-unit-10;
+	}
+}
diff --git a/packages/block-editor/src/components/autocomplete/index.js b/packages/block-editor/src/components/autocomplete/index.js
@@ -19,6 +19,7 @@ import { getDefaultBlockName, getBlockSupport } from '@wordpress/blocks';
  */
 import { useBlockEditContext } from '../block-edit/context';
 import blockAutocompleter from '../../autocompleters/block';
+import linkAutocompleter from '../../autocompleters/link';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -39,6 +40,7 @@ function useCompleters( { completers = EMPTY_ARRAY } ) {
 		) {
 			filteredCompleters = filteredCompleters.concat( [
 				blockAutocompleter,
+				linkAutocompleter,
 			] );
 		}
 

diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js
@@ -20,6 +20,10 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primaryShift', character: 'k' },
 		description: __( 'Remove a link.' ),
 	},
+	{
+		keyCombination: { character: '[[' },
+		description: __( 'Insert a link to a post or page' ),
+	},
 	{
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),

diff --git a/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
@@ -69,6 +69,12 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             "modifier": "primaryShift",
           },
         },
+        Object {
+          "description": "Insert a link to a post or page",
+          "keyCombination": Object {
+            "character": "[[",
+          },
+        },
         Object {
           "description": "Underline the selected text.",
           "keyCombination": Object {