@atlaskit/editor-plugin-list 0.2.0 → 1.1.0

package/dist/es2019/commands/index.js

@@ -0,0 +1,322 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { findCutBefore } from '@atlaskit/editor-common/commands';
+import { getCommonListAnalyticsAttributes, moveTargetIntoList } from '@atlaskit/editor-common/lists';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { filterCommand as filter, hasVisibleContent, isEmptySelectionAtStart } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findPositionOfNodeBefore, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { convertListType } from '../actions/conversions';
+import { wrapInListAndJoin } from '../actions/wrap-and-join-lists';
+import { liftFollowingList, liftNodeSelectionList, liftTextSelectionList } from '../transforms';
+import { sanitiseMarksInSelection } from '../utils/mark';
+import { canJoinToPreviousListItem, isInsideListItem, selectionContainsList } from '../utils/selection';
+import { indentList } from './indent-list';
+import { isFirstChildOfParent } from './isFirstChildOfParent';
+import { joinListItemForward } from './join-list-item-forward';
+import { listBackspace } from './listBackspace';
+import { outdentList } from './outdent-list';
+export { outdentList, indentList };
+export const enterKeyCommand = editorAnalyticsAPI => featureFlags => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  if (selection.empty) {
+    const {
+      $from
+    } = selection;
+    const {
+      listItem,
+      codeBlock
+    } = state.schema.nodes;
+    const wrapper = $from.node($from.depth - 1);
+    if (wrapper && wrapper.type === listItem) {
+      /** Check if the wrapper has any visible content */
+      const wrapperHasContent = hasVisibleContent(wrapper);
+      if (!wrapperHasContent) {
+        return editorCommandToPMCommand(outdentList(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, featureFlags))(state, dispatch);
+      } else if (!hasParentNodeOfType(codeBlock)(selection)) {
+        return splitListItem(listItem)(state, dispatch);
+      }
+    }
+  }
+  return false;
+};
+export const backspaceKeyCommand = editorAnalyticsAPI => featureFlags => (state, dispatch) => {
+  return chainCommands(listBackspace(editorAnalyticsAPI),
+  // if we're at the start of a list item, we need to either backspace
+  // directly to an empty list item above, or outdent this node
+  filter([isEmptySelectionAtStart,
+  // list items might have multiple paragraphs; only do this at the first one
+  isFirstChildOfParent, state => isInsideListItem(state.tr)], chainCommands(deletePreviousEmptyListItem, editorCommandToPMCommand(outdentList(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD, featureFlags)))),
+  // if we're just inside a paragraph node (or gapcursor is shown) and backspace, then try to join
+  // the text to the previous list item, if one exists
+  filter([isEmptySelectionAtStart, state => canJoinToPreviousListItem(state.tr)], joinToPreviousListItem))(state, dispatch);
+};
+export const deleteKeyCommand = editorAnalyticsAPI => joinListItemForward(editorAnalyticsAPI);
+
+// Get the depth of the nearest ancestor list
+export const rootListDepth = (pos, nodes) => {
+  const {
+    bulletList,
+    orderedList,
+    listItem
+  } = nodes;
+  let depth;
+  for (let i = pos.depth - 1; i > 0; i--) {
+    const node = pos.node(i);
+    if (node.type === bulletList || node.type === orderedList) {
+      depth = i;
+    }
+    if (node.type !== bulletList && node.type !== orderedList && node.type !== listItem) {
+      break;
+    }
+  }
+  return depth;
+};
+function untoggleSelectedList(tr) {
+  const {
+    selection
+  } = tr;
+  const depth = rootListDepth(selection.$to, tr.doc.type.schema.nodes);
+  tr = liftFollowingList(selection.$to.pos, selection.$to.end(depth), depth || 0, tr);
+  if (selection instanceof NodeSelection || selection instanceof GapCursorSelection) {
+    return liftNodeSelectionList(selection, tr);
+  }
+  return liftTextSelectionList(selection, tr);
+}
+export const toggleList = editorAnalyticsAPI => (inputMethod, listType) => {
+  return function ({
+    tr
+  }) {
+    const listInsideSelection = selectionContainsList(tr);
+    const listNodeType = tr.doc.type.schema.nodes[listType];
+    const actionSubjectId = listType === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+    if (listInsideSelection) {
+      const {
+        selection
+      } = tr;
+
+      // for gap cursor or node selection - list is expected 1 level up (listItem -> list)
+      // for text selection - list is expected 2 levels up (paragraph -> listItem -> list)
+      const positionDiff = selection instanceof GapCursorSelection || selection instanceof NodeSelection ? 1 : 2;
+      const fromNode = selection.$from.node(selection.$from.depth - positionDiff);
+      const toNode = selection.$to.node(selection.$to.depth - positionDiff);
+      const transformedFrom = listInsideSelection.type.name === 'bulletList' ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+      if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {
+        const commonAttributes = getCommonListAnalyticsAttributes(tr);
+        untoggleSelectedList(tr);
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+          action: ACTION.CONVERTED,
+          actionSubject: ACTION_SUBJECT.LIST,
+          actionSubjectId: ACTION_SUBJECT_ID.TEXT,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            ...commonAttributes,
+            transformedFrom,
+            inputMethod
+          }
+        })(tr);
+        return tr;
+      }
+      convertListType({
+        tr,
+        nextListNodeType: listNodeType
+      });
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.CONVERTED,
+        actionSubject: ACTION_SUBJECT.LIST,
+        actionSubjectId,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          ...getCommonListAnalyticsAttributes(tr),
+          transformedFrom,
+          inputMethod
+        }
+      })(tr);
+    } else {
+      // Need to have this before wrapInList so the wrapping is done with valid content
+      // For example, if trying to convert centre or right aligned paragraphs to lists
+      sanitiseMarksInSelection(tr, listNodeType);
+      wrapInListAndJoin(listNodeType, tr);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.LIST,
+        actionSubjectId,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          inputMethod
+        }
+      })(tr);
+    }
+
+    // If document wasn't changed, return false from the command to indicate that the
+    // editing action failed
+    if (!tr.docChanged) {
+      return null;
+    }
+    return tr;
+  };
+};
+export const toggleBulletList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.TOOLBAR) => {
+  return toggleList(editorAnalyticsAPI)(inputMethod, 'bulletList');
+};
+export const toggleOrderedList = editorAnalyticsAPI => (inputMethod = INPUT_METHOD.TOOLBAR) => {
+  return toggleList(editorAnalyticsAPI)(inputMethod, 'orderedList');
+};
+
+/**
+ * Implementation taken and modified for our needs from PM
+ * @param itemType Node
+ * Splits the list items, specific implementation take from PM
+ */
+function splitListItem(itemType) {
+  return function (state, dispatch) {
+    const ref = state.selection;
+    const $from = ref.$from;
+    const $to = ref.$to;
+    const node = ref.node;
+    if (node && node.isBlock || $from.depth < 2 || !$from.sameParent($to)) {
+      return false;
+    }
+    const grandParent = $from.node(-1);
+    if (grandParent.type !== itemType) {
+      return false;
+    }
+    /** --> The following line changed from the original PM implementation to allow list additions with multiple paragraphs */
+    if (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    grandParent.content.content.length <= 1 && $from.parent.content.size === 0 && !(grandParent.content.size === 0)) {
+      // In an empty block. If this is a nested list, the wrapping
+      // list item should be split. Otherwise, bail out and let next
+      // command handle lifting.
+      if ($from.depth === 2 || $from.node(-3).type !== itemType || $from.index(-2) !== $from.node(-2).childCount - 1) {
+        return false;
+      }
+      if (dispatch) {
+        let wrap = Fragment.empty;
+        const keepItem = $from.index(-1) > 0;
+        // Build a fragment containing empty versions of the structure
+        // from the outer list item to the parent node of the cursor
+        for (let d = $from.depth - (keepItem ? 1 : 2); d >= $from.depth - 3; d--) {
+          wrap = Fragment.from($from.node(d).copy(wrap));
+        }
+        // Add a second list item with an empty default start node
+        wrap = wrap.append(Fragment.from(itemType.createAndFill()));
+        const tr$1 = state.tr.replace($from.before(keepItem ? undefined : -1), $from.after(-3), new Slice(wrap, keepItem ? 3 : 2, 2));
+        tr$1.setSelection(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        state.selection.constructor.near(tr$1.doc.resolve($from.pos + (keepItem ? 3 : 2))));
+        dispatch(tr$1.scrollIntoView());
+      }
+      return true;
+    }
+    const nextType = $to.pos === $from.end() ? grandParent.contentMatchAt(0).defaultType : null;
+    const tr = state.tr.delete($from.pos, $to.pos);
+    const types = nextType && [null, {
+      type: nextType
+    }];
+    if (dispatch) {
+      dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+    }
+    return true;
+  };
+}
+const deletePreviousEmptyListItem = (state, dispatch) => {
+  const {
+    $from
+  } = state.selection;
+  const {
+    listItem
+  } = state.schema.nodes;
+  const $cut = findCutBefore($from);
+  if (!$cut || !$cut.nodeBefore || !($cut.nodeBefore.type === listItem)) {
+    return false;
+  }
+  const previousListItemEmpty = $cut.nodeBefore.childCount === 1 && $cut.nodeBefore.firstChild.nodeSize <= 2;
+  if (previousListItemEmpty) {
+    const {
+      tr
+    } = state;
+    if (dispatch) {
+      dispatch(tr.delete($cut.pos - $cut.nodeBefore.nodeSize, $from.pos).scrollIntoView());
+    }
+    return true;
+  }
+  return false;
+};
+const joinToPreviousListItem = (state, dispatch) => {
+  const {
+    $from
+  } = state.selection;
+  const {
+    paragraph,
+    listItem,
+    codeBlock,
+    bulletList,
+    orderedList
+  } = state.schema.nodes;
+  const isGapCursorShown = state.selection instanceof GapCursorSelection;
+  const $cutPos = isGapCursorShown ? state.doc.resolve($from.pos + 1) : $from;
+  let $cut = findCutBefore($cutPos);
+  if (!$cut) {
+    return false;
+  }
+
+  // see if the containing node is a list
+  if ($cut.nodeBefore && [bulletList, orderedList].indexOf($cut.nodeBefore.type) > -1) {
+    // and the node after this is a paragraph or a codeBlock
+    if ($cut.nodeAfter && ($cut.nodeAfter.type === paragraph || $cut.nodeAfter.type === codeBlock)) {
+      // find the nearest paragraph that precedes this node
+      let $lastNode = $cut.doc.resolve($cut.pos - 1);
+      while ($lastNode.parent.type !== paragraph) {
+        $lastNode = state.doc.resolve($lastNode.pos - 1);
+      }
+      let {
+        tr
+      } = state;
+      if (isGapCursorShown) {
+        const nodeBeforePos = findPositionOfNodeBefore(tr.selection);
+        if (typeof nodeBeforePos !== 'number') {
+          return false;
+        }
+        // append the codeblock to the list node
+        const list = $cut.nodeBefore.copy($cut.nodeBefore.content.append(Fragment.from(listItem.createChecked({}, $cut.nodeAfter))));
+        tr.replaceWith(nodeBeforePos, $from.pos + $cut.nodeAfter.nodeSize, list);
+      } else {
+        const step = moveTargetIntoList({
+          insertPosition: $lastNode.pos,
+          $target: $cut
+        });
+
+        // ED-13966: check if the step will cause an ProseMirror error
+        // if there's an error don't apply the step as it will might lead into a data loss.
+        // It doesn't play well with media being a leaf node.
+        const stepResult = state.tr.maybeStep(step);
+        if (stepResult.failed) {
+          return false;
+        } else {
+          tr = state.tr.step(step);
+        }
+      }
+
+      // find out if there's now another list following and join them
+      // as in, [list, p, list] => [list with p, list], and we want [joined list]
+      let $postCut = tr.doc.resolve(tr.mapping.map($cut.pos + $cut.nodeAfter.nodeSize));
+      if ($postCut.nodeBefore && $postCut.nodeAfter && $postCut.nodeBefore.type === $postCut.nodeAfter.type && [bulletList, orderedList].indexOf($postCut.nodeBefore.type) > -1) {
+        tr = tr.join($postCut.pos);
+      }
+      if (dispatch) {
+        var _tr$doc$resolve$nodeB;
+        if (!((_tr$doc$resolve$nodeB = tr.doc.resolve($lastNode.pos).nodeBefore) !== null && _tr$doc$resolve$nodeB !== void 0 && _tr$doc$resolve$nodeB.isBlock) || tr.doc.resolve($lastNode.pos).nodeBefore === null) {
+          tr = tr.setSelection(TextSelection.near(tr.doc.resolve(tr.mapping.map($cut.pos)), -1));
+        }
+        dispatch(tr.scrollIntoView());
+      }
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es2019/commands/isFirstChildOfParent.js

@@ -0,0 +1,7 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+export const isFirstChildOfParent = state => {
+  const {
+    $from
+  } = state.selection;
+  return $from.depth > 1 ? state.selection instanceof GapCursorSelection && $from.parentOffset === 0 || $from.index($from.depth - 1) === 0 : true;
+};

package/dist/es2019/commands/join-list-item-forward.js

@@ -0,0 +1,53 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, DELETE_DIRECTION, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isEmptySelectionAtEnd, walkNextNode } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { calcJoinListScenario } from '../actions/join-list-items-forward';
+export const joinListItemForward = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    tr,
+    selection: {
+      $head
+    }
+  } = state;
+  const walkNode = walkNextNode($head);
+  if (!isEmptySelectionAtEnd(state)) {
+    return false;
+  }
+  const scenarios = calcJoinListScenario(walkNode, $head);
+  if (!scenarios) {
+    return false;
+  }
+  const [scenario, action] = scenarios;
+  const result = action({
+    tr,
+    $next: walkNode.$pos,
+    $head: $head
+  });
+  if (!result) {
+    return false;
+  }
+  const {
+    bulletList,
+    orderedList
+  } = state.schema.nodes;
+  const listParent = findParentNodeOfType([bulletList, orderedList])(tr.selection);
+  let actionSubjectId = ACTION_SUBJECT_ID.FORMAT_LIST_BULLET;
+  if (listParent && listParent.node.type === orderedList) {
+    actionSubjectId = ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.LIST_ITEM_JOINED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.KEYBOARD,
+      direction: DELETE_DIRECTION.FORWARD,
+      scenario
+    }
+  })(tr);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};

