@atlaskit/editor-plugin-block-menu 3.2.1 → 3.2.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 3.2.2
+
+### Patch Changes
+
+- [`0cde512c00691`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cde512c00691) -
+  [ux] When resized node it transformed to another resized node, the width should be preserved.
+- [`245e047a2f6e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/245e047a2f6e9) -
+  [ux] Change `Format` option text to `Turn into` in block menu
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes

package/dist/cjs/editor-commands/transforms/container-transforms.js

@@ -35,9 +35,11 @@ var transformToContainer = exports.transformToContainer = function transformToCo
   var schema = tr.doc.type.schema;
   var content = selection.content().content;
   var transformedContent = content;
+  var marks = [];
   if (sourceNode.type === schema.nodes.codeBlock) {
     var paragraphNodes = (0, _utils2.convertCodeBlockContentToParagraphs)(sourceNode, schema);
     transformedContent = _model.Fragment.fromArray(paragraphNodes);
+    marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
   }
   if (targetNodeType === schema.nodes.blockquote) {
     transformedContent = convertInvalidNodeToValidNodeType(transformedContent, schema.nodes.heading, schema.nodes.paragraph, true);
@@ -49,7 +51,7 @@ var transformToContainer = exports.transformToContainer = function transformToCo
   if (sourceNode.type === schema.nodes.paragraph || sourceNode.type === schema.nodes.heading) {
     transformedContent = (0, _utils2.filterMarksForTargetNodeType)(transformedContent, targetNodeType);
   }
-  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent);
+  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent, marks);
   if (!newNode) {
     return null;
   }
@@ -175,7 +177,8 @@ var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function
     var codeBlockContent = sourceChildren.map(function (node) {
       return node.content.textBetween(0, node.content.size, '\n');
     }).join('\n');
-    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+    var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent), marks)];
   }
   var slice = new _model.Slice(_model.Fragment.fromArray(transformedContent), 0, 0);
   tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
@@ -272,6 +275,12 @@ var transformBetweenContainerTypes = exports.transformBetweenContainerTypes = fu
   // Special handling for codeBlock target
   if (targetNodeType.name === 'codeBlock') {
     var _contentSplits = splitContentForCodeBlock(sourceNode, targetNodeType, targetAttrs, tr.doc.type.schema);
+    if (_contentSplits.length === 0) {
+      var schema = tr.doc.type.schema;
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var codeBlock = schema.nodes.codeBlock.create(targetAttrs, null, marks);
+      return tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, codeBlock);
+    }
     return applySplitsToTransaction(tr, sourcePos, sourceNode.nodeSize, _contentSplits);
   }
 
@@ -319,7 +328,8 @@ var splitContentForCodeBlock = function splitContentForCodeBlock(sourceNode, tar
   var flushCurrentCodeBlock = function flushCurrentCodeBlock() {
     if (currentTextContent.length > 0) {
       var codeText = currentTextContent.join('\n');
-      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText));
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText), marks);
       splits.push(codeBlockNode);
       currentTextContent = [];
     }
@@ -390,7 +400,8 @@ var splitContentAroundUnsupportedBlocks = function splitContentAroundUnsupported
   }
   var flushCurrentContainer = function flushCurrentContainer() {
     if (currentContainerContent.length > 0) {
-      var containerNode = targetNodeType.create(targetAttrs, _model.Fragment.fromArray(currentContainerContent));
+      var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, targetNodeType);
+      var containerNode = targetNodeType.create(targetAttrs, _model.Fragment.fromArray(currentContainerContent), marks);
       splits.push(containerNode);
       currentContainerContent = [];
     }

package/dist/cjs/editor-commands/transforms/layout-transforms.js

@@ -10,7 +10,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("./layout/utils");
 var _utils2 = require("./utils");
-var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(schema, content) {
+var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(schema, content, marks) {
   var _schema$nodes = schema.nodes,
     layoutSection = _schema$nodes.layoutSection,
     layoutColumn = _schema$nodes.layoutColumn,
@@ -20,7 +20,7 @@ var createDefaultLayoutSection = exports.createDefaultLayoutSection = function c
   }, content), layoutColumn.create({
     width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
   }, paragraph.createAndFill())]);
-  return layoutSection.createChecked(undefined, layoutContent);
+  return layoutSection.createChecked(undefined, layoutContent, marks);
 };
 var convertToLayout = exports.convertToLayout = function convertToLayout(context) {
   var tr = context.tr,
@@ -29,7 +29,11 @@ var convertToLayout = exports.convertToLayout = function convertToLayout(context
   var content = sourceNode.mark(sourceNode.marks.filter(function (mark) {
     return mark.type.name !== 'breakout';
   }));
-  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content);
+
+  // Layout supports breakout mark that can have width attribute
+  // When other nodes with breakout (codeBlock and expand) are converted to a layout, the layout should get width of original node
+  var marks = (0, _utils2.getMarksWithBreakout)(sourceNode, tr.doc.type.schema.nodes.layoutSection);
+  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content, marks);
   if ((0, _utils2.isHeadingOrParagraphNode)(sourceNode)) {
     // -1 to fix when sourceNode is the last node in the document, unable to convert to layout
     tr.replaceRangeWith(sourcePos > 0 ? sourcePos - 1 : sourcePos, sourcePos + sourceNode.nodeSize - 1, layoutSectionNode);

package/dist/cjs/editor-commands/transforms/utils.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isListNodeType = exports.isListNode = exports.isLayoutNodeType = exports.isLayoutNode = exports.isHeadingOrParagraphNode = exports.isContainerNodeType = exports.isContainerNode = exports.isBlockNodeType = exports.isBlockNodeForExtraction = exports.isBlockNode = exports.getTargetNodeInfo = exports.getContentSupportChecker = exports.filterMarksForTargetNodeType = exports.convertNodeToInlineContent = exports.convertCodeBlockContentToParagraphs = void 0;
+exports.isListNodeType = exports.isListNode = exports.isLayoutNodeType = exports.isLayoutNode = exports.isHeadingOrParagraphNode = exports.isContainerNodeType = exports.isContainerNode = exports.isBlockNodeType = exports.isBlockNodeForExtraction = exports.isBlockNode = exports.getTargetNodeInfo = exports.getMarksWithBreakout = exports.getContentSupportChecker = exports.filterMarksForTargetNodeType = exports.convertNodeToInlineContent = exports.convertCodeBlockContentToParagraphs = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var getTargetNodeInfo = exports.getTargetNodeInfo = function getTargetNodeInfo(targetType, nodes) {
   switch (targetType) {
@@ -202,4 +204,21 @@ var convertCodeBlockContentToParagraphs = exports.convertCodeBlockContentToParag
     paragraphNodes.push(paragraphNode);
   });
   return paragraphNodes;
+};
+var isBreakoutMarkSupported = function isBreakoutMarkSupported(nodeType) {
+  return ['codeBlock', 'expand', 'layoutSection'].includes(nodeType.name);
+};
+var getMarksWithBreakout = exports.getMarksWithBreakout = function getMarksWithBreakout(sourceNode, targetNodeType) {
+  var allowedMarks = targetNodeType.allowedMarks(sourceNode.marks);
+  var sourceBreakoutMark = sourceNode.marks.find(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if (sourceBreakoutMark && isBreakoutMarkSupported(targetNodeType)) {
+    // Check if breakout mark is already in allowedMarks to avoid duplicates
+    var hasBreakoutMark = allowedMarks.some(function (mark) {
+      return mark.type.name === 'breakout';
+    });
+    return hasBreakoutMark ? allowedMarks : [].concat((0, _toConsumableArray2.default)(allowedMarks), [sourceBreakoutMark]);
+  }
+  return allowedMarks;
 };

package/dist/cjs/ui/block-menu-components.js

@@ -9,13 +9,12 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = _interopRequireDefault(require("react"));
 var _blockMenu = require("@atlaskit/editor-common/block-menu");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _copyLink = require("./copy-link");
 var _copySection = require("./copy-section");
 var _deleteButton = require("./delete-button");
 var _deleteSection = require("./delete-section");
+var _formatMenuNested = require("./format-menu-nested");
 var _formatMenuSection = require("./format-menu-section");
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
@@ -62,16 +61,7 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
           children: null
         },
         children = _ref.children;
-      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-          label: 'example nested menu'
-        }),
-        enableMaxHeight: true
-      }, children);
+      return /*#__PURE__*/_react.default.createElement(_formatMenuNested.FormatMenuComponent, null, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/cjs/ui/block-menu.js

@@ -1,4 +1,4 @@
-/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/format-menu-nested.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormatMenuComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
+  var children = _ref.children;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
+    text: formatMessage(_blockMenu.messages.turnInto),
+    elemBefore: /*#__PURE__*/_react.default.createElement(_changes.default, {
+      label: ""
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
+      label: ""
+    }),
+    enableMaxHeight: true
+  }, children);
+};

package/dist/es2019/editor-commands/transforms/container-transforms.js

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { getInlineNodeTextContent } from './inline-node-transforms';
-import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType } from './utils';
+import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType, getMarksWithBreakout } from './utils';
 const convertInvalidNodeToValidNodeType = (sourceContent, sourceNodeType, validNodeType, withMarks) => {
   const validTransformedContent = [];
   // Headings are not valid inside headings so convert heading nodes to paragraphs
@@ -28,9 +28,11 @@ export const transformToContainer = ({
   const schema = tr.doc.type.schema;
   const content = selection.content().content;
   let transformedContent = content;
+  let marks = [];
   if (sourceNode.type === schema.nodes.codeBlock) {
     const paragraphNodes = convertCodeBlockContentToParagraphs(sourceNode, schema);
     transformedContent = Fragment.fromArray(paragraphNodes);
+    marks = getMarksWithBreakout(sourceNode, targetNodeType);
   }
   if (targetNodeType === schema.nodes.blockquote) {
     transformedContent = convertInvalidNodeToValidNodeType(transformedContent, schema.nodes.heading, schema.nodes.paragraph, true);
@@ -42,7 +44,7 @@ export const transformToContainer = ({
   if (sourceNode.type === schema.nodes.paragraph || sourceNode.type === schema.nodes.heading) {
     transformedContent = filterMarksForTargetNodeType(transformedContent, targetNodeType);
   }
-  const newNode = targetNodeType.createAndFill(targetAttrs, transformedContent);
+  const newNode = targetNodeType.createAndFill(targetAttrs, transformedContent, marks);
   if (!newNode) {
     return null;
   }
@@ -172,7 +174,8 @@ export const unwrapAndConvertToBlockType = context => {
   // if target node is code block, do unwrap and convert to code block
   if (targetNodeType === codeBlock) {
     const codeBlockContent = sourceChildren.map(node => node.content.textBetween(0, node.content.size, '\n')).join('\n');
-    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+    const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent), marks)];
   }
   const slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
   tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
@@ -273,6 +276,14 @@ export const transformBetweenContainerTypes = context => {
   // Special handling for codeBlock target
   if (targetNodeType.name === 'codeBlock') {
     const contentSplits = splitContentForCodeBlock(sourceNode, targetNodeType, targetAttrs, tr.doc.type.schema);
+    if (contentSplits.length === 0) {
+      const {
+        schema
+      } = tr.doc.type;
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const codeBlock = schema.nodes.codeBlock.create(targetAttrs, null, marks);
+      return tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, codeBlock);
+    }
     return applySplitsToTransaction(tr, sourcePos, sourceNode.nodeSize, contentSplits);
   }
 
@@ -320,7 +331,8 @@ const splitContentForCodeBlock = (sourceNode, targetNodeType, targetAttrs, schem
   const flushCurrentCodeBlock = () => {
     if (currentTextContent.length > 0) {
       const codeText = currentTextContent.join('\n');
-      const codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText));
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText), marks);
       splits.push(codeBlockNode);
       currentTextContent = [];
     }
@@ -391,7 +403,8 @@ const splitContentAroundUnsupportedBlocks = (sourceNode, isContentSupported, tar
   }
   const flushCurrentContainer = () => {
     if (currentContainerContent.length > 0) {
-      const containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent));
+      const marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      const containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent), marks);
       splits.push(containerNode);
       currentContainerContent = [];
     }

package/dist/es2019/editor-commands/transforms/layout-transforms.js

@@ -1,8 +1,8 @@
 import { DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH } from '@atlaskit/editor-common/styles';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { convertUnwrappedLayoutContent, unwrapLayoutNodesToTextNodes } from './layout/utils';
-import { isHeadingOrParagraphNode } from './utils';
-export const createDefaultLayoutSection = (schema, content) => {
+import { getMarksWithBreakout, isHeadingOrParagraphNode } from './utils';
+export const createDefaultLayoutSection = (schema, content, marks) => {
   const {
     layoutSection,
     layoutColumn,
@@ -13,7 +13,7 @@ export const createDefaultLayoutSection = (schema, content) => {
   }, content), layoutColumn.create({
     width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
   }, paragraph.createAndFill())]);
-  return layoutSection.createChecked(undefined, layoutContent);
+  return layoutSection.createChecked(undefined, layoutContent, marks);
 };
 export const convertToLayout = context => {
   const {
@@ -22,7 +22,11 @@ export const convertToLayout = context => {
     sourcePos
   } = context;
   const content = sourceNode.mark(sourceNode.marks.filter(mark => mark.type.name !== 'breakout'));
-  const layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content);
+
+  // Layout supports breakout mark that can have width attribute
+  // When other nodes with breakout (codeBlock and expand) are converted to a layout, the layout should get width of original node
+  const marks = getMarksWithBreakout(sourceNode, tr.doc.type.schema.nodes.layoutSection);
+  const layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content, marks);
   if (isHeadingOrParagraphNode(sourceNode)) {
     // -1 to fix when sourceNode is the last node in the document, unable to convert to layout
     tr.replaceRangeWith(sourcePos > 0 ? sourcePos - 1 : sourcePos, sourcePos + sourceNode.nodeSize - 1, layoutSectionNode);

package/dist/es2019/editor-commands/transforms/utils.js

@@ -196,4 +196,17 @@ export const convertCodeBlockContentToParagraphs = (codeBlockNode, schema) => {
     paragraphNodes.push(paragraphNode);
   });
   return paragraphNodes;
+};
+const isBreakoutMarkSupported = nodeType => {
+  return ['codeBlock', 'expand', 'layoutSection'].includes(nodeType.name);
+};
+export const getMarksWithBreakout = (sourceNode, targetNodeType) => {
+  const allowedMarks = targetNodeType.allowedMarks(sourceNode.marks);
+  const sourceBreakoutMark = sourceNode.marks.find(mark => mark.type.name === 'breakout');
+  if (sourceBreakoutMark && isBreakoutMarkSupported(targetNodeType)) {
+    // Check if breakout mark is already in allowedMarks to avoid duplicates
+    const hasBreakoutMark = allowedMarks.some(mark => mark.type.name === 'breakout');
+    return hasBreakoutMark ? allowedMarks : [...allowedMarks, sourceBreakoutMark];
+  }
+  return allowedMarks;
 };

package/dist/es2019/ui/block-menu-components.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import { MOVE_UP_MENU_ITEM, MOVE_UP_DOWN_MENU_SECTION, MOVE_DOWN_MENU_ITEM, MOVE_BLOCK_SECTION_RANK, PRIMARY_MENU_SECTION, BLOCK_MENU_SECTION_RANK, COPY_MENU_SECTION, COPY_BLOCK_MENU_ITEM, COPY_MENU_SECTION_RANK, COPY_LINK_MENU_ITEM, DELETE_MENU_SECTION, DELETE_MENU_ITEM, DELETE_SECTION_RANK, NESTED_FORMAT_MENU_SECTION, NESTED_FORMAT_MENU } from '@atlaskit/editor-common/block-menu';
-import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import ChangesIcon from '@atlaskit/icon/core/changes';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
 import { DeleteDropdownItem } from './delete-button';
 import { DeleteSection } from './delete-section';
+import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
@@ -50,16 +49,7 @@ const getFormatMenuComponents = api => {
     } = {
       children: null
     }) => {
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        }),
-        enableMaxHeight: true
-      }, children);
+      return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/es2019/ui/block-menu.js

@@ -1,4 +1,4 @@
-/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect } from 'react';

package/dist/es2019/ui/format-menu-nested.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChangesIcon from '@atlaskit/icon/core/changes';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+export const FormatMenuComponent = ({
+  children
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    text: formatMessage(messages.turnInto),
+    elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+      label: ""
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: ""
+    }),
+    enableMaxHeight: true
+  }, children);
+};

package/dist/esm/editor-commands/transforms/container-transforms.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { getInlineNodeTextContent } from './inline-node-transforms';
-import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType } from './utils';
+import { isBlockNodeType, isListNodeType, isContainerNodeType, isBlockNodeForExtraction, convertNodeToInlineContent, getContentSupportChecker, convertCodeBlockContentToParagraphs, filterMarksForTargetNodeType, getMarksWithBreakout } from './utils';
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
   var validTransformedContent = [];
   // Headings are not valid inside headings so convert heading nodes to paragraphs
@@ -28,9 +28,11 @@ export var transformToContainer = function transformToContainer(_ref) {
   var schema = tr.doc.type.schema;
   var content = selection.content().content;
   var transformedContent = content;
+  var marks = [];
   if (sourceNode.type === schema.nodes.codeBlock) {
     var paragraphNodes = convertCodeBlockContentToParagraphs(sourceNode, schema);
     transformedContent = Fragment.fromArray(paragraphNodes);
+    marks = getMarksWithBreakout(sourceNode, targetNodeType);
   }
   if (targetNodeType === schema.nodes.blockquote) {
     transformedContent = convertInvalidNodeToValidNodeType(transformedContent, schema.nodes.heading, schema.nodes.paragraph, true);
@@ -42,7 +44,7 @@ export var transformToContainer = function transformToContainer(_ref) {
   if (sourceNode.type === schema.nodes.paragraph || sourceNode.type === schema.nodes.heading) {
     transformedContent = filterMarksForTargetNodeType(transformedContent, targetNodeType);
   }
-  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent);
+  var newNode = targetNodeType.createAndFill(targetAttrs, transformedContent, marks);
   if (!newNode) {
     return null;
   }
@@ -168,7 +170,8 @@ export var unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType(co
     var codeBlockContent = sourceChildren.map(function (node) {
       return node.content.textBetween(0, node.content.size, '\n');
     }).join('\n');
-    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+    var marks = getMarksWithBreakout(sourceNode, targetNodeType);
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent), marks)];
   }
   var slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
   tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
@@ -265,6 +268,12 @@ export var transformBetweenContainerTypes = function transformBetweenContainerTy
   // Special handling for codeBlock target
   if (targetNodeType.name === 'codeBlock') {
     var _contentSplits = splitContentForCodeBlock(sourceNode, targetNodeType, targetAttrs, tr.doc.type.schema);
+    if (_contentSplits.length === 0) {
+      var schema = tr.doc.type.schema;
+      var marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      var codeBlock = schema.nodes.codeBlock.create(targetAttrs, null, marks);
+      return tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, codeBlock);
+    }
     return applySplitsToTransaction(tr, sourcePos, sourceNode.nodeSize, _contentSplits);
   }
 
@@ -312,7 +321,8 @@ var splitContentForCodeBlock = function splitContentForCodeBlock(sourceNode, tar
   var flushCurrentCodeBlock = function flushCurrentCodeBlock() {
     if (currentTextContent.length > 0) {
       var codeText = currentTextContent.join('\n');
-      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText));
+      var marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      var codeBlockNode = targetNodeType.create(targetAttrs, schema.text(codeText), marks);
       splits.push(codeBlockNode);
       currentTextContent = [];
     }
@@ -383,7 +393,8 @@ var splitContentAroundUnsupportedBlocks = function splitContentAroundUnsupported
   }
   var flushCurrentContainer = function flushCurrentContainer() {
     if (currentContainerContent.length > 0) {
-      var containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent));
+      var marks = getMarksWithBreakout(sourceNode, targetNodeType);
+      var containerNode = targetNodeType.create(targetAttrs, Fragment.fromArray(currentContainerContent), marks);
       splits.push(containerNode);
       currentContainerContent = [];
     }

package/dist/esm/editor-commands/transforms/layout-transforms.js

@@ -2,8 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH } from '@atlaskit/editor-common/styles';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { convertUnwrappedLayoutContent, unwrapLayoutNodesToTextNodes } from './layout/utils';
-import { isHeadingOrParagraphNode } from './utils';
-export var createDefaultLayoutSection = function createDefaultLayoutSection(schema, content) {
+import { getMarksWithBreakout, isHeadingOrParagraphNode } from './utils';
+export var createDefaultLayoutSection = function createDefaultLayoutSection(schema, content, marks) {
   var _schema$nodes = schema.nodes,
     layoutSection = _schema$nodes.layoutSection,
     layoutColumn = _schema$nodes.layoutColumn,
@@ -13,7 +13,7 @@ export var createDefaultLayoutSection = function createDefaultLayoutSection(sche
   }, content), layoutColumn.create({
     width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
   }, paragraph.createAndFill())]);
-  return layoutSection.createChecked(undefined, layoutContent);
+  return layoutSection.createChecked(undefined, layoutContent, marks);
 };
 export var convertToLayout = function convertToLayout(context) {
   var tr = context.tr,
@@ -22,7 +22,11 @@ export var convertToLayout = function convertToLayout(context) {
   var content = sourceNode.mark(sourceNode.marks.filter(function (mark) {
     return mark.type.name !== 'breakout';
   }));
-  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content);
+
+  // Layout supports breakout mark that can have width attribute
+  // When other nodes with breakout (codeBlock and expand) are converted to a layout, the layout should get width of original node
+  var marks = getMarksWithBreakout(sourceNode, tr.doc.type.schema.nodes.layoutSection);
+  var layoutSectionNode = createDefaultLayoutSection(tr.doc.type.schema, content, marks);
   if (isHeadingOrParagraphNode(sourceNode)) {
     // -1 to fix when sourceNode is the last node in the document, unable to convert to layout
     tr.replaceRangeWith(sourcePos > 0 ? sourcePos - 1 : sourcePos, sourcePos + sourceNode.nodeSize - 1, layoutSectionNode);

package/dist/esm/editor-commands/transforms/utils.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 export var getTargetNodeInfo = function getTargetNodeInfo(targetType, nodes) {
   switch (targetType) {
@@ -196,4 +197,21 @@ export var convertCodeBlockContentToParagraphs = function convertCodeBlockConten
     paragraphNodes.push(paragraphNode);
   });
   return paragraphNodes;
+};
+var isBreakoutMarkSupported = function isBreakoutMarkSupported(nodeType) {
+  return ['codeBlock', 'expand', 'layoutSection'].includes(nodeType.name);
+};
+export var getMarksWithBreakout = function getMarksWithBreakout(sourceNode, targetNodeType) {
+  var allowedMarks = targetNodeType.allowedMarks(sourceNode.marks);
+  var sourceBreakoutMark = sourceNode.marks.find(function (mark) {
+    return mark.type.name === 'breakout';
+  });
+  if (sourceBreakoutMark && isBreakoutMarkSupported(targetNodeType)) {
+    // Check if breakout mark is already in allowedMarks to avoid duplicates
+    var hasBreakoutMark = allowedMarks.some(function (mark) {
+      return mark.type.name === 'breakout';
+    });
+    return hasBreakoutMark ? allowedMarks : [].concat(_toConsumableArray(allowedMarks), [sourceBreakoutMark]);
+  }
+  return allowedMarks;
 };

package/dist/esm/ui/block-menu-components.js

@@ -1,14 +1,13 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { MOVE_UP_MENU_ITEM, MOVE_UP_DOWN_MENU_SECTION, MOVE_DOWN_MENU_ITEM, MOVE_BLOCK_SECTION_RANK, PRIMARY_MENU_SECTION, BLOCK_MENU_SECTION_RANK, COPY_MENU_SECTION, COPY_BLOCK_MENU_ITEM, COPY_MENU_SECTION_RANK, COPY_LINK_MENU_ITEM, DELETE_MENU_SECTION, DELETE_MENU_ITEM, DELETE_SECTION_RANK, NESTED_FORMAT_MENU_SECTION, NESTED_FORMAT_MENU } from '@atlaskit/editor-common/block-menu';
-import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
-import ChangesIcon from '@atlaskit/icon/core/changes';
-import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import CopyBlockMenuItem from './copy-block';
 import { CopyLinkDropdownItem } from './copy-link';
 import { CopySection } from './copy-section';
 import { DeleteDropdownItem } from './delete-button';
 import { DeleteSection } from './delete-section';
+import { FormatMenuComponent } from './format-menu-nested';
 import { FormatMenuSection } from './format-menu-section';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
@@ -55,16 +54,7 @@ var getFormatMenuComponents = function getFormatMenuComponents(api) {
           children: null
         },
         children = _ref.children;
-      return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
-        text: "Format",
-        elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
-          label: ""
-        }),
-        elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-          label: 'example nested menu'
-        }),
-        enableMaxHeight: true
-      }, children);
+      return /*#__PURE__*/React.createElement(FormatMenuComponent, null, children);
     }
   }, {
     type: 'block-menu-section',

package/dist/esm/ui/block-menu.js

@@ -1,4 +1,4 @@
-/* block-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect } from 'react';

package/dist/esm/ui/format-menu-nested.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import ChangesIcon from '@atlaskit/icon/core/changes';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+export var FormatMenuComponent = function FormatMenuComponent(_ref) {
+  var children = _ref.children;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
+    text: formatMessage(messages.turnInto),
+    elemBefore: /*#__PURE__*/React.createElement(ChangesIcon, {
+      label: ""
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ChevronRightIcon, {
+      label: ""
+    }),
+    enableMaxHeight: true
+  }, children);
+};

package/dist/types/editor-commands/transforms/layout-transforms.d.ts

@@ -1,6 +1,6 @@
 import type { TransformContext } from '@atlaskit/editor-common/transforms';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Mark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createDefaultLayoutSection: (schema: Schema, content: PMNode) => PMNode;
+export declare const createDefaultLayoutSection: (schema: Schema, content: PMNode, marks?: readonly Mark[]) => PMNode;
 export declare const convertToLayout: (context: TransformContext) => import("prosemirror-state").Transaction;
 export declare const transformLayoutNode: (context: TransformContext) => import("prosemirror-state").Transaction;

package/dist/types/editor-commands/transforms/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Mark, Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { FormatNodeTargetType } from './types';
 export declare const getTargetNodeInfo: (targetType: FormatNodeTargetType, nodes: Record<string, NodeType>) => {
@@ -37,3 +37,4 @@ export declare const filterMarksForTargetNodeType: (content: Fragment, targetNod
 /** * Convert content from a code block node into multiple paragraph nodes
  */
 export declare const convertCodeBlockContentToParagraphs: (codeBlockNode: PMNode, schema: Schema) => PMNode[];
+export declare const getMarksWithBreakout: (sourceNode: PMNode, targetNodeType: NodeType) => readonly Mark[];

package/dist/types/ui/block-menu-components.d.ts

@@ -1,6 +1,5 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin, BlockMenuPluginOptions } from '../blockMenuPluginType';
-import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
+import type { BlockMenuPlugin, BlockMenuPluginOptions, RegisterBlockMenuComponent } from '../blockMenuPluginType';
 export declare const getBlockMenuComponents: ({ api, config, }: {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     config: BlockMenuPluginOptions | undefined;

package/dist/types/ui/format-menu-nested.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FormatMenuComponent: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/types-ts4.5/editor-commands/transforms/layout-transforms.d.ts

@@ -1,6 +1,6 @@
 import type { TransformContext } from '@atlaskit/editor-common/transforms';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Mark, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createDefaultLayoutSection: (schema: Schema, content: PMNode) => PMNode;
+export declare const createDefaultLayoutSection: (schema: Schema, content: PMNode, marks?: readonly Mark[]) => PMNode;
 export declare const convertToLayout: (context: TransformContext) => import("prosemirror-state").Transaction;
 export declare const transformLayoutNode: (context: TransformContext) => import("prosemirror-state").Transaction;

package/dist/types-ts4.5/editor-commands/transforms/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Mark, Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import type { FormatNodeTargetType } from './types';
 export declare const getTargetNodeInfo: (targetType: FormatNodeTargetType, nodes: Record<string, NodeType>) => {
@@ -37,3 +37,4 @@ export declare const filterMarksForTargetNodeType: (content: Fragment, targetNod
 /** * Convert content from a code block node into multiple paragraph nodes
  */
 export declare const convertCodeBlockContentToParagraphs: (codeBlockNode: PMNode, schema: Schema) => PMNode[];
+export declare const getMarksWithBreakout: (sourceNode: PMNode, targetNodeType: NodeType) => readonly Mark[];

package/dist/types-ts4.5/ui/block-menu-components.d.ts

@@ -1,6 +1,5 @@
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { BlockMenuPlugin, BlockMenuPluginOptions } from '../blockMenuPluginType';
-import { type RegisterBlockMenuComponent } from '../blockMenuPluginType';
+import type { BlockMenuPlugin, BlockMenuPluginOptions, RegisterBlockMenuComponent } from '../blockMenuPluginType';
 export declare const getBlockMenuComponents: ({ api, config, }: {
     api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
     config: BlockMenuPluginOptions | undefined;

package/dist/types-ts4.5/ui/format-menu-nested.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FormatMenuComponent: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "3.2.1",
+	"version": "3.2.2",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",