@atlaskit/editor-plugin-block-menu 5.1.2 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.1.4
+
+### Patch Changes
+
+- [`7e5df3d5beaf3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e5df3d5beaf3) -
+  Add new flattenListStep and unwrapListStep and use for list -> paragraph step. Also moved
+  expandToBlockRange util function to editor-common to re-use
+- Updated dependencies
+
+## 5.1.3
+
+### Patch Changes
+
+- [`8ae5288a74a40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ae5288a74a40) -
+  Update traversal logic in selection
+- Updated dependencies
+
 ## 5.1.2
 
 ### Patch Changes

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

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flattenListStep = void 0;
+var _model = require("@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(_model.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
+ */
+var flattenListStep = exports.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(_model.Fragment.from(extractNestedLists(node, listTypes, [context.schema.nodes.listItem, context.schema.nodes.taskItem])));
+    }
+    return node;
+  });
+};

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getOutputNodes = void 0;
+var _flattenListStep = require("./flattenListStep");
 var _stubStep = require("./stubStep");
 var _types = require("./types");
+var _unwrapListStep = require("./unwrapListStep");
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
 // - expected to put paragraph into a panel
@@ -32,7 +34,7 @@ var TRANSFORM_STEPS = {
     atomic: undefined,
     container: [_stubStep.stubStep],
     list: [_stubStep.stubStep],
-    text: [_stubStep.stubStep]
+    text: [_flattenListStep.flattenListStep, _unwrapListStep.unwrapListStep]
   },
   text: {
     atomic: undefined,

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unwrapListStep = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * @param nodes
+ * @returns
+ */
+var unwrapListStep = exports.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, (0, _toConsumableArray2.default)(listItem.children));
+      });
+      return listItems;
+    }
+    return node;
+  });
+};

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformNode = void 0;
+var _selection = require("@atlaskit/editor-common/selection");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _transform = require("./transform-node-utils/transform");
+var _utils = require("./transforms/utils");
 var transformNode = exports.transformNode = function transformNode(api) {
   return (
     // eslint-disable-next-line no-unused-vars
@@ -17,33 +19,26 @@ var transformNode = exports.transformNode = function transformNode(api) {
         if (!preservedSelection) {
           return tr;
         }
-        var from = preservedSelection.from,
-          to = preservedSelection.to,
-          $from = preservedSelection.$from;
+        var _expandToBlockRange = (0, _selection.expandToBlockRange)(preservedSelection.$from, preservedSelection.$to),
+          $from = _expandToBlockRange.$from,
+          $to = _expandToBlockRange.$to;
         var selectedParent = $from.parent;
         var fragment = _model.Fragment.empty;
-        // top level selections can safely be transformed without checking for depth
-        var isWithinSelectedRange = $from.depth === 0;
-        tr.doc.nodesBetween(from, to, function (node) {
-          // need to only transform selected content, for nested selections nodesBetween includes the path to the selected parent
-          if (!isWithinSelectedRange && node.eq(selectedParent)) {
-            isWithinSelectedRange = true;
-            return true;
+        var isList = (0, _utils.isListNode)(selectedParent);
+        var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
+        slice.content.forEach(function (node) {
+          var outputNode = (0, _transform.getOutputNodes)({
+            sourceNode: node,
+            targetNodeType: targetType,
+            schema: tr.doc.type.schema
+          });
+          if (outputNode) {
+            fragment = fragment.append(_model.Fragment.fromArray(outputNode));
           }
-          if (isWithinSelectedRange) {
-            var outputNode = (0, _transform.getOutputNodes)({
-              sourceNode: node,
-              targetNodeType: targetType,
-              schema: tr.doc.type.schema
-            });
-            if (outputNode) {
-              fragment = fragment.append(_model.Fragment.fromArray(outputNode));
-            }
-            return false;
-          }
-          return true;
         });
-        tr.replaceWith(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/cjs/ui/block-menu.js

@@ -1,6 +1,7 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 require("./block-menu.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _css = require("@atlaskit/css");
@@ -33,6 +35,7 @@ var styles = {
 };
 var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
+var FALLBACK_MENU_HEIGHT = 300;
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
 var useConditionalBlockMenuEffect = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
   return (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_user_intent_fix');
@@ -163,6 +166,18 @@ var BlockMenu = function BlockMenu(_ref4) {
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
   var prevIsMenuOpenRef = (0, _react.useRef)(false);
   var popupRef = (0, _react.useRef)(undefined);
+  var _React$useState = _react.default.useState(0),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    menuHeight = _React$useState2[0],
+    setMenuHeight = _React$useState2[1];
+  var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
+  _react.default.useLayoutEffect(function () {
+    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]);
   var hasFocus = (_ref5 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref5 !== void 0 ? _ref5 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
@@ -226,8 +241,7 @@ var BlockMenu = function BlockMenu(_ref4) {
       fallbackComponent: null
     }, /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
       alignX: 'right',
-      alignY: 'start' // respected when forcePlacement is true
-      ,
+      alignY: 'start',
       handleClickOutside: closeMenu,
       handleEscapeKeydown: closeMenu,
       handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
@@ -237,16 +251,15 @@ var BlockMenu = function BlockMenu(_ref4) {
       target: targetHandleRef,
       zIndex: _editorSharedStyles.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: [_styles.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: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
+      } : undefined
     }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
       api: api,
       setRef: setRef

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

@@ -0,0 +1,94 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+const extractNestedLists = (node, listTypes, itemTypes) => {
+  const items = [];
+  const extract = currentNode => {
+    currentNode.forEach(child => {
+      // list item -> take content without nested lists, then recurse into nested lists
+      if (itemTypes.some(type => child.type === type)) {
+        // Filter out nested list nodes from the list item's content
+        const contentWithoutNestedLists = [];
+        const nestedLists = [];
+        child.forEach(grandChild => {
+          if (listTypes.some(type => 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(nestedList => {
+          extract(nestedList);
+        });
+      }
+      // lists -> keep operating
+      else if (listTypes.some(type => 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 const flattenListStep = (nodes, context) => {
+  const listTypes = [context.schema.nodes.bulletList, context.schema.nodes.orderedList, context.schema.nodes.taskList];
+  return nodes.map(node => {
+    if (listTypes.some(type => node.type === type)) {
+      return node.copy(Fragment.from(extractNestedLists(node, listTypes, [context.schema.nodes.listItem, context.schema.nodes.taskItem])));
+    }
+    return node;
+  });
+};

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

@@ -1,5 +1,7 @@
+import { flattenListStep } from './flattenListStep';
 import { stubStep } from './stubStep';
 import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
+import { unwrapListStep } from './unwrapListStep';
 
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -27,7 +29,7 @@ const TRANSFORM_STEPS = {
     atomic: undefined,
     container: [stubStep],
     list: [stubStep],
-    text: [stubStep]
+    text: [flattenListStep, unwrapListStep]
   },
   text: {
     atomic: undefined,

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/transformNode.js

@@ -1,5 +1,7 @@
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { getOutputNodes } from './transform-node-utils/transform';
+import { isListNode } from './transforms/utils';
 export const transformNode = api =>
 // eslint-disable-next-line no-unused-vars
 (targetType, analyticsAttrs) => {
@@ -12,34 +14,26 @@ export const transformNode = api =>
       return tr;
     }
     const {
-      from,
-      to,
-      $from
-    } = preservedSelection;
+      $from,
+      $to
+    } = expandToBlockRange(preservedSelection.$from, preservedSelection.$to);
     const selectedParent = $from.parent;
     let fragment = Fragment.empty;
-    // top level selections can safely be transformed without checking for depth
-    let isWithinSelectedRange = $from.depth === 0;
-    tr.doc.nodesBetween(from, to, node => {
-      // need to only transform selected content, for nested selections nodesBetween includes the path to the selected parent
-      if (!isWithinSelectedRange && node.eq(selectedParent)) {
-        isWithinSelectedRange = true;
-        return true;
+    const isList = isListNode(selectedParent);
+    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
+      });
+      if (outputNode) {
+        fragment = fragment.append(Fragment.fromArray(outputNode));
       }
-      if (isWithinSelectedRange) {
-        const outputNode = getOutputNodes({
-          sourceNode: node,
-          targetNodeType: targetType,
-          schema: tr.doc.type.schema
-        });
-        if (outputNode) {
-          fragment = fragment.append(Fragment.fromArray(outputNode));
-        }
-        return false;
-      }
-      return true;
     });
-    tr.replaceWith(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/transform.js

@@ -1,5 +1,7 @@
+import { flattenListStep } from './flattenListStep';
 import { stubStep } from './stubStep';
 import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
+import { unwrapListStep } from './unwrapListStep';
 
 // Exampled step for overrides:
 // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -27,7 +29,7 @@ var TRANSFORM_STEPS = {
     atomic: undefined,
     container: [stubStep],
     list: [stubStep],
-    text: [stubStep]
+    text: [flattenListStep, unwrapListStep]
   },
   text: {
     atomic: undefined,

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/transformNode.js

@@ -1,5 +1,7 @@
+import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { getOutputNodes } from './transform-node-utils/transform';
+import { isListNode } from './transforms/utils';
 export var transformNode = function transformNode(api) {
   return (
     // eslint-disable-next-line no-unused-vars
@@ -11,33 +13,26 @@ 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 selectedParent = $from.parent;
         var fragment = Fragment.empty;
-        // top level selections can safely be transformed without checking for depth
-        var isWithinSelectedRange = $from.depth === 0;
-        tr.doc.nodesBetween(from, to, function (node) {
-          // need to only transform selected content, for nested selections nodesBetween includes the path to the selected parent
-          if (!isWithinSelectedRange && node.eq(selectedParent)) {
-            isWithinSelectedRange = true;
-            return true;
+        var isList = isListNode(selectedParent);
+        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
+          });
+          if (outputNode) {
+            fragment = fragment.append(Fragment.fromArray(outputNode));
           }
-          if (isWithinSelectedRange) {
-            var outputNode = getOutputNodes({
-              sourceNode: node,
-              targetNodeType: targetType,
-              schema: tr.doc.type.schema
-            });
-            if (outputNode) {
-              fragment = fragment.append(Fragment.fromArray(outputNode));
-            }
-            return false;
-          }
-          return true;
         });
-        tr.replaceWith(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/esm/ui/block-menu.js

@@ -1,4 +1,5 @@
 /* block-menu.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./block-menu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect, useRef } from 'react';
@@ -25,6 +26,7 @@ var styles = {
 };
 var DEFAULT_MENU_WIDTH = 230;
 var DRAG_HANDLE_OFFSET_PADDING = 5;
+var FALLBACK_MENU_HEIGHT = 300;
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
 var useConditionalBlockMenuEffect = conditionalHooksFactory(function () {
   return fg('platform_editor_toolbar_aifc_user_intent_fix');
@@ -155,6 +157,18 @@ var BlockMenu = function BlockMenu(_ref4) {
   var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
   var prevIsMenuOpenRef = useRef(false);
   var popupRef = useRef(undefined);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    menuHeight = _React$useState2[0],
+    setMenuHeight = _React$useState2[1];
+  var targetHandleHeightOffset = -((targetHandleRef === null || targetHandleRef === void 0 ? void 0 : targetHandleRef.clientHeight) || 0);
+  React.useLayoutEffect(function () {
+    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]);
   var hasFocus = (_ref5 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref5 !== void 0 ? _ref5 : false;
   var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
 
@@ -218,8 +232,7 @@ var BlockMenu = function BlockMenu(_ref4) {
       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 +242,15 @@ var BlockMenu = function BlockMenu(_ref4) {
       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/types/editor-commands/transform-node-utils/flattenListStep.d.ts

@@ -0,0 +1,49 @@
+import type { TransformStep } from './types';
+/**
+ * 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 declare const flattenListStep: TransformStep;

package/dist/types/editor-commands/transform-node-utils/transform.d.ts

@@ -1,4 +1,4 @@
-import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import { type Node as PMNode, type NodeType, type Schema } from '@atlaskit/editor-prosemirror/model';
 interface GetOutputNodesArgs {
     schema: Schema;
     sourceNode: PMNode;

package/dist/types/editor-commands/transform-node-utils/unwrapListStep.d.ts

@@ -0,0 +1,7 @@
+import type { TransformStep } from './types';
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * @param nodes
+ * @returns
+ */
+export declare const unwrapListStep: TransformStep;

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

@@ -1,7 +1,7 @@
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { TransformContext } from '@atlaskit/editor-common/transforms';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
+export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList' | 'decisionList';
 export type TransfromNodeTargetType = FormatNodeTargetType;
 export type FormatNodeAnalyticsAttrs = {
     inputMethod: INPUT_METHOD.BLOCK_MENU;

package/dist/types-ts4.5/editor-commands/transform-node-utils/flattenListStep.d.ts

@@ -0,0 +1,49 @@
+import type { TransformStep } from './types';
+/**
+ * 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 declare const flattenListStep: TransformStep;

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

@@ -1,4 +1,4 @@
-import type { Node as PMNode, NodeType, Schema } from '@atlaskit/editor-prosemirror/model';
+import { type Node as PMNode, type NodeType, type Schema } from '@atlaskit/editor-prosemirror/model';
 interface GetOutputNodesArgs {
     schema: Schema;
     sourceNode: PMNode;

package/dist/types-ts4.5/editor-commands/transform-node-utils/unwrapListStep.d.ts

@@ -0,0 +1,7 @@
+import type { TransformStep } from './types';
+/**
+ * Given an array of nodes, returns an array with the flattened children of any list nodes.
+ * @param nodes
+ * @returns
+ */
+export declare const unwrapListStep: TransformStep;

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

@@ -1,7 +1,7 @@
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { TransformContext } from '@atlaskit/editor-common/transforms';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList';
+export type FormatNodeTargetType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'paragraph' | 'blockquote' | 'expand' | 'layoutSection' | 'panel' | 'codeBlock' | 'bulletList' | 'orderedList' | 'taskList' | 'decisionList';
 export type TransfromNodeTargetType = FormatNodeTargetType;
 export type FormatNodeAnalyticsAttrs = {
     inputMethod: INPUT_METHOD.BLOCK_MENU;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "5.1.2",
+	"version": "5.1.4",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,12 +44,12 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^14.4.0",
+		"@atlaskit/tmp-editor-statsig": "^14.5.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.36.0",
+		"@atlaskit/editor-common": "^110.38.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},