@atlaskit/editor-common 78.8.2 → 78.8.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-common
 
+## 78.8.4
+
+### Patch Changes
+
+- [#75087](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75087) [`ede66b0fc1d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ede66b0fc1d5) - [ux] ED-22045 Removing custom logic for MBE floating toolbar.
+
+## 78.8.3
+
+### Patch Changes
+
+- [#77599](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77599) [`a7b1a6b762eb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a7b1a6b762eb) - [ux] Table picker popup displays text using column x rows pattern and table picker button uses label column by row.
+- [#75436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75436) [`bfcf32bb4fa3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfcf32bb4fa3) - [ux] ED-21941 Disable resize/layout options for table, media and extension when added to MBE. Table rendering fixed for Confluence editor
+- [#77543](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77543) [`5b4b40dddddf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5b4b40dddddf) - Updates default message of Background color option in table's menus
+
 ## 78.8.2
 
 ### Patch Changes

package/dist/cjs/card/MediaAndEmbedsToolbar/index.js

@@ -145,7 +145,7 @@ var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl,
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
   var nodes = _ref2.nodes;
-  return (0, _utils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
+  return (0, _utils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
 };
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
   var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;

package/dist/cjs/messages/insert-block.js

@@ -88,8 +88,8 @@ var toolbarInsertBlockMessages = exports.toolbarInsertBlockMessages = (0, _react
   },
   tableSizeSelectorButton: {
     id: 'fabric.editor.tableSizeSelectorButton',
-    defaultMessage: 'Create table of size',
-    description: 'Creates table popup grid of defined size'
+    defaultMessage: '{numberOfColumns} by {numberOfRows}',
+    description: 'Creates a table of custom size'
   },
   tableSizeSelectorPopup: {
     id: 'fabric.editor.tableSizeSelectorPopup',

package/dist/cjs/messages/table.js

@@ -173,7 +173,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   backgroundColor: {
     id: 'fabric.editor.backgroundColor',
-    defaultMessage: 'Background Color',
+    defaultMessage: 'Background color',
     description: 'Change the background color of a table cell.'
   },
   mergeCells: {

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.8.2";
+var packageVersion = "78.8.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/node-width/index.js

@@ -73,6 +73,9 @@ var getParentNodeWidth = exports.getParentNodeWidth = function getParentNodeWidt
     case schema.nodes.bodiedExtension:
       parentWidth -= _extension.BODIED_EXT_PADDING * 2;
       break;
+    case schema.nodes.extensionFrame:
+      parentWidth -= _extension.BODIED_EXT_PADDING * 2;
+      break;
 
     // TODO: Migrate away from gridSize
     // Recommendation: Replace gridSize with 8
@@ -96,7 +99,7 @@ var getNestedParentNode = function getNestedParentNode(tablePos, state) {
     return null;
   }
   var $pos = state.doc.resolve(tablePos);
-  var parent = (0, _utils.findParentNodeOfTypeClosestToPos)($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  var parent = (0, _utils.findParentNodeOfTypeClosestToPos)($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.extensionFrame, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
   return parent ? parent.node : null;
 };
 var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {

package/dist/cjs/styles/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "AnnotationSharedClassNames", {
     return _annotation.AnnotationSharedClassNames;
   }
 });
+Object.defineProperty(exports, "BODIED_EXT_MBE_MARGIN_TOP", {
+  enumerable: true,
+  get: function get() {
+    return _extension.BODIED_EXT_MBE_MARGIN_TOP;
+  }
+});
 Object.defineProperty(exports, "BODIED_EXT_PADDING", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/extension.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EXTENSION_PADDING = exports.BODIED_EXT_PADDING = void 0;
+exports.EXTENSION_PADDING = exports.BODIED_EXT_PADDING = exports.BODIED_EXT_MBE_MARGIN_TOP = void 0;
 var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 // TODO: Migrate away from gridSize
 // Recommendation: Replace gridSize with 8
 var EXTENSION_PADDING = exports.EXTENSION_PADDING = (0, _constants.gridSize)();
-var BODIED_EXT_PADDING = exports.BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+var BODIED_EXT_PADDING = exports.BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+var BODIED_EXT_MBE_MARGIN_TOP = exports.BODIED_EXT_MBE_MARGIN_TOP = 12;

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

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.8.2";
+var packageVersion = "78.8.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,19 +1,78 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sharedMultiBodiedExtensionStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3;
+var _styles = require("../../styles");
 /** @jsx jsx */
+
 // Wraps the navigation bar and extensionFrames
-var mbeExtensionContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transpaent !important;\n  padding: {\n    bottom: ", " !important;\n    left: ", " !important;\n    right: ", " !important;\n  }\n  padding-bottom: ", ";\n  position: relative;\n  vertical-align: middle;\n  cursor: pointer;\n\n  .multiBodiedExtension-handler-result {\n    margin-left: ", ";\n  }\n\n  .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'],\n  .multiBodiedExtension--frames > [data-extension-frame='true'] {\n    display: none;\n    background: ", ";\n  }\n\n  .multiBodiedExtension-content-dom-wrapper,\n  .multiBodiedExtension--frames {\n    [data-extension-frame='true'] > :not(style):first-child,\n    [data-extension-frame='true'] > style:first-child + * {\n      margin-top: 0;\n    }\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)");
-var mbeNavigation = (0, _react.css)(_templateObject2 || (_templateObject2 = (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  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  border-bottom: none !important;\n  background: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface, white)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
-var extensionFrameContent = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " !important;\n  border: 1px solid ", ";\n  display: block;\n  min-height: 100px;\n  background: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n\n  margin-left: ", ";\n  margin-right: ", ";\n  cursor: initial;\n\n  .pm-table-with-controls {\n    margin-left: ", " !important;\n    padding-right: ", " !important;\n  }\n  .bodiedExtensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n  // Extension wrap have an additional margin on all four borders, so we need to adjust the spacing\n  // compared to the bodiedExtensionView-content-wrap\n  .extensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n  .decisionItemView-content-wrap {\n    margin-top: 0px !important;\n  }\n\n  .decisionItemView-content-wrap > [data-decision-wrapper] {\n    margin-top: 0px !important;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-surface, white)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
+var mbeExtensionContainer = (0, _react.css)({
+  background: 'transpaent !important',
+  'padding:': {
+    bottom: "var(--ds-space-100, 8px)".concat(" !important"),
+    left: "var(--ds-space-100, 8px)".concat(" !important"),
+    right: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
+    }
+  }
+});
+var mbeNavigation = (0, _react.css)({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+var extensionFrameContent = (0, _react.css)({
+  padding: "var(--ds-space-100, 8px)".concat(" !important"),
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")),
+  display: 'block',
+  minHeight: '100px',
+  background: "var(--ds-surface, white)",
+  borderBottomLeftRadius: "var(--ds-border-radius, 3px)",
+  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  '.pm-table-with-controls': {
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  '.bodiedExtensionView-content-wrap': {
+    marginTop: "".concat(_styles.BODIED_EXT_MBE_MARGIN_TOP, "px !important")
+  },
+  '.extensionView-content-wrap': {
+    marginTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  '.decisionItemView-content-wrap': {
+    marginTop: '0px !important'
+  },
+  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
+    marginTop: '0px !important'
+  }
+});
 var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -152,7 +152,7 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDepende
 const shouldHideLayoutToolbar = (selection, {
   nodes
 }, allowResizingInTables) => {
-  return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
+  return hasParentNodeOfType([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
 const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true, isChangingLayoutDisabled) => {
   const {

package/dist/es2019/messages/insert-block.js

@@ -82,8 +82,8 @@ export const toolbarInsertBlockMessages = defineMessages({
   },
   tableSizeSelectorButton: {
     id: 'fabric.editor.tableSizeSelectorButton',
-    defaultMessage: 'Create table of size',
-    description: 'Creates table popup grid of defined size'
+    defaultMessage: '{numberOfColumns} by {numberOfRows}',
+    description: 'Creates a table of custom size'
   },
   tableSizeSelectorPopup: {
     id: 'fabric.editor.tableSizeSelectorPopup',

package/dist/es2019/messages/table.js

@@ -167,7 +167,7 @@ export const messages = defineMessages({
   },
   backgroundColor: {
     id: 'fabric.editor.backgroundColor',
-    defaultMessage: 'Background Color',
+    defaultMessage: 'Background color',
     description: 'Change the background color of a table cell.'
   },
   mergeCells: {

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.8.2";
+const packageVersion = "78.8.4";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/node-width/index.js

@@ -68,6 +68,9 @@ export const getParentNodeWidth = (pos, state, containerWidth, isFullWidthModeEn
     case schema.nodes.bodiedExtension:
       parentWidth -= BODIED_EXT_PADDING * 2;
       break;
+    case schema.nodes.extensionFrame:
+      parentWidth -= BODIED_EXT_PADDING * 2;
+      break;
 
     // TODO: Migrate away from gridSize
     // Recommendation: Replace gridSize with 8
@@ -91,7 +94,7 @@ const getNestedParentNode = (tablePos, state) => {
     return null;
   }
   const $pos = state.doc.resolve(tablePos);
-  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.extensionFrame, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
   return parent ? parent.node : null;
 };
 const calcBreakoutNodeWidth = (layout, containerWidth, isFullWidthModeEnabled) => {

package/dist/es2019/styles/index.js

@@ -30,4 +30,5 @@ export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles }
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames } from './shared/expand';
 export { ClassNames as MediaSharedClassNames } from './shared/media';
-export { BreakoutCssClassName } from './shared/breakout';
+export { BreakoutCssClassName } from './shared/breakout';
+export { BODIED_EXT_MBE_MARGIN_TOP } from './shared/extension';

package/dist/es2019/styles/shared/extension.js

@@ -4,4 +4,5 @@ import { gridSize } from '@atlaskit/theme/constants';
 // TODO: Migrate away from gridSize
 // Recommendation: Replace gridSize with 8
 export const EXTENSION_PADDING = gridSize();
-export const BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+export const BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+export const BODIED_EXT_MBE_MARGIN_TOP = 12;

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.8.2";
+const packageVersion = "78.8.4";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -2,84 +2,72 @@
 
 import { css } from '@emotion/react';
 import { N30, N40 } from '@atlaskit/theme/colors';
-// Wraps the navigation bar and extensionFrames
-const mbeExtensionContainer = css`
-  background: transpaent !important;
-  padding: {
-    bottom: ${"var(--ds-space-100, 8px)"} !important;
-    left: ${"var(--ds-space-100, 8px)"} !important;
-    right: ${"var(--ds-space-100, 8px)"} !important;
-  }
-  padding-bottom: ${"var(--ds-space-100, 8px)"};
-  position: relative;
-  vertical-align: middle;
-  cursor: pointer;
-
-  .multiBodiedExtension-handler-result {
-    margin-left: ${"var(--ds-space-100, 8px)"};
-  }
+import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
 
-  .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'],
-  .multiBodiedExtension--frames > [data-extension-frame='true'] {
-    display: none;
-    background: ${"var(--ds-surface, white)"};
-  }
-
-  .multiBodiedExtension-content-dom-wrapper,
-  .multiBodiedExtension--frames {
-    [data-extension-frame='true'] > :not(style):first-child,
-    [data-extension-frame='true'] > style:first-child + * {
-      margin-top: 0;
+// Wraps the navigation bar and extensionFrames
+const mbeExtensionContainer = css({
+  background: 'transpaent !important',
+  'padding:': {
+    bottom: `${"var(--ds-space-100, 8px)"} !important`,
+    left: `${"var(--ds-space-100, 8px)"} !important`,
+    right: `${"var(--ds-space-100, 8px)"} !important`
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
     }
   }
-`;
-const mbeNavigation = css`
-  // make sure the user can't see a range selection inside the navigation
-  // This is really important to keep the navigation working properly
-  border-top-left-radius: ${"var(--ds-border-radius, 3px)"};
-  border-top-right-radius: ${"var(--ds-border-radius, 3px)"};
-
-  user-select: none;
-  -webkit-user-modify: read-only;
-  border: 1px solid ${`var(--ds-border, ${N40})`};
-  border-bottom: none !important;
-  background: ${"var(--ds-surface, white)"};
-  margin-left: ${"var(--ds-space-100, 8px)"};
-  margin-right: ${"var(--ds-space-100, 8px)"};
-`;
-const extensionFrameContent = css`
-  padding: ${"var(--ds-space-100, 8px)"} !important;
-  border: 1px solid ${`var(--ds-border, ${N30})`};
-  display: block;
-  min-height: 100px;
-  background: ${"var(--ds-surface, white)"};
-  border-bottom-left-radius: ${"var(--ds-border-radius, 3px)"};
-  border-bottom-right-radius: ${"var(--ds-border-radius, 3px)"};
-
-  margin-left: ${"var(--ds-space-100, 8px)"};
-  margin-right: ${"var(--ds-space-100, 8px)"};
-  cursor: initial;
-
-  .pm-table-with-controls {
-    margin-left: ${"var(--ds-space-150, 12px)"} !important;
-    padding-right: ${"var(--ds-space-150, 12px)"} !important;
-  }
-  .bodiedExtensionView-content-wrap {
-    margin-top: ${"var(--ds-space-150, 12px)"} !important;
-  }
-  // Extension wrap have an additional margin on all four borders, so we need to adjust the spacing
-  // compared to the bodiedExtensionView-content-wrap
-  .extensionView-content-wrap {
-    margin-top: ${"var(--ds-space-100, 8px)"} !important;
-  }
-  .decisionItemView-content-wrap {
-    margin-top: 0px !important;
-  }
-
-  .decisionItemView-content-wrap > [data-decision-wrapper] {
-    margin-top: 0px !important;
+});
+const mbeNavigation = css({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+const extensionFrameContent = css({
+  padding: `${"var(--ds-space-100, 8px)"} !important`,
+  border: `1px solid ${`var(--ds-border, ${N30})`}`,
+  display: 'block',
+  minHeight: '100px',
+  background: "var(--ds-surface, white)",
+  borderBottomLeftRadius: "var(--ds-border-radius, 3px)",
+  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  '.pm-table-with-controls': {
+    marginLeft: `${"var(--ds-space-150, 12px)"} !important`,
+    paddingRight: `${"var(--ds-space-150, 12px)"} !important`
+  },
+  '.bodiedExtensionView-content-wrap': {
+    marginTop: `${BODIED_EXT_MBE_MARGIN_TOP}px !important`
+  },
+  '.extensionView-content-wrap': {
+    marginTop: `${"var(--ds-space-100, 8px)"} !important`
+  },
+  '.decisionItemView-content-wrap': {
+    marginTop: '0px !important'
+  },
+  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
+    marginTop: '0px !important'
   }
-`;
+});
 export const sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer,
   mbeNavigation,

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -135,7 +135,7 @@ var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl,
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
   var nodes = _ref2.nodes;
-  return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
+  return hasParentNodeOfType([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
 };
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
   var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;

package/dist/esm/messages/insert-block.js

@@ -82,8 +82,8 @@ export var toolbarInsertBlockMessages = defineMessages({
   },
   tableSizeSelectorButton: {
     id: 'fabric.editor.tableSizeSelectorButton',
-    defaultMessage: 'Create table of size',
-    description: 'Creates table popup grid of defined size'
+    defaultMessage: '{numberOfColumns} by {numberOfRows}',
+    description: 'Creates a table of custom size'
   },
   tableSizeSelectorPopup: {
     id: 'fabric.editor.tableSizeSelectorPopup',

package/dist/esm/messages/table.js

@@ -167,7 +167,7 @@ export var messages = defineMessages({
   },
   backgroundColor: {
     id: 'fabric.editor.backgroundColor',
-    defaultMessage: 'Background Color',
+    defaultMessage: 'Background color',
     description: 'Change the background color of a table cell.'
   },
   mergeCells: {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.8.2";
+var packageVersion = "78.8.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/node-width/index.js

@@ -66,6 +66,9 @@ export var getParentNodeWidth = function getParentNodeWidth(pos, state, containe
     case schema.nodes.bodiedExtension:
       parentWidth -= BODIED_EXT_PADDING * 2;
       break;
+    case schema.nodes.extensionFrame:
+      parentWidth -= BODIED_EXT_PADDING * 2;
+      break;
 
     // TODO: Migrate away from gridSize
     // Recommendation: Replace gridSize with 8
@@ -89,7 +92,7 @@ var getNestedParentNode = function getNestedParentNode(tablePos, state) {
     return null;
   }
   var $pos = state.doc.resolve(tablePos);
-  var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.extensionFrame, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
   return parent ? parent.node : null;
 };
 var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {

package/dist/esm/styles/index.js

@@ -30,4 +30,5 @@ export { buttonGroupStyle, separatorStyles, wrapperStyle, triggerWrapperStyles }
 export { UnsupportedSharedCssClassName, unsupportedStyles } from './shared/unsupported-content';
 export { expandIconWrapperStyle, expandClassNames } from './shared/expand';
 export { ClassNames as MediaSharedClassNames } from './shared/media';
-export { BreakoutCssClassName } from './shared/breakout';
+export { BreakoutCssClassName } from './shared/breakout';
+export { BODIED_EXT_MBE_MARGIN_TOP } from './shared/extension';

package/dist/esm/styles/shared/extension.js

@@ -4,4 +4,5 @@ import { gridSize } from '@atlaskit/theme/constants';
 // TODO: Migrate away from gridSize
 // Recommendation: Replace gridSize with 8
 export var EXTENSION_PADDING = gridSize();
-export var BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+export var BODIED_EXT_PADDING = EXTENSION_PADDING * 2;
+export var BODIED_EXT_MBE_MARGIN_TOP = 12;

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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.8.2";
+var packageVersion = "78.8.4";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,13 +1,73 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 
 import { css } from '@emotion/react';
 import { N30, N40 } from '@atlaskit/theme/colors';
+import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
+
 // Wraps the navigation bar and extensionFrames
-var mbeExtensionContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transpaent !important;\n  padding: {\n    bottom: ", " !important;\n    left: ", " !important;\n    right: ", " !important;\n  }\n  padding-bottom: ", ";\n  position: relative;\n  vertical-align: middle;\n  cursor: pointer;\n\n  .multiBodiedExtension-handler-result {\n    margin-left: ", ";\n  }\n\n  .multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'],\n  .multiBodiedExtension--frames > [data-extension-frame='true'] {\n    display: none;\n    background: ", ";\n  }\n\n  .multiBodiedExtension-content-dom-wrapper,\n  .multiBodiedExtension--frames {\n    [data-extension-frame='true'] > :not(style):first-child,\n    [data-extension-frame='true'] > style:first-child + * {\n      margin-top: 0;\n    }\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)");
-var mbeNavigation = css(_templateObject2 || (_templateObject2 = _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  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n\n  user-select: none;\n  -webkit-user-modify: read-only;\n  border: 1px solid ", ";\n  border-bottom: none !important;\n  background: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-surface, white)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
-var extensionFrameContent = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: ", " !important;\n  border: 1px solid ", ";\n  display: block;\n  min-height: 100px;\n  background: ", ";\n  border-bottom-left-radius: ", ";\n  border-bottom-right-radius: ", ";\n\n  margin-left: ", ";\n  margin-right: ", ";\n  cursor: initial;\n\n  .pm-table-with-controls {\n    margin-left: ", " !important;\n    padding-right: ", " !important;\n  }\n  .bodiedExtensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n  // Extension wrap have an additional margin on all four borders, so we need to adjust the spacing\n  // compared to the bodiedExtensionView-content-wrap\n  .extensionView-content-wrap {\n    margin-top: ", " !important;\n  }\n  .decisionItemView-content-wrap {\n    margin-top: 0px !important;\n  }\n\n  .decisionItemView-content-wrap > [data-decision-wrapper] {\n    margin-top: 0px !important;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"), "var(--ds-surface, white)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
+var mbeExtensionContainer = css({
+  background: 'transpaent !important',
+  'padding:': {
+    bottom: "var(--ds-space-100, 8px)".concat(" !important"),
+    left: "var(--ds-space-100, 8px)".concat(" !important"),
+    right: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  paddingBottom: "var(--ds-space-100, 8px)",
+  position: 'relative',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  '.multiBodiedExtension-handler-result': {
+    marginLeft: "var(--ds-space-100, 8px)"
+  },
+  ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true'], .multiBodiedExtension--frames > [data-extension-frame='true']": {
+    display: 'none',
+    background: "var(--ds-surface, white)"
+  },
+  '.multiBodiedExtension-content-dom-wrapper, .multiBodiedExtension--frames': {
+    "[data-extension-frame='true'] > :not(style):first-child, [data-extension-frame='true'] > style:first-child + *": {
+      marginTop: 0
+    }
+  }
+});
+var mbeNavigation = css({
+  borderTopLeftRadius: "var(--ds-border-radius, 3px)",
+  borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  userSelect: 'none',
+  WebkitUserModify: 'read-only',
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderBottom: 'none !important',
+  background: "var(--ds-surface, white)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)"
+});
+var extensionFrameContent = css({
+  padding: "var(--ds-space-100, 8px)".concat(" !important"),
+  border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")")),
+  display: 'block',
+  minHeight: '100px',
+  background: "var(--ds-surface, white)",
+  borderBottomLeftRadius: "var(--ds-border-radius, 3px)",
+  borderBottomRightRadius: "var(--ds-border-radius, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  '.pm-table-with-controls': {
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  '.bodiedExtensionView-content-wrap': {
+    marginTop: "".concat(BODIED_EXT_MBE_MARGIN_TOP, "px !important")
+  },
+  '.extensionView-content-wrap': {
+    marginTop: "var(--ds-space-100, 8px)".concat(" !important")
+  },
+  '.decisionItemView-content-wrap': {
+    marginTop: '0px !important'
+  },
+  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
+    marginTop: '0px !important'
+  }
+});
 export var sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,

package/dist/types/node-width/index.d.ts

@@ -1,5 +1,5 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorContainerWidth } from '../types/editor-container-width';
 export declare const layoutToWidth: {
     default: number;

package/dist/types/styles/index.d.ts

@@ -31,3 +31,4 @@ export { UnsupportedSharedCssClassName, unsupportedStyles, } from './shared/unsu
 export { expandIconWrapperStyle, expandClassNames } from './shared/expand';
 export { ClassNames as MediaSharedClassNames } from './shared/media';
 export { BreakoutCssClassName } from './shared/breakout';
+export { BODIED_EXT_MBE_MARGIN_TOP } from './shared/extension';

package/dist/types/styles/shared/extension.d.ts

@@ -1,2 +1,3 @@
 export declare const EXTENSION_PADDING: number;
 export declare const BODIED_EXT_PADDING: number;
+export declare const BODIED_EXT_MBE_MARGIN_TOP = 12;

package/dist/types-ts4.5/node-width/index.d.ts

@@ -1,5 +1,5 @@
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorContainerWidth } from '../types/editor-container-width';
 export declare const layoutToWidth: {
     default: number;

package/dist/types-ts4.5/styles/index.d.ts

@@ -31,3 +31,4 @@ export { UnsupportedSharedCssClassName, unsupportedStyles, } from './shared/unsu
 export { expandIconWrapperStyle, expandClassNames } from './shared/expand';
 export { ClassNames as MediaSharedClassNames } from './shared/media';
 export { BreakoutCssClassName } from './shared/breakout';
+export { BODIED_EXT_MBE_MARGIN_TOP } from './shared/extension';

package/dist/types-ts4.5/styles/shared/extension.d.ts

@@ -1,2 +1,3 @@
 export declare const EXTENSION_PADDING: number;
 export declare const BODIED_EXT_PADDING: number;
+export declare const BODIED_EXT_MBE_MARGIN_TOP = 12;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.8.2",
+  "version": "78.8.4",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"