@atlaskit/editor-core 187.19.0 → 187.20.0

package/dist/esm/plugins/media/pm-plugins/alt-text/keymap.js

@@ -1,9 +1,9 @@
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import * as keymaps from '../../../../keymaps';
 import { openMediaAltTextMenu, closeMediaAltTextMenu } from './commands';
-export default function keymapPlugin(schema) {
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
   var list = {};
-  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, openMediaAltTextMenu, list);
+  keymaps.bindKeymapWithCommand(keymaps.addAltText.common, openMediaAltTextMenu(editorAnalyticsAPI), list);
   keymaps.bindKeymapWithCommand(keymaps.escape.common, closeMediaAltTextMenu, list);
   return keymap(list);
 }

package/dist/esm/plugins/media/pm-plugins/main.js

@@ -25,7 +25,7 @@ import * as helpers from '../commands/helpers';
 import { updateMediaSingleNodeAttrs } from '../commands/helpers';
 import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
-import { INPUT_METHOD } from '../../analytics/types';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { isInEmptyLine } from '../../../utils/document';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { isInListItem } from '../../../utils';
@@ -36,6 +36,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export var MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
+export var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
   var createElement = React.createElement;
@@ -66,6 +67,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "layout", 'center');
     _defineProperty(this, "mediaNodes", []);
     _defineProperty(this, "isResizing", false);
+    _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", function () {});
     _defineProperty(this, "onPopupToggleCallback", function () {});
@@ -224,16 +226,16 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         });
       }
       if (isMediaSingle(state.schema, mediaStateWithContext.fileMimeType)) {
-        var _this$pluginInjection;
+        var _this$pluginInjection, _pluginInjectionApi$d, _pluginInjectionApi$d2;
         // read width state right before inserting to get up-to-date and define values
         var widthPluginState = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.dependencies.width.sharedState.currentState();
-        insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState);
+        insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions);
       } else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
