@atlaskit/editor-core 190.2.2 → 190.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-core
 
+## 190.2.3
+
+### Patch Changes
+
+- [#64335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64335) [`efc8826c907f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/efc8826c907f) - [ux] [ED-16509] Restart numbered list inserting nodes via QUICK INSERT, nodes including : panels, expands, decisions, tables, layout, quotes, actions, dividers, headings. Changes are being guarded behind feature flag platform.editor.ordered-list-inserting-nodes_bh0vo
+- [#65015](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65015) [`15b8e45585f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/15b8e45585f2) - [ux] ED-21757 Fix for width change buttons in MBE floating toolbar.
+- [#64281](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64281) [`b523d60b380c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b523d60b380c) - Remove legacy theming logic from @atlaskit/editor-core and @atlaskit/renderer. Theming is still available via @atlaskit/tokens.
+- [#63266](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63266) [`630f6c9fc80c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/630f6c9fc80c) - ED-21576: Added new Example for MBE - Interactive Fake Tabs
+- Updated dependencies
+
 ## 190.2.2
 
 ### Patch Changes

package/dist/cjs/plugins/extension/ui/Extension/Extension/styles.js

@@ -7,22 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyle = exports.widerLayoutClassName = exports.header = exports.contentWrapper = exports.content = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var widerLayoutClassName = exports.widerLayoutClassName = 'wider-layout';
-var wrapperStyle = exports.wrapperStyle = function wrapperStyle(theme) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  &.without-frame {\n    background: transparent;\n  }\n  cursor: pointer;\n  width: 100%;\n\n  .extension-overflow-wrapper:not(.with-body) {\n    overflow-x: auto;\n  }\n"])), (0, _styles.wrapperDefault)(theme));
-};
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  &.without-frame {\n    background: transparent;\n  }\n  cursor: pointer;\n  width: 100%;\n\n  .extension-overflow-wrapper:not(.with-body) {\n    overflow-x: auto;\n  }\n"])), _styles.wrapperDefault);
 var header = exports.header = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px 0px;\n  vertical-align: middle;\n\n  &.with-children:not(.without-frame) {\n    padding: ", " ", "\n      ", ";\n  }\n  &.without-frame {\n    padding: 0;\n  }\n"])), _styles.padding / 2, _styles.padding / 2, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
-var content = exports.content = function content(theme) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  cursor: initial;\n  width: 100%;\n"])), _styles.padding, (0, _components.themed)({
-    light: "var(--ds-surface, white)",
-    dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
-  })(theme), (0, _components.themed)({
-    dark: "var(--ds-text, ".concat(_colors.DN900, ")")
-  })(theme), "var(--ds-border, ".concat(_colors.N30, ")"), (0, _constants.borderRadius)());
-};
+var content = exports.content = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  cursor: initial;\n  width: 100%;\n"])), _styles.padding, "var(--ds-surface, white)", "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border-radius, 3px)");
 var contentWrapper = exports.contentWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", "px ", "px;\n  display: flex;\n  justify-content: center;\n"])), _styles.padding, _styles.padding);

package/dist/cjs/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -201,7 +201,9 @@ var ExtensionComponent = exports.default = /*#__PURE__*/function (_Component) {
           getPos: getPos,
           handleContentDOMRef: handleContentDOMRef,
           tryExtensionHandler: this.tryExtensionHandler.bind(this),
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          editorAppearance: editorAppearance
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);

package/dist/cjs/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -7,9 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrapperStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _styles = require("../styles");
 var _templateObject;
-var wrapperStyle = exports.wrapperStyle = function wrapperStyle(theme) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", "px;\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), (0, _styles.wrapperDefault)(theme), "var(--ds-space-050, 4px)", (0, _constants.borderRadius)(), "var(--ds-background-neutral-subtle, white)");
-};
+var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", ";\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), _styles.wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");

package/dist/cjs/plugins/extension/ui/Extension/MultiBodiedExtension/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -15,6 +17,8 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _utils = require("@atlaskit/editor-common/utils");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _templateObject, _templateObject2;
 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; }
@@ -125,14 +129,16 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
   }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
   return actions;
 };
