@atlaskit/editor-core 175.0.4 → 176.0.0

package/dist/es2019/plugins/quick-insert/assets/list-number.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconListOrdered() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/list.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconList() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/mention.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconMention() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/panel-error.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelError() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/panel-note.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelNote() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/panel-success.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelSuccess() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/panel-warning.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelWarning() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/panel.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanel() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/quote.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconQuote() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/quick-insert/assets/status.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconStatus() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/es2019/plugins/selection/gap-cursor/actions.js

@@ -1,12 +1,13 @@
-import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
-import { removeNodeBefore, findDomRefAtPos } from 'prosemirror-utils';
+import { NodeSelection, Selection, TextSelection } from 'prosemirror-state';
+import { findDomRefAtPos, removeNodeBefore } from 'prosemirror-utils';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Direction, isBackward, isForward } from './direction';
 import { GapCursorSelection, Side } from './selection';
-import { isTextBlockNearPos, getMediaNearPos } from './utils';
+import { getMediaNearPos, isTextBlockNearPos } from './utils';
 import { isValidTargetNode } from './utils/is-valid-target-node';
 import { atTheBeginningOfDoc, atTheEndOfDoc } from '../../../utils/prosemirror/position';
 import { gapCursorPluginKey } from '../pm-plugins/gap-cursor-plugin-key';
+import { isPositionNearTableRow } from '../../../utils/table';
 const mapDirection = {
   [Direction.LEFT]: -1,
   [Direction.RIGHT]: 1,
@@ -64,10 +65,30 @@ function shouldHandleMediaGapCursor(dir, state) {
   return true;
 }
 
+export const shouldSkipGapCursor = (direction, state, $pos) => {
+  const {
+    doc,
+    schema
+  } = state;
+
+  switch (direction) {
+    case Direction.UP:
+      if (atTheBeginningOfDoc(state)) {
+        return false;
+      }
+
+      return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1);
+
+    case Direction.DOWN:
+      return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after');
+
+    default:
+      return false;
+  }
+};
 export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
   const {
     doc,
-    schema,
     selection,
     tr
   } = state;
@@ -81,7 +102,7 @@ export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
     } // UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
 
 
-    if (dir === Direction.UP && !atTheBeginningOfDoc(state) && isTextBlockNearPos(doc, schema, $pos, -1) || dir === Direction.DOWN && (atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1))) {
+    if (shouldSkipGapCursor(dir, state, $pos)) {
       return false;
     } // otherwise resolve previous/next position
 

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

@@ -32,10 +32,22 @@ export class ToolbarTextColor extends React.Component {
       isOpen: false
     });
 
+    _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "changeColor", color => commands.changeColor(color)(this.props.editorView.state, this.props.editorView.dispatch));
 
