@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/es2019/plugins/hyperlink/pm-plugins/fake-cursor-for-toolbar.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { fakeCursorForToolbarPluginKey } from './fake-curor-for-toolbar-plugin-key';
 import { InsertStatus, stateKey as hyperlinkStateKey } from './main';
@@ -27,7 +27,7 @@ const getInsertLinkToolbarState = editorState => {
   return undefined;
 };
 
-const fakeCursorToolbarPlugin = new Plugin({
+const fakeCursorToolbarPlugin = new SafePlugin({
   key: fakeCursorForToolbarPluginKey,
   state: {
     init() {

package/dist/es2019/plugins/hyperlink/pm-plugins/main.js

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, TextSelection } from 'prosemirror-state';
 import uuid from 'uuid';
 import { shallowEqual } from '../../../utils';
 export let LinkAction;
@@ -218,7 +219,7 @@ const getActiveText = selection => {
 };
 
 export const stateKey = new PluginKey('hyperlinkPlugin');
-export const plugin = dispatch => new Plugin({
+export const plugin = dispatch => new SafePlugin({
   state: {
     init(_, state) {
       const canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
@@ -230,7 +231,7 @@ export const plugin = dispatch => new Plugin({
       };
     },
 
-    apply(tr, pluginState, _oldState, newState) {
+    apply(tr, pluginState, oldState, newState) {
       let state = pluginState;
       const action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
       const inputMethod = tr.getMeta(stateKey) && tr.getMeta(stateKey).inputMethod;
@@ -262,7 +263,9 @@ export const plugin = dispatch => new Plugin({
         };
       }
 
-      if (tr.selectionSet) {
+      const hasPositionChanged = oldState.selection.from !== newState.selection.from || oldState.selection.to !== newState.selection.to;
+
+      if (tr.selectionSet && hasPositionChanged) {
         state = {
           activeText: getActiveText(newState.selection),
           canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
@@ -281,5 +284,51 @@ export const plugin = dispatch => new Plugin({
     }
 
   },
-  key: stateKey
-});
+  key: stateKey,
+  props: {
+    handleDOMEvents: {
+      mouseup: (_, event) => {
+        // this prevents redundant selection transaction when clicking on link
+        // link state will be update on slection change which happens on mousedown
+        if (isLinkDirectTarget(event)) {
+          event.preventDefault();
+          return true;
+        }
+
+        return false;
+      },
+      mousedown: (view, event) => {
+        // since link clicks are disallowed by browsers inside contenteditable
+        // so we need to handle shift+click selection ourselves in this case
+        if (!event.shiftKey || !isLinkDirectTarget(event)) {
+          return false;
+        }
+
+        const {
+          state
+        } = view;
+        const {
+          selection: {
+            $anchor
+          }
+        } = state;
+        const newPosition = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY
+        });
+
+        if ((newPosition === null || newPosition === void 0 ? void 0 : newPosition.pos) != null && newPosition.pos !== $anchor.pos) {
+          const tr = state.tr.setSelection(TextSelection.create(state.doc, $anchor.pos, newPosition.pos));
+          view.dispatch(tr);
+          return true;
+        }
+
+        return false;
+      }
+    }
+  }
+});
+
+function isLinkDirectTarget(event) {
+  return (event === null || event === void 0 ? void 0 : event.target) instanceof HTMLElement && event.target.tagName === 'A';
+}

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

@@ -1,5 +1,6 @@
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
 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};
@@ -64,6 +70,11 @@ export const messages = defineMessages({
     id: 'fabric.editor.hyperlink.searchLinkResults',
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
+  },
+  linkAriaLabel: {
+    id: 'fabric.editor.hyperlink.linkAriaLabel',
+    defaultMessage: 'Link label',
+    description: 'aria label for a link'
   }
 });
 const defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
@@ -301,6 +312,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 +446,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleTextKeyDown", event => {
+    _defineProperty(this, "handleClearTextKeyDown", event => {
       const KEY_CODE_TAB = 9;
       const {
         keyCode
@@ -433,8 +465,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         event.preventDefault();
         return;
       }
-
-      this.handleKeyDown(event);
     });
 
     _defineProperty(this, "handleKeyDown", event => {
@@ -689,6 +719,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 +734,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,
@@ -727,26 +773,30 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     }))), /*#__PURE__*/React.createElement(PanelTextInput, {
       ref: ele => this.displayTextInputContainer = ele,
       placeholder: formatDisplayText,
-      ariaLabel: 'Link label',
+      ariaLabel: formatMessage(messages.linkAriaLabel),
       testId: 'link-label',
       onChange: this.updateTextInput,
       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/hyperlink/ui/HyperlinkAddToolbar/messages.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl-next';
+export const utilMessages = defineMessages({
+  hyperlinkIconIssueLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconIssueLabel',
+    defaultMessage: 'Issue',
+    description: 'icon label for a jira issue'
+  },
+  hyperlinkIconBugLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconBugLabel',
+    defaultMessage: 'Bug',
+    description: 'icon label for a jira bug'
+  },
+  hyperlinkIconStoryLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconStoryLabel',
+    defaultMessage: 'Story',
+    description: 'icon label for a jira story'
+  },
+  hyperlinkIconTaskLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconTaskLabel',
+    defaultMessage: 'Task',
+    description: 'icon label for a jira task'
+  },
+  hyperlinkIconPageLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconPageLabel',
+    defaultMessage: 'Page',
+    description: 'icon label for a confluence page'
+  },
+  hyperlinkIconBlogLabel: {
+    id: 'fabric.editor.headingLink.hyperlinkIconBlogLabel',
+    defaultMessage: 'Blog',
+    description: 'icon label for a confluence blog'
+  }
+});

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

@@ -6,25 +6,76 @@ import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
 import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import Blog16Icon from '@atlaskit/icon-object/glyph/blog/16';
+import { injectIntl } from 'react-intl-next';
+import { utilMessages } from './messages';
+
+const Issue16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Issue16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconIssueLabel)
+  });
+};
+
+const Bug16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Bug16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBugLabel)
+  });
+};
+
+const Story16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Story16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconStoryLabel)
+  });
+};
+
+const Task16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Task16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconTaskLabel)
+  });
+};
+
+const Page16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Page16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconPageLabel)
+  });
+};
+
+const Blog16 = props => {
+  const {
+    intl
+  } = props;
+  return /*#__PURE__*/React.createElement(Blog16Icon, {
+    label: intl.formatMessage(utilMessages.hyperlinkIconBlogLabel)
+  });
+};
+
+const IntlIssue16Icon = injectIntl(Issue16);
+const IntlBug16Icon = injectIntl(Bug16);
+const IntlStory16Icon = injectIntl(Story16);
+const IntlTask16Icon = injectIntl(Task16);
+const IntlPage16Icon = injectIntl(Page16);
+const IntlBlog16Icon = injectIntl(Blog16);
 export const mapContentTypeToIcon = {
-  'jira.issue': /*#__PURE__*/React.createElement(Issue16Icon, {
-    label: "Issue"
-  }),
-  'jira.issue.bug': /*#__PURE__*/React.createElement(Bug16Icon, {
-    label: "Bug"
-  }),
-  'jira.issue.story': /*#__PURE__*/React.createElement(Story16Icon, {
-    label: "Story"
-  }),
-  'jira.issue.task': /*#__PURE__*/React.createElement(Task16Icon, {
-    label: "Task"
-  }),
-  'confluence.page': /*#__PURE__*/React.createElement(Page16Icon, {
-    label: "Page"
-  }),
-  'confluence.blogpost': /*#__PURE__*/React.createElement(Blog16Icon, {
-    label: "Blog"
-  })
+  'jira.issue': /*#__PURE__*/React.createElement(IntlIssue16Icon, null),
+  'jira.issue.bug': /*#__PURE__*/React.createElement(IntlBug16Icon, null),
+  'jira.issue.story': /*#__PURE__*/React.createElement(IntlStory16Icon, null),
+  'jira.issue.task': /*#__PURE__*/React.createElement(IntlTask16Icon, null),
+  'confluence.page': /*#__PURE__*/React.createElement(IntlPage16Icon, null),
+  'confluence.blogpost': /*#__PURE__*/React.createElement(IntlBlog16Icon, null)
 };
 export const sha1 = input => {
   return Rusha.createHash().update(input).digest('hex');

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

@@ -67,6 +67,10 @@ export function linkifyContent(schema) {
     const isAllowedInParent = !parent || parent.type !== schema.nodes.codeBlock;
     const link = node.type.schema.marks.link;
 
+    if (link === undefined) {
+      throw new Error('Link not in schema - unable to linkify content');
+    }
+
     if (isAllowedInParent && node.isText && !link.isInSet(node.marks)) {
       const linkified = [];
       const text = node.text;

package/dist/es2019/plugins/image-upload/pm-plugins/main.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isPastedFile } from '../../../utils/clipboard';
 import { isDroppedFile } from '../../../utils/drag-drop';
 import { canInsertMedia, isMediaSelected } from '../utils';
@@ -33,7 +33,7 @@ export const createPlugin = ({
   providerFactory
 }) => {
   let uploadHandler;
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init(_config, state) {
         return {

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/jira-issue/index.js

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { confluenceJiraIssue } from '@atlaskit/adf-schema';
 import { ReactNodeView } from '../../nodeviews';
 import ReactJIRAIssueNode from './nodeviews/jira-issue';
@@ -8,7 +9,7 @@ const createPlugin = ({
   portalProviderAPI,
   eventDispatcher
 }) => {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

package/dist/es2019/plugins/layout/pm-plugins/main.js

@@ -1,4 +1,5 @@
-import { Plugin, TextSelection, Selection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { TextSelection, Selection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { keydownHandler } from 'prosemirror-keymap';
 import { findParentNodeOfType, findSelectedNodeOfType } from 'prosemirror-utils';
@@ -68,7 +69,7 @@ const getInitialPluginState = (options, state) => {
   };
 };
 
-export default (options => new Plugin({
+export default (options => new SafePlugin({
   key: pluginKey,
   state: {
     init: (_, state) => getInitialPluginState(options, state),

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/layout/toolbar.js

@@ -51,7 +51,8 @@ const buildLayoutButton = (intl, item, currentLayout) => ({
   testId: item.title.id,
   title: intl.formatMessage(item.title),
   onClick: setPresetLayout(item.type),
-  selected: !!currentLayout && currentLayout === item.type
+  selected: !!currentLayout && currentLayout === item.type,
+  tabIndex: null
 });
 
 export const layoutToolbarTitle = 'Layout floating controls';
@@ -75,7 +76,8 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onMouseEnter: hoverDecoration(nodeType, true),
       onMouseLeave: hoverDecoration(nodeType, false),
       onFocus: hoverDecoration(nodeType, true),
-      onBlur: hoverDecoration(nodeType, false)
+      onBlur: hoverDecoration(nodeType, false),
+      tabIndex: null
     };
     const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
     return {