@atlaskit/editor-core 187.19.1 → 187.20.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 187.20.0
+
+### Minor Changes
+
+- [`644c7942b34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/644c7942b34) - [ux] support updating pixel entry in media toolbar when resize media single
+- [`43c51e0a282`](https://bitbucket.org/atlassian/atlassian-frontend/commits/43c51e0a282) - [ED-19431] Migrate all text-formatting plugin actions over to plugin commands
+- [`a867b562d62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a867b562d62) - Add insertEmoji command and sharedState to emoji plugin.
+
+### Patch Changes
+
+- [`8375e041861`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8375e041861) - [ED-16733] Extract common functions used by media plugin to editor-common
+- Updated dependencies
+
 ## 187.19.1
 
 ### Patch Changes

package/dist/cjs/plugins/emoji/commands/insert-emoji.js

@@ -14,32 +14,33 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(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; }
 var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
   return function (emojiId, inputMethod) {
-    return function (state, dispatch) {
-      var emoji = state.schema.nodes.emoji;
+    return function (_ref) {
+      var tr = _ref.tr;
+      var doc = tr.doc,
+        selection = tr.selection;
+      var emoji = tr.doc.type.schema.nodes.emoji;
       if (emoji && emojiId) {
         var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
           text: emojiId.fallback || emojiId.shortName
         }));
-        var textNode = state.schema.text(' ');
-        if (dispatch) {
-          var fragment = _model.Fragment.fromArray([node, textNode]);
-          var tr = (0, _utils.safeInsert)(fragment)(state.tr);
-          if (inputMethod) {
-            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-              action: _analytics.ACTION.INSERTED,
-              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-              actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
-              attributes: {
-                inputMethod: inputMethod
-              },
-              eventType: _analytics.EVENT_TYPE.TRACK
-            })(tr);
-          }
-          dispatch(tr.setSelection(_state.Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        var textNode = doc.type.schema.text(' ');
+        var fragment = _model.Fragment.fromArray([node, textNode]);
+        var newTr = (0, _utils.safeInsert)(fragment)(tr);
+        if (inputMethod) {
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+            action: _analytics.ACTION.INSERTED,
+            actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.EMOJI,
+            attributes: {
+              inputMethod: inputMethod
+            },
+            eventType: _analytics.EVENT_TYPE.TRACK
+          })(newTr);
         }
-        return true;
+        newTr.setSelection(_state.Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+        return newTr;
       }
-      return false;
+      return null;
     };
   };
 };

package/dist/cjs/plugins/emoji/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 exports.createEmojiPlugin = createEmojiPlugin;
-exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.defaultListLimit = exports.default = void 0;
+exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.emojiPlugin = exports.defaultListLimit = void 0;
 exports.getEmojiPluginState = getEmojiPluginState;
 exports.memoize = memoize;
 exports.setProvider = void 0;
@@ -25,6 +25,7 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _emoji3 = require("./nodeviews/emoji");
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _openTypeaheadAtCursor = require("../type-ahead/transforms/open-typeahead-at-cursor");
+var _insertEmoji = require("./commands/insert-emoji");
 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) { (0, _defineProperty2.default)(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; }
 var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
@@ -75,6 +76,7 @@ var isFullShortName = function isFullShortName(query) {
 };
 var TRIGGER = ':';
 var emojiPlugin = function emojiPlugin(options, api) {
+  var _api$dependencies$ana9;
   var typeAhead = {
     id: _typeAhead.TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -196,6 +198,15 @@ var emojiPlugin = function emojiPlugin(options, api) {
         }
       }];
     },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return emojiPluginKey.getState(editorState);
