@atlaskit/editor-core 166.0.4 → 167.0.0

package/dist/esm/editor.js

@@ -410,6 +410,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         allowConfluenceInlineComment: {
           message: 'To integrate inline comments use experimental annotationProvider – <Editor annotationProviders={{ provider }} />',
           type: 'removed'
+        },
+        allowDynamicTextSizing: {
+          message: 'Dynamic text sizing has been unshipped since 2020. The prop is no longer needed.',
+          type: 'removed'
         }
       };
       Object.keys(deprecatedProperties).forEach(function (property) {
@@ -498,7 +502,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getBaseFontSize",
     value: function getBaseFontSize() {
-      return !this.props.allowDynamicTextSizing && !['comment', 'chromeless', 'mobile'].includes(this.props.appearance) ? akEditorFullPageDefaultFontSize : undefined;
+      return !['comment', 'chromeless', 'mobile'].includes(this.props.appearance) ? akEditorFullPageDefaultFontSize : undefined;
     }
   }, {
     key: "render",
@@ -581,7 +585,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                       config = _ref3.config,
                       dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
                   return jsx(BaseTheme, {
-                    dynamicTextSizing: _this5.props.allowDynamicTextSizing && _this5.props.appearance !== 'full-width',
                     baseFontSize: _this5.getBaseFontSize()
                   }, jsx(Component, {
                     appearance: _this5.props.appearance,

package/dist/esm/keymaps/index.js

@@ -76,8 +76,12 @@ var arrowKeysMap = {
   ARROWRIGHT: "\u2192",
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
-};
+}; // TOOD: https://product-fabric.atlassian.net/browse/DSP-4460
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), N400);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {
   var shortcut;

package/dist/esm/labs/next/ContentComponents.js

@@ -3,7 +3,10 @@ import { pluginKey as disabledPluginKey } from '../../plugins/editor-disabled';
 import WithPluginState from '../../ui/WithPluginState';
 import PluginSlot from '../../ui/PluginSlot';
 import { useEditorSharedConfig } from './Editor';
-export function ContentComponents(disabled) {
+export function ContentComponents(_ref) {
+  var disabled = _ref.disabled,
+      wrapperElement = _ref.wrapperElement,
+      containerElement = _ref.containerElement;
   var config = useEditorSharedConfig();
 
   if (!config) {
@@ -14,10 +17,10 @@ export function ContentComponents(disabled) {
     plugins: {
       disabled: disabledPluginKey
     },
-    render: function render(_ref) {
+    render: function render(_ref2) {
       var _disabled$editorDisab;
 
-      var disabled = _ref.disabled;
+      var disabled = _ref2.disabled;
       return /*#__PURE__*/React.createElement(PluginSlot, {
         editorView: config.editorView,
         eventDispatcher: config.eventDispatcher,
@@ -26,8 +29,9 @@ export function ContentComponents(disabled) {
         popupsMountPoint: config.popupsMountPoint,
         popupsBoundariesElement: config.popupsBoundariesElement,
         popupsScrollableElement: config.popupsScrollableElement,
-        containerElement: null // TODO: Figure out how to pass containerElement here ED-8448
+        containerElement: containerElement // TODO: Figure out how to pass containerElement here ED-8448
         ,
+        wrapperElement: wrapperElement,
         disabled: (_disabled$editorDisab = disabled === null || disabled === void 0 ? void 0 : disabled.editorDisabled) !== null && _disabled$editorDisab !== void 0 ? _disabled$editorDisab : false
       });
     }

package/dist/esm/labs/next/full-page.js

@@ -9,6 +9,7 @@ import rafSchedule from 'raf-schd';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
@@ -35,8 +36,8 @@ var editorContentArea = function editorContentArea(theme) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, tableFullPageEditorStyles);
 };
 
-var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex);
-var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, N30);
+var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex, token('elevation.surface', 'white'));
+var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, token('color.border', N30));
 var mainToolbarCustomComponentsSlot = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
 var sidebarArea = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 
@@ -79,7 +80,6 @@ function useKeyline() {
 function FullPage(props) {
   var primaryToolbarComponents = props.primaryToolbarComponents,
       contentComponents = props.contentComponents,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       collabEdit = props.collabEdit,
       createAnalyticsEvent = props.createAnalyticsEvent,
       contextPanel = props.contextPanel;
@@ -91,13 +91,13 @@ function FullPage(props) {
       scrollContainerRef = _useKeyline2[1];
 
   var config = useEditorSharedConfig();
+  var wrapperElementRef = /*#__PURE__*/React.createRef();
   return jsx(ContextPanelWidthProvider, null, jsx(Editor, _extends({}, props, {
     onAnalyticsEvent: handleAnalyticsEvent
-  }), jsx(BaseTheme, {
-    dynamicTextSizing: allowDynamicTextSizing
-  }, jsx("div", {
+  }), jsx(BaseTheme, null, jsx("div", {
     css: fullPageEditorWrapper,
-    className: "akEditor"
+    className: "akEditor",
+    ref: wrapperElementRef
   }, jsx("div", {
     "data-testid": "ak-editor-main-toolbar",
     css: showKeyline ? mainToolbarWithKeyline : mainToolbar
@@ -123,7 +123,10 @@ function FullPage(props) {
   }, jsx("div", {
     style: GUTTER_STYLE,
     className: "ak-editor-content-area"
-  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, null))))), contextPanel && jsx("div", {
+  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, {
+    wrapperElement: wrapperElementRef.current,
+    containerElement: scrollContainerRef.current
+  }))))), contextPanel && jsx("div", {
     css: sidebarArea
   }, contextPanel), jsx(WidthEmitter, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView

package/dist/esm/nodeviews/getInlineNodeViewProducer.js

@@ -5,6 +5,7 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../plugins/analytics';
 import { analyticsEventKey } from '../plugins/analytics/consts';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './getPerformanceOptions';
+export var inlineNodeViewClassname = 'inlineNodeView';
 
 function createNodeView(_ref) {
   var nodeViewParams = _ref.nodeViewParams,
@@ -25,7 +26,7 @@ function createNodeView(_ref) {
   // nodeView if DOM structure has nested plain "div"s, it doesn't see the
   // difference between them and it kills the nodeView
 
-  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "inlineNodeView"); // This util is shared for tracking rendering, and the ErrorBoundary that
+  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(inlineNodeViewClassname)); // This util is shared for tracking rendering, and the ErrorBoundary that
   // is setup to wrap the Component when rendering
   // NOTE: This is not a prosemirror dispatch
 
@@ -162,13 +163,13 @@ function getPortalChildren(_ref2) {
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
     }, /*#__PURE__*/React.createElement("span", {
-      className: "inlineNodeViewAddZeroWidthSpace"
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }), ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(Component, _extends({
       view: nodeViewParams.view,
       getPos: nodeViewParams.getPos,
       node: currentNode
     }, extraComponentProps)), /*#__PURE__*/React.createElement("span", {
-      className: "inlineNodeViewAddZeroWidthSpace"
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }));
   };
 } // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews

package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js

@@ -3,7 +3,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils'; // For reasoning behind styles, see comments in:
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { inlineNodeViewClassname } from './getInlineNodeViewProducer'; // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .inlineNodeView {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > * {\n      white-space: pre-wrap;\n    }\n  }\n\n  &.ua-chrome .inlineNodeView > span {\n    user-select: none;\n  }\n\n  .inlineNodeViewAddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), ZERO_WIDTH_SPACE);
+export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > * {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -4,7 +4,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var triggerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
+export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), token('color.border', N30));
 export var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
 export var expandIconWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));

package/dist/esm/plugins/analytics/types/enums.js

@@ -84,6 +84,9 @@ export var ACTION;
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
   ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
+  ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
+  ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
+  ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TRANSACTION_MUTATED_AFTER_DISPATCH"] = "transactionMutatedAfterDispatched";

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

@@ -39,25 +39,16 @@ var basePlugin = function basePlugin(options) {
       // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
       // no cursor is presented to users.
       // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
-      // the cursor appears inside the adjacent nodes.
-      // This plugin workarounds the issues with chrome and firefox by inserting decorations between
+      // it is not possible to navigate with arrow keys.
+      // This plugin works around the issues by inserting decorations between
       // inline nodes which are set as contenteditable, and have a zero width space.
-      // At time of development, using this workaround in Safari caused additional issues;
-      // - visual artifacts when moving across inline nodes (ie. using the arrow key to traverse a
-      //   series of inline nodes)
-      // - blocking the right arrow key when at the start of a line from moving to the end of the
-      //   previous line.
-      // As such we only apply the workaround for firefox and chrome.
-
-      if (browser.chrome || browser.gecko) {
-        plugins.push({
-          name: 'inlineCursorTargetPlugin',
-          plugin: function plugin() {
-            return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
-          }
-        });
-      }
 
+      plugins.push({
+        name: 'inlineCursorTargetPlugin',
+        plugin: function plugin() {
+          return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
+        }
+      });
       plugins.push({
         name: 'focusHandlerPlugin',
         plugin: function plugin(_ref2) {

package/dist/esm/plugins/base/pm-plugins/better-type-history.js

@@ -4,6 +4,7 @@ import { Fragment } from 'prosemirror-model';
 import { closeHistory } from 'prosemirror-history';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { PluginKey } from 'prosemirror-state';
+import { extractSliceFromStep } from '../../../utils/step';
 
 var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   var firstTr = trs.length === 1 && trs[0];
@@ -25,17 +26,6 @@ var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   return replaceSteps[0];
 };
 
-var extractSliceFromStep = function extractSliceFromStep(step) {
-  if (!(step instanceof ReplaceStep) && !(step instanceof ReplaceAroundStep)) {
-    return null;
-  } // @ts-ignore This is by design. Slice is a private property, but accesible, from ReplaceStep.
-  // However, we need to read it to found if the step was adding a newline
-
-
-  var slice = step.slice;
-  return slice;
-};
-
 var isSliceSplittingBlockNode = function isSliceSplittingBlockNode(slice) {
   var hasOnlyTwoChildren = slice.size > 1 && slice.content.childCount === 2;
 

package/dist/esm/plugins/base/pm-plugins/inline-cursor-target.js

@@ -1,7 +1,7 @@
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE, browser } from '@atlaskit/editor-common/utils';
 import { isTextSelection } from '../../../utils';
 export var inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
 export var isInlineNodeView = function isInlineNodeView(node) {
@@ -20,13 +20,35 @@ export default (function () {
         var selection = tr.selection,
             doc = tr.doc;
         var $from = selection.$from,
-            $to = selection.$to;
-
-        if (selection && isTextSelection(selection)) {
+            $to = selection.$to; // In Safari, if the cursor target is to the right of the cursor it will block selections
+        // made with shift + arrowRight and vice versa for shift + arrowLeft. This is due to a
+        // contenteditable bug in safari, where editable elements block the selection but we need
+        // the cursor target to be editable for the following:
+        // - Ability to navigate with down/up arrows when between inline nodes
+        // - Ability to navigate with down/up arrows when between the start of a paragraph & an inline node
+        // - Ability to click and drag to select an inline node if it is the first node
+        // To prevent blocking the selection, we check handleDOMEvents and add meta to
+        // the transaction to prevent the plugin from making cursor target decorations.
+
+        var safariShiftSelection = tr.getMeta(inlineCursorTargetStateKey);
+
+        if (selection && isTextSelection(selection) && !safariShiftSelection) {
           var hasInlineNodeViewAfter = isInlineNodeView($from.nodeAfter);
           var hasInlineNodeViewBefore = isInlineNodeView($from.nodeBefore);
-          var isAtStart = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
-          var isAtEnd = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore); // Create editable decoration widgets either side of the cursor to allow
+          var isAtStartAndInlineNodeViewAfter = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
+          var isAtEndAndInlineNodeViewBefore = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore);
+
+          var createWidget = function createWidget(side) {
+            var node = document.createElement('span');
+            node.contentEditable = 'true';
+            node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+            node.className = 'cursor-target';
+            return Decoration.widget(selection.from, node, {
+              raw: true,
+              side: side === 'left' ? -1 : 1,
+              key: 'inlineCursor'
+            });
+          }; // Create editable decoration widgets either side of the cursor to allow
           // text input.
           // We check beforeInput events below to prevent content
           // being added to the decorations.
@@ -37,18 +59,8 @@ export default (function () {
           // - positioned between the beginning of another node and an inline node (firefox)
           // - positioned between an inline node and the end of a node (chrome)
 
-          if ((hasInlineNodeViewAfter || isAtEnd) && (hasInlineNodeViewBefore || isAtStart)) {
-            var createWidget = function createWidget(side) {
-              var node = document.createElement('span');
-              node.contentEditable = 'true';
-              node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
-              return Decoration.widget(selection.from, node, {
-                raw: true,
-                side: side === 'left' ? -1 : 1,
-                key: 'inlineCursor'
-              });
-            };
 
+          if (!browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -58,6 +70,34 @@ export default (function () {
                 }
               }
             };
+          } // Only create one widget on the left or right of the cursor in Safari.
+          // This is to prevent the left key from being blocked when at the start of a paragraph,
+          // and the right key from being blocked when at the end of a paragraph. This also
+          // improves click and drag selections, making it easier to select the first node.
+
+
+          if (browser.safari) {
+            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('left')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            } else if (isAtStartAndInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('right')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            }
           }
         }
 
@@ -80,6 +120,21 @@ export default (function () {
         return null;
       },
       handleDOMEvents: {
+        // Workaround to prevent the decorations created by the plugin from
+        // blocking shift + arrow left/right selections in safari. When
+        // a shift + arrow left/right event is detected, send meta data to the
+        // plugin to prevent it from creating decorations.
+        // TODO We may be able to remove this when playing the following ticket:
+        // https://product-fabric.atlassian.net/browse/ED-14938
+        keydown: function keydown(view, event) {
+          if (browser.safari && event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            view.dispatch(view.state.tr.setMeta(inlineCursorTargetStateKey, {
+              cursorTarget: undefined
+            }));
+          }
+
+          return false;
+        },
         // Check the DOM to see if there are inline cursor targets
         // after a composition event ends. If so, manually insert the
         // event data in order to prevent contents ending up inside

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

@@ -13,6 +13,7 @@ import { shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
+import { CellSelection } from '@atlaskit/editor-tables';
 export function setBlockType(name) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes;
@@ -49,14 +50,18 @@ export function setBlockTypeWithAnalytics(name, inputMethod) {
 }
 export function setNormalText() {
   return function (state, dispatch) {
-    var tr = state.tr,
-        _state$selection = state.selection,
-        $from = _state$selection.$from,
-        $to = _state$selection.$to,
-        schema = state.schema;
+    var selection = state.selection,
+        schema = state.schema,
+        tr = state.tr;
+    var ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(function (_ref) {
+      var $from = _ref.$from,
+          $to = _ref.$to;
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph));
+      dispatch(tr);
     }
 
     return true;
@@ -118,16 +123,20 @@ export function setNormalTextWithAnalytics(inputMethod) {
 }
 export function setHeading(level) {
   return function (state, dispatch) {
-    var tr = state.tr,
-        _state$selection2 = state.selection,
-        $from = _state$selection2.$from,
-        $to = _state$selection2.$to,
-        schema = state.schema;
+    var selection = state.selection,
+        schema = state.schema,
+        tr = state.tr;
+    var ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(function (_ref2) {
+      var $from = _ref2.$from,
+          $to = _ref2.$to;
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
+        level: level
+      });
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
-        level: level
-      }));
+      dispatch(tr);
     }
 
     return true;
@@ -229,9 +238,9 @@ export var insertBlockTypesWithAnalytics = function insertBlockTypesWithAnalytic
 function wrapSelectionIn(type) {
   return function (state, dispatch) {
     var tr = state.tr;
-    var _state$selection3 = state.selection,
-        $from = _state$selection3.$from,
-        $to = _state$selection3.$to;
+    var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $to = _state$selection.$to;
     var _state$schema$marks = state.schema.marks,
         alignment = _state$schema$marks.alignment,
         indentation = _state$schema$marks.indentation;
@@ -266,9 +275,9 @@ function insertCodeBlock() {
     var _state$selection$$fro;
 
     var tr = state.tr;
-    var _state$selection4 = state.selection,
-        $to = _state$selection4.$to,
-        $from = _state$selection4.$from;
+    var _state$selection2 = state.selection,
+        $to = _state$selection2.$to,
+        $from = _state$selection2.$from;
     var codeBlock = state.schema.nodes.codeBlock;
     var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
     var parentType = state.selection.$from.parent.type;
@@ -292,8 +301,8 @@ function insertCodeBlock() {
 }
 
 export var cleanUpAtTheStartOfDocument = function cleanUpAtTheStartOfDocument(state, dispatch) {
-  var _ref = state.selection,
-      $cursor = _ref.$cursor;
+  var _ref3 = state.selection,
+      $cursor = _ref3.$cursor;
 
   if ($cursor && !$cursor.nodeBefore && !$cursor.nodeAfter && $cursor.pos === 1) {
     var tr = state.tr,

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -7,12 +7,13 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
+import { token } from '@atlaskit/tokens';
 export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  var selectedStyle = selected ? "".concat(tagName, " { color: white !important; }") : '';
+  var selectedStyle = selected ? "".concat(tagName, " { color: ").concat(token('color.text.inverse', 'white'), " !important; }") : '';
   return function (themeProps) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), headingsSharedStyles(themeProps), selectedStyle);
   };
 };
 export var keyboardShortcut = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: 16px;\n"])), shortcutStyle);
-export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), N400);
+export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon', N400));

package/dist/esm/plugins/breakout/ui/LayoutButton.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import * as colors from '@atlaskit/theme/colors';
+import { B300, N300, N20A } from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -32,10 +32,8 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-var B300 = colors.B300,
-    N300 = colors.N300,
-    N20A = colors.N20A;
-var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
+import { token } from '@atlaskit/tokens';
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), token('color.background.neutral', N20A), token('color.icon', N300), token('color.background.neutral.hovered', B300), token('color.icon', 'white'));
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',

package/dist/esm/plugins/card/styles.js

@@ -8,4 +8,4 @@ import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
-export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, N20, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder));
+export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.background.neutral.subtle.hovered', N20), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder));

package/dist/esm/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -17,7 +17,7 @@ var iconBoxStyles = css({
   width: ICON_HEIGHT,
   height: ICON_WIDTH,
   overflow: 'hidden',
-  border: '1px solid rgba(223, 225, 229, 0.5)'
+  border: "1px solid ".concat(token('color.border', 'rgba(223, 225, 229, 0.5)'))
   /* N60 at 50% */
   ,
   borderRadius: borderRadius(),
@@ -25,7 +25,7 @@ var iconBoxStyles = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: token('color.background.default', 'white')
+  backgroundColor: token('elevation.surface', 'white')
 });
 var primitiveStyles = css({
   padding: '0.75rem',

package/dist/esm/plugins/code-block/actions.js

@@ -91,5 +91,33 @@ export var resetCopiedState = function resetCopiedState(state, dispatch) {
     }
   }
 
+  return true;
+};
+export var ignoreFollowingMutations = function ignoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: true
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
+  return true;
+};
+export var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: false
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
   return true;
 };