@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/esm/plugins/find-replace/ui/Find.js

@@ -76,6 +76,19 @@ var Find = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "isComposing", false);
 
+    _defineProperty(_assertThisInitialized(_this), "syncFindText", function () {
+      var _this$state;
+
+      // If the external prop findText changes and we aren't in a composition we should update to
+      // use the external prop value.
+      //
+      // An example of where this may happen is when a find occurs through the user selecting some text
+      // and pressing Mod-f.
+      if (!_this.isComposing && _this.props.findText !== ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.localFindText)) {
+        _this.updateFindValue(_this.props.findText || '');
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "skipWhileComposing", function (fn) {
       if (_this.isComposing) {
         return;
@@ -188,7 +201,7 @@ var Find = /*#__PURE__*/function (_React$Component) {
     // occur to this value which do not originate from this component.
 
     _this.state = {
-      localFindText: _this.props.findText || ''
+      localFindText: ''
     };
     return _this;
   }
@@ -198,21 +211,13 @@ var Find = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       this.props.onFindTextfieldRefSet(this.findTextfieldRef);
       this.focusFindTextfield();
+      this.syncFindText();
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      this.focusFindTextfield(); // If the external prop findText changes and we aren't in a composition we should update to the
-      // use the external prop value.
-      //
-      // An example of where this may happen is when a find occurs through the user selecting some text
-      // and pressing Mod-f.
-
-      if (!this.isComposing && this.props.findText !== this.state.localFindText) {
-        this.setState({
-          localFindText: this.props.findText || ''
-        });
-      }
+      this.focusFindTextfield();
+      this.syncFindText();
     }
   }, {
     key: "render",

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

@@ -132,7 +132,9 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           iconBefore: /*#__PURE__*/React.createElement(EditorSearchIcon, {
             label: title
           }),
-          onClick: this.toggleOpen
+          onClick: this.toggleOpen,
+          "aria-expanded": isActive,
+          "aria-haspopup": true
         })
       }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FindReplace, _extends({
         findText: findText,

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

@@ -5,10 +5,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import { Plugin, PluginKey, AllSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey, AllSelection } from 'prosemirror-state';
 import { findDomRefAtPos, findSelectedNodeOfType } from 'prosemirror-utils';
 import camelCase from 'lodash/camelCase';
-import { Popup } from '@atlaskit/editor-common'; // AFP-2532 TODO: Fix automatic suppressions below
+import { Popup } from '@atlaskit/editor-common/ui'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import WithPluginState from '../../ui/WithPluginState';
@@ -318,7 +319,7 @@ function floatingToolbarPluginFactory(options) {
     return newPluginState;
   };
 
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

package/dist/esm/plugins/floating-toolbar/pm-plugins/toolbar-data/plugin.js

@@ -1,8 +1,8 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-factory';
 export var createPlugin = function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, {}),
     key: pluginKey
   });

package/dist/esm/plugins/floating-toolbar/ui/Button.js

@@ -30,7 +30,9 @@ export default (function (_ref) {
       tooltipContent = _ref.tooltipContent,
       testId = _ref.testId,
       _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
-      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli;
+      hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
+      ariaHasPopup = _ref.ariaHasPopup,
+      tabIndex = _ref.tabIndex;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
@@ -57,11 +59,12 @@ export default (function (_ref) {
       }, rest);
     },
     "aria-label": title,
+    "aria-pressed": selected,
     spacing: 'compact',
     href: href,
     target: target,
     appearance: appearance,
-    "aria-haspopup": true,
+    "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
     onClick: onClick,
@@ -69,6 +72,11 @@ export default (function (_ref) {
     isDisabled: disabled,
     testId: testId,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur // @ts-ignore
+    // tabIndex set as 0 by default in the design system  ButtonBase component
+    // this is not expected for all buttons, we have to use tabIndex={null} for some cases
+    // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
+    ,
+    tabIndex: tabIndex
   }, children)));
 });

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