-        var _pluginInjectionApi$d, _pluginInjectionApi$d2;
-        insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
-      } else {
         var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
-        insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
+        insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
+      } else {
+        var _pluginInjectionApi$d5, _pluginInjectionApi$d6;
+        insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : (_pluginInjectionApi$d6 = _pluginInjectionApi$d5.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
       }
 
       // do events when media state changes
@@ -485,6 +487,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function setIsResizing(isResizing) {
       this.isResizing = isResizing;
     }
+  }, {
+    key: "setResizingWidth",
+    value: function setResizingWidth(width) {
+      this.resizingWidth = width;
+    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -626,9 +633,13 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
       },
       apply: function apply(tr, pluginState) {
         var isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        var resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
         }
+        if (resizingWidth) {
+          pluginState.setResizingWidth(resizingWidth);
+        }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {

package/dist/esm/plugins/media/toolbar/alt-text.js

@@ -9,7 +9,7 @@ import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/Al
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
 var testId = 'alt-text-edit-button';
-export var altTextButton = function altTextButton(intl, state) {
+export var altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
   var mediaNode = getMediaNodeFromSelection(state);
   var message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
   var title = intl.formatMessage(message);
@@ -17,7 +17,7 @@ export var altTextButton = function altTextButton(intl, state) {
     title: title,
     id: 'editor.media.altText',
     type: 'button',
-    onClick: openMediaAltTextMenu,
+    onClick: openMediaAltTextMenu(editorAnalyticsAPI),
     showTitle: true,
     testId: testId,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

package/dist/esm/plugins/media/toolbar/index.js

@@ -29,8 +29,8 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 var remove = function remove(state, dispatch) {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -191,7 +191,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
-  var _pluginInjectionApi$d7;
+  var _pluginInjectionApi$d8;
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -258,12 +258,15 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
           var state = editorView.state,
             dispatch = editorView.dispatch;
           var selectedMediaSingleNode = getSelectedMediaSingle(state);
+          var contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
+          var containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -271,13 +274,25 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           if (!selectedMediaNode) {
             return null;
           }
-          var singleMediaWidth = selectedMediaSingleNode.node.attrs.width;
+          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
+            singleMediaWidth = _selectedMediaSingleN.width,
+            widthType = _selectedMediaSingleN.widthType,
+            layout = _selectedMediaSingleN.layout;
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var pixelWidth = calcMediaSinglePixelWidth({
+            width: singleMediaWidth,
+            widthType: widthType,
+            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            layout: layout,
+            contentWidth: contentWidth,
+            containerWidth: containerWidth,
+            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -297,11 +312,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
@@ -347,11 +360,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
   }
   if (allowAltTextOnImages) {
-    toolbarButtons.push(altTextButton(intl, state), {
+    var _pluginInjectionApi$d7;
+    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d7 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.actions), {
       type: 'separator'
     });
   }
-  var _ref2 = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
+  var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
     hoverDecoration = _ref2.hoverDecoration;
   var removeButton = {
     id: 'editor.media.delete',
@@ -380,7 +394,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   return items;
 };
 export var floatingToolbar = function floatingToolbar(state, intl) {
-  var _pluginInjectionApi$d8;
+  var _pluginInjectionApi$d9;
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
   var _state$schema$nodes = state.schema.nodes,
@@ -396,9 +410,9 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     getEditorFeatureFlags = options.getEditorFeatureFlags;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
-  var _ref3 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
+  var _ref3 = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {},
     hoverDecoration = _ref3.hoverDecoration;
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  if (!mediaPluginState) {
     return;
   }
   var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
@@ -418,10 +432,10 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
-      var _pluginInjectionApi$d9;
+      var _pluginInjectionApi$d10;
       return getAltTextToolbar(baseToolbar, {
         altTextValidator: altTextValidator,
-        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.forceFocusSelector
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.forceFocusSelector
       });
     }
   }
@@ -432,22 +446,22 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d10, _pluginInjectionApi$d11;
+    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : (_pluginInjectionApi$d11 = _pluginInjectionApi$d10.analytics) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : _pluginInjectionApi$d11.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d12, _pluginInjectionApi$d13;
+    var _pluginInjectionApi$d13, _pluginInjectionApi$d14;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d12 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : (_pluginInjectionApi$d13 = _pluginInjectionApi$d12.analytics) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : _pluginInjectionApi$d13.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d13 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : (_pluginInjectionApi$d14 = _pluginInjectionApi$d13.analytics) === null || _pluginInjectionApi$d14 === void 0 ? void 0 : _pluginInjectionApi$d14.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -23,9 +23,11 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
+import throttle from 'lodash/throttle';
+import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -130,7 +132,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         state = _this$props$view.state,
         dispatch = _this$props$view.dispatch;
       var tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateSizeInPluginState", function (width) {
+      var _this$props$view2 = _this.props.view,
+        state = _this$props$view2.state,
+        dispatch = _this$props$view2.dispatch;
+      var tr = state.tr;
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
@@ -184,11 +194,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       });
       _this.selectCurrentMediaNode();
       _this.setIsResizing(true);
+      _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
       _this.guidelines = _this.getAllGuidelines();
       return 0;
     });
-    _defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
+    _defineProperty(_assertThisInitialized(_this), "handleResize", throttle(function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -208,10 +219,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         },
         snaps: guidelineSnaps.snaps
       });
+      _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,

package/dist/esm/plugins/media/utils/media-single.js

@@ -8,7 +8,6 @@ import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
-import { addAnalytics } from '../../analytics';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
 import { isImage } from './is-image';