-var navigationCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  background-color: ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-background-inverse-subtle, ".concat(_colors.N50, ")"));
-var MultiBodiedExtension = function MultiBodiedExtension(_ref2) {
+var navigationCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"));
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
   var node = _ref2.node,
     handleContentDOMRef = _ref2.handleContentDOMRef,
     getPos = _ref2.getPos,
     tryExtensionHandler = _ref2.tryExtensionHandler,
     editorView = _ref2.editorView,
-    eventDispatcher = _ref2.eventDispatcher;
+    eventDispatcher = _ref2.eventDispatcher,
+    widthState = _ref2.widthState,
+    editorAppearance = _ref2.editorAppearance;
   var _useState = (0, _react2.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -160,11 +166,27 @@ var MultiBodiedExtension = function MultiBodiedExtension(_ref2) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
   var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  var mbeContainerStyles = {};
+  if (shouldBreakout) {
+    var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
+        mode: node.attrs.layout,
+        widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+        widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+      }),
+      breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
+    mbeContainerStyles = breakoutStyles;
+  }
   return (0, _react.jsx)("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
   }, (0, _react.jsx)("nav", {
     className: "multiBodiedExtension-navigation",
     css: navigationCSS,
@@ -192,4 +214,50 @@ var sendMBEAnalyticsEvent = function sendMBEAnalyticsEvent(action, node, eventDi
     }
   });
 };
+var MultiBodiedExtensionWithSharedState = function MultiBodiedExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return (0, _react.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? (0, _react.jsx)(MultiBodiedExtensionDeprecated, props) : (0, _react.jsx)(MultiBodiedExtensionWithSharedState, props);
+};
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
+  return (0, _react.jsx)(_withPluginState.WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: function render(_ref3) {
+      var widthState = _ref3.widthState;
+      return (0, _react.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
+        widthState: widthState
+      }, props));
+    }
+  });
+};
+/**
+ * End workaround
+ */
 var _default = exports.default = MultiBodiedExtension;

package/dist/cjs/plugins/extension/ui/Extension/styles.js

@@ -20,20 +20,11 @@ Object.defineProperty(exports, "padding", {
 exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("@atlaskit/editor-common/styles");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var wrapperDefault = exports.wrapperDefault = function wrapperDefault(theme) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
-  })(theme), (0, _constants.borderRadius)(), (0, _components.themed)({
-    dark: "var(--ds-text, ".concat(_colors.DN700, ")")
-  })(theme), "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
-};
-var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), (0, _constants.borderRadius)());
+var wrapperDefault = exports.wrapperDefault = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
+var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
 var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
 var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N70, ")"));
 var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));

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

@@ -10,4 +10,4 @@ var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _templateObject;
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
+var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    &:not(.danger).", " {\n      & > span > .multiBodiedExtension--container {\n        ", "\n      }\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);

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