+    _defineProperty(this, "onOpenChange", attrs => {
+      this.handleOpenChange({
+        isOpen: attrs.isOpen,
+        logCloseEvent: true,
+        event: attrs.event
+      });
+    });
+
     _defineProperty(this, "changeTextColor", (color, disabled) => {
       if (!disabled) {
+        var _this$props$editorVie;
+
         const {
           pluginState: {
             palette,
@@ -54,7 +66,9 @@ export class ToolbarTextColor extends React.Component {
           isOpen: false,
           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;
@@ -69,7 +83,8 @@ export class ToolbarTextColor extends React.Component {
 
     _defineProperty(this, "handleOpenChange", ({
       isOpen,
-      logCloseEvent
+      logCloseEvent,
+      event
     }) => {
       this.setState({
         isOpen
@@ -80,6 +95,12 @@ export class ToolbarTextColor extends 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(this, "hide", e => {
@@ -94,8 +115,21 @@ export class ToolbarTextColor extends 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(this, "hideonEsc", 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();
+    });
   }
 
   render() {
@@ -137,9 +171,11 @@ export class ToolbarTextColor extends 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',
@@ -150,6 +186,7 @@ export class ToolbarTextColor extends React.Component {
         "aria-haspopup": true,
         title: labelTextColor,
         onClick: this.toggleOpen,
+        ref: this.toolbarItemRef,
         iconBefore: jsx("div", {
           css: triggerWrapperStyles
         }, jsx("div", {
@@ -167,7 +204,8 @@ export class ToolbarTextColor extends React.Component {
     }, jsx(ColorPalette, {
       palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
-      selectedColor: pluginState.color
+      selectedColor: pluginState.color,
+      textPalette: true
     }))), jsx("span", {
       css: separatorStyles
     }));

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

@@ -25,10 +25,15 @@ const createSteppedRainbow = colors => {
   }).join('\n')}
     );
     `;
-};
+}; // TODO: https://product-fabric.atlassian.net/browse/DSP-4137
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 
 const rainbow = createSteppedRainbow([colors.P300, colors.T300, colors.Y400, colors.R400]);
 const disabledRainbow = createSteppedRainbow([colors.N80, colors.N60, colors.N40, colors.N60]);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 export const textColorIconWrapper = css`
   position: relative;
 `;

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

@@ -1,5 +1,8 @@
 import { N800 } from '@atlaskit/theme/colors';
 export const 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/es2019/plugins/type-ahead/commands/insert-type-ahead-item.js

@@ -38,7 +38,6 @@ const createInsertCallback = ({
   editorState: state,
   handler,
   query,
-  mode,
   wasInsertedBySpace,
   selectedIndex,
   textStartPosition,
@@ -149,9 +148,11 @@ export const 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
+
 
-  const selectedIndex = Math.max(sourceListItem.indexOf(item), 0);
+  const selectedIndex = -1;
   const wasInsertedBySpace = mode === SelectItemMode.SPACE;
   const {
     selection: {

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

@@ -6,7 +6,7 @@
  *
  *
  */
-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';
@@ -37,7 +37,7 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
     decorationSet,
     query
   } = typeAheadState;
-  const [onItemInsert,, onItemMatch] = useItemInsert(triggerHandler, editorView, items);
+  const [onItemInsert, onTextInsert, onItemMatch] = useItemInsert(triggerHandler, editorView, items);
   const setSelectedItem = React.useCallback(({
     index: nextIndex
   }) => {
@@ -54,6 +54,18 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
       });
     });
   }, [onItemInsert, query]);
+  const cancel = useCallback(({
+    setSelectionAt,
+    addPrefixTrigger,
+    forceFocusOnEditor
+  }) => {
+    const fullQuery = addPrefixTrigger ? `${triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger}${query}` : query;
+    onTextInsert({
+      forceFocusOnEditor,
+      setSelectionAt,
+      text: fullQuery
+    });
+  }, [triggerHandler, onTextInsert, query]);
   React.useEffect(() => {
     if (!isOpen || !query) {
       return;
@@ -92,7 +104,8 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
     setSelectedItem: setSelectedItem,
     onItemInsert: insertItem,
     decorationSet: decorationSet,
-    isEmptyQuery: !query
+    isEmptyQuery: !query,
+    cancel: cancel
   });
 });
 /**
@@ -114,7 +127,7 @@ const typeAheadPlugin = options => {
 
     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

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

@@ -8,16 +8,26 @@ export const 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/es2019/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 const openTypeAheadAtCursor = ({
   inputMethod,
   query
 }) => tr => {
-  var _selection$$head, _selection$$head$pare, _selection$$head$pare2, _selection$$head$pare3;
-
   openTypeAhead({
     triggerHandler,
     inputMethod,
@@ -33,28 +32,37 @@ export const openTypeAheadAtCursor = ({
     selection
   } = tr;
 
-  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
 
-  const cursorPos = selection.$cursor.pos;
-  const nodeAtCursor = tr.doc.nodeAt(cursorPos);
-  const 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)
+    const cursorPos = selection.$cursor.pos;
+    const nodeAtCursor = tr.doc.nodeAt(cursorPos);
+    const 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;