@@ -33,6 +32,7 @@ function shouldAddParagraph(state) {
 }
 function insertNodesWithOptionalParagraph(nodes) {
   var analyticsAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var editorAnalyticsAPI = arguments.length > 2 ? arguments[2] : undefined;
   return function (state, dispatch) {
     var tr = state.tr,
       schema = state.schema;
@@ -46,7 +46,7 @@ function insertNodesWithOptionalParagraph(nodes) {
     }
     tr.replaceSelection(new Slice(Fragment.from(nodes), 0, openEnd));
     if (inputMethod) {
-      addAnalytics(state, tr, getInsertMediaAnalytics(inputMethod, fileExtension));
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
     if (dispatch) {
       dispatch(tr);
@@ -57,7 +57,7 @@ function insertNodesWithOptionalParagraph(nodes) {
 export var isMediaSingle = function isMediaSingle(schema, fileMimeType) {
   return !!schema.nodes.mediaSingle && isImage(fileMimeType);
 };
-export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod) {
+export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
   var _state$schema$nodes = state.schema.nodes,
@@ -77,9 +77,9 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
     inputMethod: inputMethod,
     fileExtension: node.attrs.__fileMimeType
   };
-  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes)(state, dispatch);
+  return insertNodesWithOptionalParagraph(nodes, analyticsAttributes, editorAnalyticsAPI)(state, dispatch);
 };
-export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState) {
+export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, newInsertionBehaviour, widthPluginState, editorAnalyticsAPI) {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -110,7 +110,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
     insertNodesWithOptionalParagraph([node], {
       fileExtension: fileExtension,
       inputMethod: inputMethod
-    })(state, dispatch);
+    }, editorAnalyticsAPI)(state, dispatch);
   } else {
     var tr = null;
     if (newInsertionBehaviour) {
@@ -121,7 +121,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
       tr = pmSafeInsert(content, undefined, true)(state.tr);
     }
     if (inputMethod) {
-      tr = addAnalytics(state, tr, getInsertMediaAnalytics(inputMethod, fileExtension));
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(getInsertMediaAnalytics(inputMethod, fileExtension))(tr);
     }
     dispatch(tr);
   }

package/dist/esm/plugins/paste/handlers.js

@@ -25,7 +25,6 @@ import { startTrackingPastedMacroPositions, stopTrackingPastedMacroPositions } f
 import { getPluginState as getPastePluginState } from './pm-plugins/plugin-factory';
 import { doesSelectionWhichStartsOrEndsInListContainEntireList } from '../../utils/lists';
 import { anyMarkActive } from '@atlaskit/editor-common/mark';
