@atlaskit/editor-core 175.0.4 → 176.0.0

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js

@@ -58,12 +58,24 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
       isOpen: false
     });
 
+    _defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "changeColor", function (color) {
       return commands.changeColor(color)(_this.props.editorView.state, _this.props.editorView.dispatch);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
+      _this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "changeTextColor", function (color, disabled) {
       if (!disabled) {
+        var _this$props$editorVie;
+
         var _this$props$pluginSta = _this.props.pluginState,
             palette = _this$props$pluginSta.palette,
             paletteExpanded = _this$props$pluginSta.paletteExpanded,
@@ -86,7 +98,10 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           logCloseEvent: false
         });
 
-        return _this.changeColor(color);
+        _this.changeColor(color); //To set the focus on the textcolor button when the menu is closed by 'Esc' only to meet aria guidelines
+
+
+        (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
       }
 
       return false;
@@ -101,7 +116,8 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (_ref) {
       var isOpen = _ref.isOpen,
-          logCloseEvent = _ref.logCloseEvent;
+          logCloseEvent = _ref.logCloseEvent,
+          event = _ref.event;
 
       _this.setState({
         isOpen: isOpen
@@ -112,6 +128,12 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           noSelect: isOpen === false
         }));
       }
+
+      if (!isOpen && event instanceof KeyboardEvent && (event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
+        var _this$toolbarItemRef, _this$toolbarItemRef$;
+
+        (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 ? void 0 : (_this$toolbarItemRef$ = _this$toolbarItemRef.current) === null || _this$toolbarItemRef$ === void 0 ? void 0 : _this$toolbarItemRef$.focus();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "hide", function (e) {
@@ -125,9 +147,23 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           isOpen: false
         });
+
+        if (e instanceof KeyboardEvent && e.key === 'Escape') {
+          var _this$toolbarItemRef2, _this$toolbarItemRef3;
+
+          (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 ? void 0 : (_this$toolbarItemRef3 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef3 === void 0 ? void 0 : _this$toolbarItemRef3.focus();
+        }
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "hideonEsc", function (e) {
+      var _this$toolbarItemRef4, _this$toolbarItemRef5;
+
+      _this.hide(e);
+
+      (_this$toolbarItemRef4 = _this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
+    });
+
     return _this;
   }
 
@@ -167,9 +203,11 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen && !pluginState.disabled,
         handleClickOutside: this.hide,
-        handleEscapeKeydown: this.hide,
+        handleEscapeKeydown: this.hideonEsc,
         zIndex: akEditorMenuZIndex,
         fitWidth: fitWidth,
+        onOpenChange: this.onOpenChange,
+        closeonTab: true,
         trigger: jsx(ToolbarButton, {
           buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',
@@ -180,6 +218,7 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
+          ref: this.toolbarItemRef,
           iconBefore: jsx("div", {
             css: triggerWrapperStyles
           }, jsx("div", {
@@ -199,7 +238,8 @@ export var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
-        selectedColor: pluginState.color
+        selectedColor: pluginState.color,
+        textPalette: true
       }))), jsx("span", {
         css: separatorStyles
       }));

package/dist/esm/plugins/text-color/ui/ToolbarTextColor/styles.js

@@ -21,10 +21,15 @@ var createSteppedRainbow = function createSteppedRainbow(colors) {
 
     return "\n            ".concat(color, " ").concat((pos - 1) * inc, "%,\n            ").concat(color, " ").concat(pos * inc, "%,\n          ");
   }).join('\n'), "\n    );\n    ");
-};
+}; // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 
 var rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
 var disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 export var textColorIconWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export var textColorIconBar = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 16px;\n  margin: auto;\n  width: 12px;\n  height: 3px;\n  border-radius: ", ";\n  background: ", ";\n"])), borderRadius() + 'px', rainbow);
 export var backgroundDisabled = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: ", ";\n"])), disabledRainbow);

package/dist/esm/plugins/text-color/utils/color.js

@@ -1,5 +1,8 @@
 import { N800 } from '@atlaskit/theme/colors';
 export var DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
   color: N800.toLowerCase(),
   label: 'Dark gray'
 };

package/dist/esm/plugins/type-ahead/commands/insert-type-ahead-item.js

