@atlaskit/editor-core 153.1.4 → 154.0.0

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import Button from '@atlaskit/button';
-import { Popup, withOuterListeners, WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import { EmojiPicker } from '@atlaskit/emoji';
 import Tooltip from '@atlaskit/tooltip';
 import EditorEmojiAddIcon from './EditorEmojiAddIcon'; // helps adjusts position of popup
@@ -31,6 +32,18 @@ export const EmojiPickerButton = props => {
     props.onChange && props.onChange(emoji);
   };
 
+  const isDetachedElement = el => !document.body.contains(el);
+
+  const handleEmojiClickOutside = e => {
+    // Ignore click events for detached elements.
+    // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
+    // still in the document, and one once it's detached. Does not always occur, and
+    // may be a side effect of a react render optimisation
+    if (e && e.target && !isDetachedElement(e.target)) {
+      togglePopup();
+    }
+  };
+
   const renderPicker = providers => {
     if (!providers.emojiProvider) {
       return null;
@@ -40,7 +53,7 @@ export const EmojiPickerButton = props => {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: () => {},
-      handleClickOutside: togglePopup
+      handleClickOutside: handleEmojiClickOutside
     });
   };
 

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Loadable from 'react-loadable';
-import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common';
+import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
 import { createExtensionAPI } from '../../extension/extension-api';

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

@@ -16,6 +16,7 @@ import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
 import { EmojiPickerButton } from './EmojiPickerButton';
+import Announcer from '../../../utils/announcer/announcer';
 const akGridSize = gridSize();
 const ToolbarContainer = styled.div`
   background-color: ${themed({
@@ -122,7 +123,10 @@ export default class Toolbar extends Component {
       "aria-label": "Floating Toolbar",
       hasCompactLeftPadding: firstElementIsSelect,
       className: className
-    }, /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+    }, /*#__PURE__*/React.createElement(Announcer, {
+      text: "Floating toolbar controls have been opened",
+      delay: 250
+    }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
       switch (item.type) {
         case 'button':
           const ButtonIcon = item.icon;
@@ -154,7 +158,8 @@ export default class Toolbar extends Component {
             disabled: item.disabled,
             tooltipContent: item.tooltipContent,
             testId: item.testId,
-            hideTooltipOnClick: item.hideTooltipOnClick
+            hideTooltipOnClick: item.hideTooltipOnClick,
+            ariaHasPopup: item.ariaHasPopup
           }, item.showTitle && item.title);
 
         case 'input':
@@ -228,7 +233,7 @@ export default class Toolbar extends Component {
               title: item.title,
               providerFactory: providerFactory,
               isSelected: item.selected,
-              onChange: selected => dispatchCommand(item.onChange(selected.shortName))
+              onChange: selected => dispatchCommand(item.onChange(selected))
             });
           }
 

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

@@ -1,6 +1,7 @@
 import { fragment } from '@atlaskit/adf-schema';
 import { Plugin } from 'prosemirror-state';
 import { pluginKey } from './plugin-key';
+import { createPlugin as createFragmentMarkConsistencyPlugin } from './pm-plugins/fragment-consistency';
 export function createPlugin() {
   return new Plugin({
     key: pluginKey
@@ -15,6 +16,15 @@ const fragmentMarkPlugin = () => ({
       name: 'fragment',
       mark: fragment
     }];
+  },
+
+  pmPlugins() {
+    return [{
+      name: 'fragmentMarkConsistency',
+      plugin: ({
+        dispatch
+      }) => createFragmentMarkConsistencyPlugin(dispatch)
+    }];
   }
 
 });

package/dist/es2019/plugins/fragment/pm-plugins/fragment-consistency.js

@@ -0,0 +1,140 @@
+/**
+ * This plugin ensures that certain nodes (such as tables, and various extension ones)
+ * have a unique `localId` attribute value for `fragment` marks.
+ * It also ensures the preservation of these IDs when nodes are being cut-and-pasted
+ * around the document.
+ *
+ * The implementation has been _heavily_ borrowed from
+ * - packages/editor/editor-core/src/plugins/table/pm-plugins/table-local-id.ts
+ */
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { uuid } from '@atlaskit/adf-schema';
+import { stepAddsOneOf } from '../../../utils/step';
+const pluginKey = new PluginKey('fragmentMarkConsistencyPlugin');
+/**
+ * Traverses a transaction's steps to see if we're inserting a node which supports a fragment mark
+ */
+
+const checkIsAddingSupportedNode = (schema, transaction) => {
+  const nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  return transaction.steps.some(step => nodesSupportingFragmentMark.some(nodeType => stepAddsOneOf(step, new Set([nodeType]))));
+};
+
+const getNodesSupportingFragmentMark = schema => {
+  const {
+    table,
+    extension,
+    bodiedExtension,
+    inlineExtension
+  } = schema.nodes;
+  return [table, extension, bodiedExtension, inlineExtension];
+};
+
+const regenerateFragmentIdIfNeeded = ({
+  transaction,
+  schema,
+  doc,
+  shouldRegenerateLocalId
+}) => {
+  const {
+    fragment
+  } = schema.marks;
+  const nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  let transactionChanged = false;
+  doc.descendants((node, pos) => {
+    const isSupportedNode = nodesSupportingFragmentMark.some(supportedNode => node.type === supportedNode);
+
+    if (!isSupportedNode) {
+      // continue traversing
+      return true;
+    }
+
+    const existingFragmentMark = node.marks.find(mark => mark.type === fragment);
+
+    if (!existingFragmentMark) {
+      // continue traversing
+      return true;
+    }
+
+    if (shouldRegenerateLocalId(existingFragmentMark.attrs.localId)) {
+      transactionChanged = true;
+      transaction.setNodeMarkup(pos, undefined, node.attrs, node.marks.map(mark => {
+        if (mark.type === fragment) {
+          mark.attrs.localId = uuid.generate();
+        }
+
+        return mark;
+      }));
+    }
+    /**
+     * Continue traversing, as we can encounter inline extension nodes pretty much anywhere
+     */
+
+
+    return true;
+  });
+  return {
+    transactionChanged
+  };
+};
+/**
+ * Ensures presence of `fragment` mark on certain node types and the uniqueness of their `localId` attributes
+ */
+
+
+export const createPlugin = dispatch => new Plugin({
+  key: pluginKey,
+  appendTransaction: (transactions, _oldState, newState) => {
+    let modified = false;
+    const tr = newState.tr;
+    transactions.forEach(transaction => {
+      const fragmentLocalIdsObserved = new Set();
+
+      if (!transaction.docChanged) {
+        return;
+      } // Don't interfere with cut as it clashes with fixTables & we don't need
+      // to handle any extra cut cases in this plugin
+
+
+      const uiEvent = transaction.getMeta('uiEvent');
+
+      if (uiEvent === 'cut') {
+        return;
+      }
+      /** Check if we're actually inserting a supported node, otherwise we can ignore this tr */
+
+
+      const isAddingSupportedNode = checkIsAddingSupportedNode(newState.schema, transaction);
+
+      if (!isAddingSupportedNode) {
+        return;
+      }
+
+      const {
+        transactionChanged
+      } = regenerateFragmentIdIfNeeded({
+        doc: newState.doc,
+        schema: newState.schema,
+        transaction: tr,
+        shouldRegenerateLocalId: localId => {
+          if (fragmentLocalIdsObserved.has(localId)) {
+            return true;
+          }
+
+          fragmentLocalIdsObserved.add(localId);
+          return false;
+        }
+      });
+
+      if (transactionChanged) {
+        modified = true;
+      }
+    });
+
+    if (modified) {
+      return tr;
+    }
+
+    return;
+  }
+});

package/dist/es2019/plugins/help-dialog/ui/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl-next';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import AkModalDialog, { ModalTransition, ModalBody, useModal } from '@atlaskit/modal-dialog';
 import { Header, Footer, ContentWrapper, Line, Content, ColumnRight, ColumnLeft, Row, CodeSm, CodeMd, CodeLg, Title } from './styles';
@@ -13,6 +13,7 @@ import { messages as listMessages } from '../../list/messages';
 import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
 import { messages as blockTypeMessages } from '../../block-type/messages';
 import { messages as undoRedoMessages } from '../../undo-redo/messages';
+import { alignmentMessages } from '../../../ui/Alignment/messages';
 import { closeHelpCommand } from '../commands';
 import { annotationMessages } from '../../annotation/toolbar';
 const messages = defineMessages({
@@ -79,6 +80,14 @@ export const formatting = ({
   type: 'strike',
   keymap: () => keymaps.toggleStrikethrough,
   autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"))
+}, {
+  name: formatMessage(toolbarMessages.subscript),
+  type: 'subsup',
+  keymap: () => keymaps.toggleSubscript
+}, {
+  name: formatMessage(toolbarMessages.superscript),
+  type: 'subsup',
+  keymap: () => keymaps.toggleSuperscript
 }, {
   name: formatMessage(blockTypeMessages.heading1),
   type: 'heading',
@@ -163,6 +172,14 @@ export const formatting = ({
   name: formatMessage(insertBlockMessages.mention),
   type: 'mention',
   autoFormatting: () => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"))
+}, {
+  name: formatMessage(alignmentMessages.alignLeft),
+  type: 'alignment',
+  keymap: () => keymaps.alignLeft
+}, {
+  name: formatMessage(alignmentMessages.alignRight),
+  type: 'alignment',
+  keymap: () => keymaps.alignRight
 }];
 const shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
 

package/dist/es2019/plugins/hyperlink/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { linkSharedStyle } from '@atlaskit/editor-common';
+import { linkSharedStyle } from '@atlaskit/editor-common/styles';
 export const linkStyles = css`
   .ProseMirror {
     ${linkSharedStyle}

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -23,11 +23,17 @@ import { mapContentTypeToIcon, sha1, wordCount } from './utils';
 import { hideLinkToolbar } from '../../commands';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { ScreenReaderText } from '../../styles';
+import { browser } from '@atlaskit/editor-common/utils';
+import { transformTimeStamp } from '../../../../ui/LinkSearch/transformTimeStamp';
+import Announcer from '../../../../utils/announcer/announcer';
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const ClearText = styled.span`
+const ClearText = styled.button`
   cursor: pointer;
-  padding-right: 8px;
+  padding: 0;
+  margin-right: 8px;
   color: ${N90};
+  background: transparent;
+  border: none;
 `;
 const TextInputWrapper = styled.div`
   ${InputWrapper};
@@ -301,6 +307,27 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
     });
 
