@atlaskit/editor-plugin-list 9.0.27 → 9.0.28

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-list
 
+## 9.0.28
+
+### Patch Changes
+
+- [`c15b7a3426c66`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c15b7a3426c66) -
+  [ux] EDITOR-5626 Flexible list behaviour
+- Updated dependencies
+
 ## 9.0.27
 
 ### Patch Changes

package/dist/cjs/pm-plugins/actions/move-selected-list-items.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveSelectedListItems = moveSelectedListItems;
+var _types = require("../../types");
+var _find = require("../utils/find");
+var _listIndentation = require("../utils/list-indentation");
+/**
+ * Moves the selected list items n levels up (negative delta) or down (positive delta).
+ */
+function moveSelectedListItems(tr, delta) {
+  var originalSelection = tr.selection;
+
+  // Find the root list so depth adjustments are absolute
+  var rootListResolved = (0, _find.findRootParentListNode)(originalSelection.$from);
+  if (!rootListResolved) {
+    return;
+  }
+  var rootList = (0, _find.findFirstParentListNode)(rootListResolved);
+  if (!rootList) {
+    return;
+  }
+  var rootListStart = rootList.pos;
+  var rootListEnd = rootListStart + rootList.node.nodeSize;
+  var result = (0, _listIndentation.flattenList)({
+    doc: tr.doc,
+    rootListStart: rootListStart,
+    rootListEnd: rootListEnd,
+    selectionFrom: originalSelection.from,
+    selectionTo: originalSelection.to,
+    delta: delta
+  });
+  if (!result || result.maxDepth >= _types.MAX_NESTED_LIST_INDENTATION) {
+    return;
+  }
+  var elements = result.elements,
+    startIndex = result.startIndex,
+    endIndex = result.endIndex;
+
+  // Build replacement — handles both indent (all depths >= 0)
+  // and outdent (some depths may be < 0, producing extracted paragraphs).
+  var _buildReplacementFrag = (0, _listIndentation.buildReplacementFragment)(elements, tr.doc.type.schema),
+    fragment = _buildReplacementFrag.fragment,
+    contentStartOffsets = _buildReplacementFrag.contentStartOffsets;
+  if (fragment.size === 0) {
+    return;
+  }
+  tr.replaceWith(rootListStart, rootListEnd, fragment);
+  var fromContentStart = elements[startIndex].pos + 1;
+  var toContentStart = elements[endIndex].pos + 1;
+  var fromOffset = originalSelection.from - fromContentStart;
+  var toOffset = originalSelection.to - toContentStart;
+  var clamp = function clamp(pos) {
+    return Math.min(Math.max(0, pos), tr.doc.content.size);
+  };
+  var from = clamp(rootListStart + contentStartOffsets[startIndex] + fromOffset);
+  var to = clamp(rootListStart + contentStartOffsets[endIndex] + toOffset);
+
+  // Restore selection using the positional offsets from the rebuild.
+  (0, _listIndentation.restoreSelection)({
+    tr: tr,
+    originalSelection: originalSelection,
+    from: from,
+    to: to
+  });
+}

package/dist/cjs/pm-plugins/commands/indent-list.js

@@ -11,12 +11,40 @@ var _lists = require("@atlaskit/editor-common/lists");
 var _preset = require("@atlaskit/editor-common/preset");
 var _utils = require("@atlaskit/editor-common/utils");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _types = require("../../types");
 var _indentListItemsSelected = require("../actions/indent-list-items-selected");
+var _moveSelectedListItems = require("../actions/move-selected-list-items");
 var _find = require("../utils/find");
 var _selection = require("../utils/selection");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Handler for flexible list indentation.