@@ -39,7 +39,6 @@ var createInsertCallback = function createInsertCallback(_ref2) {
   var state = _ref2.editorState,
       handler = _ref2.handler,
       query = _ref2.query,
-      mode = _ref2.mode,
       wasInsertedBySpace = _ref2.wasInsertedBySpace,
       selectedIndex = _ref2.selectedIndex,
       textStartPosition = _ref2.textStartPosition,
@@ -147,9 +146,11 @@ export var insertTypeAheadItem = function insertTypeAheadItem(view) {
 
     if (mode === SelectItemMode.SPACE) {
       text = text.trim().concat(' ');
-    }
+    } // We want to always persist selectedIndex as -1 upon selecting an item from typeahead
+    // in order to retain exist focus behaviour when undoing
+
 
-    var selectedIndex = Math.max(sourceListItem.indexOf(item), 0);
+    var selectedIndex = -1;
     var wasInsertedBySpace = mode === SelectItemMode.SPACE;
     var textStartPosition = tr.selection.from;
 

package/dist/esm/plugins/type-ahead/index.js

@@ -8,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  *
  *
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { createPlugin } from './pm-plugins/main';
 import { createPlugin as createInsertItemPlugin } from './pm-plugins/insert-item-plugin';
@@ -40,6 +40,7 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
   var _useItemInsert = useItemInsert(triggerHandler, editorView, items),
       _useItemInsert2 = _slicedToArray(_useItemInsert, 3),
       onItemInsert = _useItemInsert2[0],
+      onTextInsert = _useItemInsert2[1],
       onItemMatch = _useItemInsert2[2];
 
   var setSelectedItem = React.useCallback(function (_ref2) {
@@ -59,6 +60,17 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
       });
     });
   }, [onItemInsert, query]);