@@ -21,6 +21,8 @@ import { B400 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atla
 import Item, { itemThemeNamespace } from '@atlaskit/item';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
+import { injectIntl } from 'react-intl-next';
+import messages from './messages';
 export var menuItemDimensions = {
   width: 175,
   height: 32
@@ -66,7 +68,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           hide = _this$props.hide,
           dispatchCommand = _this$props.dispatchCommand,
-          items = _this$props.items;
+          items = _this$props.items,
+          intl = _this$props.intl;
       return /*#__PURE__*/React.createElement(ThemeProvider, {
         theme: _defineProperty({}, itemThemeNamespace, editorItemTheme)
       }, /*#__PURE__*/React.createElement(MenuContainer, null, items.filter(function (item) {
@@ -75,7 +78,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         var itemContent = /*#__PURE__*/React.createElement(Item, {
           key: idx,
           isCompact: true,
-          elemBefore: _this.renderSelected(item),
+          elemBefore: _this.renderSelected(item, intl),
           onClick: function onClick() {
             /**
              * The order of dispatching the event and hide() is important, because
@@ -102,14 +105,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderSelected",
-    value: function renderSelected(item) {
+    value: function renderSelected(item, intl) {
       var selected = item.selected;
 
       if (selected !== undefined) {
         return selected ? /*#__PURE__*/React.createElement(EditorDoneIcon, {
           primaryColor: B400,
           size: "small",
-          label: "test question"
+          label: intl.formatMessage(messages.confirmModalOK)
         }) : /*#__PURE__*/React.createElement(Spacer, null);
       }
 
@@ -120,4 +123,4 @@ var Dropdown = /*#__PURE__*/function (_Component) {
   return Dropdown;
 }(Component);
 
-export { Dropdown as default };
+export default injectIntl(Dropdown);

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

@@ -6,7 +6,8 @@ var _templateObject, _templateObject2;
 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
@@ -36,6 +37,20 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
     props.onChange && props.onChange(emoji);
   };
 
+  var isDetachedElement = function isDetachedElement(el) {
+    return !document.body.contains(el);
+  };
+
+  var handleEmojiClickOutside = function 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();
+    }
+  };
+
   var renderPicker = function renderPicker(providers) {
     if (!providers.emojiProvider) {
       return null;
@@ -45,7 +60,7 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: function onPickerRef() {},
-      handleClickOutside: togglePopup
+      handleClickOutside: handleEmojiClickOutside
     });
   };
 

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

@@ -3,7 +3,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -29,6 +29,9 @@ import Input from './Input';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
 import { EmojiPickerButton } from './EmojiPickerButton';
+import Announcer from '../../../utils/announcer/announcer';
+import { injectIntl } from 'react-intl-next';
+import messages from './messages';
 var akGridSize = gridSize();
 var ToolbarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n  padding: ", "px ", "px;\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n  ", ";\n  & > div {\n    align-items: center;\n  }\n"])), themed({
   light: 'white',
@@ -137,7 +140,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
           editorView = _this$props.editorView,
           node = _this$props.node,
           extensionsProvider = _this$props.extensionsProvider,
-          providerFactory = _this$props.providerFactory;
+          providerFactory = _this$props.providerFactory,
+          intl = _this$props.intl;
 
       if (!items || !items.length) {
         return null;
@@ -146,10 +150,13 @@ var Toolbar = /*#__PURE__*/function (_Component) {
 
       var firstElementIsSelect = items[0].type === 'select';
       return /*#__PURE__*/React.createElement(ToolbarContainer, {
-        "aria-label": "Floating Toolbar",
+        "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
         hasCompactLeftPadding: firstElementIsSelect,
         className: className
-      }, /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(function (item) {
+      }, /*#__PURE__*/React.createElement(Announcer, {
+        text: intl.formatMessage(messages.floatingToolbarAnnouncer),
+        delay: 250
+      }), /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
         switch (item.type) {
@@ -191,7 +198,9 @@ var Toolbar = /*#__PURE__*/function (_Component) {
               disabled: item.disabled,
               tooltipContent: item.tooltipContent,
               testId: item.testId,
-              hideTooltipOnClick: item.hideTooltipOnClick
+              hideTooltipOnClick: item.hideTooltipOnClick,
+              ariaHasPopup: item.ariaHasPopup,
+              tabIndex: item.tabIndex
             }, item.showTitle && item.title);
 
           case 'input':
@@ -272,7 +281,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
                 providerFactory: providerFactory,
                 isSelected: item.selected,
                 onChange: function onChange(selected) {
-                  return dispatchCommand(item.onChange(selected.shortName));
+                  return dispatchCommand(item.onChange(selected));
                 }
               });
             }
@@ -316,4 +325,4 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   return Toolbar;
 }(Component);
 
-export { Toolbar as default };
+export default injectIntl(Toolbar);

package/dist/esm/plugins/floating-toolbar/ui/messages.js

@@ -14,5 +14,15 @@ export default defineMessages({
     id: 'fabric.editor.floatingToolbar.confirmModalCancel',
     defaultMessage: 'Cancel',
     description: 'Cancel button for floating toolbar confirmation modal.'
+  },
+  floatingToolbarAriaLabel: {
+    id: 'fabric.editor.floatingToolbar.floatingToolbarAriaLabel',
+    defaultMessage: 'Floating Toolbar',
+    description: "a floating toolbar's aria label"
+  },
+  floatingToolbarAnnouncer: {
+    id: 'fabric.editor.floatingToolbar.floatingToolbarAnnouncer',
+    defaultMessage: 'Floating toolbar controls have been opened',
+    description: "message that will be announced to screenreaders that the floating toolbar is opened"
   }
 });

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

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

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

@@ -0,0 +1,146 @@
+/**
+ * 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 { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { uuid } from '@atlaskit/adf-schema';
+import { stepAddsOneOf } from '../../../utils/step';
+var pluginKey = new PluginKey('fragmentMarkConsistencyPlugin');
+/**
+ * Traverses a transaction's steps to see if we're inserting a node which supports a fragment mark
+ */
+
+var checkIsAddingSupportedNode = function checkIsAddingSupportedNode(schema, transaction) {
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  return transaction.steps.some(function (step) {
+    return nodesSupportingFragmentMark.some(function (nodeType) {
+      return stepAddsOneOf(step, new Set([nodeType]));
+    });
+  });
+};
+
+var getNodesSupportingFragmentMark = function getNodesSupportingFragmentMark(schema) {
+  var _schema$nodes = schema.nodes,
+      table = _schema$nodes.table,
+      extension = _schema$nodes.extension,
+      bodiedExtension = _schema$nodes.bodiedExtension,
+      inlineExtension = _schema$nodes.inlineExtension;
+  return [table, extension, bodiedExtension, inlineExtension];
+};
+
+var regenerateFragmentIdIfNeeded = function regenerateFragmentIdIfNeeded(_ref) {
+  var transaction = _ref.transaction,
+      schema = _ref.schema,
+      doc = _ref.doc,
+      shouldRegenerateLocalId = _ref.shouldRegenerateLocalId;
+  var fragment = schema.marks.fragment;
+  var nodesSupportingFragmentMark = getNodesSupportingFragmentMark(schema);
+  var transactionChanged = false;
+  doc.descendants(function (node, pos) {
+    var isSupportedNode = nodesSupportingFragmentMark.some(function (supportedNode) {
+      return node.type === supportedNode;
+    });
+
+    if (!isSupportedNode) {
+      // continue traversing
+      return true;
+    }
+
+    var existingFragmentMark = node.marks.find(function (mark) {
+      return 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(function (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: transactionChanged
+  };
+};
+/**
+ * Ensures presence of `fragment` mark on certain node types and the uniqueness of their `localId` attributes
+ */
+
+
+export var createPlugin = function createPlugin(dispatch) {
+  return new SafePlugin({
+    key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var modified = false;
+      var tr = newState.tr;
+      transactions.forEach(function (transaction) {
+        var 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
+
+
+        var uiEvent = transaction.getMeta('uiEvent');
+
+        if (uiEvent === 'cut') {
+          return;
+        }
+        /** Check if we're actually inserting a supported node, otherwise we can ignore this tr */
+
+
+        var isAddingSupportedNode = checkIsAddingSupportedNode(newState.schema, transaction);
+
+        if (!isAddingSupportedNode) {
+          return;
+        }
+
+        var _regenerateFragmentId = regenerateFragmentIdIfNeeded({
+          doc: newState.doc,
+          schema: newState.schema,
+          transaction: tr,
+          shouldRegenerateLocalId: function shouldRegenerateLocalId(localId) {
+            if (fragmentLocalIdsObserved.has(localId)) {
+              return true;
+            }
+
+            fragmentLocalIdsObserved.add(localId);
+            return false;
+          }
+        }),
+            transactionChanged = _regenerateFragmentId.transactionChanged;
+
+        if (transactionChanged) {
+          modified = true;
+        }
+      });
+
+      if (modified) {
+        return tr;
+      }
+
+      return;
+    }
+  });
+};

package/dist/esm/plugins/help-dialog/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React from 'react';
 import { keymap } from 'prosemirror-keymap';
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import * as keymaps from '../../keymaps';
 import { openHelp, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
@@ -18,7 +18,7 @@ import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openHelpCommand } from './commands';
 import { pluginKey } from './plugin-key';
 export function createPlugin(dispatch, imageEnabled) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 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';
@@ -25,6 +25,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';
 var messages = defineMessages({
@@ -105,6 +106,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "~~", /*#__PURE__*/React.createElement(FormattedMessage, toolbarMessages.strike), "~~"));
     }
+  }, {
+    name: formatMessage(toolbarMessages.subscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSubscript;
+    }
+  }, {
+    name: formatMessage(toolbarMessages.superscript),
+    type: 'subsup',
+    keymap: function keymap() {
+      return keymaps.toggleSuperscript;
+    }
   }, {
     name: formatMessage(blockTypeMessages.heading1),
     type: 'heading',
@@ -249,6 +262,18 @@ export var formatting = function formatting(_ref) {
     autoFormatting: function autoFormatting() {
       return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CodeLg, null, "@"));
     }
+  }, {
+    name: formatMessage(alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignLeft;
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignRight),
+    type: 'alignment',
+    keymap: function keymap() {
+      return keymaps.alignRight;
+    }
   }];
 };
 var shortcutNamesWithoutKeymap = ['emoji', 'mention', 'quickInsert'];
@@ -424,7 +449,8 @@ var HelpDialog = /*#__PURE__*/function (_React$Component) {
       this.formatting = getSupportedFormatting(editorView.state.schema, intl, imageEnabled, quickInsertEnabled);
       return /*#__PURE__*/React.createElement(ModalTransition, null, this.props.isVisible ? /*#__PURE__*/React.createElement(AkModalDialog, {
         width: "large",
-        onClose: this.closeDialog
+        onClose: this.closeDialog,
+        testId: "help-modal-dialog"
       }, /*#__PURE__*/React.createElement(ModalHeader, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(ColumnLeft, null, /*#__PURE__*/React.createElement(Title, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.keyboardShortcuts)), /*#__PURE__*/React.createElement("div", null, this.formatting.filter(function (form) {
         var keymap = form.keymap && form.keymap(_this2.props);
         return keymap && keymap[browser.mac ? 'mac' : 'windows'];

package/dist/esm/plugins/history/index.js

@@ -1,5 +1,6 @@
 import { pluginFactory } from '../../utils/plugin-state-factory';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import reducer from './reducer';
 import { HistoryActionTypes } from './actions';
 import { getPmHistoryPluginState } from './utils';
@@ -25,7 +26,7 @@ var _pluginFactory = pluginFactory(historyPluginKey, reducer),
     getPluginState = _pluginFactory.getPluginState;
 
 var createPlugin = function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, getInitialState),
     key: historyPluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {

package/dist/esm/plugins/hyperlink/Toolbar.js

@@ -77,7 +77,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
           });
           var link = linkMark[0] && linkMark[0].attrs.href;
           var isValidUrl = isSafeUrl(link);
-          var labelOpenLink = formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarCommonMessages.unableToOpenLink);
+          var labelOpenLink = formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarCommonMessages.unableToOpenLink); // TODO: ED-14403 investigate why these are not translating?
+
           var labelUnlink = formatMessage(linkToolbarCommonMessages.unlink);
           var editLink = formatMessage(linkToolbarCommonMessages.editLink);
           var metadata = {
@@ -128,7 +129,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
               title: labelOpenLink,
               icon: OpenIcon,
               className: 'hyperlink-open-link',
-              metadata: metadata
+              metadata: metadata,
+              tabIndex: null
             }, {
               type: 'separator'
             }, {
@@ -137,7 +139,8 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, providerFac
               onClick: removeLink(pos),
               selected: false,
               title: labelUnlink,
-              icon: UnlinkIcon
+              icon: UnlinkIcon,
+              tabIndex: null
             }]
           });
         }

package/dist/esm/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';
@@ -29,7 +29,7 @@ var getInsertLinkToolbarState = function getInsertLinkToolbarState(editorState)
   return undefined;
 };
 
-var fakeCursorToolbarPlugin = new Plugin({
+var fakeCursorToolbarPlugin = new SafePlugin({
   key: fakeCursorForToolbarPluginKey,
   state: {
     init: function init() {