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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 2.0.3
+
+### Patch Changes
+
+- [#120431](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120431)
+  [`17173ce340cdc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17173ce340cdc) -
+  [ED-26763] Support inserting selected item by Enter
+
+## 2.0.2
+
+### Patch Changes
+
+- [#120426](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/120426)
+  [`1fc7b1519dbcf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1fc7b1519dbcf) -
+  Uses a separate FF for the new QuickInsert and Right rail to split them from the other Editor
+  Controls features.
+- Updated dependencies
+
 ## 2.0.1
 
 ### Patch Changes

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

@@ -63,7 +63,7 @@ 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')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_insertion', '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';

package/dist/cjs/ui/ContentComponent.js

@@ -23,7 +23,7 @@ function ContentComponent(_ref) {
   }
   if (
   // TODO: Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !(0, _experiments.editorExperiment)('platform_editor_controls', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
+  !(0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
       editorView: editorView,
       popupMountRef: popupMountRef,

package/dist/cjs/ui/InputQuery.js

@@ -108,7 +108,7 @@ 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 isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
   var _useState3 = (0, _react.useState)(isEditorControlsEnabled && triggerQueryPrefix === '/'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     showPlaceholder = _useState4[0],

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

@@ -8,6 +8,7 @@ exports.TypeAheadMenu = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _updateSelectedIndex = require("../../pm-plugins/commands/update-selected-index");
 var _useItemInsert3 = require("../hooks/use-item-insert");
 var _TypeAheadPopup = require("./TypeAheadPopup");
 var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
@@ -30,6 +31,12 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
+  var setSelectedItem = _react.default.useCallback(function (_ref2) {
+    var nextIndex = _ref2.index;
+    queueMicrotask(function () {
+      (0, _updateSelectedIndex.updateSelectedIndex)(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   var insertItem = _react.default.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;
@@ -41,10 +48,10 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
       });
     });
   }, [onItemInsert, query]);
-  var cancel = _react.default.useCallback(function (_ref2) {
-    var setSelectionAt = _ref2.setSelectionAt,
-      addPrefixTrigger = _ref2.addPrefixTrigger,
-      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+  var cancel = _react.default.useCallback(function (_ref3) {
+    var setSelectionAt = _ref3.setSelectionAt,
+      addPrefixTrigger = _ref3.addPrefixTrigger,
+      forceFocusOnEditor = _ref3.forceFocusOnEditor;
     var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
     onTextInsert({
       forceFocusOnEditor: forceFocusOnEditor,
@@ -65,8 +72,8 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

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

@@ -60,7 +60,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    query = props.query;
+    query = props.query,
+    setSelectedItem = props.setSelectedItem;
   var ref = (0, _react.useRef)(null);
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = (0, _react.useMemo)(function () {
@@ -293,7 +294,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
   }, errorInfo ? (0, _react2.jsx)(_TypeAheadErrorFallback.TypeAheadErrorFallback, null) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_editorElementBrowser.QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && (0, _react2.jsx)(_ViewAllButton.ViewAllButton, {
     items: items,
     editorApi: api,

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

@@ -62,7 +62,7 @@ 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')) {
+      if (editorExperiment('platform_editor_insertion', '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';

package/dist/es2019/ui/ContentComponent.js

@@ -18,7 +18,7 @@ export function ContentComponent({
   }
   if (
   // TODO: Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !editorExperiment('platform_editor_controls', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
+  !editorExperiment('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
       editorView: editorView,
       popupMountRef: popupMountRef,

package/dist/es2019/ui/InputQuery.js

@@ -94,7 +94,7 @@ 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 isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   const [showPlaceholder, setShowPlaceholder] = useState(isEditorControlsEnabled && triggerQueryPrefix === '/');
   const cleanedInputContent = useCallback(() => {
     var _ref$current;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { updateSelectedIndex } from '../../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from '../hooks/use-item-insert';
 import { TypeAheadPopup as TypeAheadPopupModern } from './TypeAheadPopup';
 export const TypeAheadMenu = /*#__PURE__*/React.memo(({
@@ -22,6 +23,13 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   triggerHandler, editorView, items, api);
+  const setSelectedItem = React.useCallback(({
+    index: nextIndex
+  }) => {
+    queueMicrotask(() => {
+      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   const insertItem = React.useCallback((mode = SelectItemMode.SELECTED, index) => {
     queueMicrotask(() => {
       onItemInsert({
@@ -56,8 +64,8 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

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

@@ -49,7 +49,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
     isEmptyQuery,
     cancel,
     api,
-    query
+    query,
+    setSelectedItem
   } = props;
   const ref = useRef(null);
   const defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
@@ -284,7 +285,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
   }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(ViewAllButton, {
     items: items,
     editorApi: api,

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

@@ -56,7 +56,7 @@ 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')) {
+      if (editorExperiment('platform_editor_insertion', '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';

package/dist/esm/ui/ContentComponent.js

@@ -16,7 +16,7 @@ export function ContentComponent(_ref) {
   }
   if (
   // TODO: Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
-  !editorExperiment('platform_editor_controls', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
+  !editorExperiment('platform_editor_insertion', 'control') && ((_typeAheadState$trigg = typeAheadState.triggerHandler) === null || _typeAheadState$trigg === void 0 ? void 0 : _typeAheadState$trigg.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
     return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
       editorView: editorView,
       popupMountRef: popupMountRef,

package/dist/esm/ui/InputQuery.js

@@ -97,7 +97,7 @@ 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 isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
   var _useState3 = useState(isEditorControlsEnabled && triggerQueryPrefix === '/'),
     _useState4 = _slicedToArray(_useState3, 2),
     showPlaceholder = _useState4[0],

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

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import { updateSelectedIndex } from '../../pm-plugins/commands/update-selected-index';
 import { useItemInsert } from '../hooks/use-item-insert';
 import { TypeAheadPopup as TypeAheadPopupModern } from './TypeAheadPopup';
 export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
@@ -23,6 +24,12 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     _useItemInsert2 = _slicedToArray(_useItemInsert, 2),
     onItemInsert = _useItemInsert2[0],
     onTextInsert = _useItemInsert2[1];
+  var setSelectedItem = React.useCallback(function (_ref2) {
+    var nextIndex = _ref2.index;
+    queueMicrotask(function () {
+      updateSelectedIndex(nextIndex, api)(editorView.state, editorView.dispatch);
+    });
+  }, [editorView, api]);
   var insertItem = React.useCallback(function () {
     var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
     var index = arguments.length > 1 ? arguments[1] : undefined;
@@ -34,10 +41,10 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
       });
     });
   }, [onItemInsert, query]);
-  var cancel = React.useCallback(function (_ref2) {
-    var setSelectionAt = _ref2.setSelectionAt,
-      addPrefixTrigger = _ref2.addPrefixTrigger,
-      forceFocusOnEditor = _ref2.forceFocusOnEditor;
+  var cancel = React.useCallback(function (_ref3) {
+    var setSelectionAt = _ref3.setSelectionAt,
+      addPrefixTrigger = _ref3.addPrefixTrigger,
+      forceFocusOnEditor = _ref3.forceFocusOnEditor;
     var fullQuery = addPrefixTrigger ? "".concat(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger).concat(query) : query;
     onTextInsert({
       forceFocusOnEditor: forceFocusOnEditor,
@@ -58,8 +65,8 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     items: items,
     errorInfo: errorInfo
     // selectedIndex={selectedIndex}
-    // setSelectedItem={setSelectedItem}
     ,
+    setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
     isEmptyQuery: !query,

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

@@ -49,7 +49,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     isEmptyQuery = props.isEmptyQuery,
     cancel = props.cancel,
     api = props.api,
-    query = props.query;
+    query = props.query,
+    setSelectedItem = props.setSelectedItem;
   var ref = useRef(null);
   var defaultMenuHeight = DEFAULT_TYPEAHEAD_MENU_HEIGHT;
   var startTime = useMemo(function () {
@@ -282,7 +283,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
   }, errorInfo ? jsx(TypeAheadErrorFallback, null) : jsx(React.Fragment, null, jsx(QuickInsertPanel, {
     items: items,
     onItemInsert: onItemInsert,
-    query: query
+    query: query,
+    setSelectedItem: setSelectedItem
   }), (api === null || api === void 0 ? void 0 : api.contextPanel) && jsx(ViewAllButton, {
     items: items,
     editorApi: api,

package/dist/types/ui/modern/TypeAheadPopup.d.ts

@@ -29,6 +29,9 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    setSelectedItem?: (props: {
+        index: number;
+    }) => void;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/dist/types-ts4.5/ui/modern/TypeAheadPopup.d.ts

@@ -29,6 +29,9 @@ type TypeAheadPopupProps = {
         forceFocusOnEditor: boolean;
     }) => void;
     api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
+    setSelectedItem?: (props: {
+        index: number;
+    }) => void;
 };
 export declare const TypeAheadPopup: React.MemoExoticComponent<(props: TypeAheadPopupProps) => jsx.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^100.2.0",
+		"@atlaskit/editor-common": "^100.4.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/editor-shared-styles": "^3.4.0",
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/menu": "^3.1.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.2.0",
+		"@atlaskit/tmp-editor-statsig": "^3.3.0",
 		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",