@atlaskit/editor-core 175.0.5 → 176.0.0

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

@@ -92,11 +92,21 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isOpen: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeColor", function (color) {
       return commands.changeColor(color)(_this.props.editorView.state, _this.props.editorView.dispatch);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOpenChange", function (attrs) {
+      _this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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,
@@ -119,7 +129,10 @@ 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;
@@ -132,7 +145,8 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (_ref) {
       var isOpen = _ref.isOpen,
-          logCloseEvent = _ref.logCloseEvent;
+          logCloseEvent = _ref.logCloseEvent,
+          event = _ref.event;
 
       _this.setState({
         isOpen: isOpen
@@ -143,6 +157,12 @@ 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();
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (e) {
       var isOpen = _this.state.isOpen;
@@ -155,8 +175,21 @@ 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();
+        }
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
   }
 
@@ -196,9 +229,11 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen && !pluginState.disabled,
         handleClickOutside: this.hide,
-        handleEscapeKeydown: this.hide,
+        handleEscapeKeydown: this.hideonEsc,
         zIndex: _editorSharedStyles.akEditorMenuZIndex,
         fitWidth: fitWidth,
+        onOpenChange: this.onOpenChange,
+        closeonTab: true,
         trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           buttonId: _ToolbarButton.TOOLBAR_BUTTON.TEXT_COLOR,
           spacing: isReducedSpacing ? 'none' : 'default',
@@ -209,6 +244,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
           "aria-haspopup": true,
           title: labelTextColor,
           onClick: this.toggleOpen,
+          ref: this.toolbarItemRef,
           iconBefore: (0, _react2.jsx)("div", {
             css: _styles.triggerWrapperStyles
           }, (0, _react2.jsx)("div", {
@@ -228,7 +264,8 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(color) {
           return _this2.changeTextColor(color, pluginState.disabled);
         },
-        selectedColor: pluginState.color
+        selectedColor: pluginState.color,
+        textPalette: true
       }))), (0, _react2.jsx)("span", {
         css: _styles.separatorStyles
       }));

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

@@ -38,10 +38,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 */
+
 var textColorIconWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 exports.textColorIconWrapper = textColorIconWrapper;
 var textColorIconBar = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)() + 'px', rainbow);

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

@@ -8,6 +8,9 @@ exports.getActiveColor = exports.DEFAULT_COLOR = void 0;
 var _colors = require("@atlaskit/theme/colors");
 
 var DEFAULT_COLOR = {
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+
+  /* eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage */
   color: _colors.N800.toLowerCase(),
   label: 'Dark gray'
 };

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

@@ -58,7 +58,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,
@@ -166,9 +165,11 @@ var insertTypeAheadItem = function insertTypeAheadItem(view) {
 
     if (mode === _typeAhead.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 === _typeAhead.SelectItemMode.SPACE;
     var textStartPosition = tr.selection.from;
 

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +17,7 @@ Object.defineProperty(exports, "typeAheadPluginKey", {
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
@@ -43,6 +45,10 @@ var _statsModifier = require("./stats-modifier");
 
 var _analytics = require("../analytics");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
@@ -69,6 +75,7 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _useItemInsert = (0, _useItemInsert3.useItemInsert)(triggerHandler, editorView, items),
       _useItemInsert2 = (0, _slicedToArray2.default)(_useItemInsert, 3),
       onItemInsert = _useItemInsert2[0],
+      onTextInsert = _useItemInsert2[1],
       onItemMatch = _useItemInsert2[2];
 
   var setSelectedItem = _react.default.useCallback(function (_ref2) {
@@ -90,6 +97,18 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     });
   }, [onItemInsert, query]);
 
+  var cancel = (0, _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,
+      setSelectionAt: setSelectionAt,
+      text: fullQuery
+    });
+  }, [triggerHandler, onTextInsert, query]);
+
   _react.default.useEffect(function () {
     if (!isOpen || !query) {
       return;
@@ -128,7 +147,8 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
-    isEmptyQuery: !query
+    isEmptyQuery: !query,
+    cancel: cancel
   });
 });
 /**
@@ -150,7 +170,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: _adfSchema.typeAheadQuery
@@ -160,9 +180,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 (0, _main.createPlugin)({
             getIntl: getIntl,
             popupMountRef: popupMountRef,
@@ -176,20 +196,20 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         plugin: _insertItemPlugin.createPlugin
       }, {
         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 (0, _inputRules.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,
@@ -199,8 +219,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
         plugins: {
           typeAheadState: _key.pluginKey
         },
-        render: function render(_ref6) {
-          var typeAheadState = _ref6.typeAheadState;
+        render: function render(_ref7) {
+          var typeAheadState = _ref7.typeAheadState;
 
           if (!typeAheadState) {
             return null;
@@ -215,10 +235,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 = (0, _utils.getPluginState)(oldEditorState);
       var newPluginState = (0, _utils.getPluginState)(newEditorState);
 

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

@@ -16,17 +16,27 @@ var typeAheadListMessages = (0, _reactIntlNext.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'
   }
 });
 exports.typeAheadListMessages = typeAheadListMessages;

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

@@ -7,6 +7,8 @@ exports.openTypeAheadAtCursor = exports.openTypeAhead = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
+var _selection = require("@atlaskit/editor-common/selection");
+
 var _key = require("../pm-plugins/key");
 
 var _actions = require("../pm-plugins/actions");
@@ -36,8 +38,6 @@ 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,
@@ -45,28 +45,37 @@ var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
     })(tr);
     var selection = tr.selection;
 
-    if (!(selection instanceof _prosemirrorState.TextSelection)) {
+    if (!(selection instanceof _prosemirrorState.TextSelection || selection instanceof _selection.GapCursorSelection)) {
       return tr;
     }
 
-    if (!selection.$cursor) {
-      tr.deleteSelection();
-      return tr;
-    } // Search & Destroy placeholder
+    if (selection instanceof _selection.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;
 
-    var cursorPos = selection.$cursor.pos;
-    var nodeAtCursor = tr.doc.nodeAt(cursorPos);
-    var isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
+      if (!selection.$cursor) {
+        tr.deleteSelection();
+        return tr;
+      } // Search & Destroy 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 (_utils.browser.chrome && _utils.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 (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 (_utils.browser.chrome && _utils.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;