@atlaskit/editor-plugin-type-ahead 2.7.4 → 2.7.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.7.5
+
+### Patch Changes
+
+- [#154311](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154311)
+  [`a9aff3b749e22`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9aff3b749e22) -
+  [ux] EDITOR-730 Fix bug with typeaheads and legacy content extension that resulted in typeahead
+  text remaining in the inserted element
+- Updated dependencies
+
 ## 2.7.4
 
 ### Patch Changes

package/dist/cjs/ui/TypeAheadPopup.js

@@ -242,34 +242,21 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // Handles cases like emoji (:) and mention (@) typeaheads that open new typeaheads
       var isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          var innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            var newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        var innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          var newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -292,7 +279,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/dist/cjs/ui/modern/TypeAheadPopup.js

@@ -205,34 +205,21 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // Handles cases like emoji and @ typeaheads that open new typeaheads
       var isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if ((0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          var innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            var newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        var innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          var newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -255,7 +242,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/dist/es2019/ui/TypeAheadPopup.js

@@ -233,34 +233,21 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // Handles cases like emoji (:) and mention (@) typeaheads that open new typeaheads
       const isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if (fg('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        const currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        const focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          const innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            let newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        const innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          let newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -285,7 +272,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/dist/es2019/ui/modern/TypeAheadPopup.js

@@ -196,34 +196,21 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // Handles cases like emoji and @ typeaheads that open new typeaheads
       const isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if (fg('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        const currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        const focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          const innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            let newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        const innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          let newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -248,7 +235,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/dist/esm/ui/TypeAheadPopup.js

@@ -231,34 +231,21 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       // Handles cases like emoji (:) and mention (@) typeaheads that open new typeaheads
       var isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if (fg('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          var innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            var newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        var innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          var newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -281,7 +268,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
+  }, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/dist/esm/ui/modern/TypeAheadPopup.js

@@ -195,34 +195,21 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       // Handles cases like emoji and @ typeaheads that open new typeaheads
       var isTextSelected = ((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range';
       if (fg('platform_editor_legacy_content_macro_typeahead_fix')) {
-        var _window$getSelection2;
-        // Check if new focus point is inside the current editor. If it is not we
-        // want to close the typeahead popup regardless of text selection state
-        var currentFocus = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode; // the focusNode is either TextNode, ElementNode
-        // if currentFocus is not HTMLElement, take its parent node as focusNode
-        var focusNode = currentFocus instanceof HTMLElement ? currentFocus : currentFocus === null || currentFocus === void 0 ? void 0 : currentFocus.parentNode;
-        if (focusNode instanceof HTMLElement) {
-          var innerEditor = focusNode.closest('.extension-editable-area');
-          if (innerEditor) {
-            // When there is no related target, we default to not closing the popup
-            var newFocusInsideCurrentEditor = !relatedTarget;
-            if (relatedTarget instanceof HTMLElement) {
-              if (innerEditor) {
-                // check if the new focus is inside inner editor, keep popup opens
-                newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
-              } else {
-                // if the new focus contains current focus node, the popup won't close
-                newFocusInsideCurrentEditor = relatedTarget.contains(focusNode);
-              }
-            }
-            if (!isTextSelected && newFocusInsideCurrentEditor) {
-              return;
-            }
-          } else {
-            // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
-            if (!isTextSelected) {
-              return;
-            }
+        var innerEditor = anchorElement.closest('.extension-editable-area');
+        if (innerEditor) {
+          // When there is no related target, we default to not closing the popup
+          var newFocusInsideCurrentEditor = !relatedTarget;
+          if (relatedTarget instanceof HTMLElement) {
+            // check if the new focus is inside inner editor, keep popup opens
+            newFocusInsideCurrentEditor = innerEditor.contains(relatedTarget);
+          }
+          if (!isTextSelected && newFocusInsideCurrentEditor) {
+            return;
+          }
+        } else {
+          // if the current focus in outer editor, keep the existing behaviour, do not close the pop up if text is not selected
+          if (!isTextSelected) {
+            return;
           }
         }
       } else {
@@ -245,7 +232,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
     };
-  }, [ref, cancel]);
+  }, [ref, cancel, anchorElement]);
 
   // TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
   // This is the expected keyboard behaviour advised by the Accessibility team

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.7.4",
+	"version": "2.7.5",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.5.0",
+		"@atlaskit/editor-common": "^105.6.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -43,14 +43,14 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.1.0",
 		"@atlaskit/menu": "^7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.22.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",