+    _defineProperty(this, "getScreenReaderText", () => {
+      const {
+        intl
+      } = this.props;
+      const {
+        items,
+        selectedIndex
+      } = this.state;
+
+      if (items.length && selectedIndex > -1) {
+        const {
+          name,
+          container,
+          lastUpdatedDate,
+          lastViewedDate
+        } = items[selectedIndex];
+        const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+        return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
+      }
+    });
+
     _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -414,7 +441,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleTextKeyDown", event => {
+    _defineProperty(this, "handleClearTextKeyDown", event => {
       const KEY_CODE_TAB = 9;
       const {
         keyCode
@@ -433,8 +460,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         event.preventDefault();
         return;
       }
-
-      this.handleKeyDown(event);
     });
 
     _defineProperty(this, "handleKeyDown", event => {
@@ -689,6 +714,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     const formatClearLinkText = formatMessage(messages.clearLink);
     const formatDisplayText = formatMessage(messages.displayText);
     const screenReaderDescriptionId = 'search-recent-links-field-description';
+    const linkSearchListId = 'hyperlink-search-list';
+    const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
+    // as the Aria design pattern for combobox does not work in this case
+    // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+    const screenReaderText = browser.safari && this.getScreenReaderText();
     return /*#__PURE__*/React.createElement("div", {
       className: "recent-list"
     }, /*#__PURE__*/React.createElement(Container, {
@@ -698,10 +729,20 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       content: formatLinkAddressText
     }, /*#__PURE__*/React.createElement(LinkIcon, {
       label: formatLinkAddressText
-    }))), /*#__PURE__*/React.createElement(ScreenReaderText, {
+    }))), screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+      ariaLive: "assertive",
+      text: screenReaderText,
+      ariaRelevant: "additions",
+      delay: 250
+    }), /*#__PURE__*/React.createElement(ScreenReaderText, {
       "aria-hidden": "true",
       id: screenReaderDescriptionId
     }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+      role: "combobox",
+      ariaExpanded: true,
+      ariaActiveDescendant: ariaActiveDescendant,
+      ariaControls: linkSearchListId,
+      ariaAutoComplete: true,
       describedById: screenReaderDescriptionId,
       ref: ele => this.urlInputContainer = ele,
       placeholder: placeholder,
@@ -733,20 +774,24 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onCancel: this.handleCancel,
       defaultValue: displayText,
       onSubmit: this.handleSubmit,
-      onKeyDown: this.handleTextKeyDown
+      onKeyDown: this.handleKeyDown
     }), displayText && /*#__PURE__*/React.createElement(Tooltip, {
       content: formatMessage(messages.clearText)
     }, /*#__PURE__*/React.createElement(ClearText, {
-      onClick: this.handleClearDisplayText
+      onClick: this.handleClearDisplayText,
+      onKeyDown: this.handleClearTextKeyDown
     }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
     })))), /*#__PURE__*/React.createElement(ScreenReaderText, {
-      "aria-live": "assertive",
+      "aria-live": "polite",
+      "aria-atomic": "true",
       id: "fabric.editor.hyperlink.suggested.results"
     }, displayUrl && formatMessage(messages.searchLinkResults, {
       count: items.length
     })), /*#__PURE__*/React.createElement(LinkSearchList, {
       ariaControls: "fabric.editor.hyperlink.suggested.results",
+      id: linkSearchListId,
+      role: "listbox",
       items: items,
       isLoading: isLoading,
       selectedIndex: selectedIndex,

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import HyperlinkAddToolbarComp from './HyperlinkAddToolbar';
 import { stateKey as pluginKey } from '../../pm-plugins/main';
 import WithPluginState from '../../../../ui/WithPluginState';

package/dist/es2019/plugins/insert-block/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { WithProviders } from '@atlaskit/editor-common';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { pluginKey as blockTypeStateKey } from '../block-type/pm-plugins/main';
 import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { stateKey as hyperlinkPluginKey } from '../hyperlink/pm-plugins/main';

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import InsertMenu from '../../../../ui/ElementBrowser/InsertMenu';
 import { DropDownButton } from './dropdown-button';
 export const BlockInsertElementBrowser = props => {
@@ -17,6 +17,8 @@ export const BlockInsertElementBrowser = props => {
     onInsert: props.onInsert,
     toggleVisiblity: props.togglePlusMenuVisibility
   })), /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -21,6 +21,8 @@ export const BlockInsertMenuLegacy = props => {
     fitWidth: 175,
     zIndex: akEditorMenuZIndex
   }, /*#__PURE__*/React.createElement(DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
     handleRef: props.onRef,
     selected: props.open,
     disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -9,6 +9,8 @@ export const BlockInsertMenu = props => {
 
   if (props.disabled) {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropDownButton, {
+      "aria-expanded": props.open,
+      "aria-haspopup": true,
       handleRef: props.onRef,
       selected: props.open,
       disabled: props.disabled,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/create-items.js

@@ -63,7 +63,8 @@ const createInsertBlockItems = config => {
     items.push(link({
       content: formatMessage(messages.link),
       tooltipDescription: formatMessage(messages.linkDescription),
-      disabled: !!linkDisabled
+      disabled: !!linkDisabled,
+      'aria-haspopup': 'dialog'
     }));
   }
 
@@ -86,7 +87,8 @@ const createInsertBlockItems = config => {
     items.push(mention({
       content: formatMessage(messages.mention),
       tooltipDescription: formatMessage(messages.mentionDescription),
-      disabled: !isTypeAheadAllowed
+      disabled: !isTypeAheadAllowed,
+      'aria-haspopup': 'listbox'
     }));
   }
 
@@ -94,7 +96,8 @@ const createInsertBlockItems = config => {
     items.push(emoji({
       content: formatMessage(messages.emoji),
       tooltipDescription: formatMessage(messages.emojiDescription),
-      disabled: emojiDisabled || !isTypeAheadAllowed
+      disabled: emojiDisabled || !isTypeAheadAllowed,
+      'aria-haspopup': 'dialog'
     }));
   }
 

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -16,8 +16,11 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
   disabled: props.disabled,
   onClick: props.onClick,
   spacing: props.spacing,
+  "aria-expanded": props['aria-expanded'],
+  "aria-haspopup": props['aria-haspopup'],
+  "aria-label": props.label,
   iconBefore: /*#__PURE__*/React.createElement(DropDownButtonIcon, {
-    label: props.label
+    label: ""
   }),
   title: /*#__PURE__*/React.createElement(ToolTipContent, {
     description: props.label,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { Separator, ButtonGroup, Wrapper } from '../../../../ui/styles';
 import { createTable } from '../../../table/commands';
@@ -531,6 +531,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
       iconBefore: btn.elemBefore,
       selected: btn.isActive,
       title: btn.title,
+      "aria-label": btn['aria-label'],
+      "aria-haspopup": btn['aria-haspopup'],
       onItemClick: this.insertToolbarMenuItem
     })), /*#__PURE__*/React.createElement(Wrapper, null, this.renderPopup(), /*#__PURE__*/React.createElement(BlockInsertMenu, {
       popupsMountPoint: this.props.popupsMountPoint,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -31,6 +31,8 @@ const from = init => ({
     label: init.content
   }),
   elemAfter: init.shortcut ? /*#__PURE__*/React.createElement(Shortcut, null, init.shortcut) : undefined,
+  'aria-label': init.content,
+  'aria-haspopup': init['aria-haspopup'],
   shortcut: init.shortcut,
   isDisabled: init.disabled
 });
@@ -53,7 +55,8 @@ export const link = mem(init => from({
   disabled: init.disabled,
   name: 'link',
   shortcut: tooltip(addLink),
-  Icon: LinkIcon
+  Icon: LinkIcon,
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const media = mem(init => from({
   content: init.content,
@@ -75,7 +78,8 @@ export const mention = mem(init => from({
   disabled: init.disabled,
   name: 'mention',
   Icon: MentionIcon,
-  shortcut: '@'
+  shortcut: '@',
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const emoji = mem(init => from({
   content: init.content,
@@ -83,7 +87,8 @@ export const emoji = mem(init => from({
   disabled: init.disabled,
   name: 'emoji',
   Icon: EmojiIcon,
-  shortcut: ':'
+  shortcut: ':',
+  'aria-haspopup': init['aria-haspopup']
 }));
 export const table = mem(init => from({
   content: init.content,

package/dist/es2019/plugins/layout/styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
-import { columnLayoutSharedStyle } from '@atlaskit/editor-common';
+import { columnLayoutSharedStyle } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '../table/types';
 import { tableMarginFullWidthMode } from '../table/ui/consts';

package/dist/es2019/plugins/list/commands/indent-list.js

@@ -1,3 +1,4 @@
+import { findParentNodeOfType } from 'prosemirror-utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, addAnalytics } from '../../analytics';
 import { hasValidListIndentationLevel } from '../utils/indentation';
 import { indentListItemsSelected as indentListAction } from '../actions/indent-list-items-selected';
@@ -20,18 +21,22 @@ export function indentList(inputMethod = INPUT_METHOD.KEYBOARD) {
       return false;
     }
 
+    const {
+      tableCell,
+      tableHeader
+    } = state.schema.nodes;
+    const cell = findParentNodeOfType([tableCell, tableHeader])(state.selection);
     const firstListItemSelectedAttributes = getListItemAttributes($from);
-
-    if (firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
-      // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
-    }
-
     const parentListNode = findFirstParentListNode($from);
 
-    if (!parentListNode) {
-      // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
-      return true;
+    if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {
+      if (cell) {
+        // dont consume tab, as table-keymap should move cursor to next cell
+        return false;
+      } else {
+        // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
+        return true;
+      }
     }
 
     const currentListNode = parentListNode.node;

package/dist/es2019/plugins/list/pm-plugins/input-rules/index.js

@@ -11,7 +11,10 @@ export default function inputRulePlugin(schema, featureFlags) {
 
   if (bulletList) {
     rules.push(createRuleForListType({
-      expression: /^\s*([\*\-\•]) $/,
+      // Using UTF instead of • character
+      // because of issue where product converted the
+      // character into an escaped version.
+      expression: /^\s*([\*\-\u2022]) $/,
       listType: bulletList
     }));
   }