package/dist/es2019/commands/listBackspace.js

@@ -0,0 +1,276 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, DELETE_DIRECTION, EVENT_TYPE, INPUT_METHOD, LIST_TEXT_SCENARIOS } from '@atlaskit/editor-common/analytics';
+import { insertContentDeleteRange, isEmptySelectionAtStart, isListNode, isParagraphNode, walkPrevNode } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { isPosInsideList, isPosInsideParagraph } from '../utils/selection';
+//Cases below refer to the cases found in this document: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1146954996/List+Backspace+and+Delete+Behaviour
+//Case for two adjacent list items of the same indentation
+const listBackspaceCase2 = (tr, dispatch, $prev, $head) => {
+  /* CASE 2
+   * Initial Structure:
+   *
+   * List A {
+   *   ListItem B {
+   *     ...Children C
+   *     Paragraph D { text1 |textInsertPos| }       //Cant have children since that would be Case 4
+   *   |$prev||childrenGInsertPos| }
+   *   ListItem E {
+   *     Paragraph F { |$head| text2 }
+   *     ...Children G
+   *   }
+   * }
+   *
+   * Converts to:
+   *
+   * List A {
+   *   ListItem B {
+   *     ...Children C
+   *     Paragraph C { text1text2 }
+   *     ...Children G
+   *   }
+   * }
+   *
+   */
+
+  const listItemE = $head.node(-1); //Head is inside listItem E so it must have a first and last child
+  if (!listItemE.firstChild) {
+    return false;
+  }
+  const beforeListItemE = $head.before(-1);
+  const afterListItemE = $head.after(-1);
+  const textInsertPos = $prev.pos - 1; //Paragraph D must be directly behind $prev otherwise it would be case 4
+  const childrenGInsertPos = $prev.pos;
+  const textContent = $head.parent.content;
+  const childrenGContent = listItemE.content.cut(listItemE.firstChild.nodeSize);
+  insertContentDeleteRange(tr, tr => tr.doc.resolve(textInsertPos), [[textContent, textInsertPos], [childrenGContent, childrenGInsertPos]], [[beforeListItemE, afterListItemE]]);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+
+//Case for two adjacent list items with the first being of lower indentation
+const listBackspaceCase3 = (tr, dispatch, $prev, $head) => {
+  /* CASE 3
+   * Initial Structure:
+   *
+   * List A {
+   *   ListItem B {
+   *     ...Children C
+   *     Paragraph D { text1 |$prev||textInsertPos| } |childrenHInsertPos|
+   *     List E { |childrenJInsertPos|
+   *       ListItem F {
+   *         Paragraph G { |$head| text2 }
+   *         ...Children H
+   *         List? I {
+   *           ...Children J
+   *         }
+   *       }
+   *       ...Children K
+   *     }
+   *   }
+   * }
+   *
+   * Converts to:
+   *
+   * List A {
+   *   ListItem B {
+   *     ...Children C
+   *     Paragraph D { text1text2 }
+   *     ...Children H
+   *     List E {
+   *       ...Children J
+   *       ...Children K
+   *     }
+   *   }
+   * }
+   *
+   */
+
+  const listE = $head.node(-2);
+  const listItemF = $head.node(-1); //Head is inside listItem F so it must have a first and last child
+  if (!listItemF.firstChild || !listItemF.lastChild) {
+    return false;
+  }
+  const beforeListE = $head.before(-2);
+  const beforeListItemF = $head.before(-1);
+  const afterParagraphD = $prev.after();
+  const afterListE = $head.after(-2);
+  const afterListItemF = $head.after(-1);
+  const startListE = $head.start(-2);
+  const containsChildrenJ = isListNode(listItemF.lastChild);
+  const shouldRemoveListE = listE.childCount === 1 && !containsChildrenJ; //Assures no Children J and K
+  const textInsertPos = $prev.pos;
+  const childrenHInsertPos = afterParagraphD;
+  const childrenJInsertPos = startListE;
+  const textContent = $head.parent.content;
+  const childrenHContent = containsChildrenJ ? listItemF.content.cut(listItemF.firstChild.nodeSize, listItemF.nodeSize - listItemF.lastChild.nodeSize - 2) : listItemF.content.cut(listItemF.firstChild.nodeSize); //If Children J doesn't exist then Children H will include the last node
+  const childrenJContent = listItemF.lastChild.content; //Will be invalid if there are no Children J but it will be unused
+
+  insertContentDeleteRange(tr, tr => tr.doc.resolve(textInsertPos), containsChildrenJ ? [[textContent, textInsertPos], [childrenHContent, childrenHInsertPos], [childrenJContent, childrenJInsertPos]] : [[textContent, textInsertPos], [childrenHContent, childrenHInsertPos]], [shouldRemoveListE ? [beforeListE, afterListE] : [beforeListItemF, afterListItemF]]);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+
+//Case for two adjacent list items with the first being of greater indentation
+const listBackspaceCase4 = (tr, dispatch, $prev, $head, $last) => {
+  /* CASE 4
+   * Initial Structure:
+   *
+   * List A {
+   *   ListItem B {
+   *     Paragraph C { text1 }
+   *     ...Children D
+   *     List E {
+   *       ...
+   *         List F {       //May be multiple levels of lists
+   *           ...Children G
+   *           ListItem H {        //Last node of the block
+   *             ...Children I
+   *             Paragraph J { text2 |$last||textInsertPos| } |childrenMInsertPos|        //Cant have children since this ListItem is the last of the block
+   *           }
+   *         }
+   *       ...
+   *     |childrenOInsertPosition| }
+   *   |$prev| }
+   *   ListItem K {
+   *      Paragraph L { |$head| text3 }
+   *      ...Children M
+   *      List? N {
+   *       ...Children O
+   *      }
+   *   }
+   * }
+   *
+   * Converts to:
+   *
+   * List A {
+   *   ListItem B {
+   *     Paragraph C { text1 }
+   *     ...Children D
+   *     List E {
+   *       ...
+   *         List F {
+   *           ...Children G
+   *           ListItem H {
+   *             ...Children I
+   *             Paragraph J { text2text3 }
+   *             ...Children M
+   *           }
+   *         }
+   *       ...
+   *       ...Children O
+   *     }
+   *   }
+   * }
+   *
+   */
+
+  if (!$last) {
+    //Exit if an invalid last was given as a parameter
+    return false;
+  }
+  const listItemK = $head.node(-1); //Head is inside listItem K so it must have a first and last child
+  if (!listItemK.firstChild || !listItemK.lastChild) {
+    return false;
+  }
+  const paragraphL = $head.parent;
+  const beforeListItemK = $head.before(-1);
+  const afterParagraphJ = $last.after();
+  const afterListItemK = $head.after(-1);
+  const containsChildrenO = isListNode(listItemK.lastChild);
+  const textInsertPos = $last.pos;
+  const childrenMInsertPos = afterParagraphJ;
+  const childrenOInsertPos = $prev.pos - 1; //Last item of listItem B must be a list therefore we can simply decrement $prev to get there
+
+  const textContent = paragraphL.content;
+  const childrenMContent = containsChildrenO ? listItemK.content.cut(listItemK.firstChild.nodeSize, listItemK.nodeSize - listItemK.lastChild.nodeSize - 2) : listItemK.content.cut(listItemK.firstChild.nodeSize);
+  const childrenOContent = listItemK.lastChild.content;
+  insertContentDeleteRange(tr, tr => tr.doc.resolve(textInsertPos), containsChildrenO ? [[textContent, textInsertPos], [childrenMContent, childrenMInsertPos], [childrenOContent, childrenOInsertPos]] : [[textContent, textInsertPos], [childrenMContent, childrenMInsertPos]], [[beforeListItemK, afterListItemK]]);
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+const BACKSPACE_COMMANDS = {
+  [LIST_TEXT_SCENARIOS.JOIN_SIBLINGS]: listBackspaceCase2,
+  [LIST_TEXT_SCENARIOS.JOIN_DESCENDANT_TO_PARENT]: listBackspaceCase3,
+  [LIST_TEXT_SCENARIOS.JOIN_TO_SIBLING_DESCENDANT]: listBackspaceCase4
+};
+export const calcJoinListScenario = (walkNode, $head, tr) => {
+  const {
+    $pos: $prev,
+    foundNode: prevFoundNode
+  } = walkNode;
+  const prevInList = isPosInsideList($prev);
+  const headInParagraph = isPosInsideParagraph($head);
+  const headInFirstChild = $head.index(-1) === 0;
+  const headInList = isPosInsideList($head);
+
+  //Must be at the start of the selection of the first child in the listItem
+
+  if (!prevFoundNode || !prevInList || !headInParagraph || !headInFirstChild || !headInList) {
+    return false;
+  }
+  const prevInParagraph = isPosInsideParagraph($prev);
+  if (prevInParagraph) {
+    return [LIST_TEXT_SCENARIOS.JOIN_DESCENDANT_TO_PARENT, null];
+  }
+  const prevParentLastChildIsList = $prev.parent.lastChild && isListNode($prev.parent.lastChild);
+  const prevParentLastChildIsParagraph = isParagraphNode($prev.parent.lastChild);
+
+  // Will search for the possible last node for case 4 (where the list could be indented multiple times)
+  // $last is required to determine whether we are in case 2 or 4
+  let $last = tr.doc.resolve($prev.pos);
+  let lastFoundNode;
+  do {
+    let walkNode = walkPrevNode($last);
+    $last = walkNode.$pos;
+    lastFoundNode = walkNode.foundNode;
+  } while (lastFoundNode && !$last.parent.isTextblock);
+  const lastInParagraph = isPosInsideParagraph($last);
+  if (lastFoundNode && prevParentLastChildIsList && lastInParagraph) {
+    return [LIST_TEXT_SCENARIOS.JOIN_TO_SIBLING_DESCENDANT, $last];
+  } else if (prevParentLastChildIsParagraph) {
+    return [LIST_TEXT_SCENARIOS.JOIN_SIBLINGS, null];
+  }
+  return false;
+};
+export const listBackspace = editorAnalyticsAPI => (state, dispatch) => {
+  const {
+    tr,
+    selection: {
+      $head
+    }
+  } = state;
+  const walkNode = walkPrevNode($head);
+  if (!isEmptySelectionAtStart(state)) {
+    return false;
+  }
+  const scenario = calcJoinListScenario(walkNode, $head, tr);
+  if (!scenario) {
+    return false;
+  }
+  const {
+    bulletList,
+    orderedList
+  } = state.schema.nodes;
+  const listParent = findParentNodeOfType([bulletList, orderedList])(tr.selection);
+  let actionSubjectId = ACTION_SUBJECT_ID.FORMAT_LIST_BULLET;
+  if (listParent && listParent.node.type === orderedList) {
+    actionSubjectId = ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.LIST_ITEM_JOINED,
+    actionSubject: ACTION_SUBJECT.LIST,
+    actionSubjectId,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: INPUT_METHOD.KEYBOARD,
+      direction: DELETE_DIRECTION.BACKWARD,
+      scenario: scenario[0]
+    }
+  })(tr);
+  return BACKSPACE_COMMANDS[scenario[0]](tr, dispatch, walkNode.$pos, $head, scenario[1]);
+};