@atlaskit/editor-core 190.2.0 → 190.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#64359](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64359) [`e728a3537d3b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e728a3537d3b) - [ux] Adds table shortcust to move row or column and to delete row or column when drag and drop enabled
+
 ## 190.2.0
 
 ### Minor Changes

package/dist/cjs/keymaps/index.js

@@ -171,12 +171,24 @@ Object.defineProperty(exports, "cut", {
     return _keymaps.cut;
   }
 });
+Object.defineProperty(exports, "deleteColumn", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.deleteColumn;
+  }
+});
 Object.defineProperty(exports, "deleteKey", {
   enumerable: true,
   get: function get() {
     return _keymaps.deleteKey;
   }
 });
+Object.defineProperty(exports, "deleteRow", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.deleteRow;
+  }
+});
 Object.defineProperty(exports, "enter", {
   enumerable: true,
   get: function get() {
@@ -261,6 +273,18 @@ Object.defineProperty(exports, "makeKeymap", {
     return _keymaps.makeKeymap;
   }
 });
+Object.defineProperty(exports, "moveColumnLeft", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.moveColumnLeft;
+  }
+});
+Object.defineProperty(exports, "moveColumnRight", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.moveColumnRight;
+  }
+});
 Object.defineProperty(exports, "moveDown", {
   enumerable: true,
   get: function get() {
@@ -279,6 +303,18 @@ Object.defineProperty(exports, "moveRight", {
     return _keymaps.moveRight;
   }
 });
+Object.defineProperty(exports, "moveRowDown", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.moveRowDown;
+  }
+});
+Object.defineProperty(exports, "moveRowUp", {
+  enumerable: true,
+  get: function get() {
+    return _keymaps.moveRowUp;
+  }
+});
 Object.defineProperty(exports, "moveUp", {
   enumerable: true,
   get: function get() {

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.0";
+var version = exports.version = "190.2.3";

package/dist/es2019/keymaps/index.js

@@ -1 +1 @@
-export { addAltText, navToEditorToolbar, navToFloatingToolbar, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, pastePlainText, clearFormatting, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, toggleTaskItemCheckbox, ctrlBackSpace, toggleBulletList, toggleBlockQuote, insertNewLine, shiftBackspace, splitCodeBlock, splitListItem, insertRule, undo, moveUp, moveDown, moveLeft, moveRight, indentList, outdentList, redo, openHelp, addLink, addInlineComment, submit, enter, shiftEnter, tab, indent, outdent, backspace, deleteKey, forwardDelete, space, escape, nextCell, previousCell, shiftTab, toggleTable, addRowBefore, addRowAfter, addColumnAfter, addColumnBefore, cut, copy, paste, altPaste, find, alignLeft, tooltip, ToolTipContent, findKeymapByDescription, findShortcutByDescription, findShortcutByKeymap, makeKeymap, makeKeyMapWithCommon, bindKeymapWithCommand, findKeyMapForBrowser, DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from '@atlaskit/editor-common/keymaps';
+export { addAltText, navToEditorToolbar, navToFloatingToolbar, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, pastePlainText, clearFormatting, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, toggleTaskItemCheckbox, ctrlBackSpace, toggleBulletList, toggleBlockQuote, insertNewLine, shiftBackspace, splitCodeBlock, splitListItem, insertRule, undo, moveUp, moveDown, moveLeft, moveRight, indentList, outdentList, redo, openHelp, addLink, addInlineComment, submit, enter, shiftEnter, tab, indent, outdent, backspace, deleteKey, forwardDelete, space, escape, nextCell, previousCell, shiftTab, toggleTable, addRowBefore, addRowAfter, addColumnAfter, addColumnBefore, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, cut, copy, paste, altPaste, find, alignLeft, tooltip, ToolTipContent, findKeymapByDescription, findShortcutByDescription, findShortcutByKeymap, makeKeymap, makeKeyMapWithCommon, bindKeymapWithCommand, findKeyMapForBrowser, DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from '@atlaskit/editor-common/keymaps';

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%;