@atlaskit/editor-core 187.8.3 → 187.8.7

package/dist/es2019/utils/commands.js

@@ -1,6 +1,4 @@
 import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { transformSmartCharsMentionsAndEmojis } from '../plugins/text-formatting/commands/transform-to-code';
 import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 const isEmptySelectionAtStart = state => {
@@ -65,116 +63,6 @@ function findCutBefore($pos) {
   }
   return null;
 }
-const applyMarkOnRange = (from, to, removeMark, mark, tr) => {
-  const {
-    schema
-  } = tr.doc.type;
-  const {
-    code
-  } = schema.marks;
-  if (mark.type === code) {
-    transformSmartCharsMentionsAndEmojis(from, to, tr);
-  }
-  tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (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.
-    const nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
-    const 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;
-};
-const entireSelectionContainsMark = (mark, doc, fromPos, toPos) => {
-  let onlyContainsMark = true;
-  doc.nodesBetween(fromPos, toPos, 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;
-};
-const toggleMarkInRange = mark => (state, dispatch) => {
-  const tr = state.tr;
-  if (state.selection instanceof CellSelection) {
-    let removeMark = true;
-    const cells = [];
-    state.selection.forEachCell((cell, cellPos) => {
-      cells.push({
-        node: cell,
-        pos: cellPos
-      });
-      const from = cellPos;
-      const to = cellPos + cell.nodeSize;
-      removeMark && (removeMark = entireSelectionContainsMark(mark, state.doc, from, to));
-    });
-    for (let i = cells.length - 1; i >= 0; i--) {
-      const cell = cells[i];
-      const from = cell.pos;
-      const to = from + cell.node.nodeSize;
-      applyMarkOnRange(from, to, removeMark, mark, tr);
-    }
-  } else {
-    const {
-      $from,
-      $to
-    } = state.selection;
-    // 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
-    const 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
- */
-const toggleMark = (markType, attrs) => (state, dispatch) => {
-  const mark = markType.create(attrs);
-
-  // For cursor selections we can use the default behaviour.
-  if (state.selection instanceof TextSelection && state.selection.$cursor) {
-    const 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);
-};
 const withScrollIntoView = command => (state, dispatch, view) => command(state, tr => {
   tr.scrollIntoView();
   if (dispatch) {
@@ -283,4 +171,4 @@ const deleteEmptyParagraphAndMoveBlockUp = canNextNodeMoveUp => {
     return false;
   };
 };
-export { isEmptySelectionAtStart, isEmptySelectionAtEnd, isFirstChildOfParent, isNthParentOfType, findCutBefore, toggleMark, applyMarkOnRange, withScrollIntoView, walkNextNode, walkPrevNode, insertContentDeleteRange, selectNode, deleteEmptyParagraphAndMoveBlockUp };
+export { isEmptySelectionAtStart, isEmptySelectionAtEnd, isFirstChildOfParent, isNthParentOfType, findCutBefore, withScrollIntoView, walkNextNode, walkPrevNode, insertContentDeleteRange, selectNode, deleteEmptyParagraphAndMoveBlockUp };

package/dist/es2019/utils/index.js

@@ -294,18 +294,6 @@ export const isInsideBlockQuote = state => {
   } = state.schema.nodes;
   return hasParentNodeOfType(blockquote)(state.selection);
 };
-export function filterChildrenBetween(doc, from, to, predicate) {
-  const results = [];
-  doc.nodesBetween(from, to, (node, pos, parent) => {
-    if (predicate(node, pos, parent)) {
-      results.push({
-        node,
-        pos
-      });
-    }
-  });
-  return results;
-}
 export function dedupe(list = [], iteratee = p => p) {
   /**
               .,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.8.3";
+export const version = "187.8.7";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

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

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

@@ -15,10 +15,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';
@@ -30,17 +29,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 as _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;
@@ -78,7 +76,6 @@ function handleEditorFocus(view) {
     view.focus();
   }, 0);
 }
-export var EDIT_AREA_ID = 'ak-editor-textarea';
 export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactEditorView, _React$Component);
   var _super = _createSuper(ReactEditorView);

package/dist/esm/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';
 var addAnnotationMark = function addAnnotationMark(id) {
   return function (transaction, state) {
     var inlineCommentState = getPluginState(state);

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

@@ -9,7 +9,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/esm/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -14,7 +14,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/esm/plugins/floating-toolbar/ui/Toolbar.js

@@ -11,9 +11,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @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';
@@ -21,7 +20,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';
@@ -30,12 +29,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';
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,

package/dist/esm/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 var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
   var items = props.items;

package/dist/esm/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 var toggleColor = function toggleColor(color) {

package/dist/esm/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/esm/plugins/text-formatting/commands/transform-to-code.js

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

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

@@ -1,9 +1,9 @@
-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 var pluginKey = new PluginKey('clearFormattingPlugin');
 export var plugin = function plugin(dispatch) {
-  return new safePlugin.SafePlugin({
+  return new SafePlugin({
     state: {
       init: function init(_config, state) {
         return {

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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/esm/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/esm/plugins/text-formatting/ui/Toolbar/dropdown-menu.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref) {

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

@@ -10,9 +10,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';
 var withToolbarInputMethod = function withToolbarInputMethod(func) {
   return func({
     inputMethod: INPUT_METHOD.TOOLBAR

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

@@ -6,7 +6,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/esm/ui/Appearance/Comment/Comment.js

@@ -32,13 +32,12 @@ 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';
 var CommentEditorMargin = 14;
-var CommentEditorSmallerMargin = 8;
-var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, "var(--ds-background-input, white)", "var(--ds-border, ".concat(N40, ")"), borderRadius());
-var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
+var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: ", " ", "\n      ", ";\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, white)", "var(--ds-border, ".concat(N40, ")"), borderRadius());
+var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: ", " ", "px\n      ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), "var(--ds-space-150, 12px)", CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
+var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: ", " 1px;\n"])), "var(--ds-space-150, 12px)");
 var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
   var _super = _createSuper(Editor);

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

@@ -3,12 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
+
 import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorToolbarKeylineHeight, akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 export var TableControlsPadding = 20;
-var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", TableControlsPadding);
+var mainToolbarWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", " ", " 0;\n  display: flex;\n  height: auto;\n  background-color: ", ";\n  box-shadow: none;\n  padding-left: ", ";\n\n  & > div {\n    > :first-child:not(style),\n    > style:first-child + * {\n      margin-left: 0;\n    }\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)");
 var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  padding-bottom: ", ";\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0\n      ", ";\n  }\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 var StickyToolbar = function StickyToolbar(props) {
   var _useState = useState(0),
@@ -75,4 +76,4 @@ export var MainToolbar = function MainToolbar(_ref) {
   }
   return jsx(FixedToolbar, null, children);
 };
-export var mainToolbarCustomComponentsSlotStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", "px;\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), TableControlsPadding);
+export var mainToolbarCustomComponentsSlotStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-grow: 1;\n  padding-right: ", ";\n  > div {\n    display: flex;\n    flex-shrink: 0;\n  }\n"])), "var(--ds-space-250, 20px)");

package/dist/esm/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 var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var theme = useTheme();

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

@@ -10,8 +10,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 var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags5, _props$featureFlags6;
   var _useState = useState(false),

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

@@ -3,9 +3,8 @@ import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructurin
 import _extends from "@babel/runtime/helpers/extends";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 { 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';
 var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var keyDownHandlerContext = useContext(KeyDownHandlerContext);

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

@@ -5,6 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
+
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below

package/dist/esm/ui/styles.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
@@ -7,5 +7,4 @@ export var wrapperSmallStyle = css(_templateObject || (_templateObject = _tagged
 export var expandIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
 export var buttonContentStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: ", ";\n"])), "var(--ds-space-075, 6px)");
 export var buttonContentReducedSpacingStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
-export var clickSelectWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));
-export var centeredToolbarContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n"])));
+export var clickSelectWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));