@atlaskit/editor-core 183.1.1 → 184.0.0

package/dist/cjs/plugins/media/nodeviews/mediaNodeView/index.js

@@ -18,13 +18,21 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _prosemirrorState = require("prosemirror-state");
 var _react = _interopRequireDefault(require("react"));
 var _nodeviews = require("../../../../nodeviews");
-var _WithPluginState = _interopRequireDefault(require("../../../../ui/WithPluginState"));
-var _width = require("../../../width");
 var _media = _interopRequireDefault(require("./media"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("../../utils/media-common");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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; } }
+var MediaNodeWithProviders = function MediaNodeWithProviders(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    innerComponent = _ref.innerComponent;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return innerComponent({
+    width: widthState
+  });
+};
 var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   (0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
   var _super = _createSuper(MediaNodeView);
@@ -36,8 +44,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithState", function (mediaProvider, contextIdentifierProvider) {
-      return function (_ref) {
-        var editorWidth = _ref.width;
+      return function (_ref2) {
+        var editorWidth = _ref2.width;
         var getPos = _this.getPos;
         var mediaOptions = _this.reactComponentProps.mediaOptions;
         var selection = _this.view.state.selection;
@@ -81,15 +89,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         });
       };
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithProviders", function (_ref2) {
-      var mediaProvider = _ref2.mediaProvider,
-        contextIdentifierProvider = _ref2.contextIdentifierProvider;
-      return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
-        editorView: _this.view,
-        plugins: {
-          width: _width.pluginKey
-        },
-        render: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaNodeWithProviders", function (_ref3) {
+      var mediaProvider = _ref3.mediaProvider,
+        contextIdentifierProvider = _ref3.contextIdentifierProvider;
+      var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
+      return /*#__PURE__*/_react.default.createElement(MediaNodeWithProviders, {
+        pluginInjectionApi: pluginInjectionApi,
+        innerComponent: _this.renderMediaNodeWithState(mediaProvider, contextIdentifierProvider)
       });
     });
     return _this;
