@atlaskit/editor-core 187.8.3 → 187.8.7

package/dist/cjs/utils/commands.js

@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.deleteEmptyParagraphAndMoveBlockUp = exports.applyMarkOnRange = void 0;
+exports.deleteEmptyParagraphAndMoveBlockUp = void 0;
 exports.findCutBefore = findCutBefore;
-exports.withScrollIntoView = exports.walkPrevNode = exports.walkNextNode = exports.toggleMark = exports.selectNode = exports.isNthParentOfType = exports.isFirstChildOfParent = exports.isEmptySelectionAtStart = exports.isEmptySelectionAtEnd = exports.insertContentDeleteRange = void 0;
+exports.withScrollIntoView = exports.walkPrevNode = exports.walkNextNode = exports.selectNode = exports.isNthParentOfType = exports.isFirstChildOfParent = exports.isEmptySelectionAtStart = exports.isEmptySelectionAtEnd = exports.insertContentDeleteRange = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
-var _transformToCode = require("../plugins/text-formatting/commands/transform-to-code");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var isEmptySelectionAtStart = function isEmptySelectionAtStart(state) {
@@ -73,117 +71,6 @@ function findCutBefore($pos) {
   }
   return null;
 }
-var applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr) {
-  var schema = tr.doc.type.schema;
-  var code = schema.marks.code;
-  if (mark.type === code) {
-    (0, _transformToCode.transformSmartCharsMentionsAndEmojis)(from, to, tr);
-  }
-  tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), function (node, pos) {
-    if (!node.isText) {
-      return true;
-    }
-
-    // This is an issue when the user selects some text.
-    // We need to check if the current node position is less than the range selection from.
-    // If it’s true, that means we should apply the mark using the range selection,
-    // not the current node position.
-    var nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
-    var nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
-    if (removeMark) {
-      tr.removeMark(nodeBetweenFrom, nodeBetweenTo, mark);
-    } else {
-      tr.addMark(nodeBetweenFrom, nodeBetweenTo, mark);
-    }
-    return true;
-  });
-  return tr;
-};
-exports.applyMarkOnRange = applyMarkOnRange;
-var entireSelectionContainsMark = function entireSelectionContainsMark(mark, doc, fromPos, toPos) {
-  var onlyContainsMark = true;
-  doc.nodesBetween(fromPos, toPos, function (node) {
-    // Skip recursion once we've found text which doesn't include the mark
-    if (!onlyContainsMark) {
-      return false;
-    }
-    if (node.isText) {
-      onlyContainsMark && (onlyContainsMark = mark.isInSet(node.marks));
-    }
-  });
-  return onlyContainsMark;
-};
-var toggleMarkInRange = function toggleMarkInRange(mark) {
-  return function (state, dispatch) {
-    var tr = state.tr;
-    if (state.selection instanceof _cellSelection.CellSelection) {
-      var removeMark = true;
-      var cells = [];
-      state.selection.forEachCell(function (cell, cellPos) {
-        cells.push({
-          node: cell,
-          pos: cellPos
-        });
-        var from = cellPos;
-        var to = cellPos + cell.nodeSize;
-        removeMark && (removeMark = entireSelectionContainsMark(mark, state.doc, from, to));
-      });
-      for (var i = cells.length - 1; i >= 0; i--) {
-        var cell = cells[i];
-        var from = cell.pos;
-        var to = from + cell.node.nodeSize;
-        applyMarkOnRange(from, to, removeMark, mark, tr);
-      }
-    } else {
-      var _state$selection3 = state.selection,
-        $from = _state$selection3.$from,
-        $to = _state$selection3.$to;
-      // We decide to remove the mark only if the entire selection contains the mark
-      // Examples with *bold* text
-      // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
-      // Scenario 2: Selection contains only bold text -> un-bold entire selection
-      // Scenario 3: Selection contains no bold text -> bold entire selection
-      var _removeMark = entireSelectionContainsMark(mark, state.doc, $from.pos, $to.pos);
-      applyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr);
-    }
-    if (tr.docChanged) {
-      if (dispatch) {
-        dispatch(tr);
-      }
-      return true;
-    }
-    return false;
-  };
-};
-
-/**
- * A wrapper over the default toggleMark, except when we have a selection
- * we only toggle marks on text nodes rather than inline nodes.
- * @param markType
- * @param attrs
- */
-var toggleMark = function toggleMark(markType, attrs) {
-  return function (state, dispatch) {
-    var mark = markType.create(attrs);
-
-    // For cursor selections we can use the default behaviour.
-    if (state.selection instanceof _state.TextSelection && state.selection.$cursor) {
-      var tr = state.tr;
-      if (mark.isInSet(state.storedMarks || state.selection.$cursor.marks())) {
-        tr.removeStoredMark(mark);
-      } else {
-        tr.addStoredMark(mark);
-      }
-      if (dispatch) {
-        dispatch(tr);
-        return true;
-      }
-      return false;
-    }
-    return toggleMarkInRange(mark)(state, dispatch);
-  };
-};
-exports.toggleMark = toggleMark;
 var withScrollIntoView = function withScrollIntoView(command) {
   return function (state, dispatch, view) {
     return command(state, function (tr) {
@@ -280,12 +167,12 @@ var selectNode = function selectNode(pos) {
 exports.selectNode = selectNode;
 var deleteEmptyParagraphAndMoveBlockUp = function deleteEmptyParagraphAndMoveBlockUp(canNextNodeMoveUp) {
   return function (state, dispatch, view) {
-    var _state$selection4 = state.selection,
-      _state$selection4$$fr = _state$selection4.$from,
-      pos = _state$selection4$$fr.pos,
-      parent = _state$selection4$$fr.parent,
-      $head = _state$selection4.$head,
-      empty = _state$selection4.empty,
+    var _state$selection3 = state.selection,
+      _state$selection3$$fr = _state$selection3.$from,
+      pos = _state$selection3$$fr.pos,
+      parent = _state$selection3$$fr.parent,
+      $head = _state$selection3.$head,
+      empty = _state$selection3.empty,
       tr = state.tr,
       doc = state.doc;
     var _walkNextNode = walkNextNode($head),

package/dist/cjs/utils/index.js

@@ -16,7 +16,6 @@ exports.canMoveUp = canMoveUp;
 exports.checkNodeDown = checkNodeDown;
 exports.compose = compose;
 exports.dedupe = dedupe;
-exports.filterChildrenBetween = filterChildrenBetween;
 Object.defineProperty(exports, "findFarthestParentNode", {
   enumerable: true,
   get: function get() {
@@ -436,18 +435,6 @@ var isInsideBlockQuote = function isInsideBlockQuote(state) {
   return (0, _utils.hasParentNodeOfType)(blockquote)(state.selection);
 };
 exports.isInsideBlockQuote = isInsideBlockQuote;
-function filterChildrenBetween(doc, from, to, predicate) {
-  var results = [];
-  doc.nodesBetween(from, to, function (node, pos, parent) {
-    if (predicate(node, pos, parent)) {
-      results.push({
-        node: node,
-        pos: pos
-      });
-    }
-  });
-  return results;
-}
 function dedupe() {
   var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var iteratee = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (p) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.8.3";
+var version = "187.8.7";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.8.3",
+	"version": "187.8.7",
 	"sideEffects": false
 }

package/dist/es2019/create-editor/ReactEditorViewInternal.js

@@ -4,10 +4,9 @@ import PropTypes from 'prop-types';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { editorMessages } from './messages';
-import { browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, startMeasure, stopMeasure, shouldForceTracking, processRawValue, analyticsEventKey } from '@atlaskit/editor-common/utils';
 import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
-import { processRawValue } from '@atlaskit/editor-common/utils';
 import { freezeUnsafeTransactionProperties } from '../utils/performance/safer-transactions';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../utils/nodes';
@@ -19,17 +18,16 @@ import { getDocStructure } from '../utils/document-logger';
 import { isFullPage } from '../utils/is-full-page';
 import measurements from '../utils/performance/measure-enum';
 import { getNodesCount } from '../utils/document';
-import { analyticsEventKey } from '@atlaskit/editor-common/utils';
 import { createSchema } from './create-schema';
 import { PluginPerformanceObserver } from '../utils/performance/plugin-performance-observer';
 import { getParticipantsCount } from '../plugins/collab-edit/get-participants-count';
+import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPDATE_STATE, EVENT_NAME_VIEW_STATE_UPDATED, EVENT_NAME_ON_CHANGE, TransactionTracker } from '../utils/performance/track-transactions';
 import { countNodes } from '../utils/count-nodes';
-import { TransactionTracker } from '../utils/performance/track-transactions';
-import { EVENT_NAME_DISPATCH_TRANSACTION, EVENT_NAME_STATE_APPLY, EVENT_NAME_UPDATE_STATE, EVENT_NAME_VIEW_STATE_UPDATED, EVENT_NAME_ON_CHANGE } from '../utils/performance/track-transactions';
 import { PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD, DEFAULT_SAMPLING_RATE_VALID_TRANSACTIONS } from './consts';
 import { getContextIdentifier } from '../plugins/base/pm-plugins/context-identifier';
 import ReactEditorViewContext from './ReactEditorViewContext';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
+import { EDIT_AREA_ID } from '@atlaskit/editor-common/ui';
 function handleEditorFocus(view) {
   if (view.hasFocus()) {
     return;
@@ -67,7 +65,6 @@ function handleEditorFocus(view) {
     view.focus();
   }, 0);
 }
-export const EDIT_AREA_ID = 'ak-editor-textarea';
 export class ReactEditorView extends React.Component {
   get transactionTracking() {
     var _this$props$editorPro, _this$props$editorPro2;

package/dist/es2019/plugins/annotation/commands/transform.js

@@ -3,7 +3,7 @@ import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addAnalytics } from '../../analytics/utils';
 import { getSelectionPositions, getPluginState, getDraftCommandAnalyticsPayload } from '../utils';
-import { applyMarkOnRange } from '../../../utils/commands';
+import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
 const addAnnotationMark = id => (transaction, state) => {
   const inlineCommentState = getPluginState(state);
   const {

package/dist/es2019/plugins/block-type/commands/block-type.js

@@ -6,7 +6,7 @@ import { shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/
 import { withAnalytics as withAnalyticsDeprecated } from '../../analytics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
-import { filterChildrenBetween } from '../../../utils';
+import { filterChildrenBetween } from '@atlaskit/editor-common/mark';
 import { PanelType } from '@atlaskit/adf-schema';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { transformToCodeBlockAction } from './transform-to-code-block';

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import DropdownMenu from '../../../../ui/DropdownMenu';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';

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

@@ -1,9 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
+import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Component } from 'react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { themed } from '@atlaskit/theme/components';
@@ -11,7 +10,7 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import { DN70 } from '@atlaskit/theme/colors';
 import { compareArrays, shallowEqual } from '../utils';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, Announcer } from '@atlaskit/editor-common/ui';
 import Dropdown from './Dropdown';
 import Select from './Select';
 import Separator from './Separator';
@@ -20,12 +19,11 @@ import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import ColorPickerButton from '../../../ui/ColorPickerButton';
 import { backgroundPaletteTooltipMessages } from '../../../ui/ColorPalette';
 import { EmojiPickerButton } from './EmojiPickerButton';
-import { Announcer } from '@atlaskit/editor-common/ui';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
 import ScrollButtons from './ScrollButtons';
-import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import DropdownMenu from '../../../../ui/DropdownMenu';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { DropDownButton } from './dropdown-button';
 export const BlockInsertMenuLegacy = props => {
   const {

package/dist/es2019/plugins/text-color/commands/toggle-color.js

@@ -1,4 +1,4 @@
-import { toggleMark } from '../../../utils/commands';
+import { toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { getDisabledState } from '../utils/disabled';
 export const toggleColor = color => (state, dispatch) => {

package/dist/es2019/plugins/text-formatting/commands/text-formatting.js

@@ -1,5 +1,5 @@
 import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { applyMarkOnRange, toggleMark } from '../../../utils/commands';
+import { applyMarkOnRange, toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { hasCode, markActive } from '../utils';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';

package/dist/es2019/plugins/text-formatting/commands/transform-to-code.js

@@ -1,4 +1,4 @@
-import { filterChildrenBetween } from '../../../utils';
+import { filterChildrenBetween } from '@atlaskit/editor-common/mark';
 const SMART_TO_ASCII = {
   '…': '...',
   '→': '->',

package/dist/es2019/plugins/text-formatting/pm-plugins/clear-formatting.js

@@ -1,8 +1,8 @@
-import * as safePlugin from '@atlaskit/editor-common/safe-plugin';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { checkFormattingIsPresent } from '../utils';
 export const pluginKey = new PluginKey('clearFormattingPlugin');
-export const plugin = dispatch => new safePlugin.SafePlugin({
+export const plugin = dispatch => new SafePlugin({
   state: {
     init(_config, state) {
       return {

package/dist/es2019/plugins/text-formatting/pm-plugins/input-rule.js

@@ -1,7 +1,7 @@
 import { ruleWithAnalytics } from '../../../utils/input-rules';
 import { createRule, createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { transformSmartCharsMentionsAndEmojis } from '../commands/transform-to-code';
+import { transformSmartCharsMentionsAndEmojis } from '@atlaskit/editor-common/mark';
 var ValidAutoformatChars = /*#__PURE__*/function (ValidAutoformatChars) {
   ValidAutoformatChars["STRONG"] = "__";
   ValidAutoformatChars["STRIKE"] = "~~";

package/dist/es2019/plugins/text-formatting/pm-plugins/main.js

@@ -1,9 +1,10 @@
+// TODO: Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
+// import { toggleMark } from '@atlaskit/editor-common/mark';
 import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { shallowEqual } from '@atlaskit/editor-common/utils';
 import { createInlineCodeFromTextInputWithAnalytics } from '../commands/text-formatting';
-// eslint-disable-next-line no-duplicate-imports
 import * as commands from '../commands/text-formatting';
 import { anyMarkActive } from '../utils';
 import { pluginKey } from './plugin-key';

package/dist/es2019/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import DropdownMenu from '../../../../ui/DropdownMenu';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { useMenuState } from './hooks/menu-state';
 import { MoreButton } from './more-button';
 export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({

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

@@ -8,9 +8,8 @@ import { toolbarMessages } from '../toolbar-messages';
 import * as commands from '../../../commands/text-formatting';
 import { TOOLBAR_ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
-import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent } from '../../../../../keymaps';
+import { toggleCode, toggleStrikethrough, toggleUnderline, tooltip, toggleBold, toggleItalic, toggleSubscript, toggleSuperscript, ToolTipContent, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 import { IconTypes } from '../types';
-import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 const withToolbarInputMethod = func => func({
   inputMethod: INPUT_METHOD.TOOLBAR
 });

package/dist/es2019/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl-next';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import BulletListIcon from '@atlaskit/icon/glyph/editor/bullet-list';
 import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, indent as toggleIndentKeymap, outdent as toggleOutdentKeymap, tooltip } from '../../../keymaps';
-import DropdownMenu from '../../../ui/DropdownMenu';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import ToolbarButton from '../../../ui/ToolbarButton';
 import { expandIconWrapperStyle, shortcutStyle } from '../../../ui/styles';
 import { wrapperStyle, separatorStyles } from '@atlaskit/editor-common/styles';

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

@@ -22,15 +22,15 @@ import { injectIntl } from 'react-intl-next';
 import messages from '../../../messages';
 import { TableControlsPadding, MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
 import { createEditorContentStyle } from '../../ContentStyles';
-import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 const CommentEditorMargin = 14;
-const CommentEditorSmallerMargin = 8;
 const commentEditorStyle = css`
   display: flex;
   flex-direction: column;
 
   .less-margin .ProseMirror {
-    margin: 12px ${CommentEditorSmallerMargin}px ${CommentEditorSmallerMargin}px;
+    margin: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"}
+      ${"var(--ds-space-100, 8px)"};
   }
 
   min-width: 272px;
@@ -55,7 +55,8 @@ const ContentArea = createEditorContentStyle(css`
   /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/
   /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/
   .ProseMirror {
-    margin: 12px ${CommentEditorMargin}px ${CommentEditorMargin}px;
+    margin: ${"var(--ds-space-150, 12px)"} ${CommentEditorMargin}px
+      ${CommentEditorMargin}px;
   }
 
   .gridParent {
@@ -74,7 +75,7 @@ const secondaryToolbarStyle = css`
   justify-content: flex-end;
   align-items: center;
   display: flex;
-  padding: 12px 1px;
+  padding: ${"var(--ds-space-150, 12px)"} 1px;
 `;
 class Editor extends React.Component {
   constructor(props) {

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
@@ -12,7 +13,7 @@ const mainToolbarWrapperStyle = css`
   height: auto;
   background-color: ${"var(--ds-surface, white)"};
   box-shadow: none;
-  padding-left: ${TableControlsPadding}px;
+  padding-left: ${"var(--ds-space-250, 20px)"};
 
   & > div {
     > :first-child:not(style),
@@ -106,7 +107,7 @@ export const mainToolbarCustomComponentsSlotStyle = css`
   justify-content: flex-end;
   align-items: center;
   flex-grow: 1;
-  padding-right: ${TableControlsPadding}px;
+  padding-right: ${"var(--ds-space-250, 20px)"};
   > div {
     display: flex;
     flex-shrink: 0;

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,14 +1,13 @@
 /** @jsx jsx */
 import { jsx, useTheme } from '@emotion/react';
-import { WidthConsumer } from '@atlaskit/editor-common/ui';
-import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
+import { WidthConsumer, ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import React, { useImperativeHandle, useRef } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
-import messages from './messages';
+import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   const theme = useTheme();

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -9,8 +9,8 @@ import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryTool
 import Toolbar from '../../Toolbar';
 import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import messages from './messages';
-import { ToolbarArrowKeyNavigationProvider } from '../../ToolbarArrowKeyNavigationProvider';
+import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags5, _props$featureFlags6;
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);

package/dist/es2019/ui/Dropdown/index.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Dropdown as DropdownComponent } from '@atlaskit/editor-common/ui-menu';
+import { Dropdown as DropdownComponent, KeyDownHandlerContext } from '@atlaskit/editor-common/ui-menu';
 import React, { useContext } from 'react';
-import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
 const Dropdown = /*#__PURE__*/React.memo(({
   ...props
 }) => {

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below

package/dist/es2019/ui/styles.js

@@ -22,9 +22,4 @@ export const buttonContentReducedSpacingStyle = css`
 `;
 export const clickSelectWrapperStyle = css`
   user-select: all;
-`;
-export const centeredToolbarContainer = css`
-  display: flex;
-  width: 100%;
-  align-items: center;
 `;