+  var cancel = 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,
+      setSelectionAt: setSelectionAt,
+      text: fullQuery
+    });
+  }, [triggerHandler, onTextInsert, query]);
   React.useEffect(function () {
     if (!isOpen || !query) {
       return;
@@ -97,7 +109,8 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
-    isEmptyQuery: !query
+    isEmptyQuery: !query,
+    cancel: cancel
   });
 });
 /**
@@ -118,7 +131,7 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
     name: 'typeAhead',
     marks: function marks() {
       // We need to keep this to make sure
-      // All documents with typeahead marks will be loaded normaly
+      // All documents with typeahead marks will be loaded normally
       return [{
         name: 'typeAheadQuery',
         mark: typeAheadQuery
@@ -128,9 +141,9 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
       var typeAhead = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return [{
         name: 'typeAhead',
-        plugin: function plugin(_ref3) {
-          var dispatch = _ref3.dispatch,
-              getIntl = _ref3.getIntl;
+        plugin: function plugin(_ref4) {
+          var dispatch = _ref4.dispatch,
+              getIntl = _ref4.getIntl;
           return createPlugin({
             getIntl: getIntl,
             popupMountRef: popupMountRef,
@@ -144,20 +157,20 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         plugin: createInsertItemPlugin
       }, {
         name: 'typeAheadInputRule',
-        plugin: function plugin(_ref4) {
-          var schema = _ref4.schema,
-              featureFlags = _ref4.featureFlags;
+        plugin: function plugin(_ref5) {
+          var schema = _ref5.schema,
+              featureFlags = _ref5.featureFlags;
           return inputRulePlugin(schema, typeAhead, featureFlags);
         }
       }];
     },
-    contentComponent: function contentComponent(_ref5) {
-      var editorView = _ref5.editorView,
-          containerElement = _ref5.containerElement,
-          popupsMountPoint = _ref5.popupsMountPoint,
-          popupsBoundariesElement = _ref5.popupsBoundariesElement,
-          popupsScrollableElement = _ref5.popupsScrollableElement,
-          wrapperElement = _ref5.wrapperElement;
+    contentComponent: function contentComponent(_ref6) {
+      var editorView = _ref6.editorView,
+          containerElement = _ref6.containerElement,
+          popupsMountPoint = _ref6.popupsMountPoint,
+          popupsBoundariesElement = _ref6.popupsBoundariesElement,
+          popupsScrollableElement = _ref6.popupsScrollableElement,
+          wrapperElement = _ref6.wrapperElement;
       popupMountRef.current = {
         popupsMountPoint: popupsMountPoint || wrapperElement || undefined,
         popupsBoundariesElement: popupsBoundariesElement,
@@ -167,8 +180,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         plugins: {
           typeAheadState: typeAheadPluginKey
         },
-        render: function render(_ref6) {
-          var typeAheadState = _ref6.typeAheadState;
+        render: function render(_ref7) {
+          var typeAheadState = _ref7.typeAheadState;
 
           if (!typeAheadState) {
             return null;
@@ -183,10 +196,10 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         }
       });
     },
-    onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref7) {
-      var originalTransaction = _ref7.originalTransaction,
-          oldEditorState = _ref7.oldEditorState,
-          newEditorState = _ref7.newEditorState;
+    onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref8) {
+      var originalTransaction = _ref8.originalTransaction,
+          oldEditorState = _ref8.oldEditorState,
+          newEditorState = _ref8.newEditorState;
       var oldPluginState = getPluginState(oldEditorState);
       var newPluginState = getPluginState(newEditorState);
 

package/dist/esm/plugins/type-ahead/messages.js

@@ -8,16 +8,26 @@ export var typeAheadListMessages = defineMessages({
   inputQueryAssistiveLabel: {
     id: 'fabric.editor.inputQueryAssistiveTxt',
     defaultMessage: 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
-    description: 'Assitive text to the user when using typeahead shortcut'
+    description: 'Assistive text to the user when using typeahead shortcut'
   },
   searchResultsLabel: {
     id: 'fabric.editor.searchResults',
     defaultMessage: '{itemsLength, plural, one {# search result} other {# search results}} available',
-    description: 'Assitive text to the user when using typeahead shortcut and it preceeds with a number - Ex: 10 search results available'
+    description: 'Assistive text to the user when using typeahead shortcut and it preceeds with a number - Ex: 10 search results available'
   },
   noSearchResultsLabel: {
     id: 'fabric.editor.noSearchResults',
     defaultMessage: 'No search results',
-    description: 'Assitive text to the user when using typeahead shortcut'
+    description: 'Assistive text to the user when using typeahead shortcut'
+  },
+  descriptionLabel: {
+    id: 'fabric.editor.description',
+    defaultMessage: 'Description',
+    description: 'Description'
+  },
+  shortcutLabel: {
+    id: 'fabric.editor.shortcut',
+    defaultMessage: 'Text shortcut',
+    description: 'Text shortcut'
   }
 });

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,4 +1,5 @@
 import { TextSelection } from 'prosemirror-state';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -22,8 +23,6 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       inputMethod = _ref.inputMethod,
       query = _ref.query;
   return function (tr) {
-    var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
-
     openTypeAhead({
       triggerHandler: triggerHandler,
       inputMethod: inputMethod,
@@ -31,28 +30,37 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
     })(tr);
     var selection = tr.selection;
 
-    if (!(selection instanceof TextSelection)) {
+    if (!(selection instanceof TextSelection || selection instanceof GapCursorSelection)) {
       return tr;
     }
 
-    if (!selection.$cursor) {
-      tr.deleteSelection();
-      return tr;
-    } // Search & Destroy placeholder
+    if (selection instanceof GapCursorSelection) {
+      // Create space for the typeahead menu in gap cursor
+      tr.insertText(' '); // delete 1 pos before wherever selection is now - that will delete the empty space
+
+      tr.delete(tr.selection.from - 1, tr.selection.from);
+    } else {
+      var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
 
+      if (!selection.$cursor) {
+        tr.deleteSelection();
+        return tr;
+      } // Search & Destroy placeholder
 
-    var cursorPos = selection.$cursor.pos;
-    var nodeAtCursor = tr.doc.nodeAt(cursorPos);
-    var isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
 
-    if (nodeAtCursor && isPlaceholderAtCursorPosition) {
-      tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
-    } // ME-2375 remove the superfluous '@' inserted before decoration
-    // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
+      var cursorPos = selection.$cursor.pos;
+      var nodeAtCursor = tr.doc.nodeAt(cursorPos);
+      var isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
 
+      if (nodeAtCursor && isPlaceholderAtCursorPosition) {
+        tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+      } // ME-2375 remove the superfluous '@' inserted before decoration
+      // by composition (https://github.com/ProseMirror/prosemirror/issues/903)
 
-    if (browser.chrome && browser.android && cursorPos > 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, '@')) {
-      tr.delete(cursorPos - 1, cursorPos);
+
+      if (browser.chrome && browser.android && cursorPos > 2 && !!(selection !== null && selection !== void 0 && (_selection$$head = selection.$head) !== null && _selection$$head !== void 0 && (_selection$$head$pare = _selection$$head.parent) !== null && _selection$$head$pare !== void 0 && _selection$$head$pare.textContent) && (_selection$$head$pare2 = (_selection$$head$pare3 = selection.$head.parent.textContent).endsWith) !== null && _selection$$head$pare2 !== void 0 && _selection$$head$pare2.call(_selection$$head$pare3, '@')) {
+        tr.delete(cursorPos - 1, cursorPos);
+      }
     }
 
     return tr;