feat: Expose autocomplete triggers and text insertion utility #165

dcalhoun · 2025-08-06T18:13:41Z

What?

Broadcast @ and + keystrokes triggering autocompletion. Expose bridge method for appending text strings at cursor.

Why?

Close CMM-453.

Enable native host apps to respond to common autocomplete triggers.

How?

Register custom editor autocompletion callbacks via the editor.Autocomplete.completers filter.
Send new onAutocompleterTriggered bridge event on autocompletion.
Expose appendTextAtCursor bridge method allowing hosts to insert suggestions.
Fix duplicative @wordpress/hooks namespace in the remote editor that results in discarded filters.

Testing Instructions

See sibling PRs:

Accessibility Testing Instructions

N/A, user-facing changes in sibling PRs.

Screenshots or screencast

N/A, visual changes in sibling PRs.

Enable the host to respond to autocomplete events.

Debouncing ensures the native suggestion UI does not reappear after selecting an suggestion.

Bundling the `@wordpress/hook` package meant two namespaces existed: 1. The module bundled by Vite; 2. And the `wp.hooks` global provided by the remote site scripts. Hooks registered by GutenbergKit used the former, but the editor runtime relied upon the latter. Therefore, the GutenbergKit hooks were never applied. Using a single namespace resolves this issue. Originally, bundling select modules was done in service of using `@wordpress/api-fetch` for fetching editor assets from a remote site. Now that the native bridge authenticates and performs this request, we no longer need these bundled modules. We can rely upon the globals provided by the remote site assets.

Enable Android apps to: 1. Receive notifications when autocompleters are triggered (@ and + symbols) 2. Programmatically insert text at the cursor position in the editor

@query

Avoid triggering autocompleter when modifying string prefixed with trigger--e.g., deleting an existing string. Behavior: - @<cursor> triggers the event (filterValue is empty) - @query<cursor> does not trigger (filterValue contains "query") - Same pattern applies to + symbol This ensures native apps only receive the initial trigger notification, not continuous events while the user is typing.

The autocompletion should not disrupt typing strings like an email--e.g., `[email protected]`.

We do not need special handling of side-effect modules. The regex change ensures they are matched by the Vite plugin. The logic then removes the side-effect module import entirely. This is appropriate, as the remote editor assets should already include/load the side-effect modules. E.g., the `format-library` side effects are included in remote editor assets.

By ignoring CSS files within the module import regex, we loaded the CSS twice: once within the bundle, again from the remote site assets. We now match CSS imports and remove them as side-effect imports. Inlined CSS files are treated differently. We bundle these imports so that the JavaScript can act upon the imported string content.

Copilot

Pull Request Overview

This PR exposes autocomplete triggers for @ and + symbols and adds a utility for text insertion at cursor position. It enables native host apps to respond to common autocomplete triggers by registering custom editor autocompletion callbacks and sending bridge events when autocompletion is triggered.

Key changes include:

Added custom autocompleter hooks for @ and + symbols that trigger bridge events
Exposed appendTextAtCursor bridge method for inserting text suggestions
Fixed duplicative @wordpress/hooks namespace issues in the remote editor

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
vite.config.remote.js	Refactored external module handling and WordPress import transformation logic
src/utils/videopress-bridge.js	Changed logging from `info` to `debug` level for initialization messages
src/utils/remote-editor.js	Removed hardcoded exclusion of api-fetch from remote loading
src/utils/fetch.js	Added basic fetch implementation based on @wordpress/api-fetch
src/utils/bridge.js	Added autocompleter trigger bridge method and updated asset fetching to use custom fetch
src/remote.jsx	Restructured initialization order to load api-fetch after assets
src/components/editor/use-plus-autocompleter.js	New hook for handling `+` symbol autocomplete triggers
src/components/editor/use-host-bridge.js	Added `appendTextAtCursor` functionality for text insertion
src/components/editor/use-at-autocompleter.js	New hook for handling `@` symbol autocomplete triggers
src/components/editor/index.jsx	Integrated the new autocompleter hooks
ios/Sources/GutenbergKit/Sources/EditorViewControllerDelegate.swift	Added delegate method for autocompleter triggers
ios/Sources/GutenbergKit/Sources/EditorViewController.swift	Implemented `appendTextAtCursor` method and message handling
ios/Sources/GutenbergKit/Sources/EditorJSMessage.swift	Added message types for autocompleter events
android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt	Added autocompleter listener and `appendTextAtCursor` method

ios/Sources/GutenbergKit/Sources/EditorViewController.swift

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

