@atlaskit/editor-plugin-block-menu 5.1.3 → 5.1.5

package/dist/es2019/editor-commands/transform-node-utils/transform.js

@@ -1,5 +1,13 @@
+import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
+import { flattenListStep } from './flattenListStep';
+import { flattenStep } from './flattenStep';
 import { stubStep } from './stubStep';
 import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
+import { unwrapExpandStep } from './unwrapExpandStep';
+import { unwrapListStep } from './unwrapListStep';
+import { unwrapStep } from './unwrapStep';
+import { wrapIntoLayoutStep } from './wrapIntoLayoutStep';
+import { wrapStep } from './wrapStep';
 
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -19,15 +27,15 @@ const TRANSFORM_STEPS = {
   },
   container: {
     atomic: undefined,
-    container: [stubStep],
+    container: [unwrapStep, wrapStep],
     list: undefined,
-    text: undefined
+    text: [unwrapStep]
   },
   list: {
     atomic: undefined,
     container: [stubStep],
     list: [stubStep],
-    text: [stubStep]
+    text: [flattenListStep, unwrapListStep]
   },
   text: {
     atomic: undefined,
@@ -42,6 +50,23 @@ const TRANSFORM_STEPS = {
 const TRANSFORM_STEPS_OVERRIDE = {
   paragraph: {
     panel: [wrapIntoPanelStep]
+  },
+  panel: {
+    layoutSection: [unwrapStep, wrapIntoLayoutStep],
+    codeBlock: [unwrapStep, flattenStep, wrapStep]
+  },
+  expand: {
+    panel: [unwrapExpandStep, wrapStep],
+    blockquote: [unwrapExpandStep, wrapStep],
+    layoutSection: [unwrapExpandStep, wrapIntoLayoutStep],
+    paragraph: [unwrapExpandStep],
+    codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
+  },
+  nestedExpand: {
+    panel: [unwrapExpandStep, wrapStep],
+    blockquote: [unwrapExpandStep, wrapStep],
+    paragraph: [unwrapExpandStep],
+    codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
   }
 };
 const getTransformStepsForNodeTypes = (selectedNodeTypeName, targetNodeTypeName) => {
@@ -55,11 +80,13 @@ const getTransformStepsForNodeTypes = (selectedNodeTypeName, targetNodeTypeName)
 export const getOutputNodes = ({
   sourceNode,
   targetNodeType,
-  schema
+  schema,
+  isNested
 }) => {
   const nodesToReplace = [sourceNode];
   const selectedNodeTypeName = toNodeTypeValue(sourceNode.type.name);
-  const targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
+  let targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
+  targetNodeTypeName = getTargetNodeTypeNameInContext(targetNodeTypeName, isNested);
   if (!selectedNodeTypeName || !targetNodeTypeName) {
     // We may decide to return an empty array or undefined here
     return;
@@ -74,6 +101,7 @@ export const getOutputNodes = ({
     return;
   }
   return steps.reduce((nodes, step) => {
-    return step(nodes, context);
+    const result = step(nodes, context);
+    return result;
   }, nodesToReplace);
 };

package/dist/es2019/editor-commands/transform-node-utils/types.js

@@ -9,7 +9,7 @@ export const NODE_CATEGORY_BY_TYPE = {
   expand: 'container',
   extension: 'atomic',
   heading: 'text',
-  layout: 'container',
+  layoutSection: 'container',
   media: 'atomic',
   mediaGroup: 'atomic',
   mediaSingle: 'atomic',

package/dist/es2019/editor-commands/transform-node-utils/unwrapExpandStep.js

@@ -0,0 +1,38 @@
+/**
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
+ * and prepending it to the children.
+ *
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
+ */
+export const unwrapExpandStep = (nodes, context) => {
+  const {
+    schema
+  } = context;
+  const outputNodes = [];
+  nodes.forEach(node => {
+    const isExpand = node.type.name === 'expand' || node.type.name === 'nestedExpand';
+    if (isExpand) {
+      var _node$attrs;
+      const title = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title;
+
+      // Create a paragraph from the title if it exists
+      if (title) {
+        const titleParagraph = schema.nodes.paragraph.createAndFill({}, schema.text(title));
+        if (titleParagraph) {
+          outputNodes.push(titleParagraph);
+        }
+      }
+
+      // Add the children
+      outputNodes.push(...node.children);
+    } else {
+      // Fallback: behave like unwrapStep for non-expand nodes
+      if (node.children.length === 0) {
+        outputNodes.push(node);
+      } else {
+        outputNodes.push(...node.children);
+      }
+    }
+  });
+  return outputNodes;
+};

package/dist/es2019/editor-commands/transform-node-utils/unwrapListStep.js

@@ -0,0 +1,18 @@
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * @param nodes
+ * @returns
+ */
+export const unwrapListStep = (nodes, context) => {
+  const listTypes = [context.schema.nodes.bulletList, context.schema.nodes.orderedList, context.schema.nodes.taskList];
+  return nodes.flatMap(node => {
+    if (listTypes.some(type => node.type === type)) {
+      const listItems = [];
+      node.forEach(listItem => {
+        listItems.push(...listItem.children);
+      });
+      return listItems;
+    }
+    return node;
+  });
+};

package/dist/es2019/editor-commands/transform-node-utils/unwrapStep.js

@@ -0,0 +1,12 @@
+export const unwrapStep = nodes => {
+  const outputNodes = [];
+  nodes.forEach(node => {
+    // we may want to just skip the original instead of using it
+    if (node.children.length === 0) {
+      outputNodes.push(node);
+    } else {
+      outputNodes.push(...node.children);
+    }
+  });
+  return outputNodes;
+};

package/dist/es2019/editor-commands/transform-node-utils/utils.js

@@ -43,4 +43,10 @@ export const getSelectedNode = selection => {
     }
   }
   return undefined;
+};
+export const getTargetNodeTypeNameInContext = (nodeTypeName, isNested) => {
+  if (nodeTypeName === 'expand' && isNested) {
+    return 'nestedExpand';
+  }
+  return nodeTypeName;
 };

package/dist/es2019/editor-commands/transform-node-utils/wrapIntoLayoutStep.js

@@ -0,0 +1,20 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+export const wrapIntoLayoutStep = (nodes, context) => {
+  const {
+    schema
+  } = context;
+  const {
+    layoutSection,
+    layoutColumn
+  } = schema.nodes || {};
+  const columnOne = layoutColumn.createAndFill({}, Fragment.fromArray(nodes));
+  const columnTwo = layoutColumn.createAndFill();
+  if (!columnOne || !columnTwo) {
+    return nodes;
+  }
+  const layout = layoutSection.createAndFill({}, Fragment.fromArray([columnOne, columnTwo]));
+  if (!layout) {
+    return nodes;
+  }
+  return [layout];
+};

package/dist/es2019/editor-commands/transform-node-utils/wrapStep.js

@@ -0,0 +1,12 @@
+export const wrapStep = (nodes, context) => {
+  const {
+    schema,
+    targetNodeTypeName
+  } = context;
+  // edge case: nestedExpand
+  const outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
+  if (outputNode) {
+    return [outputNode];
+  }
+  return nodes;
+};

package/dist/es2019/editor-commands/transformNode.js

@@ -1,4 +1,6 @@
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { isNestedNode } from '../ui/utils/isNestedNode';
 import { getOutputNodes } from './transform-node-utils/transform';
 import { isListNode } from './transforms/utils';
 export const transformNode = api =>
@@ -13,25 +15,28 @@ export const transformNode = api =>
       return tr;
     }
     const {
-      from,
-      to,
-      $from
-    } = preservedSelection;
+      $from,
+      $to
+    } = expandToBlockRange(preservedSelection.$from, preservedSelection.$to);
+    const isNested = isNestedNode(preservedSelection, '');
     const selectedParent = $from.parent;
     let fragment = Fragment.empty;
     const isList = isListNode(selectedParent);
-    const slice = tr.doc.slice(isList ? from - 1 : from, isList ? to + 1 : to);
+    const slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
     slice.content.forEach(node => {
       const outputNode = getOutputNodes({
         sourceNode: node,
         targetNodeType: targetType,
-        schema: tr.doc.type.schema
+        schema: tr.doc.type.schema,
+        isNested
       });
       if (outputNode) {
         fragment = fragment.append(Fragment.fromArray(outputNode));
       }
     });
-    tr.replaceWith(isList ? preservedSelection.from - 1 : preservedSelection.from, preservedSelection.to, fragment);
+
+    // TODO: ED-12345 - selection is broken post transaction, to fix.
+    tr.replaceWith(isList ? $from.pos - 1 : $from.pos, $to.pos, fragment);
     return tr;
   };
 };

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

