@atlaskit/editor-common 72.5.1 → 72.6.0

package/dist/cjs/ui-color/ColorPalette/Palettes/index.js

@@ -9,4 +9,17 @@ Object.defineProperty(exports, "DEFAULT_BORDER_COLOR", {
     return _common.DEFAULT_BORDER_COLOR;
   }
 });
-var _common = require("./common");
+Object.defineProperty(exports, "backgroundPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _paletteMessagesTokenModeNames.backgroundPaletteTooltipMessages;
+  }
+});
+Object.defineProperty(exports, "textPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _paletteMessagesTokenModeNames.textPaletteTooltipMessages;
+  }
+});
+var _common = require("./common");
+var _paletteMessagesTokenModeNames = require("./paletteMessagesTokenModeNames");

package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js

@@ -4,14 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.newLightPalette = exports.newDarkPalette = void 0;
+exports.textPaletteTooltipMessages = exports.lightTextPaletteTooltipMessages = exports.lightBackgroundPaletteTooltipMessages = exports.darkTextPaletteTooltipMessages = exports.darkBackgroundPaletteTooltipMessages = exports.backgroundPaletteTooltipMessages = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactIntlNext = require("react-intl-next");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-// These messages are only to be used when useSomewhatSemanticTextColorNames feature flag is true.
-// They are used only in Jira and are part of work for https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
-var newLightPalette = (0, _reactIntlNext.defineMessages)({
+// These messages are only to be used when showSomewhatSemanticTooltips is true.
+var lightTextPaletteTooltipMessages = (0, _reactIntlNext.defineMessages)({
   '#FFFFFF': {
     id: 'fabric.theme.white',
     defaultMessage: 'White',
@@ -118,13 +117,145 @@ var newLightPalette = (0, _reactIntlNext.defineMessages)({
     description: 'Name of a color'
   }
 });
-exports.newLightPalette = newLightPalette;
-var darkModeWhite = (0, _reactIntlNext.defineMessages)({
+exports.lightTextPaletteTooltipMessages = lightTextPaletteTooltipMessages;
+var darkModeTextPaletteOverrides = (0, _reactIntlNext.defineMessages)({
   '#FFFFFF': {
     id: 'fabric.theme.dark-gray',
     defaultMessage: 'Dark gray',
     description: 'Name of a color'
   }
 });
-var newDarkPalette = _objectSpread(_objectSpread({}, newLightPalette), darkModeWhite);
-exports.newDarkPalette = newDarkPalette;
+var darkTextPaletteTooltipMessages = _objectSpread(_objectSpread({}, lightTextPaletteTooltipMessages), darkModeTextPaletteOverrides);
+exports.darkTextPaletteTooltipMessages = darkTextPaletteTooltipMessages;
+var textPaletteTooltipMessages = {
+  light: lightTextPaletteTooltipMessages,
+  dark: darkTextPaletteTooltipMessages
+};
+exports.textPaletteTooltipMessages = textPaletteTooltipMessages;
+var lightBackgroundPaletteTooltipMessages = (0, _reactIntlNext.defineMessages)({
+  '#DEEBFF': {
+    id: 'fabric.theme.subtle-blue',
+    defaultMessage: 'Subtle blue',
+    description: 'Name of a color'
+  },
+  '#B3D4FF': {
+    id: 'fabric.theme.blue',
+    defaultMessage: 'Blue',
+    description: 'Name of a color'
+  },
+  '#4C9AFF': {
+    id: 'fabric.theme.bold-blue',
+    defaultMessage: 'Bold blue',
+    description: 'Name of a color'
+  },
+  '#E6FCFF': {
+    id: 'fabric.theme.subtle-teal',
+    defaultMessage: 'Subtle teal',
+    description: 'Name of a color'
+  },
+  '#B3F5FF': {
+    id: 'fabric.theme.teal',
+    defaultMessage: 'Teal',
+    description: 'Name of a color'
+  },
+  '#79E2F2': {
+    id: 'fabric.theme.bold-teal',
+    defaultMessage: 'Bold teal',
+    description: 'Name of a color'
+  },
+  '#E3FCEF': {
+    id: 'fabric.theme.subtle-green',
+    defaultMessage: 'Subtle green',
+    description: 'Name of a color'
+  },
+  '#ABF5D1': {
+    id: 'fabric.theme.green',
+    defaultMessage: 'Green',
+    description: 'Name of a color'
+  },
+  '#57D9A3': {
+    id: 'fabric.theme.bold-green',
+    defaultMessage: 'Bold green',
+    description: 'Name of a color'
+  },
+  '#FFFAE6': {
+    id: 'fabric.theme.subtle-yellow',
+    defaultMessage: 'Subtle yellow',
+    description: 'Name of a color'
+  },
+  '#FFF0B3': {
+    id: 'fabric.theme.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Name of a color'
+  },
+  '#FFC400': {
+    id: 'fabric.theme.bold-yellow',
+    defaultMessage: 'Bold yellow',
+    description: 'Name of a color'
+  },
+  '#FFEBE6': {
+    id: 'fabric.theme.subtle-red',
+    defaultMessage: 'Subtle red',
+    description: 'Name of a color'
+  },
+  '#FFBDAD': {
+    id: 'fabric.theme.red',
+    defaultMessage: 'Red',
+    description: 'Name of a color.'
+  },
+  '#FF8F73': {
+    id: 'fabric.theme.bold-red',
+    defaultMessage: 'Bold red',
+    description: 'Name of a color'
+  },
+  '#EAE6FF': {
+    id: 'fabric.theme.subtle-purple',
+    defaultMessage: 'Subtle purple',
+    description: 'Name of a color'
+  },
+  '#C0B6F2': {
+    id: 'fabric.theme.purple',
+    defaultMessage: 'Purple',
+    description: 'Name of a color'
+  },
+  '#998DD9': {
+    id: 'fabric.theme.bold-purple',
+    defaultMessage: 'Bold purple',
+    description: 'Name of a color'
+  },
+  '#FFFFFF': {
+    id: 'fabric.theme.white',
+    defaultMessage: 'White',
+    description: 'Name of a color'
+  },
+  '#F4F5F7': {
+    id: 'fabric.theme.gray',
+    defaultMessage: 'Gray',
+    description: 'Name of a color'
+  },
+  '#B3BAC5': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  }
+});
+exports.lightBackgroundPaletteTooltipMessages = lightBackgroundPaletteTooltipMessages;
+var darkModeBackgroundPaletteOverrides = (0, _reactIntlNext.defineMessages)({
+  '#FFFFFF': {
+    id: 'fabric.theme.subtle-gray',
+    defaultMessage: 'Subtle gray',
+    description: 'Name of a color'
+  },
+  '#B3BAC5': {
+    id: 'fabric.theme.bold-gray',
+    defaultMessage: 'Bold gray',
+    description: 'Name of a color'
+  }
+});
+var darkBackgroundPaletteTooltipMessages = _objectSpread(_objectSpread({}, lightBackgroundPaletteTooltipMessages), darkModeBackgroundPaletteOverrides);
+exports.darkBackgroundPaletteTooltipMessages = darkBackgroundPaletteTooltipMessages;
+var backgroundPaletteTooltipMessages = {
+  light: lightBackgroundPaletteTooltipMessages,
+  dark: darkBackgroundPaletteTooltipMessages
+};
+exports.backgroundPaletteTooltipMessages = backgroundPaletteTooltipMessages;

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -13,7 +13,6 @@ var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _Color = _interopRequireDefault(require("./Color"));
 var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
-var _paletteMessagesTokenModeNames = require("./Palettes/paletteMessagesTokenModeNames");
 var _styles = require("./styles");
 var _utils = require("./utils");
 /** @jsx jsx */
@@ -41,18 +40,18 @@ function getCheckMarkColor(color, useIconToken) {
   return contrastColor === _colors.N0 ? "var(--ds-icon-inverse, ".concat(_colors.N0, ")") : "var(--ds-icon, ".concat(_colors.N500, ")");
 }
 var ColorPalette = function ColorPalette(props) {
-  var palette = props.palette,
-    _props$cols = props.cols,
+  var _props$cols = props.cols,
     cols = _props$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
     onClick = props.onClick,
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
-    _props$textPalette = props.textPalette,
-    textPalette = _props$textPalette === void 0 ? false : _props$textPalette,
-    hexToPaletteColor = props.hexToPaletteColor,
-    _props$useSomewhatSem = props.useSomewhatSemanticTextColorNames,
-    useSomewhatSemanticTextColorNames = _props$useSomewhatSem === void 0 ? false : _props$useSomewhatSem;
+    paletteOptions = props.paletteOptions;
+  var palette = paletteOptions.palette,
+    hexToPaletteColor = paletteOptions.hexToPaletteColor,
+    _paletteOptions$showS = paletteOptions.showSomewhatSemanticTooltips,
+    showSomewhatSemanticTooltips = _paletteOptions$showS === void 0 ? false : _paletteOptions$showS,
+    paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     tokenTheme = _useThemeObserver.colorMode;
   var useIconToken = !!hexToPaletteColor;
@@ -70,12 +69,12 @@ var ColorPalette = function ColorPalette(props) {
         label = _ref.label,
         border = _ref.border,
         message = _ref.message;
-      if (textPalette === true && useSomewhatSemanticTextColorNames) {
+      if (showSomewhatSemanticTooltips && paletteColorTooltipMessages) {
         if (tokenTheme === 'dark') {
-          message = (0, _getColorMessage.default)(_paletteMessagesTokenModeNames.newDarkPalette, value.toUpperCase());
+          message = (0, _getColorMessage.default)(paletteColorTooltipMessages.dark, value.toUpperCase());
         }
         if (tokenTheme === 'light') {
-          message = (0, _getColorMessage.default)(_paletteMessagesTokenModeNames.newLightPalette, value.toUpperCase());
+          message = (0, _getColorMessage.default)(paletteColorTooltipMessages.light, value.toUpperCase());
         }
       }
       return (0, _react2.jsx)(_Color.default, {

package/dist/cjs/ui-color/index.js

@@ -28,6 +28,12 @@ Object.defineProperty(exports, "DEFAULT_COLOR_PICKER_COLUMNS", {
     return _utils.DEFAULT_COLOR_PICKER_COLUMNS;
   }
 });
+Object.defineProperty(exports, "backgroundPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _Palettes.backgroundPaletteTooltipMessages;
+  }
+});
 Object.defineProperty(exports, "cellBackgroundColorPalette", {
   enumerable: true,
   get: function get() {
@@ -88,6 +94,12 @@ Object.defineProperty(exports, "textColorPalette", {
     return _textColorPalette.textColorPalette;
   }
 });
+Object.defineProperty(exports, "textPaletteTooltipMessages", {
+  enumerable: true,
+  get: function get() {
+    return _Palettes.textPaletteTooltipMessages;
+  }
+});
 var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
 var _Color = _interopRequireDefault(require("./ColorPalette/Color"));
 var _utils = require("./ColorPalette/utils");
@@ -96,4 +108,5 @@ var _paletteMessages = _interopRequireDefault(require("./ColorPalette/Palettes/p
 var _panelBackgroundPalette = require("./ColorPalette/Palettes/panelBackgroundPalette");
 var _statusColorPalette = require("./ColorPalette/Palettes/statusColorPalette");
 var _textColorPalette = require("./ColorPalette/Palettes/textColorPalette");
+var _Palettes = require("./ColorPalette/Palettes");
 var _common = require("./ColorPalette/Palettes/common");

package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js

@@ -114,20 +114,20 @@ var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvider(_re
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
+          handleClose(event);
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
           }
-          handleClose(event);
           break;
         case 'ArrowRight':
           //Filter out the events from outside the menu
           if (!targetElement.closest('.custom-key-handler-wrapper')) {
             return;
           }
+          handleClose(event);
           if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
             keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
           }
-          handleClose(event);
           break;
         case 'Escape':
           handleClose(event);

package/dist/cjs/ui-menu/Dropdown/index.js

@@ -46,6 +46,19 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         popupPlacement: placement
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAndFocus", function (event) {
+      var _this$state$target, _this$state$target$qu;
+      (_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+      _this.handleClose(event);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
     _this.state = {
       popupPlacement: ['bottom', 'left']
     };
@@ -66,7 +79,8 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         fitHeight = _this$props.fitHeight,
         fitWidth = _this$props.fitWidth,
         zIndex = _this$props.zIndex,
-        arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions;
+        arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
+        dropdownListId = _this$props.dropdownListId;
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
         target: target,
         mountTo: mountTo,
@@ -78,12 +92,7 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         zIndex: zIndex
       }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider, (0, _extends2.default)({}, arrowKeyNavigationProviderOptions, {
         closeOnTab: true,
-        handleClose: function handleClose(event) {
-          return onOpenChange && onOpenChange({
-            isOpen: false,
-            event: event
-          });
-        }
+        handleClose: this.handleCloseAndFocus
       }), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           height: 0,
@@ -93,7 +102,8 @@ var Dropdown = /*#__PURE__*/function (_PureComponent) {
         isOpen: true,
         onOpenChange: onOpenChange,
         position: popupPlacement.join(' '),
-        shouldFitContainer: true
+        shouldFitContainer: true,
+        id: dropdownListId
       }, children))));
     }
   }, {

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -103,8 +103,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAndFocus", function () {
       var _this$state$target, _this$state$target$qu;
-      _this.handleClose();
       (_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
+      _this.handleClose();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
       if (_this.props.onOpenChange) {

package/dist/cjs/utils/breakout.js

@@ -89,11 +89,15 @@ function calculateBreakoutStyles(_ref) {
     // it breaks things like sticky headers.
     //
     // It can also cause bluriness for some child content (such as iframes)
+
     return {
       type: 'line-length-unknown',
       width: breakoutWidth,
-      transform: 'translateX(-50%)',
-      marginLeft: '50%'
+      minWidth: breakoutWidthPx,
+      display: 'flex',
+      justifyContent: 'center',
+      transform: 'none',
+      transition: "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier)
     };
   }
 
@@ -102,11 +106,15 @@ function calculateBreakoutStyles(_ref) {
   // full-page appearance modes. There is a slight delay before
   // the widthState is updated.
   // During this period -- the marginLeftPx will be incorrect.
-  var marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+  // const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+
   return {
     type: 'line-length-known',
     width: breakoutWidth,
-    marginLeft: "".concat(marginLeftPx, "px")
+    minWidth: breakoutWidthPx,
+    transition: "min-width 0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
+    transform: "translateX(-50%)",
+    marginLeft: "50%"
   };
 }
 function calcBreakoutWidthPx(mode, widthStateWidth) {

package/dist/cjs/utils/index.js

@@ -10,12 +10,6 @@ Object.defineProperty(exports, "ADFTraversor", {
     return _traversor.default;
   }
 });
-Object.defineProperty(exports, "Builder", {
-  enumerable: true,
-  get: function get() {
-    return _builder.Builder;
-  }
-});
 Object.defineProperty(exports, "ErrorReporter", {
   enumerable: true,
   get: function get() {
@@ -340,6 +334,18 @@ Object.defineProperty(exports, "isLinkMark", {
     return _nodes.isLinkMark;
   }
 });
+Object.defineProperty(exports, "isMediaNode", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.isMediaNode;
+  }
+});
+Object.defineProperty(exports, "isNodeBeforeMediaNode", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.isNodeBeforeMediaNode;
+  }
+});
 Object.defineProperty(exports, "isNodeSelectedOrInRange", {
   enumerable: true,
   get: function get() {
@@ -677,5 +683,4 @@ var _useComponentRenderTracking = require("./performance/hooks/use-component-ren
 var _outdatedBrowsers = require("./outdated-browsers");
 var _referentiality = require("./referentiality");
 var _sendLogs = require("./sendLogs");
-var _builder = require("./builder");
 var _list = require("./list");

package/dist/cjs/utils/nodes.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateNodes = exports.validNode = exports.isType = exports.isText = exports.isSupportedInParent = exports.isParagraph = exports.isNodeSelectedOrInRange = exports.isLinkMark = exports.findChangedNodesFromTransaction = exports.SelectedState = void 0;
+exports.validateNodes = exports.validNode = exports.isType = exports.isText = exports.isSupportedInParent = exports.isParagraph = exports.isNodeSelectedOrInRange = exports.isNodeBeforeMediaNode = exports.isMediaNode = exports.isLinkMark = exports.findChangedNodesFromTransaction = exports.SelectedState = void 0;
+var _prosemirrorUtils = require("prosemirror-utils");
 /**
  * Finds all top level nodes affected by the transaction
  * Uses from/to positions in transaction's steps to work out which nodes will
@@ -104,4 +105,39 @@ var isSupportedInParent = function isSupportedInParent(state, fragment, currentA
   var parent = state.selection.$from.node(depth);
   return parent && parent.type.validContent(fragment);
 };
-exports.isSupportedInParent = isSupportedInParent;
+
+/**
+ * Checks if the passed in node is a media node
+ * Includes media, mediaInline, mediaGroup, mediaSingle
+ * @param node The PM node to be checked
+ */
+exports.isSupportedInParent = isSupportedInParent;
+var isMediaNode = function isMediaNode(node) {
+  return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(node.type.name);
+};
+
+/**
+ * Checks if the node before selection is a media node
+ * If there is no node before, checks the node before the parent node
+ * Includes media, mediaInline, mediaGroup, mediaSingle
+ * @param $pos The position of the selection
+ * @param state The editor state
+ */
+exports.isMediaNode = isMediaNode;
+var isNodeBeforeMediaNode = function isNodeBeforeMediaNode($pos, state) {
+  var nodeBefore = $pos.nodeBefore;
+  if (!nodeBefore) {
+    var depthOfParent = $pos.depth - 1 || 1;
+    var parentNode = (0, _prosemirrorUtils.findParentNodeOfType)([state.schema.nodes["".concat($pos.node(depthOfParent).type.name)]])(state.selection);
+    var resolvedPosOfParentNode = parentNode ? state.tr.doc.resolve(parentNode.pos) : undefined;
+    var nodeBeforeParent = resolvedPosOfParentNode && resolvedPosOfParentNode.pos < state.doc.nodeSize ? resolvedPosOfParentNode.nodeBefore : undefined;
+    if (nodeBeforeParent) {
+      nodeBefore = nodeBeforeParent;
+    }
+  }
+  if (nodeBefore) {
+    return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(nodeBefore.type.name);
+  }
+  return false;
+};
+exports.isNodeBeforeMediaNode = isNodeBeforeMediaNode;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "72.5.1",
+	"version": "72.6.0",
 	"sideEffects": false
 }

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

@@ -1,5 +1,6 @@
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { gridSize } from '@atlaskit/theme/constants';
 import { BODIED_EXT_PADDING } from '../styles/shared/extension';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
 import { absoluteBreakoutWidth } from '../utils/breakout';
@@ -41,10 +42,23 @@ export const getParentNodeWidth = (pos, state, containerWidth, isFullWidthModeEn
   }
 
   // account for the padding of the parent node
-  if (node.type === schema.nodes.layoutSection) {
-    parentWidth -= LAYOUT_COLUMN_PADDING * 2;
-  } else if (node.type === schema.nodes.bodiedExtension) {
-    parentWidth -= BODIED_EXT_PADDING * 2;
+  switch (node.type) {
+    case schema.nodes.layoutSection:
+      parentWidth -= LAYOUT_COLUMN_PADDING * 2;
+      break;
+    case schema.nodes.bodiedExtension:
+      parentWidth -= BODIED_EXT_PADDING * 2;
+      break;
+    case schema.nodes.expand:
+      // padding
+      parentWidth -= gridSize() * 2;
+      // gutter offset
+      parentWidth += gridSize() * 1.5 * 2;
+      // padding right
+      parentWidth -= gridSize();
+      // padding left
+      parentWidth -= gridSize() * 4 - gridSize() / 2;
+      break;
   }
   parentWidth -= 2; // border
 

package/dist/es2019/preset/builder.js

@@ -0,0 +1,138 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export class EditorPresetBuilder {
+  constructor(...more) {
+    _defineProperty(this, "safeEntry", plugin => Array.isArray(plugin) ? plugin : [plugin, undefined]);
+    this.data = [...more] || [];
+  }
+  add(nextOrTuple) {
+    return new EditorPresetBuilder(
+    /**
+     * re-cast this to NewPlugin as we've done all the type
+     * safety, dependency checking, narrowing, during
+     * `SafePresetCheck & VerifyPluginDependencies`
+     */
+    nextOrTuple, ...this.data);
+  }
+
+  //hasPlugin<Plugin extends NextEditorPlugin<any, any>>(
+  //  pluginToAdd: Plugin,
+  //): this is TryCastEditorPresetBuilderByCheckingPlugins<this, Plugin> {
+  //  const hasPluginQueryExists = this.data.find((pluginEntry) => {
+  //    const pluginFunction: NextEditorPlugin<any, any> = !Array.isArray(
+  //      pluginEntry,
+  //    )
+  //      ? pluginEntry
+  //      : pluginEntry[0];
+
+  //    return pluginFunction === pluginToAdd;
+  //  });
+
+  //  return Boolean(hasPluginQueryExists);
+  //}
+
+  maybeAdd(pluginToAdd, add) {
+    return add(pluginToAdd,
+    //  @ts-ignore
+    this);
+  }
+  has(plugin) {
+    return this.data.some(pluginPreset => {
+      if (Array.isArray(pluginPreset)) {
+        return pluginPreset[0] === plugin;
+      }
+      return pluginPreset === plugin;
+    });
+  }
+  build({
+    pluginInjectionAPI,
+    excludePlugins: maybeExcludePlugins
+  } = {}) {
+    const excludePlugins = new Set(maybeExcludePlugins ? maybeExcludePlugins : []);
+    const editorPlugins = this.processEditorPlugins({
+      pluginInjectionAPI,
+      excludePlugins
+    });
+    return this.removeExcludedPlugins(editorPlugins, excludePlugins);
+  }
+  verifyDuplicatedPlugins() {
+    const cache = new Set();
+    this.data.forEach(pluginEntry => {
+      const [pluginFn, _] = Array.isArray(pluginEntry) ? pluginEntry : [pluginEntry, undefined];
+      if (cache.has(pluginFn)) {
+        throw new Error(`${pluginFn} is already included!`);
+      }
+      cache.add(pluginFn);
+    });
+    return true;
+  }
+  processEditorPlugins({
+    pluginInjectionAPI,
+    excludePlugins
+  }) {
+    this.verifyDuplicatedPlugins();
+    const seen = new Set();
+    const plugins = this.data.reverse().map(entry => {
+      const [fn, config] = this.safeEntry(entry);
+      if (seen.has(fn)) {
+        return null;
+      }
+      seen.add(fn);
+      if (typeof fn !== 'function') {
+        return null;
+      }
+      const plugin = pluginInjectionAPI ? fn(config, pluginInjectionAPI.api()) : fn(config);
+      if (plugin && excludePlugins !== null && excludePlugins !== void 0 && excludePlugins.has(plugin.name)) {
+        return null;
+      }
+      if (!pluginInjectionAPI) {
+        return plugin;
+      }
+      pluginInjectionAPI.onEditorPluginInitialized(plugin);
+      return plugin;
+    }).filter(Boolean);
+    return plugins;
+  }
+  removeExcludedPlugins(plugins, excludes) {
+    if (excludes) {
+      return plugins.filter(plugin => !plugin || !excludes.has(plugin.name));
+    }
+    return plugins;
+  }
+
+  // TODO: ED-17023 - Bring back type safety to the EditorPresetBuilder.add preset
+  //import type {
+  //  ExtractPluginDependencies,
+  //} from '../types/next-editor-plugin';
+  //type TryCastEditorPresetBuilderByCheckingDependencies<MaybeEditorPresetBuilder, Plugin> =
+  //  MaybeEditorPresetBuilder extends EditorPresetBuilder<any, infer StackPlugins>
+  //    ? Plugin extends NextEditorPlugin<any, any>
+  //      ? ExtractPluginDependencies<Plugin>[number] extends StackPlugins[number]
+  //        ? MaybeEditorPresetBuilder
+  //        : never
+  //      : never
+  //    : never;
+  // Because how our plugins are added in the preset, we can't use the type safe system
+  // in the EditorPresetBuilder.
+  // TODO: ED-17023 - Bring back type safety to the EditorPresetBuilder.add preset
+  //maybeAdd<
+  //  MaybePlugin extends NextEditorPlugin<any, any>,
+  //  MaybePluginNames extends string[],
+  //  MaybeStackPlugins extends AllEditorPresetPluginTypes[],
+  //  MaybeEditorPresetBuilder extends EditorPresetBuilder<
+  //    MaybePluginNames,
+  //    MaybeStackPlugins
+  //  >,
+  //>(
+  //  pluginToAdd: MaybePlugin,
+  //   add: (
+  //     pluginToAdd: MaybePlugin,
+  //     maybeEditorPresetBuilder: TryCastEditorPresetBuilderByCheckingDependencies<this, MaybePlugin>,
+  //   ) => MaybeEditorPresetBuilder,
+  //): MaybeEditorPresetBuilder | this {
+  //  return add(
+  //    pluginToAdd,
+  //    //  @ts-ignore
+  //    this as any,
+  //  );
+  //}
+}

package/dist/es2019/preset/index.js

@@ -0,0 +1,2 @@
+export { EditorPresetBuilder } from './builder';
+export { EditorPluginInjectionAPI } from './plugin-injection-api';