+    },
+    commands: {
+      insertEmoji: (0, _insertEmoji.insertEmoji)(api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions)
+    },
     pluginsOptions: {
       quickInsert: function quickInsert(_ref7) {
         var formatMessage = _ref7.formatMessage;
@@ -209,13 +220,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana9;
+            var _api$dependencies$ana10;
             var tr = insert(undefined);
             (0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
               triggerHandler: typeAhead,
               inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
             })(tr);
-            api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
+            api === null || api === void 0 ? void 0 : (_api$dependencies$ana10 = api.dependencies.analytics) === null || _api$dependencies$ana10 === void 0 ? void 0 : _api$dependencies$ana10.actions.attachAnalyticsEvent({
               action: _analytics.ACTION.INVOKED,
               actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,
@@ -232,11 +243,11 @@ var emojiPlugin = function emojiPlugin(options, api) {
     }
   };
 };
-var _default = emojiPlugin;
+
 /**
  * Actions
  */
-exports.default = _default;
+exports.emojiPlugin = emojiPlugin;
 var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
   SET_RESULTS: 'SET_RESULTS',

package/dist/cjs/plugins/index.js

@@ -134,7 +134,7 @@ Object.defineProperty(exports, "datePlugin", {
 Object.defineProperty(exports, "emojiPlugin", {
   enumerable: true,
   get: function get() {
-    return _emoji.default;
+    return _emoji.emojiPlugin;
   }
 });
 Object.defineProperty(exports, "expandPlugin", {
@@ -378,7 +378,7 @@ var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("./clear
 var _codeBlock = _interopRequireDefault(require("./code-block"));
 var _collabEdit = _interopRequireDefault(require("./collab-edit"));
 var _date = _interopRequireDefault(require("./date"));
-var _emoji = _interopRequireDefault(require("./emoji"));
+var _emoji = require("./emoji");
 var _extension = _interopRequireDefault(require("./extension"));
 var _fakeTextCursor = _interopRequireDefault(require("./fake-text-cursor"));
 var _helpDialog = _interopRequireDefault(require("./help-dialog"));

package/dist/cjs/plugins/insert-block/index.js

@@ -12,7 +12,6 @@ var _pluginKey = require("../media/pm-plugins/plugin-key");
 var _utils = require("../type-ahead/utils");
 var _layout = require("../layout");
 var _macro = require("../macro");
-var _emoji = require("../emoji");
 var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"));
 var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
 var _key = require("../type-ahead/pm-plugins/key");
@@ -72,7 +71,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
             blockTypeState: _main.pluginKey,
             mediaState: _pluginKey.stateKey,
             macroState: _pluginKey3.pluginKey,
-            emojiState: _emoji.emojiPluginKey,
             placeholderTextState: _pluginKey2.pluginKey,
             layoutState: _layout.pluginKey
           },
@@ -81,7 +79,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               mediaState = _ref2.mediaState,
               _ref2$macroState = _ref2.macroState,
               macroState = _ref2$macroState === void 0 ? {} : _ref2$macroState,
-              emojiState = _ref2.emojiState,
               placeholderTextState = _ref2.placeholderTextState,
               layoutState = _ref2.layoutState;
             return /*#__PURE__*/_react.default.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -101,7 +98,6 @@ var insertBlockPlugin = function insertBlockPlugin() {
               blockTypeState: blockTypeState,
               mediaState: mediaState,
               macroState: macroState,
-              emojiState: emojiState,
               placeholderTextState: placeholderTextState,
               layoutState: layoutState,
               providers: providers,
@@ -137,16 +133,16 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     blockTypeState = _ref3.blockTypeState,
     mediaState = _ref3.mediaState,
     macroState = _ref3.macroState,
-    emojiState = _ref3.emojiState,
     placeholderTextState = _ref3.placeholderTextState,
     layoutState = _ref3.layoutState,
     featureFlags = _ref3.featureFlags;
   var buttons = toolbarSizeToButtons(toolbarSize);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']),
     dateState = _useSharedPluginState.dateState,
     hyperlinkState = _useSharedPluginState.hyperlinkState,
     imageUploadState = _useSharedPluginState.imageUploadState,
-    mentionState = _useSharedPluginState.mentionState;
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState;
   return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -29,8 +29,7 @@ var _commands2 = require("../../../tasks-and-decisions/commands");
 var _commands3 = require("../../../expand/commands");
 var _api = require("../../../type-ahead/api");
 var _actions4 = require("../../../status/actions");
-var _analytics = require("../../../analytics");
-var _insertEmoji = require("../../../emoji/commands/insert-emoji");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("./messages");
 var _createItems3 = require("./create-items");
 var _blockInsertMenu = require("./block-insert-menu");
@@ -282,8 +281,10 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedEmoji", function (emojiId) {
+      var _pluginInjectionApi$d8;
+      var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      (0, _insertEmoji.insertEmoji)(_this.editorAnalyticsAPI)(emojiId, _analytics.INPUT_METHOD.PICKER)(_this.props.editorView.state, _this.props.editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.executeCommand((_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.emoji) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
       _this.toggleEmojiPicker();
       return true;
     });

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaPluginState = exports.createPlugin = exports.MediaPluginStateImplementation = exports.MEDIA_PLUGIN_IS_RESIZING_KEY = exports.MEDIA_CONTENT_WRAP_CLASS_NAME = void 0;
+exports.getMediaPluginState = exports.createPlugin = exports.MediaPluginStateImplementation = exports.MEDIA_PLUGIN_RESIZING_WIDTH_KEY = exports.MEDIA_PLUGIN_IS_RESIZING_KEY = exports.MEDIA_CONTENT_WRAP_CLASS_NAME = void 0;
 Object.defineProperty(exports, "stateKey", {
   enumerable: true,
   get: function get() {
@@ -52,6 +52,8 @@ var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 exports.MEDIA_CONTENT_WRAP_CLASS_NAME = MEDIA_CONTENT_WRAP_CLASS_NAME;
 var MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
 exports.MEDIA_PLUGIN_IS_RESIZING_KEY = MEDIA_PLUGIN_IS_RESIZING_KEY;
+var MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
+exports.MEDIA_PLUGIN_RESIZING_WIDTH_KEY = MEDIA_PLUGIN_RESIZING_WIDTH_KEY;
 var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
   var createElement = _react.default.createElement;
@@ -82,6 +84,7 @@ var MediaPluginStateImplementation = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "layout", 'center');
     (0, _defineProperty2.default)(this, "mediaNodes", []);
     (0, _defineProperty2.default)(this, "isResizing", false);
+    (0, _defineProperty2.default)(this, "resizingWidth", 0);
     (0, _defineProperty2.default)(this, "destroyed", false);
     (0, _defineProperty2.default)(this, "removeOnCloseListener", function () {});
     (0, _defineProperty2.default)(this, "onPopupToggleCallback", function () {});
@@ -501,6 +504,11 @@ 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() {
@@ -644,9 +652,13 @@ var createPlugin = function createPlugin(_schema, options, reactContext, getIntl
       },
       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/cjs/plugins/media/toolbar/index.js

@@ -265,12 +265,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 = (0, _utils2.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) || _editorSharedStyles.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) || _editorSharedStyles.akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -278,13 +281,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 = (0, _mediaSingle.calcMediaSinglePixelWidth)({
+            width: singleMediaWidth,
+            widthType: widthType,
+            origWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
+            layout: layout,
+            contentWidth: contentWidth,
+            containerWidth: containerWidth,
+            gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -304,11 +319,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && (0, _linking.shouldShowMediaLinkToolbar)(state)) {
       toolbarButtons.push({
@@ -406,7 +419,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   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];

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

@@ -30,6 +30,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _main = require("../../pm-plugins/main");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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 */
 var resizerNextTestId = 'mediaSingle.resizerNext.testid';
@@ -137,7 +139,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(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
@@ -191,11 +201,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;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", (0, _throttle.default)(function (size, delta) {
       var _this$props4 = _this.props,
         originalWidth = _this$props4.width,
         originalHeight = _this$props4.height,
@@ -215,10 +226,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         },
         snaps: guidelineSnaps.snaps
       });
+      _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
         originalWidth = _this$props5.width,

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

@@ -7,6 +7,7 @@ exports.toggleColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
 var _main = require("../pm-plugins/main");
 var _disabled = require("../utils/disabled");
+var _preset = require("@atlaskit/editor-common/preset");
 var toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
     var textColor = state.schema.marks.textColor;
@@ -26,9 +27,9 @@ var toggleColor = function toggleColor(color) {
         color: color
       });
       state.tr.scrollIntoView();
-      (0, _mark.toggleMark)(textColor, {
+      (0, _preset.pluginCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
         color: color
-      })(state, dispatch);
+      }))(state, dispatch);
     }
     return true;
   };

package/dist/cjs/utils/document.js

@@ -4,7 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findFarthestParentNode = void 0;
+Object.defineProperty(exports, "findFarthestParentNode", {
+  enumerable: true,
+  get: function get() {
+    return _utils.findFarthestParentNode;
+  }
+});
 exports.getChangedNodes = getChangedNodes;
 exports.getChangedNodesIn = getChangedNodesIn;
 exports.getChildBreakoutModes = getChildBreakoutModes;
@@ -65,29 +70,6 @@ function processRawFragmentValue(schema, value, providerFactory, sanitizePrivate
   }
   return _model.Fragment.from(adfEntities);
 }
-
-/**
- * Find the farthest node given a condition
- * @param predicate Function to check the node
- */
-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;
-  };
-};
-exports.findFarthestParentNode = findFarthestParentNode;
 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();
 };