@atlaskit/editor-plugin-autocomplete 4.1.2 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-autocomplete
 
+## 4.2.0
+
+### Minor Changes
+
+- [`268f447fd26f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/268f447fd26f4) -
+  Fix autocomplete click interactions in the editor
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.3
+
+### Patch Changes
+
+- [`5cd6c10a9394f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5cd6c10a9394f) -
+  Fix autocomplete context extraction when inline formatting inserts leaf nodes before the cursor,
+  preventing misaligned ghost-text suggestions that can surface as stray spaces.
+
 ## 4.1.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/autocomplete-plugin.js

@@ -38,6 +38,7 @@ var MAX_INGESTED_CONTEXT_TEXTS = 50;
 // non-comment editors (where parentCommentContent never arrives) don't refetch
 // on every word boundary for the plugin's lifetime.
 var MAX_CONTEXT_REFRESH_ATTEMPTS = 5;
+var INLINE_LEAF_TEXT = ' ';
 
 // eslint-disable-next-line require-unicode-regexp
 var TRAILING_NON_BOUNDARY_TOKEN_REGEX = /([^\s.,;:!?]*)$/;
@@ -63,7 +64,8 @@ var getTextBeforeCursor = function getTextBeforeCursor(state) {
   var maxChars = 200;
   var blockNode = $from.parent;
   var offsetInBlock = $from.parentOffset;
-  var blockText = blockNode.textContent.slice(0, offsetInBlock);
+  // PM offsets count inline leaf nodes; textContent indices do not.
+  var blockText = blockNode.textBetween(0, offsetInBlock, undefined, INLINE_LEAF_TEXT);
   if (blockText.length >= maxChars) {
     return blockText.slice(-maxChars);
   }
@@ -76,7 +78,7 @@ var getTextBeforeCursor = function getTextBeforeCursor(state) {
     var indexInParent = $from.index(depth);
     for (var i = indexInParent - 1; i >= 0 && fullText.length < maxChars; i--) {
       var sibling = parentNode.child(i);
-      var siblingText = sibling.textContent;
+      var siblingText = sibling.textBetween(0, sibling.content.size, '\n', INLINE_LEAF_TEXT);
       fullText = siblingText + '\n' + fullText;
     }
     depth--;
@@ -167,6 +169,16 @@ var acceptGhostText = function acceptGhostText(state, dispatch) {
   }
   return true;
 };
+var acceptGhostTextWithAnalytics = function acceptGhostTextWithAnalytics(state, dispatch, onAccepted) {
+  var _pluginState$ghostTex;
+  var pluginState = autocompletePluginKey.getState(state);
+  var ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
+  var accepted = acceptGhostText(state, dispatch);
+  if (accepted) {
+    onAccepted(ghostText);
+  }
+  return accepted;
+};
 
 /**
  * Context provided to the autocomplete plugin on first editor focus.
@@ -607,28 +619,18 @@ var createAutocompletePlugin = exports.createAutocompletePlugin = function creat
       },
       handleKeyDown: (0, _keymap.keydownHandler)({
         Tab: function Tab(state, dispatch) {
-          var _pluginState$ghostTex;
-          var pluginState = autocompletePluginKey.getState(state);
-          var ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
-          var accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, function (ghostText) {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         ArrowRight: function ArrowRight(state, dispatch) {
-          var _pluginState$ghostTex2;
-          var pluginState = autocompletePluginKey.getState(state);
-          var ghostText = (_pluginState$ghostTex2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex2 !== void 0 ? _pluginState$ghostTex2 : '';
-          var accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, function (ghostText) {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         Escape: function Escape(state, dispatch) {
           var didClear = clearGhostText(state, dispatch);
@@ -651,6 +653,30 @@ var createAutocompletePlugin = exports.createAutocompletePlugin = function creat
           }
           return false;
         },
+        mousedown: function mousedown(view, event) {
+          if (!isAutocompleteEnabled || !(event.target instanceof Element)) {
+            return false;
+          }
+          if (!event.target.closest('[data-autocomplete-ghost="true"]')) {
+            var didClear = clearGhostText(view.state, view.dispatch);
+            if (didClear) {
+              dismissedContext = getTextBeforeCursor(view.state);
+              lastShownGhostText = '';
+              fireSuggestionDismissedAnalytics('click');
+            }
+            return false;
+          }
+          event.preventDefault();
+          var accepted = acceptGhostTextWithAnalytics(view.state, view.dispatch, function (ghostText) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          });
+          if (accepted) {
+            view.focus();
+          }
+          return accepted;
+        },
         focus: function focus() {
           var _options$useLocalMode, _options$useLocalMode2;
           if (!isAutocompleteEnabled) {

package/dist/cjs/pm-plugins/ghost-text-decoration.js

@@ -19,10 +19,13 @@ var createGhostTextDecorationSet = exports.createGhostTextDecorationSet = functi
     var container = document.createElement('span');
     container.className = GHOST_TEXT_CLASS;
     container.setAttribute('data-autocomplete-ghost', 'true');
+    container.setAttribute('contenteditable', 'false');
+    container.setAttribute('aria-hidden', 'true');
     container.style.color = '#999';
     container.style.opacity = '0.6';
-    container.style.pointerEvents = 'none';
+    container.style.pointerEvents = 'auto';
     container.style.userSelect = 'none';
+    container.style.cursor = 'pointer';
     container.style.fontStyle = 'italic';
     // U+200B (Zero Width Space) gives the browser a line-break opportunity
     // immediately before the ghost text. This ensures the typed text before

package/dist/es2019/pm-plugins/autocomplete-plugin.js

@@ -24,6 +24,7 @@ const MAX_INGESTED_CONTEXT_TEXTS = 50;
 // non-comment editors (where parentCommentContent never arrives) don't refetch
 // on every word boundary for the plugin's lifetime.
 const MAX_CONTEXT_REFRESH_ATTEMPTS = 5;
+const INLINE_LEAF_TEXT = ' ';
 
 // eslint-disable-next-line require-unicode-regexp
 const TRAILING_NON_BOUNDARY_TOKEN_REGEX = /([^\s.,;:!?]*)$/;
@@ -47,7 +48,8 @@ const getTextBeforeCursor = state => {
   const maxChars = 200;
   const blockNode = $from.parent;
   const offsetInBlock = $from.parentOffset;
-  const blockText = blockNode.textContent.slice(0, offsetInBlock);
+  // PM offsets count inline leaf nodes; textContent indices do not.
+  const blockText = blockNode.textBetween(0, offsetInBlock, undefined, INLINE_LEAF_TEXT);
   if (blockText.length >= maxChars) {
     return blockText.slice(-maxChars);
   }
@@ -60,7 +62,7 @@ const getTextBeforeCursor = state => {
     const indexInParent = $from.index(depth);
     for (let i = indexInParent - 1; i >= 0 && fullText.length < maxChars; i--) {
       const sibling = parentNode.child(i);
-      const siblingText = sibling.textContent;
+      const siblingText = sibling.textBetween(0, sibling.content.size, '\n', INLINE_LEAF_TEXT);
       fullText = siblingText + '\n' + fullText;
     }
     depth--;
@@ -155,6 +157,16 @@ const acceptGhostText = (state, dispatch) => {
   }
   return true;
 };
+const acceptGhostTextWithAnalytics = (state, dispatch, onAccepted) => {
+  var _pluginState$ghostTex;
+  const pluginState = autocompletePluginKey.getState(state);
+  const ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
+  const accepted = acceptGhostText(state, dispatch);
+  if (accepted) {
+    onAccepted(ghostText);
+  }
+  return accepted;
+};
 
 /**
  * Context provided to the autocomplete plugin on first editor focus.
@@ -594,28 +606,18 @@ export const createAutocompletePlugin = (options, api) => {
       },
       handleKeyDown: keydownHandler({
         Tab: (state, dispatch) => {
-          var _pluginState$ghostTex;
-          const pluginState = autocompletePluginKey.getState(state);
-          const ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
-          const accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, ghostText => {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         ArrowRight: (state, dispatch) => {
-          var _pluginState$ghostTex2;
-          const pluginState = autocompletePluginKey.getState(state);
-          const ghostText = (_pluginState$ghostTex2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex2 !== void 0 ? _pluginState$ghostTex2 : '';
-          const accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, ghostText => {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         Escape: (state, dispatch) => {
           const didClear = clearGhostText(state, dispatch);
@@ -638,6 +640,30 @@ export const createAutocompletePlugin = (options, api) => {
           }
           return false;
         },
+        mousedown: (view, event) => {
+          if (!isAutocompleteEnabled || !(event.target instanceof Element)) {
+            return false;
+          }
+          if (!event.target.closest('[data-autocomplete-ghost="true"]')) {
+            const didClear = clearGhostText(view.state, view.dispatch);
+            if (didClear) {
+              dismissedContext = getTextBeforeCursor(view.state);
+              lastShownGhostText = '';
+              fireSuggestionDismissedAnalytics('click');
+            }
+            return false;
+          }
+          event.preventDefault();
+          const accepted = acceptGhostTextWithAnalytics(view.state, view.dispatch, ghostText => {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          });
+          if (accepted) {
+            view.focus();
+          }
+          return accepted;
+        },
         focus: () => {
           var _options$useLocalMode, _options$useLocalMode2;
           if (!isAutocompleteEnabled) {

package/dist/es2019/pm-plugins/ghost-text-decoration.js

@@ -13,10 +13,13 @@ export const createGhostTextDecorationSet = (state, position, text) => {
     const container = document.createElement('span');
     container.className = GHOST_TEXT_CLASS;
     container.setAttribute('data-autocomplete-ghost', 'true');
+    container.setAttribute('contenteditable', 'false');
+    container.setAttribute('aria-hidden', 'true');
     container.style.color = '#999';
     container.style.opacity = '0.6';
-    container.style.pointerEvents = 'none';
+    container.style.pointerEvents = 'auto';
     container.style.userSelect = 'none';
+    container.style.cursor = 'pointer';
     container.style.fontStyle = 'italic';
     // U+200B (Zero Width Space) gives the browser a line-break opportunity
     // immediately before the ghost text. This ensures the typed text before

package/dist/esm/pm-plugins/autocomplete-plugin.js

@@ -31,6 +31,7 @@ var MAX_INGESTED_CONTEXT_TEXTS = 50;
 // non-comment editors (where parentCommentContent never arrives) don't refetch
 // on every word boundary for the plugin's lifetime.
 var MAX_CONTEXT_REFRESH_ATTEMPTS = 5;
+var INLINE_LEAF_TEXT = ' ';
 
 // eslint-disable-next-line require-unicode-regexp
 var TRAILING_NON_BOUNDARY_TOKEN_REGEX = /([^\s.,;:!?]*)$/;
@@ -56,7 +57,8 @@ var getTextBeforeCursor = function getTextBeforeCursor(state) {
   var maxChars = 200;
   var blockNode = $from.parent;
   var offsetInBlock = $from.parentOffset;
-  var blockText = blockNode.textContent.slice(0, offsetInBlock);
+  // PM offsets count inline leaf nodes; textContent indices do not.
+  var blockText = blockNode.textBetween(0, offsetInBlock, undefined, INLINE_LEAF_TEXT);
   if (blockText.length >= maxChars) {
     return blockText.slice(-maxChars);
   }
@@ -69,7 +71,7 @@ var getTextBeforeCursor = function getTextBeforeCursor(state) {
     var indexInParent = $from.index(depth);
     for (var i = indexInParent - 1; i >= 0 && fullText.length < maxChars; i--) {
       var sibling = parentNode.child(i);
-      var siblingText = sibling.textContent;
+      var siblingText = sibling.textBetween(0, sibling.content.size, '\n', INLINE_LEAF_TEXT);
       fullText = siblingText + '\n' + fullText;
     }
     depth--;
@@ -160,6 +162,16 @@ var acceptGhostText = function acceptGhostText(state, dispatch) {
   }
   return true;
 };
+var acceptGhostTextWithAnalytics = function acceptGhostTextWithAnalytics(state, dispatch, onAccepted) {
+  var _pluginState$ghostTex;
+  var pluginState = autocompletePluginKey.getState(state);
+  var ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
+  var accepted = acceptGhostText(state, dispatch);
+  if (accepted) {
+    onAccepted(ghostText);
+  }
+  return accepted;
+};
 
 /**
  * Context provided to the autocomplete plugin on first editor focus.
@@ -600,28 +612,18 @@ export var createAutocompletePlugin = function createAutocompletePlugin(options,
       },
       handleKeyDown: keydownHandler({
         Tab: function Tab(state, dispatch) {
-          var _pluginState$ghostTex;
-          var pluginState = autocompletePluginKey.getState(state);
-          var ghostText = (_pluginState$ghostTex = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex !== void 0 ? _pluginState$ghostTex : '';
-          var accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, function (ghostText) {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         ArrowRight: function ArrowRight(state, dispatch) {
-          var _pluginState$ghostTex2;
-          var pluginState = autocompletePluginKey.getState(state);
-          var ghostText = (_pluginState$ghostTex2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.ghostText) !== null && _pluginState$ghostTex2 !== void 0 ? _pluginState$ghostTex2 : '';
-          var accepted = acceptGhostText(state, dispatch);
-          if (accepted) {
+          return acceptGhostTextWithAnalytics(state, dispatch, function (ghostText) {
             justAccepted = true;
             lastShownGhostText = '';
             fireSuggestionInsertedAnalytics(ghostText);
-          }
-          return accepted;
+          });
         },
         Escape: function Escape(state, dispatch) {
           var didClear = clearGhostText(state, dispatch);
@@ -644,6 +646,30 @@ export var createAutocompletePlugin = function createAutocompletePlugin(options,
           }
           return false;
         },
+        mousedown: function mousedown(view, event) {
+          if (!isAutocompleteEnabled || !(event.target instanceof Element)) {
+            return false;
+          }
+          if (!event.target.closest('[data-autocomplete-ghost="true"]')) {
+            var didClear = clearGhostText(view.state, view.dispatch);
+            if (didClear) {
+              dismissedContext = getTextBeforeCursor(view.state);
+              lastShownGhostText = '';
+              fireSuggestionDismissedAnalytics('click');
+            }
+            return false;
+          }
+          event.preventDefault();
+          var accepted = acceptGhostTextWithAnalytics(view.state, view.dispatch, function (ghostText) {
+            justAccepted = true;
+            lastShownGhostText = '';
+            fireSuggestionInsertedAnalytics(ghostText);
+          });
+          if (accepted) {
+            view.focus();
+          }
+          return accepted;
+        },
         focus: function focus() {
           var _options$useLocalMode, _options$useLocalMode2;
           if (!isAutocompleteEnabled) {

package/dist/esm/pm-plugins/ghost-text-decoration.js

@@ -13,10 +13,13 @@ export var createGhostTextDecorationSet = function createGhostTextDecorationSet(
     var container = document.createElement('span');
     container.className = GHOST_TEXT_CLASS;
     container.setAttribute('data-autocomplete-ghost', 'true');
+    container.setAttribute('contenteditable', 'false');
+    container.setAttribute('aria-hidden', 'true');
     container.style.color = '#999';
     container.style.opacity = '0.6';
-    container.style.pointerEvents = 'none';
+    container.style.pointerEvents = 'auto';
     container.style.userSelect = 'none';
+    container.style.cursor = 'pointer';
     container.style.fontStyle = 'italic';
     // U+200B (Zero Width Space) gives the browser a line-break opportunity
     // immediately before the ghost text. This ensures the typed text before

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-autocomplete",
-	"version": "4.1.2",
+	"version": "4.2.0",
 	"description": "Client-side text autocomplete plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 		"wink-nlp": "^2.4.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.30.0",
+		"@atlaskit/editor-common": "^116.40.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"react": "^18.2.0"
 	},

package/src/pm-plugins/autocomplete-plugin.ts

@@ -47,6 +47,7 @@ const MAX_INGESTED_CONTEXT_TEXTS = 50;
 // non-comment editors (where parentCommentContent never arrives) don't refetch
 // on every word boundary for the plugin's lifetime.
 const MAX_CONTEXT_REFRESH_ATTEMPTS = 5;
+const INLINE_LEAF_TEXT = ' ';
 
 // eslint-disable-next-line require-unicode-regexp
 const TRAILING_NON_BOUNDARY_TOKEN_REGEX = /([^\s.,;:!?]*)$/;
@@ -82,7 +83,8 @@ const getTextBeforeCursor = (state: EditorState): string => {
 
 	const blockNode = $from.parent;
 	const offsetInBlock = $from.parentOffset;
-	const blockText = blockNode.textContent.slice(0, offsetInBlock);
+	// PM offsets count inline leaf nodes; textContent indices do not.
+	const blockText = blockNode.textBetween(0, offsetInBlock, undefined, INLINE_LEAF_TEXT);
 
 	if (blockText.length >= maxChars) {
 		return blockText.slice(-maxChars);
@@ -99,7 +101,7 @@ const getTextBeforeCursor = (state: EditorState): string => {
 
 		for (let i = indexInParent - 1; i >= 0 && fullText.length < maxChars; i--) {
 			const sibling = parentNode.child(i);
-			const siblingText = sibling.textContent;
+			const siblingText = sibling.textBetween(0, sibling.content.size, '\n', INLINE_LEAF_TEXT);
 			fullText = siblingText + '\n' + fullText;
 		}
 		depth--;
@@ -190,6 +192,20 @@ const acceptGhostText = (state: EditorState, dispatch?: (tr: Transaction) => voi
 	return true;
 };
 
+const acceptGhostTextWithAnalytics = (
+	state: EditorState,
+	dispatch: ((tr: Transaction) => void) | undefined,
+	onAccepted: (ghostText: string) => void,
+): boolean => {
+	const pluginState = autocompletePluginKey.getState(state) as AutocompletePluginState | undefined;
+	const ghostText = pluginState?.ghostText ?? '';
+	const accepted = acceptGhostText(state, dispatch);
+	if (accepted) {
+		onAccepted(ghostText);
+	}
+	return accepted;
+};
+
 /**
  * Context provided to the autocomplete plugin on first editor focus.
  * Text fields are selectively ingested to boost word-frequency scoring for
@@ -376,7 +392,7 @@ export const createAutocompletePlugin = (
 		return options?.useLocalModel ? 'localLlm' : 'server';
 	};
 
-	const fireSuggestionDismissedAnalytics = (reason: 'escape' | 'blur'): void => {
+	const fireSuggestionDismissedAnalytics = (reason: 'escape' | 'blur' | 'click'): void => {
 		api?.analytics?.actions.fireAnalyticsEvent({
 			action: ACTION.SUGGESTION_DISMISSED,
 			actionSubject: ACTION_SUBJECT.CONTEXTUAL_TYPEAHEAD,
@@ -734,30 +750,18 @@ export const createAutocompletePlugin = (
 
 			handleKeyDown: keydownHandler({
 				Tab: (state: EditorState, dispatch?: (tr: Transaction) => void) => {
-					const pluginState = autocompletePluginKey.getState(state) as
-						| AutocompletePluginState
-						| undefined;
-					const ghostText = pluginState?.ghostText ?? '';
-					const accepted = acceptGhostText(state, dispatch);
-					if (accepted) {
+					return acceptGhostTextWithAnalytics(state, dispatch, (ghostText) => {
 						justAccepted = true;
 						lastShownGhostText = '';
 						fireSuggestionInsertedAnalytics(ghostText);
-					}
-					return accepted;
+					});
 				},
 				ArrowRight: (state: EditorState, dispatch?: (tr: Transaction) => void) => {
-					const pluginState = autocompletePluginKey.getState(state) as
-						| AutocompletePluginState
-						| undefined;
-					const ghostText = pluginState?.ghostText ?? '';
-					const accepted = acceptGhostText(state, dispatch);
-					if (accepted) {
+					return acceptGhostTextWithAnalytics(state, dispatch, (ghostText) => {
 						justAccepted = true;
 						lastShownGhostText = '';
 						fireSuggestionInsertedAnalytics(ghostText);
-					}
-					return accepted;
+					});
 				},
 				Escape: (state: EditorState, dispatch?: (tr: Transaction) => void) => {
 					const didClear = clearGhostText(state, dispatch);
@@ -784,6 +788,35 @@ export const createAutocompletePlugin = (
 					}
 					return false;
 				},
+				mousedown: (view: EditorView, event: MouseEvent) => {
+					if (!isAutocompleteEnabled || !(event.target instanceof Element)) {
+						return false;
+					}
+
+					if (!event.target.closest('[data-autocomplete-ghost="true"]')) {
+						const didClear = clearGhostText(view.state, view.dispatch);
+						if (didClear) {
+							dismissedContext = getTextBeforeCursor(view.state);
+							lastShownGhostText = '';
+							fireSuggestionDismissedAnalytics('click');
+						}
+						return false;
+					}
+
+					event.preventDefault();
+
+					const accepted = acceptGhostTextWithAnalytics(view.state, view.dispatch, (ghostText) => {
+						justAccepted = true;
+						lastShownGhostText = '';
+						fireSuggestionInsertedAnalytics(ghostText);
+					});
+
+					if (accepted) {
+						view.focus();
+					}
+
+					return accepted;
+				},
 				focus: () => {
 					if (!isAutocompleteEnabled) {
 						return false;

package/src/pm-plugins/ghost-text-decoration.ts

@@ -22,10 +22,13 @@ export const createGhostTextDecorationSet = (
 			const container = document.createElement('span');
 			container.className = GHOST_TEXT_CLASS;
 			container.setAttribute('data-autocomplete-ghost', 'true');
+			container.setAttribute('contenteditable', 'false');
+			container.setAttribute('aria-hidden', 'true');
 			container.style.color = '#999';
 			container.style.opacity = '0.6';
-			container.style.pointerEvents = 'none';
+			container.style.pointerEvents = 'auto';
 			container.style.userSelect = 'none';
+			container.style.cursor = 'pointer';
 			container.style.fontStyle = 'italic';
 			// U+200B (Zero Width Space) gives the browser a line-break opportunity
 			// immediately before the ghost text. This ensures the typed text before