-
 // remove text attribute from mention for copy/paste (GDPR)
 export function handleMention(slice, schema) {
   return mapSlice(slice, function (node) {
@@ -522,12 +521,12 @@ function isOnlyMediaSingle(state, slice) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   return mediaSingle && slice.content.childCount === 1 && slice.content.firstChild.type === mediaSingle;
 }
-export function handleMediaSingle(inputMethod) {
+export function handleMediaSingle(inputMethod, editorAnalyticsAPI) {
   return function (slice) {
     return function (state, dispatch, view) {
       if (view) {
         if (isOnlyMedia(state, slice)) {
-          return insertMediaAsMediaSingle(view, slice.content.firstChild, inputMethod);
+          return insertMediaAsMediaSingle(view, slice.content.firstChild, inputMethod, editorAnalyticsAPI);
         }
         if (insideTable(state) && isOnlyMediaSingle(state, slice)) {
           var tr = state.tr.replaceSelection(slice);

package/dist/esm/plugins/paste/pm-plugins/analytics.js

@@ -239,10 +239,10 @@ export var handleCodeBlockWithAnalytics = function handleCodeBlockWithAnalytics(
     type: PasteTypes.plain
   }))(handleCodeBlock(text));
 };
-export var handleMediaSingleWithAnalytics = function handleMediaSingleWithAnalytics(view, event, slice, type) {
+export var handleMediaSingleWithAnalytics = function handleMediaSingleWithAnalytics(view, event, slice, type, editorAnalyticsAPI) {
   return injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {
     type: type
-  }))(handleMediaSingle(INPUT_METHOD.CLIPBOARD)(slice));
+  }))(handleMediaSingle(INPUT_METHOD.CLIPBOARD, editorAnalyticsAPI)(slice));
 };
 export var handlePastePreservingMarksWithAnalytics = function handlePastePreservingMarksWithAnalytics(view, event, slice, type, pluginInjectionApi) {
   var _pluginInjectionApi$d3, _pluginInjectionApi$d4;

package/dist/esm/plugins/paste/pm-plugins/main.js

@@ -102,7 +102,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
         }
       },
       handlePaste: function handlePaste(view, rawEvent, slice) {
-        var _text, _analyticsPlugin$perf, _analyticsPlugin$perf2, _schema$nodes, _schema$nodes2, _schema$nodes3;
+        var _text, _analyticsPlugin$perf, _analyticsPlugin$perf2, _schema$nodes, _schema$nodes2, _schema$nodes3, _pluginInjectionApi$d4, _pluginInjectionApi$d5;
         var event = rawEvent;
         if (!event.clipboardData) {
           return false;
@@ -266,7 +266,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
         if (handleCodeBlockWithAnalytics(view, event, slice, text)(state, dispatch)) {
           return true;
         }
-        if (handleMediaSingleWithAnalytics(view, event, slice, isPastedFile ? PasteTypes.binary : PasteTypes.richText)(state, dispatch, view)) {
+        if (handleMediaSingleWithAnalytics(view, event, slice, isPastedFile ? PasteTypes.binary : PasteTypes.richText, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions)(state, dispatch, view)) {
           return true;
         }
         if (handleSelectedTableWithAnalytics(view, event, slice)(state, dispatch)) {
@@ -299,7 +299,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
 
         // finally, handle rich-text copy-paste
         if (isRichText) {
-          var _pluginInjectionApi$d4, _pluginInjectionApi$d5;
+          var _pluginInjectionApi$d6, _pluginInjectionApi$d7;
           // linkify the text where possible
           slice = linkifyContent(state.schema)(slice);
           if (handlePasteLinkOnSelectedTextWithAnalytics(view, event, slice, PasteTypes.richText)(state, dispatch)) {
@@ -307,7 +307,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
           }
 
           // run macro autoconvert prior to other conversions
-          if (handleMacroAutoConvert(text, slice, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies.card) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.actions) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.queueCardsFromChangedTr, cardOptions, extensionAutoConverter)(state, dispatch, view)) {
+          if (handleMacroAutoConvert(text, slice, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.card) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : (_pluginInjectionApi$d7 = _pluginInjectionApi$d6.actions) === null || _pluginInjectionApi$d7 === void 0 ? void 0 : _pluginInjectionApi$d7.queueCardsFromChangedTr, cardOptions, extensionAutoConverter)(state, dispatch, view)) {
             // TODO: handleMacroAutoConvert dispatch twice, so we can't use the helper
             sendPasteAnalyticsEvent(view, event, slice, {
               type: PasteTypes.richText

package/dist/esm/plugins/selection/gap-cursor/styles.js

@@ -7,4 +7,4 @@ var gapCursor = '.ProseMirror-gapcursor';
 var prosemirrorwidget = '.ProseMirror-widget';
 var wrapLeft = '[layout="wrap-left"]';
 var wrapRight = '[layout="wrap-right"]';
-export var gapCursorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alignment of gap cursor */\n      &:first-of-type + ul,\n      &:first-of-type + span + ul,\n      &:first-of-type + ol,\n      &:first-of-type + span + ol,\n      &:first-of-type + pre,\n      &:first-of-type + span + pre,\n      &:first-of-type + blockquote,\n      &:first-of-type + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);
+export var gapCursorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* =============== GAP CURSOR ================== */\n  .ProseMirror {\n    &.", " {\n      caret-color: transparent;\n    }\n\n    ", " {\n      display: none;\n      pointer-events: none;\n      position: relative;\n\n      & span {\n        caret-color: transparent;\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        display: block;\n      }\n\n      & span::after {\n        animation: 1s ", " step-end infinite;\n        border-left: 1px solid;\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n      &.-left span::after {\n        left: -3px;\n      }\n      &.-right span::after {\n        right: -3px;\n      }\n      & span[layout='full-width'],\n      & span[layout='wide'],\n      & span[layout='fixed-width'] {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n      &", " {\n        float: right;\n      }\n\n      /* fix vertical alignment of gap cursor */\n      &:first-of-type + ul,\n      &:first-of-type + span + ul,\n      &:first-of-type + ol,\n      &:first-of-type + span + ol,\n      &:first-of-type + pre,\n      &:first-of-type + span + pre,\n      &:first-of-type + blockquote,\n      &:first-of-type + span + blockquote {\n        margin-top: 0;\n      }\n    }\n    &.ProseMirror-focused ", " {\n      display: block;\n      border-color: transparent;\n    }\n  }\n\n  /* This hack below is for two images aligned side by side */\n  ", "", " + span + ", ",\n  ", "", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span ", ",\n  ", " + ", " + ", ",\n  ", " + ", " + span + ", ",\n  ", " + ", " {\n    clear: none;\n  }\n\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div,\n  ", " + ", " + ", " > div,\n  ", " + ", " + span + ", " > div {\n    margin-right: 0;\n    margin-left: 0;\n    margin-bottom: 0;\n  }\n\n  ", " + ", ",\n  ", " + ", " {\n    float: left;\n  }\n\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after,\n  ", " + ", " + ", "::after,\n  ", " + ", " + span + ", "::after {\n    visibility: hidden;\n    display: block;\n    font-size: 0;\n    content: ' ';\n    clear: both;\n    height: 0;\n  }\n\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + ", " + *,\n  ", " + ", " + ", " + span + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + span + ", " + *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + ", " + * > *,\n  ", " + ", " + ", " + span + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + span + ", " + * > *,\n  ", " + ", " + *,\n  ", " + ", " + span + * {\n    margin-top: 0;\n  }\n"])), hideCaretModifier, gapCursor, gapCursorBlink, wrapRight, gapCursor, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapRight, wrapLeft, gapCursor, wrapRight, gapCursor, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, wrapRight, gapCursor, wrapLeft, wrapLeft, gapCursor, wrapRight, wrapRight, gapCursor, wrapLeft, gapCursor, wrapLeft, wrapRight, gapCursor, wrapRight, wrapLeft, prosemirrorwidget, gapCursor, prosemirrorwidget, gapCursor);

package/dist/esm/plugins/selection/gap-cursor/utils/place-gap-cursor.js

@@ -1,5 +1,5 @@
 import _toArray from "@babel/runtime/helpers/toArray";
-import { getBreakoutModeFromTargetNode, isLeftCursor } from '../utils';
+import { getLayoutModeFromTargetNode, isLeftCursor } from '../utils';
 import { Side } from '../selection';
 
 /**
@@ -79,9 +79,9 @@ export var toDOM = function toDOM(view, getPos) {
     if (nodeStart !== 0 || node && node.type.name === 'table') {
       gapCursor.style.marginTop = style.getPropertyValue('margin-top');
     }
-    var breakoutMode = node && getBreakoutModeFromTargetNode(node);
-    if (breakoutMode) {
-      gapCursor.setAttribute('layout', breakoutMode);
+    var layoutMode = node && getLayoutModeFromTargetNode(node);
+    if (layoutMode) {
+      gapCursor.setAttribute('layout', layoutMode);
       gapCursor.style.width = "".concat(measureWidth(style), "px");
     } else {
       mutateElementStyle(gapCursor, style, selection.side);

package/dist/esm/plugins/selection/gap-cursor/utils.js

@@ -58,7 +58,7 @@ export var isTextBlockNearPos = function isTextBlockNearPos(doc, schema, $pos, d
   }
   return false;
 };
-export function getBreakoutModeFromTargetNode(node) {
+export function getLayoutModeFromTargetNode(node) {
   var layout;
   if (node.attrs.layout) {
     layout = node.attrs.layout;
@@ -72,7 +72,10 @@ export function getBreakoutModeFromTargetNode(node) {
       }
     }).attrs.mode;
   }
-  if (['wide', 'full-width'].indexOf(layout) === -1) {
+  if (node.type.name === 'table' && node.attrs.width) {
+    layout = 'fixed-width';
+  }
+  if (['wide', 'full-width', 'fixed-width'].indexOf(layout) === -1) {
     return '';
   }
   return layout;

package/dist/esm/plugins/selection/pm-plugins/gap-cursor-main.js

@@ -5,7 +5,7 @@ import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { hideCaretModifier } from '../gap-cursor/styles';
 import { GapCursorSelection, JSON_ID, Side as GapCursorSide, Side } from '../gap-cursor/selection';
-import { getBreakoutModeFromTargetNode, isIgnoredClick } from '../gap-cursor/utils';
+import { getLayoutModeFromTargetNode, isIgnoredClick } from '../gap-cursor/utils';
 import { toDOM } from '../gap-cursor/utils/place-gap-cursor';
 import { deleteNode, setGapCursorAtPos } from '../gap-cursor/actions';
 import { Direction } from '../gap-cursor/direction';
@@ -69,10 +69,10 @@ var plugin = new SafePlugin({
           }
         }
         var node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
-        var breakoutMode = node && getBreakoutModeFromTargetNode(node);
+        var layoutMode = node && getLayoutModeFromTargetNode(node);
         return DecorationSet.create(doc, [Decoration.widget(position, toDOM, {
-          key: "".concat(JSON_ID, "-").concat(side, "-").concat(breakoutMode),
-          side: breakoutMode ? -1 : 0
+          key: "".concat(JSON_ID, "-").concat(side, "-").concat(layoutMode),
+          side: layoutMode ? -1 : 0
         })]);
       }
       return null;

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

@@ -1,6 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { getDisabledState } from '../utils/disabled';
+import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
 export var toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
     var textColor = state.schema.marks.textColor;
@@ -20,9 +21,9 @@ export var toggleColor = function toggleColor(color) {
         color: color
       });
       state.tr.scrollIntoView();
-      toggleMark(textColor, {
+      pluginCommandToPMCommand(toggleMark(textColor, {
         color: color
-      })(state, dispatch);
+      }))(state, dispatch);
     }
     return true;
   };

package/dist/esm/utils/document.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { getBreakoutMode } from './node-width';
 import { processRawValue, hasDocAsParent, getStepRange, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+export { findFarthestParentNode } from '@atlaskit/editor-common/utils';
 
 /**
  * Checks if a node has any content. Ignores node that only contain empty block nodes.
@@ -50,28 +51,6 @@ export function processRawFragmentValue(schema, value, providerFactory, sanitize
   }
   return Fragment.from(adfEntities);
 }
-
-/**
- * Find the farthest node given a condition
- * @param predicate Function to check the node
- */
-export var findFarthestParentNode = function findFarthestParentNode(predicate) {
-  return function ($pos) {
-    var candidate = null;
-    for (var i = $pos.depth; i > 0; i--) {
-      var _node = $pos.node(i);
-      if (predicate(_node)) {
-        candidate = {
-          pos: i > 0 ? $pos.before(i) : 0,
-          start: $pos.start(i),
-          depth: i,
-          node: _node
-        };
-      }
-    }
-    return candidate;
-  };
-};
 export var isSelectionEndOfParagraph = function isSelectionEndOfParagraph(state) {
   return state.selection.$to.parent.type === state.schema.nodes.paragraph && state.selection.$to.pos === state.doc.resolve(state.selection.$to.pos).end();
 };