@atlaskit/editor-plugin-type-ahead 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.0.1
+
+### Patch Changes
+
+- [#118492](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118492)
+  [`cf0944583828b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf0944583828b) -
+  [ED-26542] Fix typeahead popup doesn't close when clicking outside
+- [#119058](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119058)
+  [`4f8ad7d7497be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4f8ad7d7497be) -
+  [ux] [ED-26575] Add placeholder to quick insert input field
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/pm-plugins/decorations.js

@@ -13,6 +13,7 @@ var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _WrapperTypeAhead = require("../ui/WrapperTypeAhead");
 var _closeTypeAhead = require("./commands/close-type-ahead");
 var _constants = require("./constants");
@@ -62,6 +63,11 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
       typeaheadComponent.dataset.typeAhead = _constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(_colors.B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        // As part of controls work, we add placeholder `Search` to quick insert command
+        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
+        typeaheadComponent.style.whiteSpace = 'nowrap';
+      }
       var onUndoRedo = function onUndoRedo(inputType) {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/cjs/ui/InputQuery.js

@@ -14,6 +14,7 @@ var _w3cKeyname = require("w3c-keyname");
 var _browser = require("@atlaskit/editor-common/browser");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../pm-plugins/constants");
 var _utils = require("../pm-plugins/utils");
 var _AssistiveText = require("./AssistiveText");
@@ -26,6 +27,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var placeholderStyles = (0, _react2.css)({
+  '&::after': {
+    content: 'attr(data-place-holder)',
+    color: "var(--ds-text-subtlest, #626F86)",
+    position: 'relative',
+    padding: "var(--ds-space-025, 2px)",
+    left: "var(--ds-space-negative-050, -4px)",
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: '3px'
+  }
+});
+var queryWithoutPlaceholderStyles = (0, _react2.css)({
+  '&::after': {
+    content: "''"
+  }
+});
 var querySpanStyles = (0, _react2.css)({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -91,6 +108,11 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
+  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var _useState3 = (0, _react.useState)(isEditorControlsEnabled && triggerQueryPrefix === '/'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showPlaceholder = _useState4[0],
+    setShowPlaceholder = _useState4[1];
   var cleanedInputContent = (0, _react.useCallback)(function () {
     var _ref$current;
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -100,10 +122,15 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isInFocus = _useState4[0],
-    setInFocus = _useState4[1];
+  var onInput = (0, _react.useCallback)(function () {
+    if (cleanedInputContent()) {
+      setShowPlaceholder(false);
+    }
+  }, [cleanedInputContent]);
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isInFocus = _useState6[0],
+    setInFocus = _useState6[1];
   var checkKeyEvent = (0, _react.useCallback)(function (event) {
     var _ref$current2;
     var key = (0, _w3cKeyname.keyName)(event);
@@ -403,18 +430,20 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return (0, _react2.jsx)(_react.Fragment, null, triggerQueryPrefix, (0, _react2.jsx)("span", {
-    css: querySpanStyles,
+    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
+    onInput: isEditorControlsEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
+    "data-query-prefix": triggerQueryPrefix,
+    "data-place-holder": intl.formatMessage(_typeAhead.typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? (0, _react2.jsx)("input", {
     ref: inputRef,
     type: "text",

package/dist/cjs/ui/TypeAheadPopup.js

@@ -15,6 +15,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../pm-plugins/constants");
 var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
@@ -193,15 +194,41 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     var focusOut = function focusOut(event) {
       var _window$getSelection;
       var relatedTarget = event.relatedTarget;
-
       // Given the user is changing the focus
       // When the target is inside the TypeAhead Popup
       // Then the popup should stay open
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          var innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

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

@@ -14,6 +14,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorElementBrowser = require("@atlaskit/editor-element-browser");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../pm-plugins/constants");
 var _TypeAheadErrorFallback = require("../TypeAheadErrorFallback");
@@ -193,8 +194,35 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(_constants.TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(_constants.TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          var innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

package/dist/es2019/pm-plugins/decorations.js

@@ -6,6 +6,7 @@ import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { B400 } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { closeTypeAhead } from './commands/close-type-ahead';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_DECORATION_KEY } from './constants';
@@ -61,6 +62,11 @@ export const factoryDecorations = ({
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = `var(--ds-text-accent-blue, ${B400})`;
       typeaheadComponent.style.backgroundColor = 'transparent';
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        // As part of controls work, we add placeholder `Search` to quick insert command
+        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
+        typeaheadComponent.style.whiteSpace = 'nowrap';
+      }
       const onUndoRedo = inputType => {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/es2019/ui/InputQuery.js

@@ -11,9 +11,26 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
 import { AssistiveText } from './AssistiveText';
+const placeholderStyles = css({
+  '&::after': {
+    content: 'attr(data-place-holder)',
+    color: "var(--ds-text-subtlest, #626F86)",
+    position: 'relative',
+    padding: "var(--ds-space-025, 2px)",
+    left: "var(--ds-space-negative-050, -4px)",
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: '3px'
+  }
+});
+const queryWithoutPlaceholderStyles = css({
+  '&::after': {
+    content: `''`
+  }
+});
 const querySpanStyles = css({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -77,6 +94,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
   const ref = useRef(document.createElement('span'));
   const inputRef = useRef(null);
   const [query, setQuery] = useState(null);
+  const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  const [showPlaceholder, setShowPlaceholder] = useState(isEditorControlsEnabled && triggerQueryPrefix === '/');
   const cleanedInputContent = useCallback(() => {
     var _ref$current;
     const raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -86,6 +105,11 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     const text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
+  const onInput = useCallback(() => {
+    if (cleanedInputContent()) {
+      setShowPlaceholder(false);
+    }
+  }, [cleanedInputContent]);
   const [isInFocus, setInFocus] = useState(false);
   const checkKeyEvent = useCallback(event => {
     var _ref$current2;
@@ -395,18 +419,20 @@ export const InputQuery = /*#__PURE__*/React.memo(({
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: querySpanStyles,
+    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
+    onInput: isEditorControlsEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
+    "data-query-prefix": triggerQueryPrefix,
+    "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,
     type: "text",

package/dist/es2019/ui/TypeAheadPopup.js

@@ -12,6 +12,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
@@ -182,15 +183,41 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       const {
         relatedTarget
       } = event;
-
       // Given the user is changing the focus
       // When the target is inside the TypeAhead Popup
       // Then the popup should stay open
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || relatedTarget.closest(`[data-type-ahead="${TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE}"]`))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          const innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

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

@@ -11,6 +11,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { QuickInsertPanel } from '@atlaskit/editor-element-browser';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../../pm-plugins/constants';
 import { TypeAheadErrorFallback } from '../TypeAheadErrorFallback';
@@ -182,8 +183,35 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`) || relatedTarget.closest(`[data-type-ahead="${TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE}"]`))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          const innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

package/dist/esm/pm-plugins/decorations.js

@@ -6,6 +6,7 @@ import { redo, undo } from '@atlaskit/editor-prosemirror/history';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { B400 } from '@atlaskit/theme/colors';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
 import { closeTypeAhead } from './commands/close-type-ahead';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_DECORATION_KEY } from './constants';
@@ -55,6 +56,11 @@ export var factoryDecorations = function factoryDecorations(_ref) {
       typeaheadComponent.dataset.typeAhead = TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE;
       typeaheadComponent.style.color = "var(--ds-text-accent-blue, ".concat(B400, ")");
       typeaheadComponent.style.backgroundColor = 'transparent';
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
+        // As part of controls work, we add placeholder `Search` to quick insert command
+        // This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
+        typeaheadComponent.style.whiteSpace = 'nowrap';
+      }
       var onUndoRedo = function onUndoRedo(inputType) {
         if (!['historyUndo', 'historyRedo'].includes(inputType)) {
           return false;

package/dist/esm/ui/InputQuery.js

@@ -12,9 +12,26 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser } from '@atlaskit/editor-common/browser';
 import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { getPluginState } from '../pm-plugins/utils';
 import { AssistiveText } from './AssistiveText';
+var placeholderStyles = css({
+  '&::after': {
+    content: 'attr(data-place-holder)',
+    color: "var(--ds-text-subtlest, #626F86)",
+    position: 'relative',
+    padding: "var(--ds-space-025, 2px)",
+    left: "var(--ds-space-negative-050, -4px)",
+    backgroundColor: "var(--ds-background-neutral, #091E420F)",
+    borderRadius: '3px'
+  }
+});
+var queryWithoutPlaceholderStyles = css({
+  '&::after': {
+    content: "''"
+  }
+});
 var querySpanStyles = css({
   outline: 'none',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -80,6 +97,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var _useState3 = useState(isEditorControlsEnabled && triggerQueryPrefix === '/'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showPlaceholder = _useState4[0],
+    setShowPlaceholder = _useState4[1];
   var cleanedInputContent = useCallback(function () {
     var _ref$current;
     var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
@@ -89,10 +111,15 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     var text = cleanedInputContent();
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isInFocus = _useState4[0],
-    setInFocus = _useState4[1];
+  var onInput = useCallback(function () {
+    if (cleanedInputContent()) {
+      setShowPlaceholder(false);
+    }
+  }, [cleanedInputContent]);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isInFocus = _useState6[0],
+    setInFocus = _useState6[1];
   var checkKeyEvent = useCallback(function (event) {
     var _ref$current2;
     var key = keyNameNormalized(event);
@@ -392,18 +419,20 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       Task added in https://product-fabric.atlassian.net/wiki/spaces/E/pages/3182068181/Potential+improvements#Moderate-changes.
      */
   return jsx(Fragment, null, triggerQueryPrefix, jsx("span", {
-    css: querySpanStyles,
+    css: [querySpanStyles, isEditorControlsEnabled && queryWithoutPlaceholderStyles, showPlaceholder && placeholderStyles],
     contentEditable: true,
     ref: ref,
     onKeyUp: onKeyUp,
     onClick: onClick,
+    onInput: isEditorControlsEnabled ? onInput : undefined,
     role: "combobox",
     "aria-controls": TYPE_AHEAD_DECORATION_ELEMENT_ID,
     "aria-autocomplete": "list",
     "aria-expanded": items.length !== 0,
     "aria-labelledby": assistiveHintID,
     suppressContentEditableWarning: true,
-    "data-query-prefix": triggerQueryPrefix
+    "data-query-prefix": triggerQueryPrefix,
+    "data-place-holder": intl.formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel)
   }, query === null ? jsx("input", {
     ref: inputRef,
     type: "text",

package/dist/esm/ui/TypeAheadPopup.js

@@ -13,6 +13,7 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
 import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
@@ -182,15 +183,41 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     var focusOut = function focusOut(event) {
       var _window$getSelection;
       var relatedTarget = event.relatedTarget;
-
       // Given the user is changing the focus
       // When the target is inside the TypeAhead Popup
       // Then the popup should stay open
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          var innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

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

@@ -12,6 +12,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
 import { QuickInsertPanel } from '@atlaskit/editor-element-browser';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../../pm-plugins/constants';
 import { TypeAheadErrorFallback } from '../TypeAheadErrorFallback';
@@ -182,8 +183,35 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
       if (relatedTarget instanceof HTMLElement && relatedTarget.closest && (relatedTarget.closest(".".concat(TYPE_AHEAD_POPUP_CONTENT_CLASS)) || relatedTarget.closest("[data-type-ahead=\"".concat(TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, "\"]")))) {
         return;
       }
-      if (!(((_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.type) === 'Range')) {
-        return;
+
+      // 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 focusNode = (_window$getSelection2 = window.getSelection()) === null || _window$getSelection2 === void 0 ? void 0 : _window$getSelection2.focusNode;
+        if (focusNode instanceof HTMLElement) {
+          var innerEditor = focusNode.closest('.extension-editable-area');
+          // 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 (!isTextSelected) {
+          return;
+        }
       }
       cancel({
         addPrefixTrigger: true,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,22 +32,22 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.0.0",
+		"@atlaskit/editor-common": "^100.2.0",
 		"@atlaskit/editor-element-browser": "^0.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-context-panel": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.3.0",
-		"@atlaskit/heading": "^5.0.0",
-		"@atlaskit/icon": "^24.0.0",
-		"@atlaskit/menu": "^3.0.0",
+		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/icon": "^24.1.0",
+		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^3.2.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -98,6 +98,9 @@
 		},
 		"platform_editor_offline_editing_ga": {
 			"type": "boolean"
+		},
+		"platform_editor_legacy_content_macro_typeahead_fix": {
+			"type": "boolean"
 		}
 	}
 }