@atlaskit/editor-plugin-list 9.0.26 → 9.0.28

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

@@ -3,10 +3,60 @@ import { getCommonListAnalyticsAttributes } from '@atlaskit/editor-common/lists'
 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 { moveSelectedListItems } from '../actions/move-selected-list-items';
 import { outdentListItemsSelected as outdentListAction } from '../actions/outdent-list-items-selected';
 import { getRestartListsAttributes } from '../utils/analytics';
 import { findFirstParentListNode } from '../utils/find';
 import { isInsideListItem, isInsideTableCell } from '../utils/selection';
+/**
+ * Handler for flexible list outdentation.
+ * Lifts items independently and cleans up wrapper structures.
+ */
+const handleOutdentListItems = (tr, editorAnalyticsAPI, inputMethod) => {
+  var _findFirstParentListN;
+  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 !isInsideTableCell(tr) ? new PassiveTransaction() : null;
+  }
+
+  // Determine the action subject ID from the parent list type
+  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;
+
+  // Get restart list attributes for analytics
+  const restartListsAttributes = {};
+  const {
+    outdentScenario,
+    splitListStartNumber
+  } = getRestartListsAttributes(tr);
+  if (outdentScenario === OUTDENT_SCENARIOS.SPLIT_LIST) {
+    restartListsAttributes.outdentScenario = outdentScenario;
+    restartListsAttributes.splitListStartNumber = splitListStartNumber;
+  }
+
+  // Attach analytics event with flexibleIndentation attribute
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.OUTDENTED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      ...getCommonListAnalyticsAttributes(tr),
+      ...restartListsAttributes,
+      inputMethod
+    }
+  })(tr);
+  return tr;
+};
 export const outdentList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.KEYBOARD) => {
   return function ({
     tr
@@ -25,6 +75,11 @@ export const outdentList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.KEY
 
     // Save the history, so it could undo/revert to the same state before the outdent, 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 handleOutdentListItems(tr, editorAnalyticsAPI, inputMethod);
+    }
     const actionSubjectId = isBulletList(parentListNode.node) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     const customTr = tr;
     outdentListAction(customTr);

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

@@ -0,0 +1,263 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { isListItemNode, isListNode } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+
+/**
+ * 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(child => !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((size, child) => {
+    return size + (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).
+ */
+export function flattenList({
+  doc,
+  rootListStart,
+  rootListEnd,
+  selectionFrom,
+  selectionTo,
+  delta
+}) {
+  const elements = [];
+  let startIndex = -1;
+  let endIndex = -1;
+  let maxDepth = 0;
+  const rootDepth = doc.resolve(rootListStart).depth;
+  doc.nodesBetween(rootListStart, rootListEnd, (node, pos, parent) => {
+    if (!isListItemNode(node) || !hasContentChildren(node) || !isListNode(parent)) {
+      return true;
+    }
+
+    // Check selection intersection using content-only bounds
+    const cStart = pos + 1;
+    const cEnd = cStart + contentSize(node);
+    const isSelected = cStart < selectionTo && cEnd > selectionFrom;
+    const depth = (doc.resolve(pos).depth - rootDepth - 1) / 2 + (isSelected ? delta : 0);
+    elements.push({
+      node,
+      pos,
+      depth,
+      listType: parent.type.name
+    });
+    if (isSelected) {
+      const 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,
+    startIndex,
+    endIndex,
+    maxDepth
+  };
+}
+
+/**
+ * Extract non-list (content) children from a listItem node.
+ */
+function extractContentChildren(listItem) {
+  const children = [];
+  for (let i = 0; i < listItem.childCount; i++) {
+    const child = listItem.child(i);
+    if (!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.
+
+  const stack = [];
+  function openList(listType) {
+    stack.push({
+      listType,
+      items: []
+    });
+  }
+
+  /**
+   * Close lists on the stack down to `targetDepth`, wrapping each closed
+   * list into the last listItem of its parent.
+   */
+  function closeToDepth(targetDepth) {
+    while (stack.length > targetDepth + 1) {
+      const closed = stack.pop();
+      if (!closed) {
+        break;
+      }
+      const listNode = schema.nodes[closed.listType].create(null, closed.items);
+
+      // Attach the closed list to the last listItem on the parent frame
+      const parentFrame = stack[stack.length - 1];
+      const lastItem = parentFrame.items[parentFrame.items.length - 1];
+      if (lastItem) {
+        // Append the nested list to this listItem's children
+        const newContent = [];
+        lastItem.forEach(child => 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.
+        const wrapperItem = schema.nodes.listItem.create(null, [listNode]);
+        parentFrame.items.push(wrapperItem);
+      }
+    }
+  }
+
+  // Seed the root list
+  openList(elements[0].listType);
+  for (const el of elements) {
+    const 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
+    const contentChildren = extractContentChildren(el.node);
+    const listItem = schema.nodes.listItem.create(el.node.attrs, contentChildren);
+    stack[stack.length - 1].items.push(listItem);
+  }
+
+  // Close all remaining open lists
+  closeToDepth(0);
+  const 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.
+ */
+export function buildReplacementFragment(elements, schema) {
+  let fragment = Fragment.empty;
+  let pendingListSegment = [];
+  let pendingStartIdx = 0;
+  const contentStartOffsets = new Array(elements.length);
+  const flushListSegment = () => {
+    if (pendingListSegment.length > 0) {
+      const fragmentOffset = fragment.size;
+      const 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.
+        let segIdx = 0;
+        rebuilt.descendants((node, pos) => {
+          if (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 = [];
+    }
+  };
+  let elIdx = 0;
+  for (const el of elements) {
+    if (el.depth < 0) {
+      flushListSegment();
+      // Extracted element — content children become top-level nodes.
+      // Record offset of first content child.
+      contentStartOffsets[elIdx] = fragment.size;
+      for (const node of extractContentChildren(el.node)) {
+        fragment = fragment.addToEnd(node);
+      }
+    } else {
+      if (pendingListSegment.length === 0) {
+        pendingStartIdx = elIdx;
+      }
+      pendingListSegment.push(el);
+    }
+    elIdx++;
+  }
+  flushListSegment();
+  return {
+    fragment,
+    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.
+ */
+export function restoreSelection({
+  tr,
+  originalSelection,
+  from,
+  to
+}) {
+  const maxPos = tr.doc.content.size;
+  if (originalSelection instanceof NodeSelection) {
+    try {
+      tr.setSelection(NodeSelection.create(tr.doc, Math.min(from, maxPos - 1)));
+    } catch {
+      tr.setSelection(Selection.near(tr.doc.resolve(from)));
+    }
+  } else if (originalSelection instanceof GapCursorSelection) {
+    tr.setSelection(new GapCursorSelection(tr.doc.resolve(from), originalSelection.side));
+  } else {
+    tr.setSelection(TextSelection.create(tr.doc, from, to));
+  }
+}

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

@@ -0,0 +1,63 @@
+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) {
+  var originalSelection = tr.selection;
+
+  // Find the root list so depth adjustments are absolute
+  var rootListResolved = findRootParentListNode(originalSelection.$from);
+  if (!rootListResolved) {
+    return;
+  }
+  var rootList = findFirstParentListNode(rootListResolved);
+  if (!rootList) {
+    return;
+  }
+  var rootListStart = rootList.pos;
+  var rootListEnd = rootListStart + rootList.node.nodeSize;
+  var result = flattenList({
+    doc: tr.doc,
+    rootListStart: rootListStart,
+    rootListEnd: rootListEnd,
+    selectionFrom: originalSelection.from,
+    selectionTo: originalSelection.to,
+    delta: delta
+  });
+  if (!result || result.maxDepth >= 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 = 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.
+  restoreSelection({
+    tr: tr,
+    originalSelection: originalSelection,
+    from: from,
+    to: to
+  });
+}

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

@@ -6,10 +6,38 @@ 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.
+ */
+var handleIndentListItems = function 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();
+  }
+  var $from = tr.selection.$from;
+  var currentListNode = (_findFirstParentListN = findFirstParentListNode($from)) === null || _findFirstParentListN === void 0 ? void 0 : _findFirstParentListN.node;
+  var actionSubjectId = currentListNode && isBulletList(currentListNode) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.INDENTED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId: actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: _objectSpread(_objectSpread({}, getCommonListAnalyticsAttributes(tr)), {}, {
+      inputMethod: inputMethod
+    })
+  })(tr);
+  return tr;
+};
 export var indentList = function indentList(editorAnalyticsAPI) {
   return function () {
     var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.KEYBOARD;
@@ -24,6 +52,11 @@ export var 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
       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);
+      }
       var firstListItemSelectedAttributes = getListItemAttributes($from);
       var parentListNode = findFirstParentListNode($from);
       if (!parentListNode || firstListItemSelectedAttributes && firstListItemSelectedAttributes.indentLevel === 0 && firstListItemSelectedAttributes.itemIndex === 0) {

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

@@ -6,10 +6,53 @@ import { getCommonListAnalyticsAttributes } from '@atlaskit/editor-common/lists'
 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 { moveSelectedListItems } from '../actions/move-selected-list-items';
 import { outdentListItemsSelected as outdentListAction } from '../actions/outdent-list-items-selected';
 import { getRestartListsAttributes } from '../utils/analytics';
 import { findFirstParentListNode } from '../utils/find';
 import { isInsideListItem, isInsideTableCell } from '../utils/selection';
+/**
+ * Handler for flexible list outdentation.
+ * Lifts items independently and cleans up wrapper structures.
+ */
+var handleOutdentListItems = function handleOutdentListItems(tr, editorAnalyticsAPI, inputMethod) {
+  var _findFirstParentListN;
+  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 !isInsideTableCell(tr) ? new PassiveTransaction() : null;
+  }
+
+  // Determine the action subject ID from the parent list type
+  var $from = tr.selection.$from;
+  var currentListNode = (_findFirstParentListN = findFirstParentListNode($from)) === null || _findFirstParentListN === void 0 ? void 0 : _findFirstParentListN.node;
+  var actionSubjectId = currentListNode && isBulletList(currentListNode) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+
+  // Get restart list attributes for analytics
+  var restartListsAttributes = {};
+  var _getRestartListsAttri = getRestartListsAttributes(tr),
+    outdentScenario = _getRestartListsAttri.outdentScenario,
+    splitListStartNumber = _getRestartListsAttri.splitListStartNumber;
+  if (outdentScenario === OUTDENT_SCENARIOS.SPLIT_LIST) {
+    restartListsAttributes.outdentScenario = outdentScenario;
+    restartListsAttributes.splitListStartNumber = splitListStartNumber;
+  }
+
+  // Attach analytics event with flexibleIndentation attribute
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.OUTDENTED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId: actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: _objectSpread(_objectSpread(_objectSpread({}, getCommonListAnalyticsAttributes(tr)), restartListsAttributes), {}, {
+      inputMethod: inputMethod
+    })
+  })(tr);
+  return tr;
+};
 export var outdentList = function outdentList(editorAnalyticsAPI) {
   return function () {
     var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.KEYBOARD;
@@ -27,6 +70,11 @@ export var 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
       closeHistory(tr);
+
+      // Route to new or original implementation based on feature flag
+      if (expValEqualsNoExposure('platform_editor_flexible_list_indentation', 'isEnabled', true)) {
+        return handleOutdentListItems(tr, editorAnalyticsAPI, inputMethod);
+      }
       var actionSubjectId = isBulletList(parentListNode.node) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
       var customTr = tr;
       outdentListAction(customTr);
@@ -36,9 +84,9 @@ export var outdentList = function outdentList(editorAnalyticsAPI) {
         return !isInsideTableCell(customTr) ? new PassiveTransaction() : null;
       }
       var restartListsAttributes = {};
-      var _getRestartListsAttri = getRestartListsAttributes(customTr),
-        outdentScenario = _getRestartListsAttri.outdentScenario,
-        splitListStartNumber = _getRestartListsAttri.splitListStartNumber;
+      var _getRestartListsAttri2 = getRestartListsAttributes(customTr),
+        outdentScenario = _getRestartListsAttri2.outdentScenario,
+        splitListStartNumber = _getRestartListsAttri2.splitListStartNumber;
       if (outdentScenario === OUTDENT_SCENARIOS.SPLIT_LIST) {
         restartListsAttributes.outdentScenario = outdentScenario;
         restartListsAttributes.splitListStartNumber = splitListStartNumber;