The previous implementation might lead to data loss by stripping unsupported characters.

dcalhoun · 2025-08-08T10:44:22Z

src/utils/bridge.js

+	// Use our fetch utility, as we have not yet loaded the `wp.apiFetch` utility
+	return await basicFetch( url, {


basicFetch is a simplified version of the defaultHandler found in the @wordpress/api-fetch module. It aims to provide rudimentary request processing for this one-off request performed when initializing the remote editor.

This utility was added to allow us to stop bundling the @wordpress/api-fetch module with GutenbergKit. This module and its dependencies were bundled, whereas all other WordPress modules were fetched from the remote site. This became problematic when multiple copies of a module were loaded—e.g., duplicate @wordpress/hooks, which is a @wordpress/api-fetch dependency.

With this change, we no longer bundle any WordPress module, meaning that all modules function the same way: loaded from the remote site.

dcalhoun · 2025-08-08T10:45:15Z

src/utils/remote-editor.js

-	/**
-	 * Locally-sourced Gutenberg packages excluded from remote loading to avoid
-	 * conflicts.
-	 */
-	const localGutenbergPackages = [ 'api-fetch', ...disallowedPackages ];


@wordpress/api-fetch and its dependencies are now loaded from the remote site.

dcalhoun · 2025-08-08T10:46:29Z

src/remote.jsx

+	return import( './utils/api-fetch' ).then(
+		( { initializeApiFetch: _initializeApiFetch } ) => {
+			_initializeApiFetch();
+			return assetsResult;
+		}
+	);


The remote editor now lazy loads this API setup utility to ensure the window.wp.apiFetch global (remote site's copy) is available before executing.

dcalhoun · 2025-08-08T12:01:26Z

vite.config.remote.js

 			const magicString = new MagicString( code );
 			let hasReplacements = false;

 			// Match WordPress and React JSX runtime import statements
 			const regex =
-				/import\s*(?:{([^}]+)}\s*from)?\s*['"](@wordpress\/([^'"]+)|react\/jsx-runtime)['"];/g;
+				/import\s*(?:(?:(\w+)|{([^}]+)})\s*from\s*)?['"](@wordpress\/[^'"]+|react\/jsx-runtime)['"];/g;


Fix erroneously overlooked "default" import matching.

dcalhoun · 2025-08-08T12:02:50Z

vite.config.remote.js

+				if ( module.match( /\.css\?inline$/ ) ) {
+					continue; // Exclude inlined CSS files from externalization
+				}


Now that default imports matching is fixed, we must exclude inlined CSS files from externalization. There are no globals that represent inlined CSS strings.

dcalhoun · 2025-08-08T12:03:45Z

vite.config.remote.js

-	return (
-		!! externalDefinition &&
-		! id.match( /\.css(?:\?inline)?$/ ) &&
-		! [ 'apiFetch', 'i18n', 'url', 'hooks' ].includes(


Stop bundling @wordpress/api-fetch and its dependencies.

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

nbradbury · 2025-08-08T15:12:19Z

@dcalhoun This looks good from the Android side. I'm not sure if you also want a review from @crazytonyli . If not, let me know and I'll approve it.

dcalhoun · 2025-08-08T15:13:35Z

Thank you, @nbradbury. I appreciate you sharing your feedback.

I'll await @crazytonyli's review and approval before merging.

crazytonyli

I don't fully understand the JS code, but the Swift code looks good to me.

dcalhoun · 2025-08-12T16:28:23Z

I don't fully understand the JS code, but the Swift code looks good to me.

Thank you for the review, @crazytonyli. If desired, please feel free to leave specific questions regarding unclear JavaScript changes—both on this PR or future PRs. I am happy to provide additional explanation.

crazytonyli · 2025-08-12T21:55:28Z

@dcalhoun I may need a crash course on the Gutenberg library and vite 😅 .

dcalhoun added the [Type] Enhancement A suggestion for improvement. label Aug 6, 2025

dcalhoun force-pushed the feat/broadcast-at-and-plus-keystrokes branch from 82b8831 to 62d1311 Compare August 6, 2025 19:53

Base automatically changed from refactor/improve-debugging to trunk August 6, 2025 20:26

dcalhoun added 7 commits August 6, 2025 16:26

feat: Observe @ autocomplete triggers

9b6ca18

feat: Observe + autocomplete triggers

df4ee9b

feat: Notify native host on autocomplete trigger

141b778

Enable the host to respond to autocomplete events.

feat: Expose appendTextAtCursor bridge method

99f77d8

fix: Avoid restarting autocompletion after selecting option

c0b8d77

Debouncing ensures the native suggestion UI does not reappear after selecting an suggestion.

feat: iOS apps receive autocompletion events

daaeb29

feat: iOS apps append text at cursor

2c3e6bd

dcalhoun force-pushed the feat/broadcast-at-and-plus-keystrokes branch from 62d1311 to 5985701 Compare August 6, 2025 20:26

dcalhoun changed the title ~~feat: Broadcast @ and + keystrokes~~ feat: Expose autocomplete triggers and text insertion utility Aug 7, 2025

dcalhoun added 4 commits August 7, 2025 14:27

feat: Android support for autocompleter events and text insertion

3201e11

Enable Android apps to: 1. Receive notifications when autocompleters are triggered (@ and + symbols) 2. Programmatically insert text at the cursor position in the editor

fix: Prevent autocompletion unless white space surrounds prefix trigger

f94ca59

The autocompletion should not disrupt typing strings like an email--e.g., `[email protected]`.

dcalhoun force-pushed the feat/broadcast-at-and-plus-keystrokes branch from 9edb626 to f94ca59 Compare August 7, 2025 18:27

fix: Authenticate editor assets request for Android

81dcf29

This was referenced Aug 7, 2025

feat: GutenbergKit supports mentions and cross-posts wordpress-mobile/WordPress-Android#22109

Merged

feat: GutenbergKit supports mentions and cross-posts wordpress-mobile/WordPress-iOS#24733

Merged

dcalhoun added 5 commits August 8, 2025 07:01

docs: Improve documentation

1868728

refactor: Rely upon shorthand property name

63ba2d4

refactor: Reduce log noise

64f6556

dcalhoun requested a review from Copilot August 8, 2025 12:04

Copilot AI reviewed Aug 8, 2025

View reviewed changes

ios/Sources/GutenbergKit/Sources/EditorViewController.swift Outdated Show resolved Hide resolved

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt Show resolved Hide resolved

fix: Expand iOS string encoding to avoid stripping content

f5e0a7f

The previous implementation might lead to data loss by stripping unsupported characters.

dcalhoun commented Aug 8, 2025

View reviewed changes

dcalhoun marked this pull request as ready for review August 8, 2025 12:51

dcalhoun requested review from crazytonyli and nbradbury August 8, 2025 12:51

nbradbury self-assigned this Aug 8, 2025

crazytonyli approved these changes Aug 12, 2025

View reviewed changes

dcalhoun merged commit baf41e6 into trunk Aug 12, 2025
11 checks passed

dcalhoun deleted the feat/broadcast-at-and-plus-keystrokes branch August 12, 2025 17:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Expose autocomplete triggers and text insertion utility #165

feat: Expose autocomplete triggers and text insertion utility #165

Uh oh!

dcalhoun commented Aug 6, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

dcalhoun Aug 8, 2025 •

edited

Loading

Uh oh!

dcalhoun Aug 8, 2025

Uh oh!

dcalhoun Aug 8, 2025

Uh oh!

dcalhoun Aug 8, 2025

Uh oh!

dcalhoun Aug 8, 2025

Uh oh!

dcalhoun Aug 8, 2025

Uh oh!

Uh oh!

nbradbury commented Aug 8, 2025

Uh oh!

dcalhoun commented Aug 8, 2025

Uh oh!

crazytonyli left a comment

Uh oh!

dcalhoun commented Aug 12, 2025

Uh oh!

Uh oh!

crazytonyli commented Aug 12, 2025

Uh oh!

Uh oh!

		// Use our fetch utility, as we have not yet loaded the `wp.apiFetch` utility
		return await basicFetch( url, {

feat: Expose autocomplete triggers and text insertion utility #165

feat: Expose autocomplete triggers and text insertion utility #165

Uh oh!

Conversation

dcalhoun commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Accessibility Testing Instructions

Screenshots or screencast

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

dcalhoun Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dcalhoun Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

dcalhoun Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

dcalhoun Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

dcalhoun Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

dcalhoun Aug 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nbradbury commented Aug 8, 2025

Uh oh!

dcalhoun commented Aug 8, 2025

Uh oh!

crazytonyli left a comment

Choose a reason for hiding this comment

Uh oh!

dcalhoun commented Aug 12, 2025

Uh oh!

Uh oh!

crazytonyli commented Aug 12, 2025

Uh oh!

Uh oh!

dcalhoun commented Aug 6, 2025 •

edited

Loading

dcalhoun Aug 8, 2025 •

edited

Loading