BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/utils/lists.ts

   1 import {$createTextNode, $getSelection, BaseSelection, LexicalEditor, TextNode} from "lexical";
   2 import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection} from "./selection";
   3 import {nodeHasInset} from "./nodes";
   4 import {$createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode} from "@lexical/list";
   5
   6
   7 export function $nestListItem(node: ListItemNode): ListItemNode {
   8     const list = node.getParent();
   9     if (!$isListNode(list)) {
  10         return node;
  11     }
  12
  13     const nodeChildList = node.getChildren().filter(n => $isListNode(n))[0] || null;
  14     const nodeChildItems = nodeChildList?.getChildren() || [];
  15
  16     const listItems = list.getChildren() as ListItemNode[];
  17     const nodeIndex = listItems.findIndex((n) => n.getKey() === node.getKey());
  18     const isFirst = nodeIndex === 0;
  19
  20     const newListItem = $createListItemNode();
  21     const newList = $createListNode(list.getListType());
  22     newList.append(newListItem);
  23     newListItem.append(...node.getChildren());
  24
  25     if (isFirst) {
  26         node.append(newList);
  27     } else  {
  28         const prevListItem = listItems[nodeIndex - 1];
  29         prevListItem.append(newList);
  30         node.remove();
  31     }
  32
  33     if (nodeChildList) {
  34         for (const child of nodeChildItems) {
  35             newListItem.insertAfter(child);
  36         }
  37         nodeChildList.remove();
  38     }
  39
  40     return newListItem;
  41 }
  42
  43 export function $unnestListItem(node: ListItemNode): ListItemNode {
  44     const list = node.getParent();
  45     const parentListItem = list?.getParent();
  46     const outerList = parentListItem?.getParent();
  47     if (!$isListNode(list) || !$isListNode(outerList) || !$isListItemNode(parentListItem)) {
  48         return node;
  49     }
  50
  51     const laterSiblings = node.getNextSiblings();
  52
  53     parentListItem.insertAfter(node);
  54     if (list.getChildren().length === 0) {
  55         list.remove();
  56     }
  57
  58     if (parentListItem.getChildren().length === 0) {
  59         parentListItem.remove();
  60     }
  61
  62     if (laterSiblings.length > 0) {
  63         const childList = $createListNode(list.getListType());
  64         childList.append(...laterSiblings);
  65         node.append(childList);
  66     }
  67
  68     if (list.getChildrenSize() === 0) {
  69         list.remove();
  70     }
  71
  72     return node;
  73 }
  74
  75 function getListItemsForSelection(selection: BaseSelection|null): (ListItemNode|null)[] {
  76     const nodes = selection?.getNodes() || [];
  77     const listItemNodes = [];
  78
  79     outer: for (const node of nodes) {
  80         if ($isListItemNode(node)) {
  81             listItemNodes.push(node);
  82             continue;
  83         }
  84
  85         const parents = node.getParents();
  86         for (const parent of parents) {
  87             if ($isListItemNode(parent)) {
  88                 listItemNodes.push(parent);
  89                 continue outer;
  90             }
  91         }
  92
  93         listItemNodes.push(null);
  94     }
  95
  96     return listItemNodes;
  97 }
  98
  99 function $reduceDedupeListItems(listItems: (ListItemNode|null)[]): ListItemNode[] {
 100     const listItemMap: Record<string, ListItemNode> = {};
 101
 102     for (const item of listItems) {
 103         if (item === null) {
 104             continue;
 105         }
 106
 107         const key = item.getKey();
 108         if (typeof listItemMap[key] === 'undefined') {
 109             listItemMap[key] = item;
 110         }
 111     }
 112
 113     return Object.values(listItemMap);
 114 }
 115
 116 export function $setInsetForSelection(editor: LexicalEditor, change: number): void {
 117     const selection = $getSelection();
 118     const selectionBounds = selection?.getStartEndPoints();
 119     const listItemsInSelection = getListItemsForSelection(selection);
 120     const isListSelection = listItemsInSelection.length > 0 && !listItemsInSelection.includes(null);
 121
 122     if (isListSelection) {
 123         const alteredListItems = [];
 124         const listItems = $reduceDedupeListItems(listItemsInSelection);
 125         if (change > 0) {
 126             for (const listItem of listItems) {
 127                 alteredListItems.push($nestListItem(listItem));
 128             }
 129         } else if (change < 0) {
 130             for (const listItem of [...listItems].reverse()) {
 131                 alteredListItems.push($unnestListItem(listItem));
 132             }
 133             alteredListItems.reverse();
 134         }
 135
 136         if (alteredListItems.length === 1 && selectionBounds) {
 137             // Retain selection range if moving just one item
 138             const listItem = alteredListItems[0] as ListItemNode;
 139             let child = listItem.getChildren()[0] as TextNode;
 140             if (!child) {
 141                 child = $createTextNode('');
 142                 listItem.append(child);
 143             }
 144             child.select(selectionBounds[0].offset, selectionBounds[1].offset);
 145         } else {
 146             $selectNodes(alteredListItems);
 147         }
 148
 149         return;
 150     }
 151
 152     const elements = $getBlockElementNodesInSelection(selection);
 153     for (const node of elements) {
 154         if (nodeHasInset(node)) {
 155             const currentInset = node.getInset();
 156             const newInset = Math.min(Math.max(currentInset + change, 0), 500);
 157             node.setInset(newInset)
 158         }
 159     }
 160
 161     $toggleSelection(editor);
 162 }