@@ -152,12 +158,14 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
 }(_nodeviews.SelectionBasedNodeView);
 var ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory) {
   var mediaOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var pluginInjectionApi = arguments.length > 4 ? arguments[4] : undefined;
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
       eventDispatcher: eventDispatcher,
       providerFactory: providerFactory,
-      mediaOptions: mediaOptions
+      mediaOptions: mediaOptions,
+      pluginInjectionApi: pluginInjectionApi
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 };

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -23,8 +23,6 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
-var _WithPluginState = _interopRequireDefault(require("../../../ui/WithPluginState"));
-var _width = require("../../width");
 var _utils2 = require("../../../utils");
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
@@ -40,6 +38,7 @@ var _ReactNodeView2 = _interopRequireDefault(require("../../../nodeviews/ReactNo
 var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlaceholder"));
 var _prosemirrorState = require("prosemirror-state");
 var _captions = require("../commands/captions");
+var _hooks = require("@atlaskit/editor-common/hooks");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -233,11 +232,11 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       (_this$captionPlaceHol = _this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGrid", function (visible, gridType, highlight) {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
       var _this$props = _this.props,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         view = _this$props.view;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.displayGrid(view)({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.grid) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGrid(view)({
         visible: visible,
         gridType: gridType,
         highlight: highlight
@@ -414,6 +413,40 @@ exports.default = MediaSingleNode;
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref5) {
+  var pluginInjectionApi = _ref5.pluginInjectionApi,
+    mediaProvider = _ref5.mediaProvider,
+    contextIdentifierProvider = _ref5.contextIdentifierProvider,
+    node = _ref5.node,
+    getPos = _ref5.getPos,
+    mediaOptions = _ref5.mediaOptions,
+    view = _ref5.view,
+    fullWidthMode = _ref5.fullWidthMode,
+    selected = _ref5.selected,
+    eventDispatcher = _ref5.eventDispatcher,
+    dispatchAnalyticsEvent = _ref5.dispatchAnalyticsEvent,
+    forwardRef = _ref5.forwardRef;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media']),
+    widthState = _useSharedPluginState.widthState,
+    mediaState = _useSharedPluginState.mediaState;
+  return (0, _react.jsx)(MediaSingleNode, {
+    width: widthState.width,
+    lineLength: widthState.lineLength,
+    node: node,
+    getPos: getPos,
+    mediaProvider: mediaProvider,
+    contextIdentifierProvider: contextIdentifierProvider,
+    mediaOptions: mediaOptions,
+    view: view,
+    fullWidthMode: fullWidthMode,
+    selected: selected,
+    eventDispatcher: eventDispatcher,
+    mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    forwardRef: forwardRef,
+    pluginInjectionApi: pluginInjectionApi
+  });
+};
 var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
@@ -514,36 +547,22 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref5) {
-          var mediaProvider = _ref5.mediaProvider,
-            contextIdentifierProvider = _ref5.contextIdentifierProvider;
-          return (0, _react.jsx)(_WithPluginState.default, {
-            editorView: _this4.view,
-            plugins: {
-              width: _width.pluginKey,
-              mediaPluginState: _main.stateKey
-            },
-            render: function render(_ref6) {
-              var width = _ref6.width,
-                mediaPluginState = _ref6.mediaPluginState;
-              return (0, _react.jsx)(MediaSingleNode, {
-                width: width.width,
-                lineLength: width.lineLength,
-                node: _this4.node,
-                getPos: getPos,
-                mediaProvider: mediaProvider,
-                contextIdentifierProvider: contextIdentifierProvider,
-                mediaOptions: mediaOptions,
-                view: _this4.view,
-                fullWidthMode: fullWidthMode,
-                selected: _this4.isNodeSelected,
-                eventDispatcher: eventDispatcher,
-                mediaPluginState: mediaPluginState,
-                dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-                forwardRef: forwardRef,
-                pluginInjectionApi: pluginInjectionApi
-              });
-            }
+        renderNode: function renderNode(_ref6) {
+          var mediaProvider = _ref6.mediaProvider,
+            contextIdentifierProvider = _ref6.contextIdentifierProvider;
+          return (0, _react.jsx)(MediaSingleNodeWrapper, {
+            pluginInjectionApi: pluginInjectionApi,
+            mediaProvider: mediaProvider,
+            contextIdentifierProvider: contextIdentifierProvider,
+            node: _this4.node,
+            getPos: getPos,
+            mediaOptions: mediaOptions,
+            view: _this4.view,
+            fullWidthMode: fullWidthMode,
+            selected: _this4.isNodeSelected,
+            eventDispatcher: eventDispatcher,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            forwardRef: forwardRef
           });
         }
       });

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    & [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: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\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  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _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, ")"), _mediaCard.fileCardImageViewSelectedSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _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))");
+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    & [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: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\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"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _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))");
 
 /* `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/index.js

@@ -194,7 +194,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
   }];
   return items;
 };
-var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, getEditorFeatureFlags) {
+var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, widthPluginDependencyApi, getEditorFeatureFlags) {
   var mediaSingle = state.schema.nodes.mediaSingle;
   var allowResizing = options.allowResizing,
     allowLinking = options.allowLinking,
@@ -231,7 +231,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAdvancedToolBarOptions) {
-    toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)((0, _MediaAndEmbedsToolbar.default)(state, intl, state.schema.nodes.mediaSingle, allowResizing, allowResizingInTables)));
+    toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)((0, _MediaAndEmbedsToolbar.default)(state, intl, state.schema.nodes.mediaSingle, widthPluginDependencyApi, allowResizing, allowResizingInTables)));
     if (toolbarButtons.length) {
       toolbarButtons.push({
         type: 'separator'
@@ -311,6 +311,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
 };
 var floatingToolbar = function floatingToolbar(state, intl) {
   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,
     media = _state$schema$nodes.media,
     mediaInline = _state$schema$nodes.mediaInline,
@@ -376,7 +377,7 @@ var floatingToolbar = function floatingToolbar(state, intl) {
       var element = (_mediaPluginState$ele3 = mediaPluginState.element) === null || _mediaPluginState$ele3 === void 0 ? void 0 : _mediaPluginState$ele3.querySelector(".".concat(_styles.MediaSingleNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, getEditorFeatureFlags);
+    items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width, getEditorFeatureFlags);
   }
   return _objectSpread(_objectSpread({}, baseToolbar), {}, {
     items: items,

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

@@ -49,9 +49,12 @@ var line = function line(size, selected) {
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(colors.N0, ")") : "var(--ds-icon, #44546F)");
 };
 exports.line = line;
+var getHoverStyles = function getHoverStyles(selector) {
+  return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    } \n  }");
+};
 var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
   var enabled = _ref.enabled,
     isOpen = _ref.isOpen;
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  &:hover {\n    .image-border-toolbar-btn {\n      ", "\n    }\n\n    .image-border-toolbar-dropdown {\n      ", "\n    }\n  }\n"])), !enabled && " background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"), !isOpen && !enabled && "background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"));
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  ", "\n  ", "\n"])), !enabled && getHoverStyles('.image-border-toolbar-btn'), !isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown'));
 };
 exports.toolbarButtonWrapper = toolbarButtonWrapper;

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

@@ -43,6 +43,7 @@ var _tinyMCE = require("../util/tinyMCE");
 var _utils8 = require("@atlaskit/editor-tables/utils");
 var _step = require("../../../utils/step");
 var _pluginFactory = require("./plugin-factory");
+var _prosemirrorUtils = require("prosemirror-utils");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, cardOptions, sanitizePrivateContent, providerFactory) {
@@ -192,6 +193,11 @@ function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, ca
           var placeholder = state.schema.nodes.placeholder;
           var isPastingTextInsidePlaceholderText = ((_state$doc$resolve$no = state.doc.resolve(state.selection.$anchor.pos).nodeAfter) === null || _state$doc$resolve$no === void 0 ? void 0 : _state$doc$resolve$no.type) === placeholder;
 
+          // Don't add closeHistory if we're pasting over layout columns, as we will appendTransaction
+          // to cleanup the layout's structure and we want to keep the paste and re-structuring as
+          // one event.
+          var isPastingOverLayoutColumns = (0, _prosemirrorUtils.hasParentNodeOfType)(state.schema.nodes.layoutColumn)(state.selection);
+
           // don't add closeHistory call if we're pasting a table, as some tables may involve additional
           // appendedTransactions to repair them (if they're partial or incomplete) and we don't want
           // to split those repairing transactions in prosemirror-history when they're being added to the
@@ -207,7 +213,7 @@ function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFlags, ca
             });
             return tableExists;
           });
-          if (!isPastingTextInsidePlaceholderText && !isPastingTable) {
+          if (!isPastingTextInsidePlaceholderText && !isPastingTable && !isPastingOverLayoutColumns) {
             tr.setMeta(_betterTypeHistory.pluginKey, true);
           }
           (0, _card.addLinkMetadata)(view.state.selection, tr, {

package/dist/cjs/test-utils.js

@@ -88,6 +88,9 @@ function lightProcessPluginsList(editorPlugins) {
       var _acc$nodes;
       (_acc$nodes = acc.nodes).push.apply(_acc$nodes, (0, _toConsumableArray2.default)(editorPlugin.nodes()));
     }
+    if (editorPlugin.contentComponent) {
+      acc.contentComponents.push(editorPlugin.contentComponent);
+    }
     if (editorPlugin.onEditorViewStateUpdated) {
       acc.onEditorViewStateUpdatedCallbacks.push(editorPlugin.onEditorViewStateUpdated);
     }
@@ -96,6 +99,7 @@ function lightProcessPluginsList(editorPlugins) {
     nodes: [],
     marks: [],
     plugins: [],
+    contentComponents: [],
     onEditorViewStateUpdatedCallbacks: []
   });
 }
@@ -120,7 +124,8 @@ var createPMSchemaAndPlugins = function createPMSchemaAndPlugins() {
     return {
       plugins: plugins,
       schema: schema,
-      onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks
+      onEditorViewStateUpdatedCallbacks: editorConfig.onEditorViewStateUpdatedCallbacks,
+      editorConfig: editorConfig
     };
   };
 };

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -30,7 +30,7 @@ var _WithFlash = _interopRequireDefault(require("../../WithFlash"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _WidthEmitter = _interopRequireDefault(require("../../WidthEmitter"));
-var _grid = require("../../../plugins/grid");
+var _styles = require("@atlaskit/editor-common/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("../../../messages"));
@@ -44,7 +44,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
 var commentEditorStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, "var(--ds-background-input, white)", "var(--ds-border, ".concat(_colors.N40, ")"), (0, _constants.borderRadius)());
-var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
+var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, CommentEditorMargin - _styles.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 var Editor = /*#__PURE__*/function (_React$Component) {

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -17,7 +17,7 @@ var _react2 = require("@emotion/react");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _StyledComponents = require("./StyledComponents");
-var _context = require("../../ContextPanel/context");
+var _ui = require("@atlaskit/editor-common/ui");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
 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); }; }
@@ -89,7 +89,7 @@ var FullPageEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var props = this.props;
       var showKeyline = this.state.showKeyline;
-      return (0, _react2.jsx)(_context.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
         css: _StyledComponents.fullPageEditorWrapper,
         className: "akEditor",
         ref: this.wrapperElementRef

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.FullPageContentArea = exports.CONTENT_AREA_TEST_ID = void 0;
 var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
-var _context = require("../../ContextPanel/context");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _Addon = require("../../Addon");
@@ -25,7 +24,7 @@ var Content = /*#__PURE__*/_react2.default.memo(function (props) {
   var fullWidthMode = props.appearance === 'full-width';
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return (0, _react.jsx)(_context.ContextPanelConsumer, null, function (_ref2) {
+    return (0, _react.jsx)(_ui.ContextPanelConsumer, null, function (_ref2) {
       var positionedOverEditor = _ref2.positionedOverEditor;
       return (0, _react.jsx)("div", {
         css: [_StyledComponents.contentArea, positionedOverEditor && _StyledComponents.positionedOverEditorStyle],

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

@@ -15,7 +15,7 @@ var _FindReplaceToolbarButtonWithState = _interopRequireDefault(require("../../.
 var _BeforePrimaryToolbarWrapper = require("../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper");
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 var _MainToolbar = require("./MainToolbar");
-var _context = require("../../ContextPanel/context");
+var _ui2 = require("@atlaskit/editor-common/ui");
 var _messages = _interopRequireDefault(require("./messages"));
 var _ToolbarArrowKeyNavigationProvider = require("../../ToolbarArrowKeyNavigationProvider");
 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); }
@@ -94,7 +94,7 @@ var EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
     event.preventDefault();
     event.stopPropagation();
   };
-  return (0, _react2.jsx)(_context.ContextPanelConsumer, null, function (_ref) {
+  return (0, _react2.jsx)(_ui2.ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags8, _props$featureFlags9, _props$featureFlags10;
     var contextPanelWidth = _ref.width;
     return (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {

package/dist/cjs/ui/ContentStyles/index.js

@@ -28,16 +28,15 @@ var _styles14 = require("../../plugins/mentions/styles");
 var _styles15 = require("../../plugins/emoji/styles");
 var _styles16 = require("../../plugins/text-formatting/styles");
 var _styles17 = require("../../plugins/placeholder-text/styles");
-var _styles18 = require("../../plugins/grid/styles");
-var _styles19 = require("../../plugins/hyperlink/styles");
-var _styles20 = require("../../plugins/extension/ui/styles");
-var _styles21 = require("../../plugins/expand/ui/styles");
+var _styles18 = require("../../plugins/hyperlink/styles");
+var _styles19 = require("../../plugins/extension/ui/styles");
+var _styles20 = require("../../plugins/expand/ui/styles");
 var _style = require("../../plugins/media/pm-plugins/alt-text/style");
-var _styles22 = require("../../plugins/find-replace/styles");
-var _styles23 = require("../../plugins/tasks-and-decisions/styles");
-var _styles24 = require("../../plugins/status/styles");
-var _styles25 = require("../../plugins/card/styles");
-var _styles26 = require("../../plugins/date/styles");
+var _styles21 = require("../../plugins/find-replace/styles");
+var _styles22 = require("../../plugins/tasks-and-decisions/styles");
+var _styles23 = require("../../plugins/status/styles");
+var _styles24 = require("../../plugins/card/styles");
+var _styles25 = require("../../plugins/date/styles");
 var _styled = require("../../plugins/card/ui/styled");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _templateObject;
@@ -47,7 +46,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles17.placeholderTextStyles, _styles5.placeholderStyles, (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, (0, _styles11.layoutStyles)(props), _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, _styles18.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles19.extensionStyles, (0, _styles20.expandStyles)(props), _styles21.findReplaceStyles, _styles22.taskDecisionStyles, _styles23.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles24.smartCardStyles, _styles.smartCardSharedStyles, _styles25.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {