@atlaskit/editor-plugin-block-menu 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 1.0.6
+
+### Patch Changes
+
+- [`40e6bcca6edd4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40e6bcca6edd4) -
+  [ux] ED-29146: unwrap container to block nodes
+- Updated dependencies
+
+## 1.0.5
+
+### Patch Changes
+
+- [`b76a419d23d3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b76a419d23d3d) -
+  [ux] ED-29143 Transform nodes into layout
+- [`0d741324d534a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d741324d534a) -
+  [ux] Adds wrapping of list node types in container node types.
+- Updated dependencies
+
 ## 1.0.4
 
 ### Patch Changes

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

@@ -33,7 +33,8 @@ var transformBlockNode = exports.transformBlockNode = function transformBlockNod
 var transformToBlockNode = function transformToBlockNode(context) {
   var tr = context.tr,
     targetNodeType = context.targetNodeType,
-    targetAttrs = context.targetAttrs;
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode;
   var selection = tr.selection,
     doc = tr.doc;
   var $from = selection.$from,
@@ -44,6 +45,11 @@ var transformToBlockNode = function transformToBlockNode(context) {
     var node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return (0, _containerTransforms.unwrapAndConvertToBlockType)(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unwrapAndConvertToList = exports.unwrapAndConvertToBlockType = exports.transformToContainer = exports.transformContainerNode = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("./utils");
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
@@ -60,7 +62,13 @@ var transformContainerNode = exports.transformContainerNode = function transform
 
   // Transform container to block type - unwrap and convert content
   if ((0, _utils.isBlockNodeType)(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr: tr,
+      sourceNode: sourceNode,
+      sourcePos: sourcePos,
+      targetNodeType: targetNodeType,
+      targetAttrs: targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -85,9 +93,73 @@ var transformContainerNode = exports.transformContainerNode = function transform
 /**
  * Unwrap container node and convert content to block type
  */
-var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType() {
-  // Convert to block type directly
-  return null;
+var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType(context) {
+  var tr = context.tr,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var selection = tr.selection;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    heading = _schema$nodes.heading,
+    codeBlock = _schema$nodes.codeBlock,
+    expand = _schema$nodes.expand;
+  var rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  var sourceChildren = (0, _toConsumableArray2.default)(sourceNode.children);
+  var transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      var titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    var codeText = sourceNode.textContent;
+    var lines = codeText.split('\n');
+    var paragraphNodes = lines.map(function (line) {
+      return paragraph.create(null, line ? schema.text(line) : null);
+    });
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    var targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach(function (node, index) {
+      if (node.isTextblock) {
+        var headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is code block, do unwrap and convert to code block
+  if (targetNodeType === codeBlock) {
+    var codeBlockContent = sourceChildren.map(function (node) {
+      return node.content.textBetween(0, node.content.size, '\n');
+    }).join('\n');
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+  }
+  var slice = new _model.Slice(_model.Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -103,11 +175,11 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
     return tr;
   }
   var schema = tr.doc.type.schema;
-  var _schema$nodes = schema.nodes,
-    listItem = _schema$nodes.listItem,
-    paragraph = _schema$nodes.paragraph,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem;
+  var _schema$nodes2 = schema.nodes,
+    listItem = _schema$nodes2.listItem,
+    paragraph = _schema$nodes2.paragraph,
+    taskList = _schema$nodes2.taskList,
+    taskItem = _schema$nodes2.taskItem;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(inlineFrag) {
     return isTargetTaskList ? taskItem.create(null, inlineFrag) : listItem.create(null, paragraph.create(null, inlineFrag));
@@ -123,8 +195,8 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    var title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       var titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertToLayout = void 0;
+var _styles = require("@atlaskit/editor-common/styles");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var convertToLayout = exports.convertToLayout = function convertToLayout(context) {
+  var tr = context.tr,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var _ref = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref.layoutSection,
+    layoutColumn = _ref.layoutColumn,
+    paragraph = _ref.paragraph;
+  var content = sourceNode.mark(sourceNode.marks.filter(function (mark) {
+    return mark.type.name !== 'breakout';
+  }));
+  var layoutContent = _model.Fragment.fromArray([layoutColumn.createChecked({
+    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, content), layoutColumn.create({
+    width: _styles.DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, paragraph.createAndFill())]);
+  var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
+
+  // Replace the original node with the new layout node
+  tr.replaceRangeWith(sourcePos || 0, (sourcePos || 0) + sourceNode.nodeSize, layoutSectionNode);
+  return tr;
+};

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

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformListToBlockNodes = exports.transformListNode = exports.transformBlockToList = exports.transformBetweenListTypes = exports.liftListToBlockType = void 0;
+exports.transformListToContainer = exports.transformListToBlockNodes = exports.transformListNode = exports.transformBlockToList = exports.transformBetweenListTypes = exports.liftListToBlockType = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _transformBetweenListTypes = require("./list/transformBetweenListTypes");
 var _transformOrderedUnorderedListToBlockNodes = require("./list/transformOrderedUnorderedListToBlockNodes");
@@ -62,6 +65,60 @@ var transformListToBlockNodes = exports.transformListToBlockNodes = function tra
   }
 };
 
+/**
+ * Wraps bulletList, orderedList or taskList in node of container type
+ */
+var transformListToContainer = exports.transformListToContainer = function transformListToContainer(context) {
+  var tr = context.tr,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs;
+  if (sourcePos === null) {
+    return null;
+  }
+  var schema = tr.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    blockquote = _schema$nodes.blockquote,
+    taskList = _schema$nodes.taskList,
+    taskItem = _schema$nodes.taskItem,
+    paragraph = _schema$nodes.paragraph;
+
+  // Special case: Task list -> Blockquote
+  // Flattens the task list before wrapping by blockquote
+  if (sourceNode.type === taskList && targetNodeType === blockquote) {
+    var _extractParagraphsFromTaskList = function extractParagraphsFromTaskList(node) {
+      var paragraphs = [];
+      node.forEach(function (child) {
+        if (child.type === taskItem) {
+          if (child.content.size > 0) {
+            var paragraphNode = paragraph.createChecked({}, child.content.content);
+            paragraphs.push(paragraphNode);
+          }
+        } else if (child.type === taskList) {
+          paragraphs.push.apply(paragraphs, (0, _toConsumableArray2.default)(_extractParagraphsFromTaskList(child)));
+        }
+      });
+      return paragraphs;
+    };
+    var liftedParagraphs = _extractParagraphsFromTaskList(sourceNode);
+    var _containerNode = targetNodeType.createAndFill(targetAttrs, _model.Fragment.from(liftedParagraphs));
+    if (!_containerNode) {
+      return null;
+    }
+    tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, _containerNode);
+    return tr;
+  }
+
+  // Default case
+  var containerNode = targetNodeType.createAndFill(targetAttrs, [sourceNode]);
+  if (!containerNode) {
+    return null;
+  }
+  tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, containerNode);
+  return tr;
+};
+
 /**
  * Transform list nodes
  */
@@ -75,8 +132,8 @@ var transformListNode = exports.transformListNode = function transformListNode(c
 
   // Transform list to container type
   if ((0, _utils.isContainerNodeType)(targetNodeType)) {
-    // Lift list items out of the list and convert to container type
-    return null;
+    // Wrap list items into container type, where possible
+    return transformListToContainer(context);
   }
 
   // Transform between list types

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.transformNodeToTargetType = transformNodeToTargetType;
 var _blockTransforms = require("./block-transforms");
 var _containerTransforms = require("./container-transforms");
+var _layoutTransforms = require("./layout-transforms");
 var _listTransforms = require("./list-transforms");
 var _utils = require("./utils");
 function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType) {
@@ -43,6 +44,9 @@ function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType) {
 
   // Route to appropriate transformation strategy based on source node type
   try {
+    if ((0, _utils.isLayoutNodeType)(targetNodeType)) {
+      return (0, _layoutTransforms.convertToLayout)(transformationContext);
+    }
     if ((0, _utils.isBlockNode)(sourceNode)) {
       return (0, _blockTransforms.transformBlockNode)(transformationContext);
     }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isTaskList = exports.isListNodeType = exports.isListNode = exports.isContainerNodeType = exports.isContainerNode = exports.isBulletOrOrderedList = exports.isBlockNodeType = exports.isBlockNode = exports.getTargetNodeInfo = exports.getSupportedListTypesSet = exports.getSupportedListTypes = void 0;
+exports.isTaskList = exports.isListNodeType = exports.isListNode = exports.isLayoutNodeType = exports.isContainerNodeType = exports.isContainerNode = exports.isBulletOrOrderedList = exports.isBlockNodeType = exports.isBlockNode = exports.getTargetNodeInfo = exports.getSupportedListTypesSet = exports.getSupportedListTypes = void 0;
 var getTargetNodeInfo = exports.getTargetNodeInfo = function getTargetNodeInfo(targetType, nodes) {
   switch (targetType) {
     case 'heading1':
@@ -83,6 +83,10 @@ var getTargetNodeInfo = exports.getTargetNodeInfo = function getTargetNodeInfo(t
       return {
         nodeType: nodes.taskList
       };
+    case 'layoutSection':
+      return {
+        nodeType: nodes.layoutSection
+      };
     default:
       return null;
   }
@@ -120,4 +124,7 @@ var getSupportedListTypes = exports.getSupportedListTypes = function getSupporte
 };
 var getSupportedListTypesSet = exports.getSupportedListTypesSet = function getSupportedListTypesSet(nodes) {
   return new Set(getSupportedListTypes(nodes));
+};
+var isLayoutNodeType = exports.isLayoutNodeType = function isLayoutNodeType(nodeType) {
+  return nodeType.name === 'layoutSection';
 };

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

@@ -1,4 +1,4 @@
-import { transformToContainer } from './container-transforms';
+import { transformToContainer, unwrapAndConvertToBlockType } from './container-transforms';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { transformBlockToList } from './list-transforms';
 import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
@@ -31,7 +31,8 @@ const transformToBlockNode = context => {
   const {
     tr,
     targetNodeType,
-    targetAttrs
+    targetAttrs,
+    sourceNode
   } = context;
   const {
     selection,
@@ -47,6 +48,11 @@ const transformToBlockNode = context => {
     const node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return unwrapAndConvertToBlockType(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

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

@@ -1,4 +1,4 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { isBlockNodeType, isListNodeType, isContainerNodeType } from './utils';
 const convertInvalidNodeToValidNodeType = (sourceContent, sourceNodeType, validNodeType, withMarks) => {
   const validTransformedContent = [];
@@ -56,7 +56,13 @@ export const transformContainerNode = ({
 
   // Transform container to block type - unwrap and convert content
   if (isBlockNodeType(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr,
+      sourceNode,
+      sourcePos,
+      targetNodeType,
+      targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -81,9 +87,74 @@ export const transformContainerNode = ({
 /**
  * Unwrap container node and convert content to block type
  */
-export const unwrapAndConvertToBlockType = () => {
-  // Convert to block type directly
-  return null;
+export const unwrapAndConvertToBlockType = context => {
+  const {
+    tr,
+    targetNodeType,
+    targetAttrs,
+    sourceNode,
+    sourcePos
+  } = context;
+  const {
+    selection
+  } = tr;
+  const schema = selection.$from.doc.type.schema;
+  const {
+    paragraph,
+    heading,
+    codeBlock,
+    expand
+  } = schema.nodes;
+  const rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  let sourceChildren = [...sourceNode.children];
+  let transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    const title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      const titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    const codeText = sourceNode.textContent;
+    const lines = codeText.split('\n');
+    const paragraphNodes = lines.map(line => paragraph.create(null, line ? schema.text(line) : null));
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    const targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach((node, index) => {
+      if (node.isTextblock) {
+        const headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // 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 slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -123,8 +194,8 @@ export const unwrapAndConvertToList = ({
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    const title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    const title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       const titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

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

@@ -0,0 +1,25 @@
+import { DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH } from '@atlaskit/editor-common/styles';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+export const convertToLayout = context => {
+  const {
+    tr,
+    sourceNode,
+    sourcePos
+  } = context;
+  const {
+    layoutSection,
+    layoutColumn,
+    paragraph
+  } = tr.doc.type.schema.nodes || {};
+  const content = sourceNode.mark(sourceNode.marks.filter(mark => mark.type.name !== 'breakout'));
+  const layoutContent = Fragment.fromArray([layoutColumn.createChecked({
+    width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, content), layoutColumn.create({
+    width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, paragraph.createAndFill())]);
+  const layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
+
+  // Replace the original node with the new layout node
+  tr.replaceRangeWith(sourcePos || 0, (sourcePos || 0) + sourceNode.nodeSize, layoutSectionNode);
+  return tr;
+};

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

@@ -1,3 +1,4 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { findWrapping } from '@atlaskit/editor-prosemirror/transform';
 import { transformListStructure } from './list/transformBetweenListTypes';
 import { transformOrderedUnorderedListToBlockNodes } from './list/transformOrderedUnorderedListToBlockNodes';
@@ -64,6 +65,65 @@ export const transformListToBlockNodes = context => {
   }
 };
 
+/**
+ * Wraps bulletList, orderedList or taskList in node of container type
+ */
+export const transformListToContainer = context => {
+  const {
+    tr,
+    sourceNode,
+    sourcePos,
+    targetNodeType,
+    targetAttrs
+  } = context;
+  if (sourcePos === null) {
+    return null;
+  }
+  const {
+    schema
+  } = tr.doc.type;
+  const {
+    blockquote,
+    taskList,
+    taskItem,
+    paragraph
+  } = schema.nodes;
+
+  // Special case: Task list -> Blockquote
+  // Flattens the task list before wrapping by blockquote
+  if (sourceNode.type === taskList && targetNodeType === blockquote) {
+    const extractParagraphsFromTaskList = node => {
+      const paragraphs = [];
+      node.forEach(child => {
+        if (child.type === taskItem) {
+          if (child.content.size > 0) {
+            const paragraphNode = paragraph.createChecked({}, child.content.content);
+            paragraphs.push(paragraphNode);
+          }
+        } else if (child.type === taskList) {
+          paragraphs.push(...extractParagraphsFromTaskList(child));
+        }
+      });
+      return paragraphs;
+    };
+    const liftedParagraphs = extractParagraphsFromTaskList(sourceNode);
+    const containerNode = targetNodeType.createAndFill(targetAttrs, Fragment.from(liftedParagraphs));
+    if (!containerNode) {
+      return null;
+    }
+    tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, containerNode);
+    return tr;
+  }
+
+  // Default case
+  const containerNode = targetNodeType.createAndFill(targetAttrs, [sourceNode]);
+  if (!containerNode) {
+    return null;
+  }
+  tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, containerNode);
+  return tr;
+};
+
 /**
  * Transform list nodes
  */
@@ -79,8 +139,8 @@ export const transformListNode = context => {
 
   // Transform list to container type
   if (isContainerNodeType(targetNodeType)) {
-    // Lift list items out of the list and convert to container type
-    return null;
+    // Wrap list items into container type, where possible
+    return transformListToContainer(context);
   }
 
   // Transform between list types

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

@@ -1,7 +1,8 @@
 import { transformBlockNode } from './block-transforms';
 import { transformContainerNode } from './container-transforms';
+import { convertToLayout } from './layout-transforms';
 import { transformListNode } from './list-transforms';
-import { getTargetNodeInfo, isBlockNode, isListNode, isContainerNode } from './utils';
+import { getTargetNodeInfo, isBlockNode, isListNode, isContainerNode, isLayoutNodeType } from './utils';
 export function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType) {
   const {
     nodes
@@ -41,6 +42,9 @@ export function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType)
 
   // Route to appropriate transformation strategy based on source node type
   try {
+    if (isLayoutNodeType(targetNodeType)) {
+      return convertToLayout(transformationContext);
+    }
     if (isBlockNode(sourceNode)) {
       return transformBlockNode(transformationContext);
     }

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

@@ -77,6 +77,10 @@ export const getTargetNodeInfo = (targetType, nodes) => {
       return {
         nodeType: nodes.taskList
       };
+    case 'layoutSection':
+      return {
+        nodeType: nodes.layoutSection
+      };
     default:
       return null;
   }
@@ -114,4 +118,7 @@ export const getSupportedListTypes = nodes => {
 };
 export const getSupportedListTypesSet = nodes => {
   return new Set(getSupportedListTypes(nodes));
+};
+export const isLayoutNodeType = nodeType => {
+  return nodeType.name === 'layoutSection';
 };

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

@@ -1,4 +1,4 @@
-import { transformToContainer } from './container-transforms';
+import { transformToContainer, unwrapAndConvertToBlockType } from './container-transforms';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { transformBlockToList } from './list-transforms';
 import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
@@ -28,7 +28,8 @@ export var transformBlockNode = function transformBlockNode(context) {
 var transformToBlockNode = function transformToBlockNode(context) {
   var tr = context.tr,
     targetNodeType = context.targetNodeType,
-    targetAttrs = context.targetAttrs;
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode;
   var selection = tr.selection,
     doc = tr.doc;
   var $from = selection.$from,
@@ -39,6 +40,11 @@ var transformToBlockNode = function transformToBlockNode(context) {
     var node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return unwrapAndConvertToBlockType(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

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

@@ -1,4 +1,5 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { isBlockNodeType, isListNodeType, isContainerNodeType } from './utils';
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
   var validTransformedContent = [];
@@ -54,7 +55,13 @@ export var transformContainerNode = function transformContainerNode(_ref2) {
 
   // Transform container to block type - unwrap and convert content
   if (isBlockNodeType(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr: tr,
+      sourceNode: sourceNode,
+      sourcePos: sourcePos,
+      targetNodeType: targetNodeType,
+      targetAttrs: targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -79,9 +86,73 @@ export var transformContainerNode = function transformContainerNode(_ref2) {
 /**
  * Unwrap container node and convert content to block type
  */
-export var unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType() {
-  // Convert to block type directly
-  return null;
+export var unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType(context) {
+  var tr = context.tr,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var selection = tr.selection;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    heading = _schema$nodes.heading,
+    codeBlock = _schema$nodes.codeBlock,
+    expand = _schema$nodes.expand;
+  var rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  var sourceChildren = _toConsumableArray(sourceNode.children);
+  var transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      var titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    var codeText = sourceNode.textContent;
+    var lines = codeText.split('\n');
+    var paragraphNodes = lines.map(function (line) {
+      return paragraph.create(null, line ? schema.text(line) : null);
+    });
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    var targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach(function (node, index) {
+      if (node.isTextblock) {
+        var headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is code block, do unwrap and convert to code block
+  if (targetNodeType === codeBlock) {
+    var codeBlockContent = sourceChildren.map(function (node) {
+      return node.content.textBetween(0, node.content.size, '\n');
+    }).join('\n');
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+  }
+  var slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -97,11 +168,11 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
     return tr;
   }
   var schema = tr.doc.type.schema;
-  var _schema$nodes = schema.nodes,
-    listItem = _schema$nodes.listItem,
-    paragraph = _schema$nodes.paragraph,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem;
+  var _schema$nodes2 = schema.nodes,
+    listItem = _schema$nodes2.listItem,
+    paragraph = _schema$nodes2.paragraph,
+    taskList = _schema$nodes2.taskList,
+    taskItem = _schema$nodes2.taskItem;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(inlineFrag) {
     return isTargetTaskList ? taskItem.create(null, inlineFrag) : listItem.create(null, paragraph.create(null, inlineFrag));
@@ -117,8 +188,8 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    var title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       var titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

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

@@ -0,0 +1,24 @@
+import { DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH } from '@atlaskit/editor-common/styles';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+export var convertToLayout = function convertToLayout(context) {
+  var tr = context.tr,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var _ref = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref.layoutSection,
+    layoutColumn = _ref.layoutColumn,
+    paragraph = _ref.paragraph;
+  var content = sourceNode.mark(sourceNode.marks.filter(function (mark) {
+    return mark.type.name !== 'breakout';
+  }));
+  var layoutContent = Fragment.fromArray([layoutColumn.createChecked({
+    width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, content), layoutColumn.create({
+    width: DEFAULT_TWO_COLUMN_LAYOUT_COLUMN_WIDTH
+  }, paragraph.createAndFill())]);
+  var layoutSectionNode = layoutSection.createChecked(undefined, layoutContent);
+
+  // Replace the original node with the new layout node
+  tr.replaceRangeWith(sourcePos || 0, (sourcePos || 0) + sourceNode.nodeSize, layoutSectionNode);
+  return tr;
+};

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

@@ -1,3 +1,5 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { findWrapping } from '@atlaskit/editor-prosemirror/transform';
 import { transformListStructure } from './list/transformBetweenListTypes';
 import { transformOrderedUnorderedListToBlockNodes } from './list/transformOrderedUnorderedListToBlockNodes';
@@ -57,6 +59,60 @@ export var transformListToBlockNodes = function transformListToBlockNodes(contex
   }
 };
 
+/**
+ * Wraps bulletList, orderedList or taskList in node of container type
+ */
+export var transformListToContainer = function transformListToContainer(context) {
+  var tr = context.tr,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs;
+  if (sourcePos === null) {
+    return null;
+  }
+  var schema = tr.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    blockquote = _schema$nodes.blockquote,
+    taskList = _schema$nodes.taskList,
+    taskItem = _schema$nodes.taskItem,
+    paragraph = _schema$nodes.paragraph;
+
+  // Special case: Task list -> Blockquote
+  // Flattens the task list before wrapping by blockquote
+  if (sourceNode.type === taskList && targetNodeType === blockquote) {
+    var _extractParagraphsFromTaskList = function extractParagraphsFromTaskList(node) {
+      var paragraphs = [];
+      node.forEach(function (child) {
+        if (child.type === taskItem) {
+          if (child.content.size > 0) {
+            var paragraphNode = paragraph.createChecked({}, child.content.content);
+            paragraphs.push(paragraphNode);
+          }
+        } else if (child.type === taskList) {
+          paragraphs.push.apply(paragraphs, _toConsumableArray(_extractParagraphsFromTaskList(child)));
+        }
+      });
+      return paragraphs;
+    };
+    var liftedParagraphs = _extractParagraphsFromTaskList(sourceNode);
+    var _containerNode = targetNodeType.createAndFill(targetAttrs, Fragment.from(liftedParagraphs));
+    if (!_containerNode) {
+      return null;
+    }
+    tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, _containerNode);
+    return tr;
+  }
+
+  // Default case
+  var containerNode = targetNodeType.createAndFill(targetAttrs, [sourceNode]);
+  if (!containerNode) {
+    return null;
+  }
+  tr.replaceWith(sourcePos, sourcePos + sourceNode.nodeSize, containerNode);
+  return tr;
+};
+
 /**
  * Transform list nodes
  */
@@ -70,8 +126,8 @@ export var transformListNode = function transformListNode(context) {
 
   // Transform list to container type
   if (isContainerNodeType(targetNodeType)) {
-    // Lift list items out of the list and convert to container type
-    return null;
+    // Wrap list items into container type, where possible
+    return transformListToContainer(context);
   }
 
   // Transform between list types

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

@@ -1,7 +1,8 @@
 import { transformBlockNode } from './block-transforms';
 import { transformContainerNode } from './container-transforms';
+import { convertToLayout } from './layout-transforms';
 import { transformListNode } from './list-transforms';
-import { getTargetNodeInfo, isBlockNode, isListNode, isContainerNode } from './utils';
+import { getTargetNodeInfo, isBlockNode, isListNode, isContainerNode, isLayoutNodeType } from './utils';
 export function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType) {
   var nodes = tr.doc.type.schema.nodes;
   var targetNodeInfo = getTargetNodeInfo(targetType, nodes);
@@ -37,6 +38,9 @@ export function transformNodeToTargetType(tr, sourceNode, sourcePos, targetType)
 
   // Route to appropriate transformation strategy based on source node type
   try {
+    if (isLayoutNodeType(targetNodeType)) {
+      return convertToLayout(transformationContext);
+    }
     if (isBlockNode(sourceNode)) {
       return transformBlockNode(transformationContext);
     }

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

@@ -77,6 +77,10 @@ export var getTargetNodeInfo = function getTargetNodeInfo(targetType, nodes) {
       return {
         nodeType: nodes.taskList
       };
+    case 'layoutSection':
+      return {
+        nodeType: nodes.layoutSection
+      };
     default:
       return null;
   }
@@ -114,4 +118,7 @@ export var getSupportedListTypes = function getSupportedListTypes(nodes) {
 };
 export var getSupportedListTypesSet = function getSupportedListTypesSet(nodes) {
   return new Set(getSupportedListTypes(nodes));
+};
+export var isLayoutNodeType = function isLayoutNodeType(nodeType) {
+  return nodeType.name === 'layoutSection';
 };

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

@@ -10,7 +10,7 @@ export declare const transformContainerNode: TransformFunction;
 /**
  * Unwrap container node and convert content to block type
  */
-export declare const unwrapAndConvertToBlockType: () => null;
+export declare const unwrapAndConvertToBlockType: (context: TransformContext) => import("prosemirror-state").Transaction;
 /**
  * Unwrap container node and convert content to list
  */

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

@@ -0,0 +1,2 @@
+import type { TransformContext } from './types';
+export declare const convertToLayout: (context: TransformContext) => import("prosemirror-state").Transaction;

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

@@ -8,6 +8,10 @@ export declare const transformBlockToList: (context: TransformContext) => Transa
  * Transform list to block nodes
  */
 export declare const transformListToBlockNodes: (context: TransformContext) => Transaction | null;
+/**
+ * Wraps bulletList, orderedList or taskList in node of container type
+ */
+export declare const transformListToContainer: (context: TransformContext) => Transaction | null;
 /**
  * Transform list nodes
  */

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

@@ -1,6 +1,6 @@
 import type { Node as PMNode, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layout' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
+export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
 export interface TransformContext {
     sourceNode: PMNode;
     sourcePos: number;

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

@@ -14,3 +14,4 @@ export declare const isBulletOrOrderedList: (nodeType: NodeType) => boolean;
 export declare const isTaskList: (nodeType: NodeType) => boolean;
 export declare const getSupportedListTypes: (nodes: Record<string, NodeType>) => NodeType[];
 export declare const getSupportedListTypesSet: (nodes: Record<string, NodeType>) => Set<NodeType>;
+export declare const isLayoutNodeType: (nodeType: NodeType) => boolean;

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

@@ -10,7 +10,7 @@ export declare const transformContainerNode: TransformFunction;
 /**
  * Unwrap container node and convert content to block type
  */
-export declare const unwrapAndConvertToBlockType: () => null;
+export declare const unwrapAndConvertToBlockType: (context: TransformContext) => import("prosemirror-state").Transaction;
 /**
  * Unwrap container node and convert content to list
  */

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

@@ -0,0 +1,2 @@
+import type { TransformContext } from './types';
+export declare const convertToLayout: (context: TransformContext) => import("prosemirror-state").Transaction;

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

@@ -8,6 +8,10 @@ export declare const transformBlockToList: (context: TransformContext) => Transa
  * Transform list to block nodes
  */
 export declare const transformListToBlockNodes: (context: TransformContext) => Transaction | null;
+/**
+ * Wraps bulletList, orderedList or taskList in node of container type
+ */
+export declare const transformListToContainer: (context: TransformContext) => Transaction | null;
 /**
  * Transform list nodes
  */

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

@@ -1,6 +1,6 @@
 import type { Node as PMNode, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layout' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
+export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
 export interface TransformContext {
     sourceNode: PMNode;
     sourcePos: number;

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

@@ -14,3 +14,4 @@ export declare const isBulletOrOrderedList: (nodeType: NodeType) => boolean;
 export declare const isTaskList: (nodeType: NodeType) => boolean;
 export declare const getSupportedListTypes: (nodes: Record<string, NodeType>) => NodeType[];
 export declare const getSupportedListTypesSet: (nodes: Record<string, NodeType>) => Set<NodeType>;
+export declare const isLayoutNodeType: (nodeType: NodeType) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.2.0",
+		"@atlaskit/editor-common": "^108.5.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},