@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/esm/plugins/text-formatting/ui/Toolbar/hooks/formatting-icons.js

@@ -10,7 +10,7 @@ import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../../../../plugins/analytics/types/toolbar-button';
 import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
-import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, ToolTipContent } from '../../../../../keymaps';
+import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent } from '../../../../../keymaps';
 import { INPUT_METHOD } from '../../../../analytics/types/enums';
 import { IconTypes } from '../types';
 
@@ -26,10 +26,9 @@ var IconButtons = {
     command: withToolbarInputMethod(commands.toggleStrongWithAnalytics),
     message: toolbarMessages.bold,
     tooltipKeymap: toggleBold,
-    component: function component(_ref) {
-      var label = _ref.label;
+    component: function component() {
       return /*#__PURE__*/React.createElement(BoldIcon, {
-        label: label
+        label: ""
       });
     }
   },
@@ -38,10 +37,9 @@ var IconButtons = {
     command: withToolbarInputMethod(commands.toggleEmWithAnalytics),
     message: toolbarMessages.italic,
     tooltipKeymap: toggleItalic,
-    component: function component(_ref2) {
-      var label = _ref2.label;
+    component: function component() {
       return /*#__PURE__*/React.createElement(ItalicIcon, {
-        label: label
+        label: ""
       });
     }
   },
@@ -62,19 +60,21 @@ var IconButtons = {
   },
   subscript: {
     command: withToolbarInputMethod(commands.toggleSubscriptWithAnalytics),
-    message: toolbarMessages.subscript
+    message: toolbarMessages.subscript,
+    tooltipKeymap: toggleSubscript
   },
   superscript: {
     command: withToolbarInputMethod(commands.toggleSuperscriptWithAnalytics),
-    message: toolbarMessages.superscript
+    message: toolbarMessages.superscript,
+    tooltipKeymap: toggleSuperscript
   }
 };
 
-var getIcon = function getIcon(_ref3) {
-  var iconType = _ref3.iconType,
-      isDisabled = _ref3.isDisabled,
-      isActive = _ref3.isActive,
-      intl = _ref3.intl;
+var getIcon = function getIcon(_ref) {
+  var iconType = _ref.iconType,
+      isDisabled = _ref.isDisabled,
+      isActive = _ref.isActive,
+      intl = _ref.intl;
   var icon = IconButtons[iconType];
   var content = intl.formatMessage(icon.message);
   var tooltipKeymap = icon.tooltipKeymap;
@@ -84,9 +84,7 @@ var getIcon = function getIcon(_ref3) {
     iconMark: iconType,
     key: iconType,
     command: icon.command,
-    iconElement: icon.component ? icon.component({
-      label: content
-    }) : undefined,
+    iconElement: icon.component ? icon.component() : undefined,
     tooltipElement: tooltipKeymap ? /*#__PURE__*/React.createElement(ToolTipContent, {
       description: content,
       keymap: tooltipKeymap
@@ -103,9 +101,9 @@ var getIcon = function getIcon(_ref3) {
 var IconsMarkSchema = (_IconsMarkSchema = {}, _defineProperty(_IconsMarkSchema, IconTypes.strong, 'strong'), _defineProperty(_IconsMarkSchema, IconTypes.em, 'em'), _defineProperty(_IconsMarkSchema, IconTypes.strike, 'strike'), _defineProperty(_IconsMarkSchema, IconTypes.code, 'code'), _defineProperty(_IconsMarkSchema, IconTypes.underline, 'underline'), _defineProperty(_IconsMarkSchema, IconTypes.superscript, 'subsup'), _defineProperty(_IconsMarkSchema, IconTypes.subscript, 'subsup'), _IconsMarkSchema);
 
 var buildMenuIconState = function buildMenuIconState(iconMark) {
-  return function (_ref4) {
-    var schema = _ref4.schema,
-        textFormattingPluginState = _ref4.textFormattingPluginState;
+  return function (_ref2) {
+    var schema = _ref2.schema,
+        textFormattingPluginState = _ref2.textFormattingPluginState;
     var hasPluginState = Boolean(textFormattingPluginState);
     var markSchema = IconsMarkSchema[iconMark];
     var hasSchemaMark = Boolean(schema.marks[markSchema]);
@@ -133,11 +131,11 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
 
 var buildIcon = function buildIcon(iconMark) {
   var getState = buildMenuIconState(iconMark);
-  return function (_ref5) {
-    var schema = _ref5.schema,
-        textFormattingPluginState = _ref5.textFormattingPluginState,
-        intl = _ref5.intl,
-        isToolbarDisabled = _ref5.isToolbarDisabled;
+  return function (_ref3) {
+    var schema = _ref3.schema,
+        textFormattingPluginState = _ref3.textFormattingPluginState,
+        intl = _ref3.intl,
+        isToolbarDisabled = _ref3.isToolbarDisabled;
     var iconState = getState({
       schema: schema,
       textFormattingPluginState: textFormattingPluginState
@@ -175,10 +173,10 @@ var useTextFormattingPluginState = function useTextFormattingPluginState(editorS
   }, [editorState]);
 };
 
-export var useFormattingIcons = function useFormattingIcons(_ref6) {
-  var isToolbarDisabled = _ref6.isToolbarDisabled,
-      editorState = _ref6.editorState,
-      intl = _ref6.intl;
+export var useFormattingIcons = function useFormattingIcons(_ref4) {
+  var isToolbarDisabled = _ref4.isToolbarDisabled,
+      editorState = _ref4.editorState,
+      intl = _ref4.intl;
   var textFormattingPluginState = useTextFormattingPluginState(editorState);
   var schema = editorState.schema;
   var props = {
@@ -199,9 +197,9 @@ export var useFormattingIcons = function useFormattingIcons(_ref6) {
   }, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
   return result;
 };
-export var useHasFormattingActived = function useHasFormattingActived(_ref7) {
-  var editorState = _ref7.editorState,
-      iconTypeList = _ref7.iconTypeList;
+export var useHasFormattingActived = function useHasFormattingActived(_ref5) {
+  var editorState = _ref5.editorState,
+      iconTypeList = _ref5.iconTypeList;
   var textFormattingPluginState = useTextFormattingPluginState(editorState);
   var hasActiveFormatting = useMemo(function () {
     if (!textFormattingPluginState) {

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

@@ -77,7 +77,9 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     label: moreFormattingButtonLabel,
     isReducedSpacing: isReducedSpacing,
     isDisabled: true,
-    isSelected: false
+    isSelected: false,
+    "aria-expanded": undefined,
+    "aria-pressed": undefined
   })) : /*#__PURE__*/React.createElement(FormattingTextDropdownMenu, {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,

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

@@ -1,24 +1,25 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import MoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { TriggerWrapper } from '../../../../ui/styles';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 export var MoreButton = /*#__PURE__*/React.memo(function (_ref) {
   var label = _ref.label,
+      ariaExpanded = _ref['aria-expanded'],
       isReducedSpacing = _ref.isReducedSpacing,
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
       onClick = _ref.onClick;
-  var more = useMemo(function () {
-    return /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
-      label: label
-    }));
-  }, [label]);
   return /*#__PURE__*/React.createElement(ToolbarButton, {
     disabled: isDisabled,
     selected: isSelected,
     onClick: onClick,
     spacing: isReducedSpacing ? 'none' : 'default',
     title: label,
-    iconBefore: more
+    iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, /*#__PURE__*/React.createElement(MoreIcon, {
+      label: ""
+    })),
+    "aria-expanded": ariaExpanded,
+    "aria-label": label,
+    "aria-haspopup": true
   });
 });

package/dist/esm/plugins/text-formatting/ui/Toolbar/single-toolbar-buttons.js

@@ -22,7 +22,9 @@ export var SingleToolbarButtons = /*#__PURE__*/React.memo(function (_ref) {
       selected: item.isActive,
       disabled: item.isDisabled,
       title: item.tooltipElement,
-      iconBefore: item.iconElement
+      iconBefore: item.iconElement,
+      "aria-pressed": item.isActive,
+      "aria-label": String(item.content)
     });
   }));
 });

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

@@ -1,4 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
 import React from 'react';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 import { createPlugin } from './pm-plugins/main';
@@ -91,6 +100,14 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
     isEmptyQuery: !query
   });
 });
+/**
+ *
+ * Revamped typeahead using decorations instead of the `typeAheadQuery` mark
+ *
+ * https://product-fabric.atlassian.net/wiki/spaces/E/pages/2992177582/Technical+TypeAhead+Data+Flow
+ *
+ *
+ */
 
 var typeAheadPlugin = function typeAheadPlugin(options) {
   var fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);

package/dist/esm/plugins/type-ahead/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var typeAheadListMessages = defineMessages({
+  typeAheadResultLabel: {
+    id: 'fabric.editor.typeAheadResultLabel',
+    defaultMessage: 'TypeAhead results',
+    description: 'the result of a typehead, similar to autocomplete results+'
+  }
+});

package/dist/esm/plugins/type-ahead/pm-plugins/insert-item-plugin.js

@@ -1,8 +1,8 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { ACTIONS } from './actions';
 import { isInsertionTransaction } from './utils';
 export function createPlugin() {
-  return new Plugin({
+  return new SafePlugin({
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       var insertItemCallback = isInsertionTransaction(transactions, ACTIONS.INSERT_ITEM);
 

package/dist/esm/plugins/type-ahead/pm-plugins/main.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from 'prosemirror-view';
 import { InsertTypeAheadStep } from '@atlaskit/adf-schema/steps';
 import { TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE } from '../constants';
@@ -9,16 +9,17 @@ import { createReducer } from './reducer';
 import { factoryDecorations } from './decorations';
 import { isInsertionTransaction } from './utils';
 
-var hasTypeAheadStep = function hasTypeAheadStep(tr) {
-  var step = tr.steps.find(function (step) {
+var hasValidTypeAheadStep = function hasValidTypeAheadStep(tr) {
+  var steps = tr.steps.filter(function (step) {
     return step instanceof InsertTypeAheadStep;
-  });
+  }); // There are some cases, like collab rebase, where the steps are re-applied
+  // We should not re open the type-ahead for those cases
 
-  if (!step) {
-    return null;
+  if (steps.length === 1) {
+    return steps[0];
   }
 
-  return step;
+  return null;
 };
 
 export function createPlugin(_ref) {
@@ -43,7 +44,7 @@ export function createPlugin(_ref) {
     typeAheadHandlers: typeAheadHandlers,
     popupMountRef: popupMountRef
   });
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {
@@ -59,7 +60,7 @@ export function createPlugin(_ref) {
         };
       },
       apply: function apply(tr, currentPluginState, oldEditorState, state) {
-        var customStep = hasTypeAheadStep(tr);
+        var customStep = hasValidTypeAheadStep(tr);
         var nextPluginState = reducer(tr, currentPluginState, customStep);
 
         if (currentPluginState !== nextPluginState) {

package/dist/esm/plugins/type-ahead/ui/InputQuery.js

@@ -5,7 +5,7 @@ var _templateObject;
 import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
-import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { CloseSelectionOptions } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 var QuerySpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n"])));
@@ -45,7 +45,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       onUndoRedo = _ref.onUndoRedo;
   var ref = useRef(document.createElement('span'));
   var cleanedInputContent = useCallback(function () {
-    var raw = ref.current.textContent || '';
+    var _ref$current;
+
+    var raw = ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent) || '';
     return raw.replace(ZERO_WIDTH_SPACE, '');
   }, []);
   var onKeyUp = useCallback(function (event) {
@@ -53,9 +55,11 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     onQueryChange(text);
   }, [onQueryChange, cleanedInputContent]);
   var checkKeyEvent = useCallback(function (event) {
+    var _ref$current2;
+
     var key = keyNameNormalized(event);
     var sel = document.getSelection();
-    var raw = ref.current.textContent || '';
+    var raw = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.textContent) || '';
     var text = cleanedInputContent();
     var stopDefault = false;
 
@@ -127,10 +131,12 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
     }
   }, [onUndoRedo, onItemSelect, selectNextItem, cancel, selectPreviousItem, cleanedInputContent]);
   var onClick = useCallback(function (event) {
+    var _ref$current3;
+
     event.stopPropagation();
     event.preventDefault();
     onQueryFocus();
-    ref.current.focus();
+    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
     return false;
   }, [onQueryFocus]);
   useEffect(function () {
@@ -148,7 +154,9 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
       var key = keyNameNormalized(event);
 
       if (['ArrowLeft', 'ArrowRight'].includes(key) && document.getSelection && document.getSelection()) {
-        var q = ref.current.textContent || '';
+        var _ref$current4;
+
+        var q = ((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.textContent) || '';
         var sel = document.getSelection();
         var isMovingRight = sel && 'ArrowRight' === key && sel.anchorOffset === q.length;
         var isMovingLeft = sel && 'ArrowLeft' === key && sel.anchorOffset === 0;

package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -10,6 +10,8 @@ import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
+import { injectIntl } from 'react-intl-next';
+import { typeAheadListMessages } from '../messages';
 var ITEM_PADDING = 12;
 var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 var LIST_MAX_HEIGHT = 380;
@@ -53,11 +55,12 @@ var itemTheme = _defineProperty({}, itemThemeNamespace, {
   }
 });
 
-export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
+var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
       selectedIndex = _ref.selectedIndex,
       onItemHover = _ref.onItemHover,
-      onItemClick = _ref.onItemClick;
+      onItemClick = _ref.onItemClick,
+      intl = _ref.intl;
   var listRef = useRef();
   var redrawListAtIndex = useCallback(function (index) {
     listRef.current.resetAfterIndex(index);
@@ -144,7 +147,7 @@ export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
   }, /*#__PURE__*/React.createElement(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
-    "aria-label": "TypeAhead results",
+    "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
     "aria-relevant": "additions removals"
   }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
@@ -166,4 +169,5 @@ export var TypeAheadList = /*#__PURE__*/React.memo(function (_ref) {
     overscanCount: 3
   }, DynamicHeightListItem)))))));
 });
+export var TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -5,7 +5,7 @@ var _templateObject;
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';

package/dist/esm/plugins/type-ahead/ui/hooks/use-resize-observer.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useEffect, useContext, useLayoutEffect, createContext } from 'react';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 var Context = /*#__PURE__*/createContext(null);
 export var ResizeObserverContext = Context;
 export var ResizeObserverProvider = /*#__PURE__*/React.memo(function (_ref) {

package/dist/esm/plugins/undo-redo/pm-plugins/main.js

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

package/dist/esm/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -88,12 +88,13 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
         spacing: isReducedSpacing ? 'none' : 'default',
         onClick: handleUndo,
         disabled: !canUndo || disabled,
+        "aria-label": labelUndo,
         title: /*#__PURE__*/React.createElement(ToolTipContent, {
           description: labelUndo,
           keymap: undoKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(UndoIcon, {
-          label: labelUndo
+          label: ""
         }),
         testId: "ak-editor-toolbar-button-undo"
       }), /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -106,9 +107,10 @@ export var ToolbarUndoRedo = /*#__PURE__*/function (_PureComponent) {
           keymap: redoKeymap
         }),
         iconBefore: /*#__PURE__*/React.createElement(RedoIcon, {
-          label: labelRedo
+          label: ""
         }),
-        testId: "ak-editor-toolbar-button-redo"
+        testId: "ak-editor-toolbar-button-redo",
+        "aria-label": labelRedo
       }), /*#__PURE__*/React.createElement(Separator, null));
     }
   }]);

package/dist/esm/plugins/unsupported-content/index.js

@@ -1,6 +1,7 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { confluenceUnsupportedBlock, confluenceUnsupportedInline, unsupportedBlock, unsupportedInline, unsupportedMark, unsupportedNodeAttribute } from '@atlaskit/adf-schema';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { ReactNodeView } from '../../nodeviews';
 export var pluginKey = new PluginKey('unsupportedContentPlugin');
 
@@ -9,7 +10,7 @@ var createPlugin = function createPlugin(_ref) {
       eventDispatcher = _ref.eventDispatcher,
       dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var hasIntlContext = true;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

package/dist/esm/plugins/view-update-subscription/index.js

@@ -2,7 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export var trackerStore = new WeakMap();
 
 var Tracker = /*#__PURE__*/_createClass(function Tracker() {
@@ -43,7 +44,7 @@ var createViewUpdateSubscriptionPlugin = function createViewUpdateSubscriptionPl
     name: 'viewUpdateSubscription',
     pmPlugins: function pmPlugins() {
       var createPlugin = function createPlugin() {
-        return new Plugin({
+        return new SafePlugin({
           key: pluginKey,
           view: function view(editorView) {
             tracker = trackerStore.get(editorView);

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

@@ -4,10 +4,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 { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export var pluginKey = new PluginKey('widthPlugin');
 export function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

package/dist/esm/profiler/render-count.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
 import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
-import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common';
+import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export var ProfiledComponentIds;
 
 (function (ProfiledComponentIds) {

package/dist/esm/ui/Addon/ClickAreaMobile/index.js

@@ -23,7 +23,7 @@ import { clickAreaClickHandler } from '../click-area-helper';
  */
 
 var ClickWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  ", "\n"])), function (props) {
-  return props.persistScrollGutter !== true && "min-height: ".concat(props.minHeight, "vh");
+  return props.isExpanded && props.minHeight && "min-height: ".concat(props.minHeight, "px");
 });
 ClickWrapper.displayName = 'ClickWrapper';
 
@@ -90,7 +90,8 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
         minHeight: this.props.minHeight,
         persistScrollGutter: this.props.persistScrollGutter,
         onClick: this.handleClick,
-        innerRef: this.clickElementRef
+        innerRef: this.clickElementRef,
+        isExpanded: this.props.isExpanded
       }, this.props.children);
     }
   }]);

package/dist/esm/ui/Alignment/AlignmentButton/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import ToolbarButton from '../../ToolbarButton';
+import { ToolTipContent } from '../../../keymaps';
 
 var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
   _inherits(AlignmentButton, _PureComponent);
@@ -47,12 +48,17 @@ var AlignmentButton = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
           label = _this$props2.label,
           isSelected = _this$props2.isSelected,
-          content = _this$props2.content;
+          content = _this$props2.content,
+          shortcut = _this$props2.shortcut;
       return /*#__PURE__*/React.createElement(ToolbarButton, {
         disabled: false,
         selected: isSelected,
-        title: label,
+        title: /*#__PURE__*/React.createElement(ToolTipContent, {
+          description: label,
+          keymap: shortcut
+        }),
         "aria-label": label,
+        "aria-pressed": isSelected,
         onClick: this.onClick,
         iconBefore: content
       });

package/dist/esm/ui/Alignment/index.js

@@ -11,18 +11,21 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { iconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
+import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
 import { AlignmentWrapper } from './styles';
+import { alignLeft, alignRight } from '../../keymaps';
 var alignmentOptions = [{
   title: alignmentMessages.alignLeft,
+  shortcut: alignLeft,
   value: 'start'
 }, {
   title: alignmentMessages.alignCenter,
   value: 'center'
 }, {
   title: alignmentMessages.alignRight,
+  shortcut: alignRight,
   value: 'end'
 }];
 
@@ -52,13 +55,17 @@ var Alignment = /*#__PURE__*/function (_PureComponent) {
         }
       }, alignmentOptions.map(function (alignment) {
         var value = alignment.value,
-            title = alignment.title;
+            title = alignment.title,
+            shortcut = alignment.shortcut;
         var message = intl.formatMessage(title);
         return /*#__PURE__*/React.createElement(AlignmentButton, {
-          content: iconMap[value],
+          content: /*#__PURE__*/React.createElement(IconMap, {
+            alignment: value
+          }),
           key: value,
           value: value,
           label: message,
+          shortcut: shortcut,
           onClick: onClick,
           isSelected: value === selectedAlignment
         });

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -28,7 +28,7 @@ import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/pl
 import { ClickAreaBlock } from '../../Addon';
 import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
 import WithFlash from '../../WithFlash';
-import { WidthConsumer } from '@atlaskit/editor-common';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
 import { GRID_GUTTER } from '../../../plugins/grid';

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -78,7 +78,7 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     }));
 
     _defineProperty(_assertThisInitialized(_this), "handleResize", function () {
-      _this.scheduledKeylineUpdate = _this.updateToolbarKeyline();
+      _this.updateToolbarKeyline();
     });
 
     return _this;
@@ -93,10 +93,7 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.removeEventListener('resize', this.handleResize);
-
-      if (this.scheduledKeylineUpdate) {
-        cancelAnimationFrame(this.scheduledKeylineUpdate);
-      }
+      this.updateToolbarKeyline.cancel();
     }
   }, {
     key: "render",