+ * Allows indenting the first item by creating wrapper structures.
+ */
+var handleIndentListItems = function handleIndentListItems(tr, editorAnalyticsAPI, inputMethod) {
+  var _findFirstParentListN;
+  (0, _moveSelectedListItems.moveSelectedListItems)(tr, 1);
+
+  // If no changes were made, return PassiveTransaction to prevent browser from handling this as a tab key event (e.g. moving focus)
+  if (!tr.docChanged) {
+    return new _preset.PassiveTransaction();
+  }
+  var $from = tr.selection.$from;
+  var currentListNode = (_findFirstParentListN = (0, _find.findFirstParentListNode)($from)) === null || _findFirstParentListN === void 0 ? void 0 : _findFirstParentListN.node;
+  var actionSubjectId = currentListNode && (0, _utils.isBulletList)(currentListNode) ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: _analytics.ACTION.INDENTED,
+    actionSubject: _analytics.ACTION_SUBJECT.LIST,
+    actionSubjectId: actionSubjectId,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: _objectSpread(_objectSpread({}, (0, _lists.getCommonListAnalyticsAttributes)(tr)), {}, {
+      inputMethod: inputMethod
+    })
+  })(tr);
+  return tr;
+};
 var indentList = exports.indentList = function indentList(editorAnalyticsAPI) {
   return function () {
     var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.KEYBOARD;
@@ -31,6 +59,11 @@ var indentList = exports.indentList = function indentList(editorAnalyticsAPI) {
 
       // Save the history, so it could undo/revert to the same state before the indent, see https://product-fabric.atlassian.net/browse/ED-14753
       (0, _prosemirrorHistory.closeHistory)(tr);
+
+      // Route to new or original implementation based on feature flag
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_flexible_list_indentation', 'isEnabled', true)) {
+        return handleIndentListItems(tr, editorAnalyticsAPI, inputMethod);
+      }
       var firstListItemSelectedAttributes = (0, _lists.getListItemAttributes)($from);
       var parentListNode = (0, _find.findFirstParentListNode)($from);
       if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {

package/dist/cjs/pm-plugins/commands/outdent-list.js

@@ -11,12 +11,55 @@ var _lists = require("@atlaskit/editor-common/lists");
 var _preset = require("@atlaskit/editor-common/preset");
 var _utils = require("@atlaskit/editor-common/utils");
 var _prosemirrorHistory = require("@atlaskit/prosemirror-history");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
+var _moveSelectedListItems = require("../actions/move-selected-list-items");
 var _outdentListItemsSelected = require("../actions/outdent-list-items-selected");
 var _analytics2 = require("../utils/analytics");
 var _find = require("../utils/find");
 var _selection = require("../utils/selection");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Handler for flexible list outdentation.
+ * Lifts items independently and cleans up wrapper structures.
+ */
+var handleOutdentListItems = function handleOutdentListItems(tr, editorAnalyticsAPI, inputMethod) {
+  var _findFirstParentListN;
+  (0, _moveSelectedListItems.moveSelectedListItems)(tr, -1);
+
+  // If no changes were made, handle based on context
+  if (!tr.docChanged) {
+    // If inside table cell and can't outdent list, then let it handle by table keymap
+    return !(0, _selection.isInsideTableCell)(tr) ? new _preset.PassiveTransaction() : null;
+  }
+
+  // Determine the action subject ID from the parent list type
+  var $from = tr.selection.$from;
+  var currentListNode = (_findFirstParentListN = (0, _find.findFirstParentListNode)($from)) === null || _findFirstParentListN === void 0 ? void 0 : _findFirstParentListN.node;
+  var actionSubjectId = currentListNode && (0, _utils.isBulletList)(currentListNode) ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+
+  // Get restart list attributes for analytics
+  var restartListsAttributes = {};
+  var _getRestartListsAttri = (0, _analytics2.getRestartListsAttributes)(tr),
+    outdentScenario = _getRestartListsAttri.outdentScenario,
+    splitListStartNumber = _getRestartListsAttri.splitListStartNumber;
+  if (outdentScenario === _analytics.OUTDENT_SCENARIOS.SPLIT_LIST) {
+    restartListsAttributes.outdentScenario = outdentScenario;
+    restartListsAttributes.splitListStartNumber = splitListStartNumber;
+  }
+
+  // Attach analytics event with flexibleIndentation attribute
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: _analytics.ACTION.OUTDENTED,
+    actionSubject: _analytics.ACTION_SUBJECT.LIST,
+    actionSubjectId: actionSubjectId,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: _objectSpread(_objectSpread(_objectSpread({}, (0, _lists.getCommonListAnalyticsAttributes)(tr)), restartListsAttributes), {}, {
+      inputMethod: inputMethod
+    })
+  })(tr);
+  return tr;
+};
 var outdentList = exports.outdentList = function outdentList(editorAnalyticsAPI) {
   return function () {
     var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.KEYBOARD;
@@ -34,6 +77,11 @@ var outdentList = exports.outdentList = function outdentList(editorAnalyticsAPI)
 
       // Save the history, so it could undo/revert to the same state before the outdent, see https://product-fabric.atlassian.net/browse/ED-14753
       (0, _prosemirrorHistory.closeHistory)(tr);
+
+      // Route to new or original implementation based on feature flag
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_flexible_list_indentation', 'isEnabled', true)) {
+        return handleOutdentListItems(tr, editorAnalyticsAPI, inputMethod);
+      }
       var actionSubjectId = (0, _utils.isBulletList)(parentListNode.node) ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
       var customTr = tr;
       (0, _outdentListItemsSelected.outdentListItemsSelected)(customTr);
@@ -43,9 +91,9 @@ var outdentList = exports.outdentList = function outdentList(editorAnalyticsAPI)
         return !(0, _selection.isInsideTableCell)(customTr) ? new _preset.PassiveTransaction() : null;
       }
       var restartListsAttributes = {};
-      var _getRestartListsAttri = (0, _analytics2.getRestartListsAttributes)(customTr),
-        outdentScenario = _getRestartListsAttri.outdentScenario,
-        splitListStartNumber = _getRestartListsAttri.splitListStartNumber;
+      var _getRestartListsAttri2 = (0, _analytics2.getRestartListsAttributes)(customTr),
+        outdentScenario = _getRestartListsAttri2.outdentScenario,
+        splitListStartNumber = _getRestartListsAttri2.splitListStartNumber;
       if (outdentScenario === _analytics.OUTDENT_SCENARIOS.SPLIT_LIST) {
         restartListsAttributes.outdentScenario = outdentScenario;
         restartListsAttributes.splitListStartNumber = splitListStartNumber;

package/dist/cjs/pm-plugins/utils/list-indentation.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildReplacementFragment = buildReplacementFragment;
+exports.flattenList = flattenList;
+exports.restoreSelection = restoreSelection;
+var _selection = require("@atlaskit/editor-common/selection");
+var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * A single content-bearing list element extracted from the PM tree.
+ * Wrapper `listItem` nodes (those with no non-list children) are discarded;
+ * only items the user can actually see and select are represented.
+ */
+
+/**
+ * Returns true if a listItem has at least one non-list child (paragraph, etc.).
+ */
+function hasContentChildren(listItem) {
+  return listItem.children.some(function (child) {
+    return !(0, _utils.isListNode)(child);
+  });
+}
+
+/**
+ * Compute the size of non-list (content) children of a listItem, which
+ * represents the "visible" bounds of the item for selection purposes.
+ */
+function contentSize(listItem) {
+  return listItem.children.reduce(function (size, child) {
+    return size + ((0, _utils.isListNode)(child) ? 0 : child.nodeSize);
+  }, 0);
+}
+/**
+ * Flatten a root list into a flat array of content-bearing `ListElement`
+ * objects and simultaneously determine which elements intersect the user's
+ * selection.
+ * Selection intersection is checked against each item's content-only
+ * span (excluding nested lists).
+ */
+function flattenList(_ref) {
+  var doc = _ref.doc,
+    rootListStart = _ref.rootListStart,
+    rootListEnd = _ref.rootListEnd,
+    selectionFrom = _ref.selectionFrom,
+    selectionTo = _ref.selectionTo,
+    delta = _ref.delta;
+  var elements = [];
+  var startIndex = -1;
+  var endIndex = -1;
+  var maxDepth = 0;
+  var rootDepth = doc.resolve(rootListStart).depth;
+  doc.nodesBetween(rootListStart, rootListEnd, function (node, pos, parent) {
+    if (!(0, _utils.isListItemNode)(node) || !hasContentChildren(node) || !(0, _utils.isListNode)(parent)) {
+      return true;
+    }
+
+    // Check selection intersection using content-only bounds
+    var cStart = pos + 1;
+    var cEnd = cStart + contentSize(node);
+    var isSelected = cStart < selectionTo && cEnd > selectionFrom;
+    var depth = (doc.resolve(pos).depth - rootDepth - 1) / 2 + (isSelected ? delta : 0);
+    elements.push({
+      node: node,
+      pos: pos,
+      depth: depth,
+      listType: parent.type.name
+    });
+    if (isSelected) {
+      var index = elements.length - 1;
+      if (startIndex === -1) {
+        startIndex = index;
+      }
+      endIndex = index;
+      maxDepth = Math.max(maxDepth, depth);
+    }
+    return true;
+  });
+  if (elements.length === 0 || startIndex === -1) {
+    return null;
+  }
+  return {
+    elements: elements,
+    startIndex: startIndex,
+    endIndex: endIndex,
+    maxDepth: maxDepth
+  };
+}
+
+/**
+ * Extract non-list (content) children from a listItem node.
+ */
+function extractContentChildren(listItem) {
+  var children = [];
+  for (var i = 0; i < listItem.childCount; i++) {
+    var child = listItem.child(i);
+    if (!(0, _utils.isListNode)(child)) {
+      children.push(child);
+    }
+  }
+  return children;
+}
+
+/**
+ * Rebuild a ProseMirror list tree from a flat array of `ListElement` objects
+ * using a bottom-up stack approach.
+ *
+ * The algorithm tracks open list/listItem wrappers on a stack. As depth
+ * transitions occur between consecutive elements, wrapper nodes are opened
+ * (depth increase) or closed (depth decrease).
+ */
+function rebuildPMList(elements, schema) {
+  if (elements.length === 0) {
+    return null;
+  }
+
+  // Each stack frame represents an open list at a given depth.
+  // items[] accumulates the PMNode children (listItem nodes) for that list.
+
+  var stack = [];
+  function openList(listType) {
+    stack.push({
+      listType: listType,
+      items: []
+    });
+  }
+
+  /**
+   * Close lists on the stack down to `targetDepth`, wrapping each closed
+   * list into the last listItem of its parent.
+   */
+  function closeToDepth(targetDepth) {
+    var _loop = function _loop() {
+      var closed = stack.pop();
+      if (!closed) {
+        return 1; // break
+      }
+      var listNode = schema.nodes[closed.listType].create(null, closed.items);
+
+      // Attach the closed list to the last listItem on the parent frame
+      var parentFrame = stack[stack.length - 1];
+      var lastItem = parentFrame.items[parentFrame.items.length - 1];
+      if (lastItem) {
+        // Append the nested list to this listItem's children
+        var newContent = [];
+        lastItem.forEach(function (child) {
+          return newContent.push(child);
+        });
+        newContent.push(listNode);
+        parentFrame.items[parentFrame.items.length - 1] = schema.nodes.listItem.create(lastItem.attrs, newContent);
+      } else {
+        // Edge case: no listItem to attach to. Create a wrapper.
+        var wrapperItem = schema.nodes.listItem.create(null, [listNode]);
+        parentFrame.items.push(wrapperItem);
+      }
+    };
+    while (stack.length > targetDepth + 1) {
+      if (_loop()) break;
+    }
+  }
+
+  // Seed the root list
+  openList(elements[0].listType);
+  var _iterator = _createForOfIteratorHelper(elements),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var el = _step.value;
+      var targetDepth = el.depth;
+
+      // Close lists if we're going shallower
+      if (stack.length > targetDepth + 1) {
+        closeToDepth(targetDepth);
+      }
+
+      // Open lists if we need to go deeper.
+      // We do NOT create wrapper listItems here — closeToDepth handles
+      // creating wrappers that contain only the nested list (no empty paragraph).
+      while (stack.length < targetDepth + 1) {
+        openList(el.listType);
+      }
+
+      // Build the listItem for this element using its content children
+      var contentChildren = extractContentChildren(el.node);
+      var listItem = schema.nodes.listItem.create(el.node.attrs, contentChildren);
+      stack[stack.length - 1].items.push(listItem);
+    }
+
+    // Close all remaining open lists
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  closeToDepth(0);
+  var root = stack[0];
+  return schema.nodes[root.listType].create(null, root.items);
+}
+/**
+ * Build a replacement Fragment from a flat array of `ListElement` objects.
+ *
+ * Elements with depth >= 0 are grouped into consecutive list segments
+ * and rebuilt via `rebuildPMList`. Elements with depth < 0 (extracted
+ * past the root) are converted to their content children (paragraphs).
+ * The result interleaves list nodes and extracted content in document order.
+ */
+function buildReplacementFragment(elements, schema) {
+  var fragment = _model.Fragment.empty;
+  var pendingListSegment = [];
+  var pendingStartIdx = 0;
+  var contentStartOffsets = new Array(elements.length);
+  var flushListSegment = function flushListSegment() {
+    if (pendingListSegment.length > 0) {
+      var fragmentOffset = fragment.size;
+      var rebuilt = rebuildPMList(pendingListSegment, schema);
+      if (rebuilt) {
+        // Walk the rebuilt tree to find content-bearing listItem positions.
+        // descendants() visits in document order matching the element order.
+        var segIdx = 0;
+        rebuilt.descendants(function (node, pos) {
+          if ((0, _utils.isListItemNode)(node) && hasContentChildren(node)) {
+            // pos is relative to rebuilt's content start;
+            // +1 for rebuilt's opening tag, +1 for listItem's opening tag
+            contentStartOffsets[pendingStartIdx + segIdx] = fragmentOffset + 1 + pos + 1;
+            segIdx++;
+          }
+          return true;
+        });
+        fragment = fragment.addToEnd(rebuilt);
+      }
+      pendingListSegment = [];
+    }
+  };
+  var elIdx = 0;
+  var _iterator2 = _createForOfIteratorHelper(elements),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var el = _step2.value;
+      if (el.depth < 0) {
+        flushListSegment();
+        // Extracted element — content children become top-level nodes.
+        // Record offset of first content child.
+        contentStartOffsets[elIdx] = fragment.size;
+        var _iterator3 = _createForOfIteratorHelper(extractContentChildren(el.node)),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var node = _step3.value;
+            fragment = fragment.addToEnd(node);
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      } else {
+        if (pendingListSegment.length === 0) {
+          pendingStartIdx = elIdx;
+        }
+        pendingListSegment.push(el);
+      }
+      elIdx++;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  flushListSegment();
+  return {
+    fragment: fragment,
+    contentStartOffsets: contentStartOffsets
+  };
+}
+/**
+ * Restore the transaction's selection after a list structural change.
+ *
+ * Uses the content start offsets computed during fragment rebuild to
+ * map each selection endpoint to its new absolute position.
+ */
+function restoreSelection(_ref2) {
+  var tr = _ref2.tr,
+    originalSelection = _ref2.originalSelection,
+    from = _ref2.from,
+    to = _ref2.to;
+  var maxPos = tr.doc.content.size;
+  if (originalSelection instanceof _state.NodeSelection) {
+    try {
+      tr.setSelection(_state.NodeSelection.create(tr.doc, Math.min(from, maxPos - 1)));
+    } catch (_unused) {
+      tr.setSelection(_state.Selection.near(tr.doc.resolve(from)));
+    }
+  } else if (originalSelection instanceof _selection.GapCursorSelection) {
+    tr.setSelection(new _selection.GapCursorSelection(tr.doc.resolve(from), originalSelection.side));
+  } else {
+    tr.setSelection(_state.TextSelection.create(tr.doc, from, to));
+  }
+}

package/dist/es2019/pm-plugins/actions/move-selected-list-items.js

@@ -0,0 +1,64 @@
+import { MAX_NESTED_LIST_INDENTATION } from '../../types';
+import { findFirstParentListNode, findRootParentListNode } from '../utils/find';
+import { buildReplacementFragment, flattenList, restoreSelection } from '../utils/list-indentation';
+
+/**
+ * Moves the selected list items n levels up (negative delta) or down (positive delta).
+ */
+export function moveSelectedListItems(tr, delta) {
+  const originalSelection = tr.selection;
+
+  // Find the root list so depth adjustments are absolute
+  const rootListResolved = findRootParentListNode(originalSelection.$from);
+  if (!rootListResolved) {
+    return;
+  }
+  const rootList = findFirstParentListNode(rootListResolved);
+  if (!rootList) {
+    return;
+  }
+  const rootListStart = rootList.pos;
+  const rootListEnd = rootListStart + rootList.node.nodeSize;
+  const result = flattenList({
+    doc: tr.doc,
+    rootListStart,
+    rootListEnd,
+    selectionFrom: originalSelection.from,
+    selectionTo: originalSelection.to,
+    delta
+  });
+  if (!result || result.maxDepth >= MAX_NESTED_LIST_INDENTATION) {
+    return;
+  }
+  const {
+    elements,
+    startIndex,
+    endIndex
+  } = result;
+
+  // Build replacement — handles both indent (all depths >= 0)
+  // and outdent (some depths may be < 0, producing extracted paragraphs).
+  const {
+    fragment,
+    contentStartOffsets
+  } = buildReplacementFragment(elements, tr.doc.type.schema);
+  if (fragment.size === 0) {
+    return;
+  }
+  tr.replaceWith(rootListStart, rootListEnd, fragment);
+  const fromContentStart = elements[startIndex].pos + 1;
+  const toContentStart = elements[endIndex].pos + 1;
+  const fromOffset = originalSelection.from - fromContentStart;
+  const toOffset = originalSelection.to - toContentStart;
+  const clamp = pos => Math.min(Math.max(0, pos), tr.doc.content.size);
+  const from = clamp(rootListStart + contentStartOffsets[startIndex] + fromOffset);
+  const to = clamp(rootListStart + contentStartOffsets[endIndex] + toOffset);
+
+  // Restore selection using the positional offsets from the rebuild.
+  restoreSelection({
+    tr,
+    originalSelection,
+    from,
+    to
+  });
+}

package/dist/es2019/pm-plugins/commands/indent-list.js

@@ -3,10 +3,43 @@ import { getCommonListAnalyticsAttributes, getListItemAttributes, hasValidListIn
 import { PassiveTransaction } from '@atlaskit/editor-common/preset';
 import { isBulletList } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/prosemirror-history';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { MAX_NESTED_LIST_INDENTATION } from '../../types';
 import { indentListItemsSelected as indentListAction } from '../actions/indent-list-items-selected';
+import { moveSelectedListItems } from '../actions/move-selected-list-items';
 import { findFirstParentListNode } from '../utils/find';
 import { isInsideListItem, isInsideTableCell } from '../utils/selection';
+/**
+ * Handler for flexible list indentation.
+ * Allows indenting the first item by creating wrapper structures.
+ */
+const handleIndentListItems = (tr, editorAnalyticsAPI, inputMethod) => {
+  var _findFirstParentListN;
+  moveSelectedListItems(tr, 1);
+
+  // If no changes were made, return PassiveTransaction to prevent browser from handling this as a tab key event (e.g. moving focus)
+  if (!tr.docChanged) {
+    return new PassiveTransaction();
+  }
+  const {
+    selection: {
+      $from
+    }
+  } = tr;
+  const currentListNode = (_findFirstParentListN = findFirstParentListNode($from)) === null || _findFirstParentListN === void 0 ? void 0 : _findFirstParentListN.node;
+  const actionSubjectId = currentListNode && isBulletList(currentListNode) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INDENTED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      ...getCommonListAnalyticsAttributes(tr),
+      inputMethod
+    }
+  })(tr);
+  return tr;
+};
 export const indentList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.KEYBOARD) => {
   return function ({
     tr
@@ -24,6 +57,11 @@ export const indentList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.KEYB
 
     // Save the history, so it could undo/revert to the same state before the indent, see https://product-fabric.atlassian.net/browse/ED-14753
     closeHistory(tr);
+
+    // Route to new or original implementation based on feature flag
+    if (expValEqualsNoExposure('platform_editor_flexible_list_indentation', 'isEnabled', true)) {
+      return handleIndentListItems(tr, editorAnalyticsAPI, inputMethod);
+    }
     const firstListItemSelectedAttributes = getListItemAttributes($from);
     const parentListNode = findFirstParentListNode($from);
     if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {