@atlaskit/editor-core 175.0.5 → 176.0.0

package/dist/es2019/plugins/alignment/pm-plugins/keymap.js

@@ -1,9 +1,8 @@
 import { keymap } from 'prosemirror-keymap';
-import { bindKeymapWithCommand, alignLeft, alignRight } from '../../../keymaps';
+import { bindKeymapWithCommand, alignLeft } from '../../../keymaps';
 import { changeAlignment } from '../commands';
 export function keymapPlugin() {
   const list = {};
   bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
-  bindKeymapWithCommand(alignRight.common, changeAlignment('end'), list);
   return keymap(list);
 }

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -15,6 +15,8 @@ export class AlignmentToolbar extends React.Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "state", {
       isOpen: false
     });
@@ -38,13 +40,27 @@ export class AlignmentToolbar extends React.Component {
       });
     });
 
-    _defineProperty(this, "hide", () => {
+    _defineProperty(this, "hide", attrs => {
       if (this.state.isOpen) {
         this.setState({
           isOpen: false
         });
+
+        if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.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, "hideonEsc", () => {
+      var _this$toolbarItemRef2, _this$toolbarItemRef3;
+
+      this.hide(); //To set the focus on the textcolor button when the menu is closed by 'Esc' only (aria guidelines)
+
+      (_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();
+    });
   }
 
   render() {
@@ -68,10 +84,15 @@ export class AlignmentToolbar extends React.Component {
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
       isOpen: isOpen,
-      handleClickOutside: this.hide,
-      handleEscapeKeydown: this.hide,
+      handleClickOutside: event => this.hide({
+        isOpen: false,
+        event
+      }),
+      handleEscapeKeydown: this.hideonEsc,
+      onOpenChange: this.hide,
       fitWidth: 112,
       fitHeight: 80,
+      closeonTab: true,
       trigger: jsx(ToolbarButton, {
         spacing: isReducedSpacing ? 'none' : 'default',
         disabled: disabled,
@@ -90,7 +111,8 @@ export class AlignmentToolbar extends React.Component {
           css: expandIconWrapper
         }, jsx(ExpandIcon, {
           label: ""
-        })))
+        }))),
+        ref: this.toolbarItemRef
       })
     }, jsx(Alignment, {
       onClick: align => this.changeAlignment(align),

package/dist/es2019/plugins/annotation/nodeviews/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { ReactNodeView } from '../../../nodeviews';
-import WithPluginState from '../../../ui/WithPluginState';
-import { inlineCommentPluginKey } from '../utils';
 export class AnnotationNodeView extends ReactNodeView {
   createDomRef() {
     return document.createElement('span');
@@ -17,35 +15,13 @@ export class AnnotationNodeView extends ReactNodeView {
   }
 
   render(_props, forwardRef) {
-    return /*#__PURE__*/React.createElement(WithPluginState, {
-      plugins: {
-        inlineCommentState: inlineCommentPluginKey
-      },
-      editorView: this.view,
-      render: ({
-        inlineCommentState
-      }) => {
-        if (!(inlineCommentState !== null && inlineCommentState !== void 0 && inlineCommentState.isVisible)) {
-          return /*#__PURE__*/React.createElement("span", {
-            ref: forwardRef
-          });
-        } // Check if selection includes current annotation ID
-
-
-        const {
-          annotations,
-          selectedAnnotations
-        } = inlineCommentState;
-        const id = this.node.attrs.id;
-        const isUnresolved = annotations[id] === false;
-        const annotationHasFocus = selectedAnnotations.some(x => x.id === id);
-        const className = getAnnotationViewClassname(isUnresolved, annotationHasFocus);
-        return /*#__PURE__*/React.createElement("span", {
-          className: className,
-          ref: forwardRef
-        });
-      }
-    });
+    return (
+      /*#__PURE__*/
+      // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
+      React.createElement("span", {
+        ref: forwardRef
+      })
+    );
   }
 
 }

package/dist/es2019/plugins/annotation/pm-plugins/inline-comment.js

@@ -1,7 +1,8 @@
 import { RESOLVE_METHOD } from './../../analytics/types/inline-comment-events';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Decoration, DecorationSet } from 'prosemirror-view';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { AnnotationNodeView } from '../nodeviews';
+import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
 import { updateInlineCommentResolvedState, updateMouseState, clearDirtyMark, setInlineCommentsVisibility } from '../commands';
 import { getAllAnnotations, inlineCommentPluginKey, getPluginState } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -166,10 +167,30 @@ export const inlineCommentPlugin = options => {
       },
 
       decorations(state) {
+        // highlight comments, depending on state
         const {
-          draftDecorationSet
+          draftDecorationSet,
+          annotations,
+          selectedAnnotations,
+          isVisible
         } = getPluginState(state);
-        return draftDecorationSet;
+        let decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
+        const focusDecorations = [];
+        state.doc.descendants((node, pos) => {
+          node.marks.filter(mark => mark.type === state.schema.marks.annotation).forEach(mark => {
+            const isSelected = selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id);
+            const isUnresolved = annotations[mark.attrs.id] === false;
+
+            if (isVisible) {
+              focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
+                class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
+                nodeName: 'span'
+              }));
+            }
+          });
+        });
+        decorations = decorations.add(state.doc, focusDecorations);
+        return decorations;
       }
 
     }

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

@@ -4,7 +4,7 @@ import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common/utils';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { AnnotationSelectionType } from './types';
-import { sum } from '../../utils';
+import { isText, isParagraph, sum } from '../../utils';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, ACTION } from '../analytics';
 
 /**
@@ -255,7 +255,7 @@ export const isSelectionValid = state => {
     return AnnotationSelectionType.DISABLED;
   }
 
-  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection)) {
+  if (disallowOnWhitespace && hasInvalidWhitespaceNode(selection, state.schema)) {
     return AnnotationSelectionType.INVALID;
   }
 
@@ -308,10 +308,14 @@ function isEmptyTextSelection(selection, schema) {
  */
 
 
-export function hasInvalidWhitespaceNode(selection) {
+export function hasInvalidWhitespaceNode(selection, schema) {
   let foundInvalidWhitespace = false;
   const content = selection.content().content;
   content.descendants(node => {
+    if (isText(node, schema)) {
+      return false;
+    }
+
     if (node.textContent.trim() === '') {
       // Trailing new lines do not result in the annotation spanning into
       // the trailing new line so can be ignored when looking for invalid
@@ -319,7 +323,7 @@ export function hasInvalidWhitespaceNode(selection) {
       const nodeIsTrailingNewLine = // it is the final node
       node.eq(content.lastChild) && // and there are multiple nodes
       !node.eq(content.firstChild) && // and it is a paragraph node
-      node.type.name === 'paragraph';
+      isParagraph(node, schema);
 
       if (!nodeIsTrailingNewLine) {
         foundInvalidWhitespace = true;

package/dist/es2019/plugins/base/pm-plugins/inline-cursor-target.js

@@ -44,6 +44,7 @@ export default (() => {
           const createWidget = side => {
             const node = document.createElement('span');
             node.contentEditable = 'true';
+            node.setAttribute('aria-hidden', 'true');
             node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
             node.className = 'cursor-target';
             return Decoration.widget(selection.from, node, {

package/dist/es2019/plugins/caption/nodeviews/index.js

@@ -16,7 +16,10 @@ export class CaptionNodeView extends SelectionBasedNodeView {
   }
 
   getContentDOM() {
-    const dom = document.createElement('div');
+    const dom = document.createElement('div'); // setting a className prevents PM/Chrome mutation observer from
+    // incorrectly deleting nodes
+
+    dom.className = 'caption-wrapper';
     return {
       dom
     };

package/dist/es2019/plugins/card/ui/EditLinkToolbar.js

@@ -73,6 +73,7 @@ export const buildEditLinkToolbar = ({
   return {
     type: 'custom',
     fallback: [],
+    disableArrowNavigation: true,
     render: (view, idx) => {
       if (!view || !providerFactory) {
         return null;

package/dist/es2019/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -65,8 +65,9 @@ const getCustomStyles = (selected, disabled) => {
   return [primitiveStyles, unselectedStyles, interactiveStyles];
 };
 
+//tabindex is -1 as the menu options should be focusable explicitly only by arrow keys.
 const OptionRoot = props => jsx("div", _extends({}, props, {
-  tabIndex: 0
+  tabIndex: -1
 }));
 
 const Option = ({

package/dist/es2019/plugins/code-block/nodeviews/code-block.js

@@ -13,6 +13,8 @@ const toDOM = node => ['div', {
   class: codeBlockClassNames.start,
   contenteditable: 'false'
 }], ['div', {
+  class: codeBlockClassNames.contentWrapper
+}, ['div', {
   class: codeBlockClassNames.gutter,
   contenteditable: 'false'
 }], ['div', {
@@ -22,7 +24,7 @@ const toDOM = node => ['div', {
   spellcheck: 'false',
   contenteditable: 'true',
   'data-testid': 'code-block--code'
-}, 0]], ['div', {
+}, 0]]], ['div', {
   class: codeBlockClassNames.end,
   contenteditable: 'false'
 }]];
@@ -67,7 +69,8 @@ export class CodeBlockView {
     if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
       var _contentView$childNod;
 
-      const contentView = this.dom.childNodes[1];
+      const contentWrapper = this.dom.childNodes[1];
+      const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
 
       if ((contentView === null || contentView === void 0 ? void 0 : (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
         const codeElement = contentView.firstChild;
@@ -88,7 +91,8 @@ export class CodeBlockView {
     var _this$dom2;
 
     if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
-      const contentView = this.dom.childNodes[1];
+      const contentWrapper = this.dom.childNodes[1];
+      const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
 
       if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
         let savedInnerHTML = '';

package/dist/es2019/plugins/code-block/refresh-browser-selection.js

@@ -24,4 +24,5 @@ const refreshBrowserSelectionOnChange = (transaction, editorState) => {
   }
 };
 
-export default refreshBrowserSelectionOnChange;
+export default refreshBrowserSelectionOnChange;
+export { refreshBrowserSelection };

package/dist/es2019/plugins/code-block/styles.js

@@ -4,6 +4,19 @@ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderS
 import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
+
+const GutterDangerOverlay = () => css`
+  &::after {
+    height: 100%;
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 24px;
+    background-color: ${token('color.blanket.danger', 'none')};
+  }
+`;
+
 export const codeBlockStyles = props => css`
   .ProseMirror {
     ${codeBlockSharedStyles(props)}
@@ -30,27 +43,30 @@ export const codeBlockStyles = props => css`
 
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
-    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
+    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+      ${token('color.border.danger', akEditorDeleteBorder)};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.blanket.danger', R75)};
+      background-color: ${token('color.background.danger', R75)};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+      background-color: ${token('color.blanket.danger', akEditorDeleteBackground)};
     }
   }
 
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.blanket.danger', 'rgba(255, 143, 115, 0.5)')};
+      background-color: ${token('color.background.danger', 'rgba(255, 143, 115, 0.5)')};
       color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.background.danger', 'rgba(255, 189, 173, 0.5)')};
+      background-color: ${token('color.blanket.danger', 'rgba(255, 189, 173, 0.5)')};
     }
   }
 `;

package/dist/es2019/plugins/code-block/ui/class-names.js

@@ -1,7 +1,9 @@
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 export const codeBlockClassNames = {
+  container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
   start: CodeBlockSharedCssClassName.CODEBLOCK_START,
   end: CodeBlockSharedCssClassName.CODEBLOCK_END,
+  contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
   gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
   content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
 };

package/dist/es2019/plugins/collab-edit/utils.js

@@ -1,4 +1,3 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { Selection, TextSelection } from 'prosemirror-state';
 import { Decoration } from 'prosemirror-view';
 import * as themeColors from '@atlaskit/theme/colors';
@@ -6,10 +5,15 @@ import { hexToRgba } from '@atlaskit/adf-schema';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
 import { addAnalytics } from '../analytics/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT } from '../analytics/types';
+// TODO: https://product-fabric.atlassian.net/browse/DSP-7269
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(solid => ({
   solid,
   selection: hexToRgba(solid, 0.2)
 }));
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 export const getAvatarColor = str => {
   let hash = 0;
 

package/dist/es2019/plugins/copy-button/commands.js

@@ -26,8 +26,10 @@ export function createToolbarCopyCommandForMark(markType) {
         // since we're copying the text inside a paragraph, it will always be 1 1
         // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
 
-        div.firstChild.setAttribute('data-pm-slice', '1 1 []');
-        copyHTMLToClipboard(div.innerHTML);
+        div.firstChild.setAttribute('data-pm-slice', '1 1 []'); // If we're copying a hyperlink, we'd copy the url as the fallback plain text
+
+        const linkUrl = domNode.getAttribute('href');
+        copyHTMLToClipboard(div, markType.name === 'link' && linkUrl ? linkUrl : undefined);
       }
 
       const copyToClipboardTr = state.tr;
@@ -136,7 +138,7 @@ export const createToolbarCopyCommandForNode = nodeType => (state, dispatch) =>
         div.firstChild.setAttribute('data-pm-slice', '0 0 []');
       }
 
-      copyHTMLToClipboard(div.innerHTML);
+      copyHTMLToClipboard(div);
     }
 
     copyToClipboardTr.setMeta('scrollIntoView', false);

package/dist/es2019/plugins/emoji/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  emojiNodeLabel: {
+    id: 'fabric.emoji.label',
+    defaultMessage: 'Emoji',
+    description: 'Label to indicate emoji node to Screen reader users'
+  }
+});

package/dist/es2019/plugins/emoji/nodeviews/emoji.js

@@ -1,15 +1,29 @@
 import React from 'react';
 import Emoji from '../ui/Emoji';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../messages';
+const EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(({
+  emojiShortName
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'assistive'
+  }, `${intl.formatMessage(messages.emojiNodeLabel)} ${emojiShortName}`);
+});
 export function EmojiNodeView(props) {
   const {
     shortName,
     id,
     text
   } = props.node.attrs;
-  return /*#__PURE__*/React.createElement(Emoji, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiAssistiveTextComponent, {
+    emojiShortName: shortName
+  }), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Emoji, {
     providers: props.providerFactory,
     id: id,
     shortName: shortName,
     fallback: text
-  });
+  })));
 }

package/dist/es2019/plugins/expand/pm-plugins/keymap.js

@@ -8,6 +8,7 @@ import { expandClassNames } from '../ui/class-names';
 import { deleteExpand, focusTitle } from '../commands';
 import { getPluginState as getSelectionPluginState } from '../../selection/plugin-factory';
 import { RelativeSelectionPos } from '../../selection/types';
+import { isPositionNearTableRow } from '../../../utils/table';
 
 const isExpandNode = node => {
   return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
@@ -111,7 +112,15 @@ export function expandKeymap() {
     } = state.selection;
 
     if (editorView.endOfTextblock('up')) {
-      const expand = findExpand(state);
+      const expand = findExpand(state); // Moving UP in a table should move the cursor to the row above
+      // however when an expand is in a table cell to the left of the
+      // current table cell, arrow UP moves the cursor to the left
+      // see ED-15425
+
+      if (isPositionNearTableRow($from, schema, 'before') && !expand) {
+        return false;
+      }
+
       const prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0); // move cursor from expand's content to its title
 
       if (expand && expand.start === prevCursorPos) {

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -26,7 +26,7 @@ function getSpellCheck(featureFlags) {
 
 
 export function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$collabEdit, _props$collabEdit2, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38;
+  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$collabEdit, _props$collabEdit2, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   const tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
@@ -53,19 +53,23 @@ export function createFeatureFlagsFromProps(props) {
     errorBoundaryDocStructure: Boolean(typeof ((_props$featureFlags14 = props.featureFlags) === null || _props$featureFlags14 === void 0 ? void 0 : _props$featureFlags14.useErrorBoundaryDocStructure) === 'boolean' ? !!((_props$featureFlags15 = props.featureFlags) !== null && _props$featureFlags15 !== void 0 && _props$featureFlags15.useErrorBoundaryDocStructure) : false),
     synchronyErrorDocStructure: Boolean(typeof ((_props$featureFlags16 = props.featureFlags) === null || _props$featureFlags16 === void 0 ? void 0 : _props$featureFlags16.synchronyErrorDocStructure) === 'boolean' ? !!((_props$featureFlags17 = props.featureFlags) !== null && _props$featureFlags17 !== void 0 && _props$featureFlags17.synchronyErrorDocStructure) : false),
     enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags18 = props.featureFlags) === null || _props$featureFlags18 === void 0 ? void 0 : _props$featureFlags18.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags19 = props.featureFlags) !== null && _props$featureFlags19 !== void 0 && _props$featureFlags19.enableViewUpdateSubscription) : false),
-    plainTextPasteLinkification: Boolean(typeof ((_props$featureFlags20 = props.featureFlags) === null || _props$featureFlags20 === void 0 ? void 0 : _props$featureFlags20.plainTextPasteLinkification) === 'boolean' ? !!((_props$featureFlags21 = props.featureFlags) !== null && _props$featureFlags21 !== void 0 && _props$featureFlags21.plainTextPasteLinkification) : false),
-    collabAvatarScroll: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.collabAvatarScroll) : false),
-    ufo: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.ufo) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.ufo) : false),
-    twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.twoLineEditorToolbar) : false),
-    saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.saferDispatchedTransactions) : false)),
+    collabAvatarScroll: Boolean(typeof ((_props$featureFlags20 = props.featureFlags) === null || _props$featureFlags20 === void 0 ? void 0 : _props$featureFlags20.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags21 = props.featureFlags) !== null && _props$featureFlags21 !== void 0 && _props$featureFlags21.collabAvatarScroll) : false),
+    ufo: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.ufo) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.ufo) : false),
+    twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.twoLineEditorToolbar) : false),
+    saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.saferDispatchedTransactions) : false)),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
-    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined,
+    chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags29 = props.featureFlags) === null || _props$featureFlags29 === void 0 ? void 0 : _props$featureFlags29['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined,
     tableCellOptionsInFloatingToolbar: typeof tableCellOptionsInFloatingToolbar === 'boolean' ? tableCellOptionsInFloatingToolbar : false,
-    showHoverPreview: Boolean(typeof ((_props$featureFlags32 = props.featureFlags) === null || _props$featureFlags32 === void 0 ? void 0 : _props$featureFlags32.showHoverPreview) === 'boolean' ? !!((_props$featureFlags33 = props.featureFlags) !== null && _props$featureFlags33 !== void 0 && _props$featureFlags33.showHoverPreview) : false),
-    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags34 = props.featureFlags) === null || _props$featureFlags34 === void 0 ? void 0 : _props$featureFlags34.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags35 = props.featureFlags) !== null && _props$featureFlags35 !== void 0 && _props$featureFlags35.indentationButtonsInTheToolbar) : false)),
-    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags37 = props.featureFlags) !== null && _props$featureFlags37 !== void 0 && _props$featureFlags37.floatingToolbarCopyButton) : false)),
-    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
-    disableSpellcheckByBrowser: getSpellCheck(props.featureFlags)
+    showHoverPreview: Boolean(typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.showHoverPreview) === 'boolean' ? !!((_props$featureFlags31 = props.featureFlags) !== null && _props$featureFlags31 !== void 0 && _props$featureFlags31.showHoverPreview) : false),
+    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags32 = props.featureFlags) === null || _props$featureFlags32 === void 0 ? void 0 : _props$featureFlags32.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags33 = props.featureFlags) !== null && _props$featureFlags33 !== void 0 && _props$featureFlags33.indentationButtonsInTheToolbar) : false)),
+    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags34 = props.featureFlags) === null || _props$featureFlags34 === void 0 ? void 0 : _props$featureFlags34.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags35 = props.featureFlags) !== null && _props$featureFlags35 !== void 0 && _props$featureFlags35.floatingToolbarCopyButton) : false)),
+    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
+    disableSpellcheckByBrowser: getSpellCheck(props.featureFlags),
+    // Including fallback to props.featureFlags so that mobile feature flags
+    // are included (they are not kebab cased)
+    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.restartNumberedLists) === true,
+    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.listNumberContinuity) === true,
+    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.restartNumberedListsToolbar) === true
   };
 }

package/dist/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -88,6 +88,7 @@ class FindReplaceToolbarButton extends React.PureComponent {
       },
       fitWidth: 352,
       zIndex: stackBelowOtherEditorFloatingPanels,
+      disableArrowKeyNavigation: true,
       trigger: jsx(ToolbarButton, {
         buttonId: TOOLBAR_BUTTON.FIND_REPLACE,
         spacing: isReducedSpacing ? 'none' : 'default',

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -187,6 +187,7 @@ const floatingToolbarPlugin = () => ({
           className = '',
           height,
           width,
+          zIndex,
           offset = [0, 12],
           forcePlacement,
           onPositionCalculated
@@ -229,6 +230,7 @@ const floatingToolbarPlugin = () => ({
           fitWidth: width,
           alignX: align,
           stick: true,
+          zIndex: zIndex,
           mountTo: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
           scrollableElement: popupsScrollableElement,

package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js

@@ -56,6 +56,14 @@ export default class Dropdown extends Component {
         isOpen: false
       });
     });
+
+    _defineProperty(this, "hideonEsc", () => {
+      var _document$querySelect;
+
+      this.hide(); //Focus the trigger button only on Escape
+
+      (_document$querySelect = document.querySelector(`[data-testid=${this.props.buttonTestId}]`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
+    });
   }
 
   render() {
@@ -120,7 +128,7 @@ export default class Dropdown extends Component {
       scrollableElement: scrollableElement,
       isOpen: isOpen,
       handleClickOutside: this.hide,
-      handleEscapeKeydown: this.hide,
+      handleEscapeKeydown: this.hideonEsc,
       fitWidth: fitWidth + fitTolerance,
       fitHeight: fitHeight + fitTolerance,
       trigger: trigger

package/dist/es2019/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -32,6 +32,7 @@ const menuContainer = css`
   }
 `;
 export const itemSpacing = gridSize() / 2;
+const DropdownButtonItem = ButtonItem;
 
 class Dropdown extends Component {
   render() {
@@ -44,7 +45,7 @@ class Dropdown extends Component {
     return jsx("div", {
       css: menuContainer
     }, items.filter(item => !item.hidden).map((item, idx) => {
-      const itemContent = jsx(ButtonItem, {
+      const itemContent = jsx(DropdownButtonItem, {
         key: idx,
         iconBefore: this.renderSelected(item, intl),
         iconAfter: item.elemAfter,
@@ -62,6 +63,24 @@ class Dropdown extends Component {
         isDisabled: item.disabled,
         onMouseDown: e => {
           e.preventDefault();
+        },
+        onMouseOver: e => {
+          if (item.onMouseOver) {
+            e.preventDefault();
+            dispatchCommand(item.onMouseOver);
+          }
+        },
+        onMouseEnter: e => {
+          if (item.onMouseEnter) {
+            e.preventDefault();
+            dispatchCommand(item.onMouseEnter);
+          }
+        },
+        onMouseLeave: e => {
+          if (item.onMouseLeave) {
+            e.preventDefault();
+            dispatchCommand(item.onMouseLeave);
+          }
         }
       }, item.title);