@@ -47,7 +47,7 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)(_templateOb
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject7 || (_templateObject7 = (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)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles3.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props), _styles2.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles6.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles3.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, _layout.layoutStyles, _styles2.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles6.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -19,21 +19,10 @@ Object.defineProperty(exports, "LAYOUT_SECTION_MARGIN", {
 exports.layoutStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _types = require("@atlaskit/editor-plugin-table/types");
 var _consts = require("@atlaskit/editor-plugin-table/ui/consts");
-var _templateObject; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var layoutStyles = exports.layoutStyles = function layoutStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, (0, _components.themed)({
-    light: "var(--ds-border, ".concat(_colors.N40A, ")"),
-    dark: "var(--ds-border, ".concat(_colors.DN70, ")")
-  })(props), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, (0, _components.themed)({
-    light: "var(--ds-border, ".concat(_colors.N50A, ")"),
-    dark: "var(--ds-border, ".concat(_colors.DN80, ")")
-  })(props), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
-};
+var _templateObject;
+var layoutStyles = exports.layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, 8 - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "190.2.2";
+var version = exports.version = "190.2.3";

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -1,11 +1,9 @@
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
+import { N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault, padding } from '../styles';
 export const widerLayoutClassName = 'wider-layout';
-export const wrapperStyle = theme => css`
-  ${wrapperDefault(theme)}
+export const wrapperStyle = css`
+  ${wrapperDefault}
 
   &.without-frame {
     background: transparent;
@@ -29,17 +27,11 @@ export const header = css`
     padding: 0;
   }
 `;
-export const content = theme => css`
+export const content = css`
   padding: ${padding}px;
-  background: ${themed({
-  light: "var(--ds-surface, white)",
-  dark: `var(--ds-surface, ${DN30})`
-})(theme)};
-  color: ${themed({
-  dark: `var(--ds-text, ${DN900})`
-})(theme)};
+  background: ${"var(--ds-surface, white)"};
   border: 1px solid ${`var(--ds-border, ${N30})`};
-  border-radius: ${borderRadius()}px;
+  border-radius: ${"var(--ds-border-radius, 3px)"};
   cursor: initial;
   width: 100%;
 `;

package/dist/es2019/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -155,7 +155,9 @@ export default class ExtensionComponent extends Component {
         getPos: getPos,
         handleContentDOMRef: handleContentDOMRef,
         tryExtensionHandler: this.tryExtensionHandler.bind(this),
-        eventDispatcher: eventDispatcher
+        eventDispatcher: eventDispatcher,
+        pluginInjectionApi: pluginInjectionApi,
+        editorAppearance: editorAppearance
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,15 +1,14 @@
 import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { wrapperDefault } from '../styles';
-export const wrapperStyle = theme => css`
-  ${wrapperDefault(theme)}
+export const wrapperStyle = css`
+  ${wrapperDefault}
 
   cursor: pointer;
   display: inline-flex;
   margin: 1px 1px ${"var(--ds-space-050, 4px)"};
 
   > img {
-    border-radius: ${borderRadius()}px;
+    border-radius: ${"var(--ds-border-radius, 3px)"};
   }
 
   &::after,

package/dist/es2019/plugins/extension/ui/Extension/MultiBodiedExtension/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
@@ -5,7 +6,8 @@ import { N30, N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { analyticsEventKey } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, calculateBreakoutStyles } from '@atlaskit/editor-common/utils';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const useMultiBodiedExtensionActions = ({
   updateActiveChild,
   editorView,
@@ -128,15 +130,16 @@ const navigationCSS = css`
   user-select: none;
   -webkit-user-modify: read-only;
   border: 1px solid ${`var(--ds-border, ${N40})`};
-  background-color: ${`var(--ds-background-inverse-subtle, ${N50})`};
 `;
-const MultiBodiedExtension = ({
+const MultiBodiedExtensionWithWidth = ({
   node,
   handleContentDOMRef,
   getPos,
   tryExtensionHandler,
   editorView,
-  eventDispatcher
+  eventDispatcher,
+  widthState,
+  editorAppearance
 }) => {
   const [activeChildIndex, setActiveChildIndex] = useState(0);
   // Adding to avoid aliasing `this` for the callbacks
@@ -175,11 +178,28 @@ const MultiBodiedExtension = ({
       min-height: 100px;
     }
   `;
+  const shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  let mbeContainerStyles = {};
+  if (shouldBreakout) {
+    const {
+      ...breakoutStyles
+    } = calculateBreakoutStyles({
+      mode: node.attrs.layout,
+      widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+      widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+    });
+    mbeContainerStyles = breakoutStyles;
+  }
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
   }, jsx("nav", {
     className: "multiBodiedExtension-navigation",
     css: navigationCSS,
@@ -207,4 +227,56 @@ const sendMBEAnalyticsEvent = (action, node, eventDispatcher) => {
     }
   });
 };
+const MultiBodiedExtensionWithSharedState = props => {
+  const {
+    pluginInjectionApi
+  } = props;
+  const {
+    widthState
+  } = useSharedPluginState(pluginInjectionApi, ['width']);
+  return jsx(MultiBodiedExtensionWithWidth, _extends({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+const MultiBodiedExtension = props => {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  const {
+    pluginInjectionApi
+  } = props;
+  return pluginInjectionApi === undefined ? jsx(MultiBodiedExtensionDeprecated, props) : jsx(MultiBodiedExtensionWithSharedState, props);
+};
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+const widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: state => {
+    return state['widthPlugin$'];
+  }
+};
+const MultiBodiedExtensionDeprecated = props => {
+  return jsx(WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: ({
+      widthState
+    }) => jsx(MultiBodiedExtensionWithWidth, _extends({
+      widthState: widthState
+    }, props))
+  });
+};
+/**
+ * End workaround
+ */
+
 export default MultiBodiedExtension;

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -1,18 +1,10 @@
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
+import { N20, B200, N20A, N70 } from '@atlaskit/theme/colors';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
-export const wrapperDefault = theme => css`
-  background: ${themed({
-  light: `var(--ds-background-neutral, ${N20})`,
-  dark: `var(--ds-background-neutral, ${DN50})`
-})(theme)};
-  border-radius: ${borderRadius()}px;
-  color: ${themed({
-  dark: `var(--ds-text, ${DN700})`
-})(theme)};
+export const wrapperDefault = css`
+  background: ${`var(--ds-background-neutral, ${N20})`};
+  border-radius: ${"var(--ds-border-radius, 3px)"};
   position: relative;
   vertical-align: middle;
 
@@ -33,7 +25,7 @@ export const wrapperDefault = theme => css`
   }
 `;
 export const overlay = css`
-  border-radius: ${borderRadius()}px;
+  border-radius: ${"var(--ds-border-radius, 3px)"};
   position: absolute;
   width: 100%;
   height: 100%;

package/dist/es2019/ui/ContentStyles/extension.js

@@ -2,16 +2,17 @@ import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const extensionStyles = css`
-  .multiBodiedExtensionView-content-wrap.${akEditorSelectedNodeClassName}:not(.danger) {
-    ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
-  }
-
   .multiBodiedExtensionView-content-wrap {
     &.danger > span > .multiBodiedExtension--container {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
         ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     }
+    &:not(.danger).${akEditorSelectedNodeClassName} {
+      & > span > .multiBodiedExtension--container {
+        ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+      }
+    }
     .multiBodiedExtension--container {
       width: 100%;
       max-width: 100%; // ensure width can't go over 100%;

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

@@ -179,7 +179,7 @@ const contentStyles = props => css`
   ${listsStyles}
   ${ruleStyles()}
   ${mediaStyles}
-  ${layoutStyles(props)}
+  ${layoutStyles}
   ${telepointerStyle}
   ${gapCursorStyles};
   ${tableStyles(props)}

package/dist/es2019/ui/ContentStyles/layout.js

@@ -1,21 +1,16 @@
 import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-import { N40A, N50A, DN70, DN80 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
+import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export const layoutStyles = props => css`
+export const layoutStyles = css`
   .ProseMirror {
     ${columnLayoutSharedStyle} [data-layout-section] {
       // TODO: Migrate away from gridSize
       // Recommendation: Replace directly with 7px
-      margin: ${gridSize() - 1}px -${akLayoutGutterOffset}px 0;
+      margin: ${8 - 1}px -${akLayoutGutterOffset}px 0;
       transition: border-color 0.3s ${akEditorSwoopCubicBezier};
       cursor: pointer;
 
@@ -24,10 +19,7 @@ export const layoutStyles = props => css`
         flex: 1;
         min-width: 0;
         border: ${akEditorSelectedBorderSize}px solid
-          ${themed({
-  light: `var(--ds-border, ${N40A})`,
-  dark: `var(--ds-border, ${DN70})`
-})(props)};
+          ${`var(--ds-border, ${N40A})`};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -115,10 +107,7 @@ export const layoutStyles = props => css`
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
         border: ${akEditorSelectedBorderSize}px solid
-          ${themed({
-  light: `var(--ds-border, ${N50A})`,
-  dark: `var(--ds-border, ${DN80})`
-})(props)};
+          ${`var(--ds-border, ${N50A})`};
       }
 
       &.selected.danger > [data-layout-column] {

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "190.2.2";
+export const version = "190.2.3";

package/dist/esm/plugins/extension/ui/Extension/Extension/styles.js

@@ -1,21 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
+import { N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault, padding } from '../styles';
 export var widerLayoutClassName = 'wider-layout';
-export var wrapperStyle = function wrapperStyle(theme) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  &.without-frame {\n    background: transparent;\n  }\n  cursor: pointer;\n  width: 100%;\n\n  .extension-overflow-wrapper:not(.with-body) {\n    overflow-x: auto;\n  }\n"])), wrapperDefault(theme));
-};
+export var wrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  &.without-frame {\n    background: transparent;\n  }\n  cursor: pointer;\n  width: 100%;\n\n  .extension-overflow-wrapper:not(.with-body) {\n    overflow-x: auto;\n  }\n"])), wrapperDefault);
 export var header = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px ", "px 0px;\n  vertical-align: middle;\n\n  &.with-children:not(.without-frame) {\n    padding: ", " ", "\n      ", ";\n  }\n  &.without-frame {\n    padding: 0;\n  }\n"])), padding / 2, padding / 2, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
-export var content = function content(theme) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  cursor: initial;\n  width: 100%;\n"])), padding, themed({
-    light: "var(--ds-surface, white)",
-    dark: "var(--ds-surface, ".concat(DN30, ")")
-  })(theme), themed({
-    dark: "var(--ds-text, ".concat(DN900, ")")
-  })(theme), "var(--ds-border, ".concat(N30, ")"), borderRadius());
-};
+export var content = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", ";\n  cursor: initial;\n  width: 100%;\n"])), padding, "var(--ds-surface, white)", "var(--ds-border, ".concat(N30, ")"), "var(--ds-border-radius, 3px)");
 export var contentWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", "px ", "px;\n  display: flex;\n  justify-content: center;\n"])), padding, padding);

package/dist/esm/plugins/extension/ui/Extension/ExtensionComponent.js

@@ -192,7 +192,9 @@ var ExtensionComponent = /*#__PURE__*/function (_Component) {
           getPos: getPos,
           handleContentDOMRef: handleContentDOMRef,
           tryExtensionHandler: this.tryExtensionHandler.bind(this),
-          eventDispatcher: eventDispatcher
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          editorAppearance: editorAppearance
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);

package/dist/esm/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,8 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { wrapperDefault } from '../styles';
-export var wrapperStyle = function wrapperStyle(theme) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", "px;\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), wrapperDefault(theme), "var(--ds-space-050, 4px)", borderRadius(), "var(--ds-background-neutral-subtle, white)");
-};
+export var wrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px ", ";\n\n  > img {\n    border-radius: ", ";\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), wrapperDefault, "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-background-neutral-subtle, white)");

package/dist/esm/plugins/extension/ui/Extension/MultiBodiedExtension/index.js

@@ -1,3 +1,5 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -11,7 +13,8 @@ import { N30, N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { analyticsEventKey } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, calculateBreakoutStyles } from '@atlaskit/editor-common/utils';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
   var updateActiveChild = _ref.updateActiveChild,
     editorView = _ref.editorView,
@@ -117,14 +120,16 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
   }, [node, editorView, getPos, updateActiveChild, eventDispatcher]);
   return actions;
 };
-var navigationCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  background-color: ", ";\n"])), "var(--ds-border, ".concat(N40, ")"), "var(--ds-background-inverse-subtle, ".concat(N50, ")"));
-var MultiBodiedExtension = function MultiBodiedExtension(_ref2) {
+var navigationCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // make sure the user can't see a range selection inside the navigation\n  // This is really important to keep the navigation working properly\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n"])), "var(--ds-border, ".concat(N40, ")"));
+var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
   var node = _ref2.node,
     handleContentDOMRef = _ref2.handleContentDOMRef,
     getPos = _ref2.getPos,
     tryExtensionHandler = _ref2.tryExtensionHandler,
     editorView = _ref2.editorView,
-    eventDispatcher = _ref2.eventDispatcher;
+    eventDispatcher = _ref2.eventDispatcher,
+    widthState = _ref2.widthState,
+    editorAppearance = _ref2.editorAppearance;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     activeChildIndex = _useState2[0],
@@ -152,11 +157,27 @@ var MultiBodiedExtension = function MultiBodiedExtension(_ref2) {
     return handleContentDOMRef(node);
   }, [handleContentDOMRef]);
   var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n    .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension-content-dom-wrapper\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var shouldBreakout =
+  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
+  ['full-width', 'wide'].includes(node.attrs.layout) &&
+  // Extension breakout state should not be respected when the editor appearance is full-width mode
+  editorAppearance !== 'full-width';
+  var mbeContainerStyles = {};
+  if (shouldBreakout) {
+    var _calculateBreakoutSty = calculateBreakoutStyles({
+        mode: node.attrs.layout,
+        widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+        widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
+      }),
+      breakoutStyles = _extends({}, (_objectDestructuringEmpty(_calculateBreakoutSty), _calculateBreakoutSty));
+    mbeContainerStyles = breakoutStyles;
+  }
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex
+    "data-active-child-index": activeChildIndex,
+    style: mbeContainerStyles
   }, jsx("nav", {
     className: "multiBodiedExtension-navigation",
     css: navigationCSS,
@@ -184,4 +205,52 @@ var sendMBEAnalyticsEvent = function sendMBEAnalyticsEvent(action, node, eventDi
     }
   });
 };
+var MultiBodiedExtensionWithSharedState = function MultiBodiedExtensionWithSharedState(props) {
+  var pluginInjectionApi = props.pluginInjectionApi;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  return jsx(MultiBodiedExtensionWithWidth, _extends({
+    widthState: widthState
+  }, props));
+};
+
+// Workaround taken from platform/packages/editor/editor-core/src/plugins/extension/ui/Extension/Extension/index.tsx
+var MultiBodiedExtension = function MultiBodiedExtension(props) {
+  // TODO: ED-17836 This code is here because confluence injects
+  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+  // which cannot access the `pluginInjectionApi`. When we move
+  // Confluence to using presets we can remove this workaround.
+  var pluginInjectionApi = props.pluginInjectionApi;
+  return pluginInjectionApi === undefined ? jsx(MultiBodiedExtensionDeprecated, props) : jsx(MultiBodiedExtensionWithSharedState, props);
+};
+import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+// TODO: ED-17836 This code is here because Confluence injects
+// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
+// which cannot access the `pluginInjectionApi`. When we move
+// Confluence to using presets we can remove this workaround.
+// @ts-ignore
+var widthPluginKey = {
+  key: 'widthPlugin$',
+  getState: function getState(state) {
+    return state['widthPlugin$'];
+  }
+};
+var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(props) {
+  return jsx(WithPluginState, {
+    editorView: props.editorView,
+    plugins: {
+      widthState: widthPluginKey
+    },
+    render: function render(_ref3) {
+      var widthState = _ref3.widthState;
+      return jsx(MultiBodiedExtensionWithWidth, _extends({
+        widthState: widthState
+      }, props));
+    }
+  });
+};
+/**
+ * End workaround
+ */
+
 export default MultiBodiedExtension;

package/dist/esm/plugins/extension/ui/Extension/styles.js

@@ -1,20 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
+import { N20, B200, N20A, N70 } from '@atlaskit/theme/colors';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
-export var wrapperDefault = function wrapperDefault(theme) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), themed({
-    light: "var(--ds-background-neutral, ".concat(N20, ")"),
-    dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-  })(theme), borderRadius(), themed({
-    dark: "var(--ds-text, ".concat(DN700, ")")
-  })(theme), "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
-};
-export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), borderRadius());
+export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
+export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
 export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
 export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
 export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));

package/dist/esm/ui/ContentStyles/extension.js

@@ -3,4 +3,4 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .multiBodiedExtensionView-content-wrap.", ":not(.danger) {\n    ", "\n  }\n\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, blockNodesVerticalMargin);
+export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .multiBodiedExtensionView-content-wrap {\n    &.danger > span > .multiBodiedExtension--container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n    &:not(.danger).", " {\n      & > span > .multiBodiedExtension--container {\n        ", "\n      }\n    }\n    .multiBodiedExtension--container {\n      width: 100%;\n      max-width: 100%; // ensure width can't go over 100%;\n    }\n  }\n\n  .extensionView-content-wrap,\n  .multiBodiedExtensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), blockNodesVerticalMargin, blockNodesVerticalMargin);

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

@@ -39,7 +39,7 @@ export var placeholderStyles = css(_templateObject6 || (_templateObject6 = _tagg
 var contentStyles = function contentStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles(props), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {

package/dist/esm/ui/ContentStyles/layout.js

@@ -1,23 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
-import { N40A, N50A, DN70, DN80 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
+import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export var layoutStyles = function layoutStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, gridSize() - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, themed({
-    light: "var(--ds-border, ".concat(N40A, ")"),
-    dark: "var(--ds-border, ".concat(DN70, ")")
-  })(props), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, akEditorSelectedBorderSize, themed({
-    light: "var(--ds-border, ".concat(N50A, ")"),
-    dark: "var(--ds-border, ".concat(DN80, ")")
-  })(props), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
-};
+export var layoutStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      // TODO: Migrate away from gridSize\n      // Recommendation: Replace directly with 7px\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid\n          ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > :not(style):first-child,\n          > style:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + *,\n          > style:first-child + .ProseMirror-gapcursor + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + *,\n          > style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          > .embedCardView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor.-right\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > .ProseMirror-gapcursor.-right:first-of-type\n            + .embedCardView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item,\n          > style:first-child\n            + .ProseMirror-gapcursor\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4441\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border: ", "px solid\n          ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), columnLayoutSharedStyle, 8 - 1, akLayoutGutterOffset, akEditorSwoopCubicBezier, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "190.2.2";
+export var version = "190.2.3";

package/dist/types/plugins/extension/ui/Extension/Extension/styles.d.ts

@@ -1,6 +1,5 @@
-import { ThemeProps } from '@atlaskit/theme/types';
 export declare const widerLayoutClassName = "wider-layout";
-export declare const wrapperStyle: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
 export declare const header: import("@emotion/react").SerializedStyles;
-export declare const content: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const content: import("@emotion/react").SerializedStyles;
 export declare const contentWrapper: import("@emotion/react").SerializedStyles;

package/dist/types/plugins/extension/ui/Extension/InlineExtension/styles.d.ts

@@ -1,2 +1 @@
-import { ThemeProps } from '@atlaskit/theme/types';
-export declare const wrapperStyle: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types/plugins/extension/ui/Extension/MultiBodiedExtension/index.d.ts

@@ -5,6 +5,9 @@ import type { MultiBodiedExtensionActions } from '@atlaskit/editor-common/extens
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { EditorAppearance, PluginInjectionAPIWithDependency } from '@atlaskit/editor-common/types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -13,6 +16,11 @@ type Props = {
     getPos: () => number | undefined;
     tryExtensionHandler: TryExtensionHandlerType;
     eventDispatcher?: EventDispatcher;
+    pluginInjectionApi?: PluginInjectionAPIWithDependency<WidthPlugin>;
+    editorAppearance?: EditorAppearance;
 };
-declare const MultiBodiedExtension: ({ node, handleContentDOMRef, getPos, tryExtensionHandler, editorView, eventDispatcher, }: Props) => jsx.JSX.Element;
+declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
+/**
+ * End workaround
+ */
 export default MultiBodiedExtension;

package/dist/types/plugins/extension/ui/Extension/styles.d.ts

@@ -1,7 +1,6 @@
-import { ThemeProps } from '@atlaskit/theme/types';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
-export declare const wrapperDefault: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperDefault: import("@emotion/react").SerializedStyles;
 export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;

package/dist/types/ui/ContentStyles/layout.d.ts

@@ -1,4 +1,3 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
 import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export declare const layoutStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const layoutStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/extension/ui/Extension/Extension/styles.d.ts

@@ -1,6 +1,5 @@
-import { ThemeProps } from '@atlaskit/theme/types';
 export declare const widerLayoutClassName = "wider-layout";
-export declare const wrapperStyle: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
 export declare const header: import("@emotion/react").SerializedStyles;
-export declare const content: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const content: import("@emotion/react").SerializedStyles;
 export declare const contentWrapper: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/extension/ui/Extension/InlineExtension/styles.d.ts

@@ -1,2 +1 @@
-import { ThemeProps } from '@atlaskit/theme/types';
-export declare const wrapperStyle: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/extension/ui/Extension/MultiBodiedExtension/index.d.ts

@@ -5,6 +5,9 @@ import type { MultiBodiedExtensionActions } from '@atlaskit/editor-common/extens
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { OverflowShadowProps } from '@atlaskit/editor-common/ui';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { EditorAppearance, PluginInjectionAPIWithDependency } from '@atlaskit/editor-common/types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -13,6 +16,11 @@ type Props = {
     getPos: () => number | undefined;
     tryExtensionHandler: TryExtensionHandlerType;
     eventDispatcher?: EventDispatcher;
+    pluginInjectionApi?: PluginInjectionAPIWithDependency<WidthPlugin>;
+    editorAppearance?: EditorAppearance;
 };
-declare const MultiBodiedExtension: ({ node, handleContentDOMRef, getPos, tryExtensionHandler, editorView, eventDispatcher, }: Props) => jsx.JSX.Element;
+declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
+/**
+ * End workaround
+ */
 export default MultiBodiedExtension;

package/dist/types-ts4.5/plugins/extension/ui/Extension/styles.d.ts

@@ -1,7 +1,6 @@
-import { ThemeProps } from '@atlaskit/theme/types';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
-export declare const wrapperDefault: (theme: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const wrapperDefault: import("@emotion/react").SerializedStyles;
 export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/ContentStyles/layout.d.ts

@@ -1,4 +1,3 @@
-import type { ThemeProps } from '@atlaskit/theme/types';
 import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
-export declare const layoutStyles: (props: ThemeProps) => import("@emotion/react").SerializedStyles;
+export declare const layoutStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "190.2.2",
+  "version": "190.2.3",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,11 +48,11 @@
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.5.0",
-    "@atlaskit/button": "^17.1.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^13.0.3",
-    "@atlaskit/editor-common": "^76.33.0",
+    "@atlaskit/editor-common": "^76.34.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-plugin-alignment": "^0.1.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
@@ -78,7 +78,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
     "@atlaskit/editor-plugin-emoji": "^1.0.0",
-    "@atlaskit/editor-plugin-expand": "^0.3.0",
+    "@atlaskit/editor-plugin-expand": "^0.4.0",
     "@atlaskit/editor-plugin-extension": "^0.4.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-feedback-dialog": "^0.1.0",
@@ -99,7 +99,7 @@
     "@atlaskit/editor-plugin-max-content-size": "^0.1.0",
     "@atlaskit/editor-plugin-media": "^0.9.0",
     "@atlaskit/editor-plugin-mentions": "^0.1.0",
-    "@atlaskit/editor-plugin-panel": "^0.1.0",
+    "@atlaskit/editor-plugin-panel": "^0.2.0",
     "@atlaskit/editor-plugin-paste": "^0.2.0",
     "@atlaskit/editor-plugin-paste-options-toolbar": "^0.3.0",
     "@atlaskit/editor-plugin-placeholder": "^0.1.0",
@@ -117,7 +117,7 @@
     "@atlaskit/editor-plugin-text-color": "^0.1.0",
     "@atlaskit/editor-plugin-text-formatting": "^0.4.0",
     "@atlaskit/editor-plugin-toolbar-lists-indentation": "^0.2.0",
-    "@atlaskit/editor-plugin-type-ahead": "^0.8.0",
+    "@atlaskit/editor-plugin-type-ahead": "^0.9.0",
     "@atlaskit/editor-plugin-undo-redo": "^0.1.0",
     "@atlaskit/editor-plugin-unsupported-content": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
@@ -189,7 +189,7 @@
     "@atlaskit/media-test-helpers": "^33.0.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/modal-dialog": "^12.10.0",
-    "@atlaskit/renderer": "^109.1.0",
+    "@atlaskit/renderer": "^109.2.0",
     "@atlaskit/smart-card": "^26.43.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
     "@atlaskit/util-data-test": "^17.8.0",
@@ -378,6 +378,10 @@
     },
     "platform.editor.deprecate-jira-issue-plugin": {
       "type": "boolean"
+    },
+    "platform.editor.ordered-list-inserting-nodes_bh0vo": {
+      "type": "boolean",
+      "referenceOnly": "true"
     }
   }
 }