@atlaskit/editor-plugin-autocomplete 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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

@@ -169,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.
@@ -609,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);
@@ -653,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

@@ -157,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.
@@ -596,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);
@@ -640,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

@@ -162,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.
@@ -602,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);
@@ -646,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.3",
+	"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

@@ -192,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
@@ -378,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,
@@ -736,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);
@@ -786,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