@@ -25,6 +25,7 @@ const styles = {
 };
 const DEFAULT_MENU_WIDTH = 230;
 const DRAG_HANDLE_OFFSET_PADDING = 5;
+const FALLBACK_MENU_HEIGHT = 300;
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 const useConditionalBlockMenuEffect = conditionalHooksFactory(() => fg('platform_editor_toolbar_aifc_user_intent_fix'), ({
   api,
@@ -153,6 +154,15 @@ const BlockMenu = ({
   const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   const prevIsMenuOpenRef = useRef(false);
   const popupRef = useRef(undefined);
+  const [menuHeight, setMenuHeight] = React.useState(0);
+  const targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
+  React.useLayoutEffect(() => {
+    var _popupRef$current;
+    if (!isMenuOpen) {
+      return;
+    }
+    setMenuHeight(((_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.clientHeight) || FALLBACK_MENU_HEIGHT);
+  }, [isMenuOpen]);
   const hasFocus = (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref !== void 0 ? _ref : false;
   const selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
@@ -218,8 +228,7 @@ const BlockMenu = ({
       fallbackComponent: null
     }, /*#__PURE__*/React.createElement(PopupWithListeners, {
       alignX: 'right',
-      alignY: 'start' // respected when forcePlacement is true
-      ,
+      alignY: 'start',
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
       handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
@@ -229,16 +238,15 @@ const BlockMenu = ({
       target: targetHandleRef,
       zIndex: akEditorFloatingOverlapPanelZIndex,
       fitWidth: DEFAULT_MENU_WIDTH,
-      forcePlacement: true,
-      preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
-      ,
+      fitHeight: menuHeight,
+      preventOverflow: true,
       stick: true,
+      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
       focusTrap: openedViaKeyboard ?
       // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
       {
         initialFocus: undefined
-      } : undefined,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
+      } : undefined
     }, /*#__PURE__*/React.createElement(BlockMenuContent, {
       api: api,
       setRef: setRef

package/dist/esm/editor-commands/transform-node-utils/flattenListStep.js

@@ -0,0 +1,102 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+var extractNestedLists = function extractNestedLists(node, listTypes, itemTypes) {
+  var items = [];
+  var _extract = function extract(currentNode) {
+    currentNode.forEach(function (child) {
+      // list item -> take content without nested lists, then recurse into nested lists
+      if (itemTypes.some(function (type) {
+        return child.type === type;
+      })) {
+        // Filter out nested list nodes from the list item's content
+        var contentWithoutNestedLists = [];
+        var nestedLists = [];
+        child.forEach(function (grandChild) {
+          if (listTypes.some(function (type) {
+            return grandChild.type === type;
+          })) {
+            // This is a nested list - collect it for later processing
+            nestedLists.push(grandChild);
+          } else {
+            // This is regular content (paragraph, etc.) - keep it
+            contentWithoutNestedLists.push(grandChild);
+          }
+        });
+
+        // Add the list item with only its non-list content
+        items.push(child.copy(Fragment.from(contentWithoutNestedLists)));
+
+        // Now process nested lists to maintain document order
+        nestedLists.forEach(function (nestedList) {
+          _extract(nestedList);
+        });
+      }
+      // lists -> keep operating
+      else if (listTypes.some(function (type) {
+        return child.type === type;
+      })) {
+        _extract(child);
+      }
+    });
+  };
+  _extract(node);
+  return items;
+};
+
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list node
+ * to it's first ancestor list, maintaining document order.
+ *
+ * @example
+ * Input:
+ * - bulletList
+ *   - listItem "A"
+ *   - listItem "B"
+ *     - bulletList
+ *       - listItem "C"
+ *       - listItem "D"
+ *   - listItem "E"
+ *
+ * Output:
+ * - bulletList
+ *   - listItem "A"
+ *   - listItem "B"
+ *   - listItem "C"
+ *   - listItem "D"
+ *   - listItem "E"
+ *
+ * @example
+ * Input (deeply nested):
+ * - bulletList
+ *   - listItem "1"
+ *     - bulletList
+ *       - listItem "1.1"
+ *         - bulletList
+ *           - listItem "1.1.1"
+ *       - listItem "1.2"
+ *   - listItem "2"
+ *
+ * Output:
+ * - bulletList
+ *   - listItem "1"
+ *   - listItem "1.1"
+ *   - listItem "1.1.1"
+ *   - listItem "1.2"
+ *   - listItem "2"
+ *
+ * @param nodes
+ * @param context
+ * @returns
+ *
+ * TODO: Lists with mixed types (e.g. bulletList with a taskItem) doesn't full flatten
+ */
+export var flattenListStep = function flattenListStep(nodes, context) {
+  var listTypes = [context.schema.nodes.bulletList, context.schema.nodes.orderedList, context.schema.nodes.taskList];
+  return nodes.map(function (node) {
+    if (listTypes.some(function (type) {
+      return node.type === type;
+    })) {
+      return node.copy(Fragment.from(extractNestedLists(node, listTypes, [context.schema.nodes.listItem, context.schema.nodes.taskItem])));
+    }
+    return node;
+  });
+};

package/dist/esm/editor-commands/transform-node-utils/flattenStep.js

@@ -0,0 +1,15 @@
+export var flattenStep = function flattenStep(nodes, context) {
+  var schema = context.schema,
+    targetNodeTypeName = context.targetNodeTypeName;
+
+  // TODO: EDITOR-2920 - Implement flattening logic.
+  // This is a simplified preliminary approach. We might want to use prosemirror-markdown functions.
+  var codeBlockContent = nodes.map(function (node) {
+    return node.content.textBetween(0, node.content.size, '\n');
+  }).join('\n');
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, schema.text(codeBlockContent));
+  if (!outputNode) {
+    return nodes;
+  }
+  return [outputNode];
+};

package/dist/esm/editor-commands/transform-node-utils/transform.js

@@ -1,5 +1,13 @@
+import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
+import { flattenListStep } from './flattenListStep';
+import { flattenStep } from './flattenStep';
 import { stubStep } from './stubStep';
 import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
+import { unwrapExpandStep } from './unwrapExpandStep';
+import { unwrapListStep } from './unwrapListStep';
+import { unwrapStep } from './unwrapStep';
+import { wrapIntoLayoutStep } from './wrapIntoLayoutStep';
+import { wrapStep } from './wrapStep';
 
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -19,15 +27,15 @@ var TRANSFORM_STEPS = {
   },
   container: {
     atomic: undefined,
-    container: [stubStep],
+    container: [unwrapStep, wrapStep],
     list: undefined,
-    text: undefined
+    text: [unwrapStep]
   },
   list: {
     atomic: undefined,
     container: [stubStep],
     list: [stubStep],
-    text: [stubStep]
+    text: [flattenListStep, unwrapListStep]
   },
   text: {
     atomic: undefined,
@@ -42,6 +50,23 @@ var TRANSFORM_STEPS = {
 var TRANSFORM_STEPS_OVERRIDE = {
   paragraph: {
     panel: [wrapIntoPanelStep]
+  },
+  panel: {
+    layoutSection: [unwrapStep, wrapIntoLayoutStep],
+    codeBlock: [unwrapStep, flattenStep, wrapStep]
+  },
+  expand: {
+    panel: [unwrapExpandStep, wrapStep],
+    blockquote: [unwrapExpandStep, wrapStep],
+    layoutSection: [unwrapExpandStep, wrapIntoLayoutStep],
+    paragraph: [unwrapExpandStep],
+    codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
+  },
+  nestedExpand: {
+    panel: [unwrapExpandStep, wrapStep],
+    blockquote: [unwrapExpandStep, wrapStep],
+    paragraph: [unwrapExpandStep],
+    codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
   }
 };
 var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {
@@ -55,10 +80,12 @@ var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selec
 export var getOutputNodes = function getOutputNodes(_ref) {
   var sourceNode = _ref.sourceNode,
     targetNodeType = _ref.targetNodeType,
-    schema = _ref.schema;
+    schema = _ref.schema,
+    isNested = _ref.isNested;
   var nodesToReplace = [sourceNode];
   var selectedNodeTypeName = toNodeTypeValue(sourceNode.type.name);
   var targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
+  targetNodeTypeName = getTargetNodeTypeNameInContext(targetNodeTypeName, isNested);
   if (!selectedNodeTypeName || !targetNodeTypeName) {
     // We may decide to return an empty array or undefined here
     return;
@@ -73,6 +100,7 @@ export var getOutputNodes = function getOutputNodes(_ref) {
     return;
   }
   return steps.reduce(function (nodes, step) {
-    return step(nodes, context);
+    var result = step(nodes, context);
+    return result;
   }, nodesToReplace);
 };

package/dist/esm/editor-commands/transform-node-utils/types.js

@@ -9,7 +9,7 @@ export var NODE_CATEGORY_BY_TYPE = {
   expand: 'container',
   extension: 'atomic',
   heading: 'text',
-  layout: 'container',
+  layoutSection: 'container',
   media: 'atomic',
   mediaGroup: 'atomic',
   mediaSingle: 'atomic',

package/dist/esm/editor-commands/transform-node-utils/unwrapExpandStep.js

@@ -0,0 +1,37 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
+ * and prepending it to the children.
+ *
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
+ */
+export var unwrapExpandStep = function unwrapExpandStep(nodes, context) {
+  var schema = context.schema;
+  var outputNodes = [];
+  nodes.forEach(function (node) {
+    var isExpand = node.type.name === 'expand' || node.type.name === 'nestedExpand';
+    if (isExpand) {
+      var _node$attrs;
+      var title = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title;
+
+      // Create a paragraph from the title if it exists
+      if (title) {
+        var titleParagraph = schema.nodes.paragraph.createAndFill({}, schema.text(title));
+        if (titleParagraph) {
+          outputNodes.push(titleParagraph);
+        }
+      }
+
+      // Add the children
+      outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
+    } else {
+      // Fallback: behave like unwrapStep for non-expand nodes
+      if (node.children.length === 0) {
+        outputNodes.push(node);
+      } else {
+        outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
+      }
+    }
+  });
+  return outputNodes;
+};

package/dist/esm/editor-commands/transform-node-utils/unwrapListStep.js

@@ -0,0 +1,21 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * @param nodes
+ * @returns
+ */
+export var unwrapListStep = function unwrapListStep(nodes, context) {
+  var listTypes = [context.schema.nodes.bulletList, context.schema.nodes.orderedList, context.schema.nodes.taskList];
+  return nodes.flatMap(function (node) {
+    if (listTypes.some(function (type) {
+      return node.type === type;
+    })) {
+      var listItems = [];
+      node.forEach(function (listItem) {
+        listItems.push.apply(listItems, _toConsumableArray(listItem.children));
+      });
+      return listItems;
+    }
+    return node;
+  });
+};

package/dist/esm/editor-commands/transform-node-utils/unwrapStep.js

@@ -0,0 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+export var unwrapStep = function unwrapStep(nodes) {
+  var outputNodes = [];
+  nodes.forEach(function (node) {
+    // we may want to just skip the original instead of using it
+    if (node.children.length === 0) {
+      outputNodes.push(node);
+    } else {
+      outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
+    }
+  });
+  return outputNodes;
+};

package/dist/esm/editor-commands/transform-node-utils/utils.js

@@ -42,4 +42,10 @@ export var getSelectedNode = function getSelectedNode(selection) {
     }
   }
   return undefined;
+};
+export var getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInContext(nodeTypeName, isNested) {
+  if (nodeTypeName === 'expand' && isNested) {
+    return 'nestedExpand';
+  }
+  return nodeTypeName;
 };

package/dist/esm/editor-commands/transform-node-utils/wrapIntoLayoutStep.js

@@ -0,0 +1,17 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+export var wrapIntoLayoutStep = function wrapIntoLayoutStep(nodes, context) {
+  var schema = context.schema;
+  var _ref = schema.nodes || {},
+    layoutSection = _ref.layoutSection,
+    layoutColumn = _ref.layoutColumn;
+  var columnOne = layoutColumn.createAndFill({}, Fragment.fromArray(nodes));
+  var columnTwo = layoutColumn.createAndFill();
+  if (!columnOne || !columnTwo) {
+    return nodes;
+  }
+  var layout = layoutSection.createAndFill({}, Fragment.fromArray([columnOne, columnTwo]));
+  if (!layout) {
+    return nodes;
+  }
+  return [layout];
+};

package/dist/esm/editor-commands/transform-node-utils/wrapStep.js

@@ -0,0 +1,10 @@
+export var wrapStep = function wrapStep(nodes, context) {
+  var schema = context.schema,
+    targetNodeTypeName = context.targetNodeTypeName;
+  // edge case: nestedExpand
+  var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
+  if (outputNode) {
+    return [outputNode];
+  }
+  return nodes;
+};

package/dist/esm/editor-commands/transformNode.js

@@ -1,4 +1,6 @@
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { isNestedNode } from '../ui/utils/isNestedNode';
 import { getOutputNodes } from './transform-node-utils/transform';
 import { isListNode } from './transforms/utils';
 export var transformNode = function transformNode(api) {
@@ -12,24 +14,28 @@ export var transformNode = function transformNode(api) {
         if (!preservedSelection) {
           return tr;
         }
-        var from = preservedSelection.from,
-          to = preservedSelection.to,
-          $from = preservedSelection.$from;
+        var _expandToBlockRange = expandToBlockRange(preservedSelection.$from, preservedSelection.$to),
+          $from = _expandToBlockRange.$from,
+          $to = _expandToBlockRange.$to;
+        var isNested = isNestedNode(preservedSelection, '');
         var selectedParent = $from.parent;
         var fragment = Fragment.empty;
         var isList = isListNode(selectedParent);
-        var slice = tr.doc.slice(isList ? from - 1 : from, isList ? to + 1 : to);
+        var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
         slice.content.forEach(function (node) {
           var outputNode = getOutputNodes({
             sourceNode: node,
             targetNodeType: targetType,
-            schema: tr.doc.type.schema
+            schema: tr.doc.type.schema,
+            isNested: isNested
           });
           if (outputNode) {
             fragment = fragment.append(Fragment.fromArray(outputNode));
           }
         });
-        tr.replaceWith(isList ? preservedSelection.from - 1 : preservedSelection.from, preservedSelection.to, fragment);
+
+        // TODO: ED-12345 - selection is broken post transaction, to fix.
+        tr.replaceWith(isList ? $from.pos - 1 : $from.pos, $to.pos, fragment);
         return tr;
       };
     }