@atlaskit/editor-core 187.41.3 → 187.41.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-core
 
+## 187.41.5
+
+### Patch Changes
+
+- [`1e26db8ffd0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e26db8ffd0) - ED-18264: Clean up useSomewhatSemanticTextColorNames - default behaviour will be same as when FF was on.
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+- [`69857bbbff0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/69857bbbff0) - [ED-20004] Capture errors in getPos due to prosemirror-view bump
+- [`ba95f6c1fd5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ba95f6c1fd5) - handleMarkdown no longer throws RangeError when 'from' argument exceeds document length, resolving bug where pasting a Jira issue datasource node at the end of a document would result in the legacy Jira issue macro being rendered instead
+- Updated dependencies
+
+## 187.41.4
+
+### Patch Changes
+
+- [`aeb5c9a01e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/aeb5c9a01e8) - Delete adf-schema from AFE and rely on npm package for adf-schema
+- [`111ff4f4f1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/111ff4f4f1f) - Add input resizing event analytics
+- [`da629b62ef9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da629b62ef9) - ED-19617 Refactor actions to remove createExtenstionAPI and call it instead during initialisation
+- [`4b4dcfe0bba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b4dcfe0bba) - Delete adf-schema, use published version
+- Updated dependencies
+
 ## 187.41.3
 
 ### Patch Changes
@@ -15081,105 +15101,105 @@ Remove applicationCard node and action mark
 
 ## 87.6.1
 
-- [patch][bdc9961" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bdc9961"
+- [patch][bdc9961](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bdc9961"
   d):
 
   - Fixes the codeblock insert rules
 
 ## 87.6.0
 
-- [minor][bb3336a" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bb3336a"
+- [minor][bb3336a](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/bb3336a"
   d):
 
   - Make text formatting toolbar account for different item titles legnths
 
 ## 87.5.0
 
-- [minor][d182ad9" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d182ad9"
+- [minor][d182ad9](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/d182ad9"
   d):
 
   - Add <-> to ↔︎ convertion rule
 
 ## 87.4.3
 
-- [patch][8fb4b1e" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8fb4b1e"
+- [patch][8fb4b1e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/8fb4b1e"
   d):
 
   - ED-5274 Fixes tables have excessive margin above
 
 ## 87.4.2
 
-- [patch][4cc767e" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4cc767e"
+- [patch][4cc767e](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/4cc767e"
   d):
 
   - ED-5030: Fixed gap-cursor on nodeviews in breakout mode.
 
 ## 87.4.1
 
-- [patch][abd19cd" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/abd19cd"
+- [patch][abd19cd](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/abd19cd"
   d):
 
   - ED-5616: fix inline cursor navigation
 
 ## 87.4.0
 
-- [minor][5981cec" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5981cec"
+- [minor][5981cec](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/5981cec"
   d):
 
   - TypeAhead to preserve marks
 
 ## 87.3.2
 
-- [patch][14d581b" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/14d581b"
+- [patch][14d581b](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/14d581b"
   d):
 
   - Disable clear formatting menu when there is no formatting
 
 ## 87.3.1
 
-- [patch][52f5b51" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/52f5b51"
+- [patch][52f5b51](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/52f5b51"
   d):
 
   - ED-4366: fix text selection inside table cell on triple click
 
 ## 87.3.0
 
-- [minor][b911028" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b911028"
+- [minor][b911028](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/b911028"
   d):
 
   - Show selected color in a table contextual menu
 
 ## 87.2.0
 
-- [minor][746c927" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/746c927"
+- [minor][746c927](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/746c927"
   d):
 
   - Add buffer to the bottom fullpage editor
 
 ## 87.1.13
 
-- [patch][f3d067d" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
+- [patch][f3d067d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/f3d067d"
   d):
 
   - Fix font size for numbered column in tables with dynamic text sizing
 
 ## 87.1.12
 
-- [patch][534f6ab" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/534f6ab"
+- [patch][534f6ab](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/534f6ab"
   d):
 
   - ED-5615: Fix block element padding inside table cells.
 
 ## 87.1.11
 
-- [patch][cb4168f" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cb4168f"
+- [patch][cb4168f](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/cb4168f"
   d):
 
   - ED-5307: make text white for selected heading menu item
 
 ## 87.1.10
 
-- [patch][db65837" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/db65837"
+- [patch][db65837](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/db65837"
   d):
 
   - ED-3762: fix setting text cursor when clicking on editor gutter
@@ -15192,7 +15212,7 @@ Remove applicationCard node and action mark
 
 ## 87.1.8
 
-- [patch][3c505aa" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3c505aa"
+- [patch][3c505aa](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/3c505aa"
   d):
 
   - Adds Danish and Romanian translations
@@ -15205,14 +15225,14 @@ Remove applicationCard node and action mark
 
 ## 87.1.6
 
-- [patch][6201223" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6201223"
+- [patch][6201223](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/6201223"
   d):
 
   - Add examples.
 
 ## 87.1.5
 
-- [patch][1662ae0" d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1662ae0"
+- [patch][1662ae0](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1662ae0"
   d):
 
   - ED-5440 convert sections to use percentages

package/dist/cjs/create-editor/feature-flags-from-props.js

@@ -32,7 +32,7 @@ function getSpellCheck(featureFlags) {
  * which is used by both current and archv3 editors.
  */
 function createFeatureFlagsFromProps(props) {
-  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29;
+  var _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$allowExtension, _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$collabEdit, _props$collabEdit2, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27;
   var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(props.featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
@@ -63,8 +63,7 @@ function createFeatureFlagsFromProps(props) {
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
     restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags25 = props.featureFlags) === null || _props$featureFlags25 === void 0 ? void 0 : _props$featureFlags25.restartNumberedLists) === true,
-    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.useSomewhatSemanticTextColorNames) : false)),
     lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
-    preventPopupOverflow: Boolean(typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29['prevent-popup-overflow']) : false)
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27['prevent-popup-overflow']) : false)
   });
 }

package/dist/cjs/plugins/collab-edit/ui/styles.js

@@ -10,9 +10,9 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject, _templateObject2, _templateObject3;
-var inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
+var inviteTeamWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: ", ";\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-negative-050, -4px)");
 exports.inviteTeamWrapper = inviteTeamWrapper;
-var avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), "var(--ds-space-100, 8px)");
+var avatarContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-025, 2px)");
 exports.avatarContainer = avatarContainer;
 var badge = function badge(color) {
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: ", ";\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px ", ";\n  box-sizing: border-box;\n"])), _editorSharedStyles.akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", (0, _editorSharedStyles.relativeFontSizeToBase16)(9), "var(--ds-border-inverse, #fff)");

package/dist/cjs/plugins/date/nodeviews/date.js

@@ -19,7 +19,12 @@ function DateNodeView(props) {
     selection = _props$view$state.selection,
     getPos = props.getPos;
   var intl = (0, _reactIntlNext.useIntl)();
-  var pos = typeof getPos === 'function' ? getPos() : undefined;
+  var pos;
+  try {
+    pos = typeof getPos === 'function' ? getPos() : undefined;
+  } catch (e) {
+    pos = undefined;
+  }
 
   // We fall back to selection.$from even though it does not cover all use cases
   // eg. upon Editor init, selection is at the start, not at the Date node

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _adfSchema = require("@atlaskit/adf-schema");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _main = require("./pm-plugins/main");
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _uniqueId = require("./pm-plugins/unique-id");
@@ -13,11 +14,16 @@ var _toolbar = require("./toolbar");
 var _contextPanel = require("./context-panel");
 var _extensionApi = require("./extension-api");
 var extensionPlugin = function extensionPlugin(_ref) {
-  var _api$featureFlags, _api$contextPanel2, _api$contextPanel3;
+  var _api$featureFlags, _api$contextPanel3, _api$contextPanel4;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
-    api = _ref.api;
-  var featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+    _api = _ref.api;
+  var featureFlags = (_api === null || _api === void 0 ? void 0 : (_api$featureFlags = _api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  //Note: This is a hack to get the editor view reference in the plugin. Copied from table plugin.
+  //This is needed to get the current selection in the editor
+  var editorViewRef = {
+    current: null
+  };
   return {
     name: 'extension',
     nodes: function nodes() {
@@ -41,7 +47,7 @@ var extensionPlugin = function extensionPlugin(_ref) {
             portalProviderAPI = _ref2.portalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher;
           var extensionHandlers = options.extensionHandlers || {};
-          return (0, _main.createPlugin)(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, api, options.useLongPressSelection, {
+          return (0, _main.createPlugin)(dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, _api, options.useLongPressSelection, {
             appearance: options.appearance
           });
         }
@@ -49,25 +55,45 @@ var extensionPlugin = function extensionPlugin(_ref) {
         name: 'extensionKeymap',
         plugin: function plugin() {
           var _api$contextPanel;
-          return (0, _keymap.default)(api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
+          return (0, _keymap.default)(_api === null || _api === void 0 ? void 0 : (_api$contextPanel = _api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange);
         }
       }, {
         name: 'extensionUniqueId',
         plugin: function plugin() {
           return (0, _uniqueId.createPlugin)();
         }
+      }, {
+        name: 'extensionEditorViewRef',
+        plugin: function plugin() {
+          return new _safePlugin.SafePlugin({
+            view: function view(editorView) {
+              editorViewRef.current = editorView;
+              return {
+                destroy: function destroy() {
+                  editorViewRef.current = null;
+                }
+              };
+            }
+          });
+        }
       }];
     },
     actions: {
-      createExtensionAPI: _extensionApi.createExtensionAPI
+      api: function api() {
+        var _api$contextPanel2;
+        return (0, _extensionApi.createExtensionAPI)({
+          editorView: editorViewRef.current,
+          applyChange: _api === null || _api === void 0 ? void 0 : (_api$contextPanel2 = _api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        });
+      }
     },
     pluginsOptions: {
       floatingToolbar: (0, _toolbar.getToolbarConfig)({
         breakoutEnabled: options.breakoutEnabled,
-        hoverDecoration: api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration,
-        applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.actions.applyChange
+        hoverDecoration: _api === null || _api === void 0 ? void 0 : _api.decorations.actions.hoverDecoration,
+        applyChangeToContextPanel: _api === null || _api === void 0 ? void 0 : (_api$contextPanel3 = _api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange
       }),
-      contextPanel: (0, _contextPanel.getContextPanel)(options.allowAutoSave, featureFlags, api === null || api === void 0 ? void 0 : (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange)
+      contextPanel: (0, _contextPanel.getContextPanel)(options.allowAutoSave, featureFlags, _api === null || _api === void 0 ? void 0 : (_api$contextPanel4 = _api.contextPanel) === null || _api$contextPanel4 === void 0 ? void 0 : _api$contextPanel4.actions.applyChange)
     }
   };
 };

package/dist/cjs/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -14,7 +14,6 @@ var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _utils = require("../../../utils");
-var _extensionApi = require("../../extension/extension-api");
 var _ui = require("@atlaskit/editor-common/ui");
 var _Separator = _interopRequireDefault(require("./Separator"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,8 +54,7 @@ var resolveExtensionIcon = /*#__PURE__*/function () {
 var ExtensionButton = function ExtensionButton(props) {
   var item = props.item,
     node = props.node,
-    editorView = props.editorView,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    extensionApi = props.extensionApi;
   var ButtonIcon = _react.default.useMemo(function () {
     return item.icon ? (0, _reactLoadable.default)({
       loader: function () {
@@ -84,11 +82,7 @@ var ExtensionButton = function ExtensionButton(props) {
       throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
     }
     var targetNodeAdf = (0, _utils.nodeToJSON)(node);
-    var api = (0, _extensionApi.createExtensionAPI)({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    });
-    item.action(targetNodeAdf, api);
+    item.action(targetNodeAdf, extensionApi);
   };
   return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
     title: item.label,
@@ -106,7 +100,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     editorView = props.editorView,
     extensionProvider = props.extensionProvider,
     separator = props.separator,
-    applyChangeToContextPanel = props.applyChangeToContextPanel;
+    applyChangeToContextPanel = props.applyChangeToContextPanel,
+    extensionApi = props.extensionApi;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     extensions = _useState2[0],
@@ -150,11 +145,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     return (0, _utils.nodeToJSON)(node);
   }, [node]);
   var extensionItems = _react.default.useMemo(function () {
-    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, (0, _extensionApi.createExtensionAPI)({
-      editorView: editorView,
-      applyChange: applyChangeToContextPanel
-    }));
-  }, [extensions, nodeAdf, editorView, applyChangeToContextPanel]);
+    return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, extensionApi);
+  }, [extensions, nodeAdf, extensionApi]);
   if (!extensionItems.length) {
     return null;
   }
@@ -170,7 +162,8 @@ var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
       node: node,
       item: item,
       editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel
+      applyChangeToContextPanel: applyChangeToContextPanel,
+      extensionApi: extensionApi
     }));
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/_react.default.createElement(_Separator.default, null));

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

@@ -62,14 +62,10 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     featureFlags = _ref.featureFlags,
     api = _ref.api;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  var _ref2 = featureFlags || {
-      useSomewhatSemanticTextColorNames: false
-    },
-    useSomewhatSemanticTextColorNames = _ref2.useSomewhatSemanticTextColorNames;
   return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
-    var _api$contextPanel;
+    var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
         var ButtonIcon = item.icon;
@@ -201,14 +197,6 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             ,
             hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor,
             paletteColorTooltipMessages: _ColorPalette.backgroundPaletteTooltipMessages
-            // We did not want to create new FF or update
-            //  useSomewhatSemanticTextColorNames name
-            //  because it is temporary and require extra work.
-            // So even though it says text color names,
-            //  we are going to use for all color pickers
-            //  such as text, background and table charts.
-            ,
-            showSomewhatSemanticTooltips: useSomewhatSemanticTextColorNames
           });
         }
         if (item.selectType === 'emoji') {
@@ -230,8 +218,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         if (!editorView || !extensionsProvider) {
           return null;
         }
-        var _ref3 = featureFlags || {},
-          extendFloatingToolbar = _ref3.extendFloatingToolbar;
+        var _ref2 = featureFlags || {},
+          extendFloatingToolbar = _ref2.extendFloatingToolbar;
         if (!extendFloatingToolbar) {
           return null;
         }
@@ -241,7 +229,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           editorView: editorView,
           extensionProvider: extensionsProvider,
           separator: item.separator,
-          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange
+          applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
         return (0, _react2.jsx)(_Separator.default, {
@@ -376,8 +365,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
   (0, _createClass2.default)(Toolbar, [{
     key: "resetStyling",
-    value: function resetStyling(_ref4) {
-      var table = _ref4.table;
+    value: function resetStyling(_ref3) {
+      var table = _ref3.table;
       if (this.props.editorView) {
         var _this$props$api;
         var _this$props$editorVie2 = this.props.editorView,

package/dist/cjs/plugins/media/styles.js

@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaCard = require("@atlaskit/media-card");
 var _templateObject;
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-left::after,\n    .resizer-handle-right::after {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on

package/dist/cjs/plugins/media/toolbar/commands.js

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _analytics = require("../utils/analytics");
+var _analytics2 = require("@atlaskit/editor-common/analytics");
 var _utils2 = require("./utils");
 var _currentMediaNode = require("../utils/current-media-node");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_BORDER_COLOR = '#091e4224';
 exports.DEFAULT_BORDER_COLOR = DEFAULT_BORDER_COLOR;
 var DEFAULT_BORDER_SIZE = 2;
@@ -40,12 +45,12 @@ var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAP
     tr = (0, _utils.safeInsert)(group, nodePos, true)(tr);
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_TYPE,
-        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics2.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics2.EVENT_TYPE.TRACK,
         attributes: {
-          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP,
-          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE
+          newType: _analytics2.ACTION_SUBJECT_ID.MEDIA_GROUP,
+          previousType: _analytics2.ACTION_SUBJECT_ID.MEDIA_INLINE
         }
       })(tr);
       dispatch(tr);
@@ -78,12 +83,12 @@ var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAP
     tr = (0, _utils.safeInsert)(node, nodePos, true)(tr);
     if (dispatch) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-        action: _analytics.ACTION.CHANGED_TYPE,
-        actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-        eventType: _analytics.EVENT_TYPE.TRACK,
+        action: _analytics2.ACTION.CHANGED_TYPE,
+        actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+        eventType: _analytics2.EVENT_TYPE.TRACK,
         attributes: {
-          newType: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE,
-          previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
+          newType: _analytics2.ACTION_SUBJECT_ID.MEDIA_INLINE,
+          previousType: _analytics2.ACTION_SUBJECT_ID.MEDIA_GROUP
         }
       })(tr);
       dispatch(tr);
@@ -129,10 +134,10 @@ var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
     if (dispatch) {
       if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.DELETED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.DELETED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             previousColor: borderMark.attrs.color,
             previousSize: borderMark.attrs.size
@@ -140,10 +145,10 @@ var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
         })(tr);
       } else {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.ADDED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.ADDED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             color: DEFAULT_BORDER_COLOR,
             size: DEFAULT_BORDER_SIZE
@@ -186,10 +191,10 @@ var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
       }
       if (dispatch) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-          action: _analytics.ACTION.UPDATED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.BORDER,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _analytics2.ACTION.UPDATED,
+          actionSubject: _analytics2.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _analytics2.ACTION_SUBJECT_ID.BORDER,
+          eventType: _analytics2.EVENT_TYPE.TRACK,
           attributes: {
             previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
             previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
@@ -203,4 +208,37 @@ var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
     };
   };
 };
-exports.setBorderMark = setBorderMark;
+exports.setBorderMark = setBorderMark;
+var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
+  return function (width, validation, layout) {
+    return function (state, dispatch) {
+      var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
+      if (!selectedMediaSingleNode) {
+        return false;
+      }
+      var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+        width: width,
+        widthType: 'pixel',
+        layout: layout
+      }));
+      tr.setMeta('scrollIntoView', false);
+      tr.setSelection(_state.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+      var $pos = state.doc.resolve(selectedMediaSingleNode.pos);
+      var parentNodeType = $pos ? $pos.parent.type.name : undefined;
+      var payload = (0, _analytics.getMediaInputResizeAnalyticsEvent)('mediaSingle', {
+        width: width,
+        layout: layout,
+        validation: validation,
+        parentNode: parentNodeType
+      });
+      if (payload) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
+      }
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+exports.updateMediaSingleWidth = updateMediaSingleWidth;