@atlaskit/editor-core 180.0.0 → 181.0.0

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

@@ -1,63 +1,16 @@
 import { NodeSelection, Selection, TextSelection } from 'prosemirror-state';
-import { findDomRefAtPos, removeNodeBefore } from 'prosemirror-utils';
+import { findDomRefAtPos, findPositionOfNodeBefore, 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 { getMediaNearPos, isTextBlockNearPos } from './utils';
+import { 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,
-  [Direction.UP]: -1,
-  [Direction.DOWN]: 1,
-  [Direction.BACKWARD]: -1,
-  [Direction.FORWARD]: 1
-};
-function shouldHandleMediaGapCursor(dir, state) {
-  const {
-    doc,
-    schema,
-    selection
-  } = state;
-  let $pos = isBackward(dir) ? selection.$from : selection.$to;
-  if (selection instanceof TextSelection) {
-    // Should not use gap cursor if I am moving from a text selection into a media node
-    if (dir === Direction.UP && !atTheBeginningOfDoc(state) || dir === Direction.DOWN && !atTheEndOfDoc(state)) {
-      const media = getMediaNearPos(doc, $pos, schema, mapDirection[dir]);
-      if (media) {
-        return false;
-      }
-    }
-
-    // Should not use gap cursor if I am moving from a text selection into a media node with layout wrap-right or wrap-left
-    if (dir === Direction.LEFT || dir === Direction.RIGHT) {
-      const media = getMediaNearPos(doc, $pos, schema, mapDirection[dir]);
-      const {
-        mediaSingle
-      } = schema.nodes;
-      if (media && media.type === mediaSingle && (media.attrs.layout === 'wrap-right' || media.attrs.layout === 'wrap-left')) {
-        return false;
-      }
-    }
-  }
-  if (selection instanceof NodeSelection) {
-    // Should not use gap cursor if I am moving left/right from media node with layout wrap right or wrap-left
-    if (dir === Direction.LEFT || dir === Direction.RIGHT) {
-      const maybeMedia = doc.nodeAt(selection.$from.pos);
-      const {
-        mediaSingle
-      } = schema.nodes;
-      if (maybeMedia && maybeMedia.type === mediaSingle && (maybeMedia.attrs.layout === 'wrap-right' || maybeMedia.attrs.layout === 'wrap-left')) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
+import { isMediaNode, isNodeBeforeMediaNode } from '@atlaskit/editor-common/utils';
 export const shouldSkipGapCursor = (direction, state, $pos) => {
+  var _$pos$nodeBefore;
   const {
     doc,
     schema
@@ -67,13 +20,52 @@ export const shouldSkipGapCursor = (direction, state, $pos) => {
       if (atTheBeginningOfDoc(state)) {
         return false;
       }
-      return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1);
+      return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1) || isNodeBeforeMediaNode($pos, state);
     case Direction.DOWN:
-      return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after');
+      return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after') || ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.type.name) === 'text' && !$pos.nodeAfter // end of a paragraph
+      ;
+
     default:
       return false;
   }
 };
+
+// These cases should be handled using the handleMediaGapCursor function
+function shouldHandleMediaGapCursor(dir, state) {
+  var _selection$$from$node;
+  const {
+    selection
+  } = state;
+  const upArrowFromGapCursorIntoMedia = selection instanceof GapCursorSelection && dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore);
+  const downArrowFromGapCursorIntoMediaGroup = selection instanceof GapCursorSelection && dir === Direction.DOWN && ((_selection$$from$node = selection.$from.nodeAfter) === null || _selection$$from$node === void 0 ? void 0 : _selection$$from$node.type.name) === 'mediaGroup';
+  return upArrowFromGapCursorIntoMedia || downArrowFromGapCursorIntoMediaGroup;
+}
+
+// Handle media gap cursor for up/down arrow into media nodes
+// Should check this case by using shouldHandleMediaGapCursor first
+function handleMediaGapCursor(dir, state) {
+  const {
+    selection,
+    tr
+  } = state;
+  let $pos = isBackward(dir) ? selection.$from : selection.$to;
+  if (dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore)) {
+    var _tr$doc$nodeAt;
+    const nodeBeforePos = findPositionOfNodeBefore(tr.selection);
+    if (nodeBeforePos && selection.side === 'right' && ((_tr$doc$nodeAt = tr.doc.nodeAt(nodeBeforePos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) === 'mediaSingle') {
+      tr.setSelection(new NodeSelection(tr.doc.resolve(nodeBeforePos))).scrollIntoView();
+    } else if (nodeBeforePos || nodeBeforePos === 0) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeBeforePos), Side.LEFT)).scrollIntoView();
+    }
+  }
+  if (dir === Direction.DOWN && selection.$from.nodeAfter) {
+    const nodeAfterPos = selection.side === 'right' ? $pos.pos : $pos.pos + selection.$from.nodeAfter.nodeSize;
+    if (nodeAfterPos) {
+      tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeAfterPos), Side.LEFT)).scrollIntoView();
+    }
+  }
+  return tr;
+}
 export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
   const {
     doc,
@@ -103,13 +95,21 @@ export const arrow = (dir, endOfTextblock) => (state, dispatch, view) => {
     if (selection.node.isInline) {
       return false;
     }
-    if (dir === Direction.UP || dir === Direction.DOWN) {
+    if (dir === Direction.UP && !atTheBeginningOfDoc(state) && !isNodeBeforeMediaNode($pos, state) || dir === Direction.DOWN) {
       // We dont add gap cursor on node selections going up and down
+      // Except we do if we're going up for a block node which is the
+      // first node in the document OR the node before is a media node
       return false;
     }
   }
-  if (!shouldHandleMediaGapCursor(dir, state)) {
-    return false;
+
+  // Handle media gap cursor for up/down arrow into media nodes
+  if (shouldHandleMediaGapCursor(dir, state)) {
+    const updatedTr = handleMediaGapCursor(dir, state);
+    if (dispatch) {
+      dispatch(updatedTr);
+    }
+    return true;
   }
 
   // when jumping between block nodes at the same depth, we need to reverse cursor without changing ProseMirror position

package/dist/es2019/plugins/status/index.js

@@ -28,7 +28,10 @@ const baseStatusPlugin = options => ({
     }];
   },
   contentComponent({
-    editorView
+    editorView,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement
   }) {
     const domAtPos = editorView.domAtPos.bind(editorView);
     return /*#__PURE__*/React.createElement(WithPluginState, {
@@ -60,6 +63,9 @@ const baseStatusPlugin = options => ({
           defaultText: text,
           defaultColor: color,
           defaultLocalId: localId,
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
           onSelect: status => {
             updateStatus(status)(editorView.state, editorView.dispatch);
           },
@@ -106,5 +112,5 @@ const decorateWithPluginOptions = (plugin, options) => {
   };
   return plugin;
 };
-const statusPlugin = options => decorateWithPluginOptions(baseStatusPlugin(options), options);
+const statusPlugin = (options, api) => decorateWithPluginOptions(baseStatusPlugin(options, api), options);
 export default statusPlugin;

package/dist/es2019/plugins/status/ui/statusPicker.js

@@ -182,7 +182,10 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
   render() {
     const {
       isNew,
-      target
+      target,
+      mountTo,
+      boundariesElement,
+      scrollableElement
     } = this.props;
     const {
       color,
@@ -194,7 +197,10 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       handleClickOutside: this.handleClickOutside,
       handleEscapeKeydown: this.handleEscapeKeydown,
       zIndex: akEditorFloatingDialogZIndex,
-      fitHeight: 40
+      fitHeight: 40,
+      mountTo: mountTo,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement
     }, jsx("div", {
       css: pickerContainer,
       onClick: this.handlePopupClick

package/dist/es2019/plugins/status/utils.js

@@ -1,4 +1,4 @@
-import { NodeSelection, Selection } from 'prosemirror-state';
+import { NodeSelection } from 'prosemirror-state';
 export const mayGetStatusAtSelection = selection => {
   if (selection && selection instanceof NodeSelection) {
     const nodeSelection = selection;
@@ -8,15 +8,5 @@ export const mayGetStatusAtSelection = selection => {
   }
   return null;
 };
-export const mayGetStatusAtPos = (pos, doc) => {
-  if (pos) {
-    const node = doc.nodeAt(pos);
-    if (node && node.type.name === 'status') {
-      return node.attrs;
-    }
-  }
-  return null;
-};
 export const isEmptyStatus = node => node && (node.text && node.text.trim().length === 0 || node.text === '');
-export const setSelectionNearPos = (tr, pos) => tr.setSelection(Selection.near(tr.doc.resolve(tr.mapping.map(pos))));
 export const setNodeSelectionNearPos = (tr, pos) => tr.setSelection(NodeSelection.create(tr.doc, tr.mapping.map(pos)));

package/dist/es2019/plugins/text-color/pm-plugins/main.js

@@ -5,7 +5,7 @@ import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { DEFAULT_COLOR, getActiveColor } from '../utils/color';
 import { getDisabledState } from '../utils/disabled';
 export { DEFAULT_COLOR } from '../utils/color';
-export function createInitialPluginState(editorState, pluginConfig) {
+function createInitialPluginState(editorState, pluginConfig) {
   const defaultColor = (pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.defaultColor) || DEFAULT_COLOR;
   const palette = [{
     value: defaultColor.color,

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

@@ -3,9 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
+import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import ColorPalette from '../../../../ui/ColorPalette';
+import ColorPalette, { textPaletteTooltipMessages } from '../../../../ui/ColorPalette';
 import Dropdown from '../../../../ui/Dropdown';
 import { expandIconWrapperStyle, wrapperStyle, separatorStyles, triggerWrapperStyles } from '../../../../ui/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
@@ -27,7 +30,8 @@ export class ToolbarTextColor extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "changeColor", color => commands.changeColor(color)(this.props.editorView.state, this.props.editorView.dispatch));
@@ -39,6 +43,7 @@ export class ToolbarTextColor extends React.Component {
       });
     });
     _defineProperty(this, "changeTextColor", (color, disabled) => {
+      var _this$toolbarItemRef, _this$toolbarItemRef$;
       if (!disabled) {
         var _this$props$editorVie;
         const {
@@ -60,6 +65,7 @@ export class ToolbarTextColor extends React.Component {
         //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();
       }
+      (_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();
       return false;
     });
     _defineProperty(this, "toggleOpen", () => {
@@ -68,6 +74,15 @@ export class ToolbarTextColor extends React.Component {
         logCloseEvent: true
       });
     });
+    _defineProperty(this, "onKeyDown", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpenedByKeyboard: true
+        });
+        this.toggleOpen();
+      }
+    });
     _defineProperty(this, "handleOpenChange", ({
       isOpen,
       logCloseEvent,
@@ -76,14 +91,19 @@ export class ToolbarTextColor extends React.Component {
       this.setState({
         isOpen
       });
+      if (!isOpen) {
+        this.setState({
+          isOpenedByKeyboard: false
+        });
+      }
       if (logCloseEvent) {
         this.dispatchAnalyticsEvent(this.buildAnalyticsPalette(isOpen ? ACTION.OPENED : ACTION.CLOSED, {
           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();
+        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, "hide", e => {
@@ -98,20 +118,21 @@ export class ToolbarTextColor extends React.Component {
           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();
+          var _this$toolbarItemRef4, _this$toolbarItemRef5;
+          (_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();
         }
       }
     });
     _defineProperty(this, "hideonEsc", e => {
-      var _this$toolbarItemRef4, _this$toolbarItemRef5;
+      var _this$toolbarItemRef6, _this$toolbarItemRef7;
       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();
+      (_this$toolbarItemRef6 = this.toolbarItemRef) === null || _this$toolbarItemRef6 === void 0 ? void 0 : (_this$toolbarItemRef7 = _this$toolbarItemRef6.current) === null || _this$toolbarItemRef7 === void 0 ? void 0 : _this$toolbarItemRef7.focus();
     });
   }
   render() {
     const {
-      isOpen
+      isOpen,
+      isOpenedByKeyboard
     } = this.state;
     const {
       popupsMountPoint,
@@ -138,6 +159,10 @@ export class ToolbarTextColor extends React.Component {
       fitWidth = 242;
     }
     const selectedColor = pluginState.color !== pluginState.defaultColor && pluginState.color;
+    const {
+      selectedRowIndex,
+      selectedColumnIndex
+    } = getSelectedRowAndColumnFromPalette(palette, pluginState.color);
     return jsx("span", {
       css: wrapperStyle
     }, jsx(Dropdown, {
@@ -151,6 +176,13 @@ export class ToolbarTextColor extends React.Component {
       fitWidth: fitWidth,
       onOpenChange: this.onOpenChange,
       closeOnTab: true,
+      arrowKeyNavigationProviderOptions: {
+        type: ArrowKeyNavigationType.COLOR,
+        selectedRowIndex,
+        selectedColumnIndex,
+        isOpenedByKeyboard,
+        isPopupPositioned: true
+      },
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.TEXT_COLOR,
         spacing: isReducedSpacing ? 'none' : 'default',
@@ -161,6 +193,7 @@ export class ToolbarTextColor extends React.Component {
         "aria-haspopup": true,
         title: labelTextColor,
         onClick: this.toggleOpen,
+        onKeyDown: this.onKeyDown,
         ref: this.toolbarItemRef,
         iconBefore: jsx("div", {
           css: triggerWrapperStyles
@@ -177,11 +210,14 @@ export class ToolbarTextColor extends React.Component {
     }, jsx("div", {
       "data-testid": "text-color-palette"
     }, jsx(ColorPalette, {
-      palette: palette,
       onClick: color => this.changeTextColor(color, pluginState.disabled),
       selectedColor: pluginState.color,
-      textPalette: true,
-      useSomewhatSemanticTextColorNames: useSomewhatSemanticTextColorNames
+      paletteOptions: {
+        palette,
+        hexToPaletteColor: hexToEditorTextPaletteColor,
+        paletteColorTooltipMessages: textPaletteTooltipMessages,
+        showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
+      }
     }))), jsx("span", {
       css: separatorStyles
     }));

package/dist/es2019/plugins/text-formatting/pm-plugins/smart-input-rule.js

@@ -12,14 +12,19 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, PUNC, SYMBOL } f
 function replaceTextUsingCaptureGroup(text) {
   return (state, match, start, end) => {
     const [, prefix,, suffix] = match;
-    const replacement = (prefix || '') + text + (suffix || '');
+    const replacement = text + (suffix || '');
     let {
       tr,
       selection: {
         $to
       }
     } = state;
-    tr.replaceWith(start, end, state.schema.text(replacement, $to.marks()));
+    const startPos = start + (prefix || '').length;
+    const safePos = Math.min(
+    // I know it is almost impossible to have a negative value at this point.
+    // But, this is JS #trustnoone
+    Math.max(startPos, 0), end);
+    tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
     tr.setSelection(Selection.near(tr.doc.resolve(tr.selection.to)));
     return tr;
   };
@@ -67,6 +72,7 @@ function createSingleQuotesRules() {
   // apostrophe
   createReplacementRule('’', /(\w+)(')(\w+)$/)];
 }
+
 /**
  * Get replacement rules related to product
  */

package/dist/es2019/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { useMenuState } from './hooks/menu-state';
@@ -14,6 +14,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   popupsScrollableElement
 }) => {
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
+  const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const group = useMemo(() => [{
     items
   }], [items]);
@@ -37,13 +38,29 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     zIndex: akEditorMenuZIndex,
     fitHeight: 188,
     fitWidth: 136,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: () => {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, /*#__PURE__*/React.createElement(MoreButton, {
     isSelected: isMenuOpen || hasFormattingActive,
     label: moreButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: false,
-    onClick: toggleMenu,
+    onClick: () => {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
     "aria-expanded": isMenuOpen
   }));
 });

package/dist/es2019/plugins/text-formatting/ui/Toolbar/index.js

@@ -10,8 +10,9 @@ import { SingleToolbarButtons } from './single-toolbar-buttons';
 import { MoreButton } from './more-button';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { toolbarMessages } from './toolbar-messages';
-import { usePreviousObjectState, compareItemsArrays, isArrayContainsContent } from '../../utils';
+import { compareItemsArrays, isArrayContainsContent } from '../../utils';
 import Announcer from '../../../../utils/announcer/announcer';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
 const ToolbarFormatting = ({
   shouldUseResponsiveToolbar,
   popupsMountPoint,
@@ -23,6 +24,7 @@ const ToolbarFormatting = ({
   isToolbarDisabled,
   intl
 }) => {
+  var _usePreviousState;
   const editorState = useMemo(() => editorView.state, [editorView.state]);
   const [message, setMessage] = useState('');
   const defaultIcons = useFormattingIcons({
@@ -54,7 +56,7 @@ const ToolbarFormatting = ({
   const superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
   const subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
   const activeItems = [...dropdownItems, ...singleItems].filter(item => item.isActive);
-  const prevActiveItems = usePreviousObjectState(activeItems);
+  const prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
   const fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
   const fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
   let comparedItems;

package/dist/es2019/plugins/text-formatting/ui/Toolbar/more-button.js

@@ -10,12 +10,14 @@ export const MoreButton = /*#__PURE__*/React.memo(({
   isReducedSpacing,
   isSelected,
   isDisabled,
-  onClick
+  onClick,
+  onKeyDown
 }) => {
   return jsx(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
+    onKeyDown: onKeyDown,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
     iconBefore: jsx("div", {

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

@@ -1,25 +1,5 @@
-import { useRef, useEffect } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { FORMATTING_MARK_TYPES, FORMATTING_NODE_TYPES } from './commands/clear-formatting';
-export const nodeLen = node => {
-  return node.nodeType === 3 && node.nodeValue ? node.nodeValue.length : node.childNodes.length;
-};
-export const isIgnorable = dom => dom.pmViewDesc && dom.pmViewDesc.size === 0;
-export const isBlockNode = dom => {
-  const desc = dom.pmViewDesc;
-  return desc && desc.node && desc.node.isBlock;
-};
-export const domIndex = function (node) {
-  if (node) {
-    for (let index = 0;; index++) {
-      node = node.previousSibling;
-      if (!node) {
-        return index;
-      }
-    }
-  }
-  return;
-};
 export const hasCode = (state, pos) => {
   const {
     code
@@ -116,13 +96,6 @@ const marksArePresent = state => {
 export const checkFormattingIsPresent = state => {
   return marksArePresent(state) || blockStylingIsPresent(state);
 };
-export const usePreviousObjectState = value => {
-  const ref = useRef([]);
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
 export const compareItemsArrays = (items, prevItems) => {
   return items && items.filter(item => !prevItems.includes(item));
 };

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -25,6 +25,7 @@ export function ToolbarDropdown(props) {
     onItemActivated
   } = props;
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isOpenedByKeyboard, setOpenedByKeyboard] = React.useState(false);
   const labelLists = formatMessage(listMessages.lists);
   const onOpenChange = attrs => {
     setIsDropdownOpen(attrs.isDropdownOpen);
@@ -34,6 +35,13 @@ export function ToolbarDropdown(props) {
       isDropdownOpen: !isDropdownOpen
     });
   };
+  const handleOnKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      setIsDropdownOpen(!isDropdownOpen);
+      setOpenedByKeyboard(true);
+    }
+  };
   const items = useItems(props);
   const handleOnItemActivated = ({
     item,
@@ -57,7 +65,13 @@ export function ToolbarDropdown(props) {
     onOpenChange: onOpenChange,
     fitHeight: 188,
     fitWidth: 175,
-    shouldUseDefaultRole: true
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: () => {
+      if (isOpenedByKeyboard) {
+        setOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
   }, jsx(ToolbarButton, {
     spacing: isReducedSpacing ? 'none' : 'default',
     selected: bulletListActive || orderedListActive,
@@ -66,6 +80,7 @@ export function ToolbarDropdown(props) {
     "aria-label": labelLists,
     disabled: disabled,
     onClick: handleTriggerClick,
+    onKeyDown: handleOnKeyDown,
     title: labelLists,
     iconBefore: jsx("span", {
       css: wrapperStyle

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

@@ -2,11 +2,6 @@ export const TYPE_AHEAD_DECORATION_KEY = 'typeahead_decoration_key';
 export const TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE = 'typeaheadDecoration';
 export const TYPE_AHEAD_POPUP_CONTENT_CLASS = 'fabric-editor-typeahead';
 export const TYPE_AHEAD_DECORATION_ELEMENT_ID = 'typeahaed_decoration_element_id';
-export let NavigationDirection;
-(function (NavigationDirection) {
-  NavigationDirection[NavigationDirection["LEFT"] = -1] = "LEFT";
-  NavigationDirection[NavigationDirection["RIGHT"] = 1] = "RIGHT";
-})(NavigationDirection || (NavigationDirection = {}));
 export let CloseSelectionOptions;
 (function (CloseSelectionOptions) {
   CloseSelectionOptions["BEFORE_TEXT_INSERTED"] = "BEFORE_TEXT_INSERTED";

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

@@ -19,7 +19,7 @@ import { getPluginState } from './utils';
 import { useItemInsert } from './ui/hooks/use-item-insert';
 import { updateSelectedIndex } from './commands/update-selected-index';
 import { StatsModifier } from './stats-modifier';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '../analytics';
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 const TypeAheadMenu = /*#__PURE__*/React.memo(({
   editorView,
   popupMountRef,

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

@@ -145,39 +145,4 @@ export const factoryDecorations = ({
     createDecorations,
     removeDecorations
   };
-};
-export const isSelectionInsideTypeAhead = ({
-  decorationSet,
-  selection
-}) => {
-  if (!decorationSet || decorationSet === DecorationSet.empty) {
-    return false;
-  }
-  const typeAheadDecorations = decorationSet.find(undefined, undefined, spec => {
-    return spec.isTypeAheadDecoration;
-  });
-  if (!typeAheadDecorations || typeAheadDecorations.length === 0) {
-    return false;
-  }
-  return typeAheadDecorations.some(dec => {
-    return dec.from === selection.from && dec.to === selection.to;
-  });
-};
-export const findDecorationElement = ({
-  selection,
-  decorationSet
-}) => {
-  if (!decorationSet || decorationSet === DecorationSet.empty || !(selection instanceof TextSelection) || !selection.$cursor) {
-    return null;
-  }
-  const {
-    $cursor: {
-      pos
-    }
-  } = selection;
-  const decoration = decorationSet.find(pos, pos, spec => spec === null || spec === void 0 ? void 0 : spec.isTypeAheadDecoration);
-  if (!decoration || decoration.length !== 1) {
-    return null;
-  }
-  return document.querySelector(`#${decoration[0].spec.key}`);
 };