collavre 0.22.0 → 0.23.0

data/app/javascript/lib/lexical/__tests__/list_tab_indent.test.js

@@ -0,0 +1,633 @@
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode,
+  $createRangeSelection,
+  $setSelection,
+  $isParagraphNode,
+  KEY_TAB_COMMAND
+} from "lexical"
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text"
+import {
+  ListNode,
+  ListItemNode,
+  $createListNode,
+  $createListItemNode,
+  $isListNode,
+  $isListItemNode,
+  registerList
+} from "@lexical/list"
+import { registerListTabIndentation } from "../list_tab_indent"
+
+function buildListEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    onError(error) {
+      throw error
+    },
+    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode]
+  })
+  // registerRichText handles INDENT/OUTDENT_CONTENT_COMMAND; registerList turns
+  // the resulting indent change into real nested list structure.
+  registerRichText(editor)
+  registerList(editor)
+  registerListTabIndentation(editor)
+  return editor
+}
+
+function countNestedLists(root) {
+  let nested = 0
+  const walk = (node) => {
+    if (typeof node.getChildren !== "function") return
+    node.getChildren().forEach((child) => {
+      if ($isListNode(child)) nested += 1
+      walk(child)
+    })
+  }
+  walk(root)
+  return nested
+}
+
+describe("registerListTabIndentation", () => {
+  it("nests the current list item on Tab", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        const textB = $createTextNode("b")
+        b.append(textB)
+        ul.append(a, b)
+        root.append(ul)
+        // Select the text node (a real cursor), not the list item element, so
+        // the indent command resolves the block to the ListItemNode.
+        textB.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    // Before: one top-level list, no nested lists.
+    editor.read(() => {
+      expect(countNestedLists($getRoot())).toBe(1)
+    })
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: false
+    })
+    expect(handled).toBe(true)
+
+    // After: a nested list now exists (the second item became a child list).
+    editor.read(() => {
+      expect(countNestedLists($getRoot())).toBeGreaterThan(1)
+    })
+  })
+
+  it("un-nests a nested item on Shift+Tab", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        const textB = $createTextNode("b")
+        b.append(textB)
+        ul.append(a, b)
+        root.append(ul)
+        textB.selectEnd()
+      },
+      { discrete: true }
+    )
+    // Nest first.
+    editor.dispatchCommand(KEY_TAB_COMMAND, { preventDefault: () => {}, shiftKey: false })
+    editor.read(() => {
+      expect(countNestedLists($getRoot())).toBeGreaterThan(1)
+    })
+
+    // Place selection back on the (now nested) "b" and outdent.
+    editor.update(
+      () => {
+        const root = $getRoot()
+        const target = root
+          .getAllTextNodes()
+          .find((n) => n.getTextContent() === "b")
+        target.selectEnd()
+      },
+      { discrete: true }
+    )
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+    editor.read(() => {
+      expect(countNestedLists($getRoot())).toBe(1)
+    })
+  })
+
+  it("Shift+Tab on a top-level item removes it from the list (becomes a paragraph)", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        const textA = $createTextNode("a")
+        a.append(textA)
+        ul.append(a)
+        root.append(ul)
+        textA.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // The whole list is gone; the item is now a top-level paragraph.
+      expect(root.getChildren().some($isListNode)).toBe(false)
+      const only = root.getFirstChild()
+      expect($isParagraphNode(only)).toBe(true)
+      expect(only.getTextContent()).toBe("a")
+    })
+  })
+
+  it("Shift+Tab on a middle top-level item splits the surrounding list", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        const textB = $createTextNode("b")
+        b.append(textB)
+        const c = $createListItemNode()
+        c.append($createTextNode("c"))
+        ul.append(a, b, c)
+        root.append(ul)
+        textB.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      const kinds = root.getChildren().map((child) =>
+        $isListNode(child) ? `list[${child.getTextContent()}]` : `p[${child.getTextContent()}]`
+      )
+      // a stays in the first list, b becomes a paragraph, c moves to a trailing list.
+      expect(kinds).toEqual(["list[a]", "p[b]", "list[c]"])
+    })
+  })
+
+  it("Shift+Tab un-lists every top-level item the selection spans, not just the anchor", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        b.append($createTextNode("b"))
+        const c = $createListItemNode()
+        c.append($createTextNode("c"))
+        ul.append(a, b, c)
+        root.append(ul)
+        // Select from inside "a" through inside "c" (spans all three items).
+        const selection = $createRangeSelection()
+        selection.anchor.set(a.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(c.getFirstChild().getKey(), 1, "text")
+        $setSelection(selection)
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // All three leave the list: no list node survives, three plain paragraphs in order.
+      expect(root.getChildren().some($isListNode)).toBe(false)
+      const kinds = root.getChildren().map((child) => `p[${child.getTextContent()}]`)
+      expect(kinds).toEqual(["p[a]", "p[b]", "p[c]"])
+    })
+  })
+
+  it("Shift+Tab on a top-level item with a nested child list never puts a list inside a paragraph", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const child = $createListItemNode()
+        const childText = $createTextNode("a1")
+        child.append(childText)
+        ul.append(a, child)
+        root.append(ul)
+        childText.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    // Tab on "a1" nests it under "a" via the real @lexical/list machinery, so the
+    // tree matches what a user actually builds (not a hand-rolled approximation).
+    editor.dispatchCommand(KEY_TAB_COMMAND, { preventDefault: () => {}, shiftKey: false })
+
+    editor.update(
+      () => {
+        const root = $getRoot()
+        const topList = root.getFirstChild()
+        topList.getFirstChild().getFirstChild().selectEnd() // caret into "a"
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // "a" leaves the list as a paragraph and that paragraph must hold no list block.
+      const paragraph = root.getChildren().find($isParagraphNode)
+      expect(paragraph).toBeDefined()
+      expect(paragraph.getTextContent()).toBe("a")
+      expect(paragraph.getChildren().some($isListNode)).toBe(false)
+      // "a1" was a child of the removed "a", so it must be PROMOTED to a top-level
+      // item of the trailing list — not left as an orphan <li><ul> wrapper.
+      const trailingList = root.getChildren().filter($isListNode).pop()
+      const directItems = trailingList
+        .getChildren()
+        .filter((li) => $isListItemNode(li) && !$isListNode(li.getFirstChild()))
+        .map((li) => li.getTextContent())
+      expect(directItems).toContain("a1")
+      // No orphan nested-list wrapper survives at the trailing list's top level.
+      const hasOrphanWrapper = trailingList
+        .getChildren()
+        .some((li) => $isListItemNode(li) && $isListNode(li.getFirstChild()))
+      expect(hasOrphanWrapper).toBe(false)
+      // The original list must not linger as an empty/orphan list before the
+      // paragraph: only the single trailing list should remain at the root, and no
+      // empty list anywhere (it would serialize as stray blank lines in Markdown).
+      const rootLists = root.getChildren().filter($isListNode)
+      expect(rootLists.length).toBe(1)
+      expect(rootLists[0]).toBe(trailingList)
+    })
+  })
+
+  it("Shift+Tab promotes only the removed item's children, leaving later items' nesting intact", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        b.append($createTextNode("b"))
+        const b1 = $createListItemNode()
+        const textB1 = $createTextNode("b1")
+        b1.append(textB1)
+        ul.append(a, b, b1)
+        root.append(ul)
+        textB1.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    // Nest "b1" under "b" via the real machinery.
+    editor.dispatchCommand(KEY_TAB_COMMAND, { preventDefault: () => {}, shiftKey: false })
+
+    // Caret into top-level "a" and outdent it.
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.getFirstChild().getFirstChild().getFirstChild().selectEnd()
+      },
+      { discrete: true }
+    )
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // "a" has no children, so nothing is promoted; "b1" stays nested under "b".
+      const trailingList = root.getChildren().filter($isListNode).pop()
+      const topTexts = trailingList
+        .getChildren()
+        .filter((li) => $isListItemNode(li) && !$isListNode(li.getFirstChild()))
+        .map((li) => li.getTextContent())
+      expect(topTexts).toContain("b")
+      expect(topTexts).not.toContain("b1")
+      // b1 remains nested (one wrapper holding b1's sublist).
+      expect(countNestedLists(root)).toBeGreaterThan(0)
+      expect(root.getTextContent()).toContain("b1")
+    })
+  })
+
+  it("Shift+Tab promoting a differently-typed child list keeps the child's own marker", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        // A numbered parent with a bullet sub-list — "1. a / - a1" (valid mixed
+        // Markdown list). Built directly because Tab-nesting inherits the parent
+        // type, so it can't produce a differently-typed child.
+        const ol = $createListNode("number")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const wrapper = $createListItemNode()
+        const childList = $createListNode("bullet")
+        const a1 = $createListItemNode()
+        a1.append($createTextNode("a1"))
+        childList.append(a1)
+        wrapper.append(childList)
+        ol.append(a, wrapper)
+        root.append(ol)
+        a.getFirstChild().selectEnd() // caret into "a"
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      const paragraph = root.getChildren().find($isParagraphNode)
+      expect(paragraph.getTextContent()).toBe("a")
+      // a1 was a's bullet child; promoted up it must stay a bullet list, not be
+      // renumbered into an ordered list inheriting the parent's "number" type.
+      const lists = root.getChildren().filter($isListNode)
+      expect(lists.length).toBe(1)
+      expect(lists[0].getListType()).toBe("bullet")
+      expect(lists[0].getTextContent()).toContain("a1")
+    })
+  })
+
+  it("Shift+Tab on a list nested in a blockquote removes the list formatting", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        // A list whose parent is a QuoteNode, not the root — `> - item`.
+        const quote = new QuoteNode()
+        const ul = $createListNode("bullet")
+        const a = $createListItemNode()
+        const textA = $createTextNode("quoted")
+        a.append(textA)
+        ul.append(a)
+        quote.append(ul)
+        root.append(quote)
+        textA.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // The list must be gone (no `<ul>` anywhere), the text survives, and no
+      // list block remains — `> item` instead of an unchanged `> - item`.
+      expect(countNestedLists(root)).toBe(0)
+      expect(root.getTextContent()).toContain("quoted")
+    })
+  })
+
+  it("Shift+Tab splitting an ordered list keeps the trailing numbering", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const ol = $createListNode("number")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        const textB = $createTextNode("b")
+        b.append(textB)
+        const c = $createListItemNode()
+        c.append($createTextNode("c"))
+        ol.append(a, b, c)
+        root.append(ol)
+        textB.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      const lists = root.getChildren().filter($isListNode)
+      // a stays in the first ordered list; c moves to a trailing ordered list that
+      // continues numbering from 3 (b was 2), not restarting at 1.
+      const trailing = lists[lists.length - 1]
+      expect(trailing.getListType()).toBe("number")
+      expect(trailing.getStart()).toBe(3)
+      expect(trailing.getTextContent()).toBe("c")
+    })
+  })
+
+  it("Shift+Tab keeps the trailing numbering when an ordered child list is promoted", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        // "1. a / 2. b / 3. c" with an ordered child "b1" nested under "b".
+        const ol = $createListNode("number")
+        const a = $createListItemNode()
+        a.append($createTextNode("a"))
+        const b = $createListItemNode()
+        b.append($createTextNode("b"))
+        const b1 = $createListItemNode()
+        const textB1 = $createTextNode("b1")
+        b1.append(textB1)
+        const c = $createListItemNode()
+        c.append($createTextNode("c"))
+        ol.append(a, b, b1, c)
+        root.append(ol)
+        textB1.selectEnd()
+      },
+      { discrete: true }
+    )
+    // Nest "b1" under "b" via the real machinery (same ordered type as the parent).
+    editor.dispatchCommand(KEY_TAB_COMMAND, { preventDefault: () => {}, shiftKey: false })
+    // Caret into top-level "b" and outdent it.
+    editor.update(
+      () => {
+        const root = $getRoot()
+        const target = root.getAllTextNodes().find((n) => n.getTextContent() === "b")
+        target.selectEnd()
+      },
+      { discrete: true }
+    )
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      // The promoted child list (b1) and the continuation (c) are forced into ONE
+      // ordered list by Lexical's same-type-sibling merge. The continuation "c" must
+      // keep its original value 3, with the promoted child filling the slot before it.
+      const lists = root.getChildren().filter($isListNode)
+      const trailing = lists[lists.length - 1]
+      expect(trailing.getListType()).toBe("number")
+      const values = trailing
+        .getChildren()
+        .filter((li) => $isListItemNode(li) && !$isListNode(li.getFirstChild()))
+        .map((li) => li.getValue())
+      // start=2 → b1=2, c=3 (c is not renumbered down to 2 by the merge).
+      expect(values).toEqual([2, 3])
+      expect(trailing.getTextContent()).toContain("b1")
+      expect(trailing.getTextContent()).toContain("c")
+    })
+  })
+
+  it("Shift+Tab never produces a zero/negative start with multiple promoted children", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        // "1. b" (first item) with two ordered children "b1", "b2" and a sibling "c".
+        const ol = $createListNode("number")
+        const b = $createListItemNode()
+        b.append($createTextNode("b"))
+        const b1 = $createListItemNode()
+        b1.append($createTextNode("b1"))
+        const b2 = $createListItemNode()
+        b2.append($createTextNode("b2"))
+        const c = $createListItemNode()
+        c.append($createTextNode("c"))
+        ol.append(b, b1, b2, c)
+        root.append(ol)
+      },
+      { discrete: true }
+    )
+    // Nest both "b1" and "b2" under "b" via the real machinery.
+    for (const text of ["b1", "b2"]) {
+      editor.update(
+        () => {
+          $getRoot()
+            .getAllTextNodes()
+            .find((n) => n.getTextContent() === text)
+            .selectEnd()
+        },
+        { discrete: true }
+      )
+      editor.dispatchCommand(KEY_TAB_COMMAND, { preventDefault: () => {}, shiftKey: false })
+    }
+    // Caret into top-level "b" and outdent it.
+    editor.update(
+      () => {
+        $getRoot()
+          .getAllTextNodes()
+          .find((n) => n.getTextContent() === "b")
+          .selectEnd()
+      },
+      { discrete: true }
+    )
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {},
+      shiftKey: true
+    })
+    expect(handled).toBe(true)
+
+    editor.read(() => {
+      const root = $getRoot()
+      const lists = root.getChildren().filter($isListNode)
+      const trailing = lists[lists.length - 1]
+      // The naive start (b.value + 1 - 2 promoted children = 0) would render "0.".
+      // Clamped to 1 → b1=1, b2=2, c=3 (sequential, all positive).
+      expect(trailing.getStart()).toBeGreaterThanOrEqual(1)
+      const values = trailing
+        .getChildren()
+        .filter((li) => $isListItemNode(li) && !$isListNode(li.getFirstChild()))
+        .map((li) => li.getValue())
+      expect(values).toEqual([1, 2, 3])
+      expect(values.every((v) => v >= 1)).toBe(true)
+    })
+  })
+
+  it("ignores Tab outside a list (returns false, no preventDefault)", () => {
+    const editor = buildListEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const p = $createParagraphNode()
+        p.append($createTextNode("plain"))
+        root.append(p)
+        p.selectEnd()
+      },
+      { discrete: true }
+    )
+
+    let prevented = false
+    const handled = editor.dispatchCommand(KEY_TAB_COMMAND, {
+      preventDefault: () => {
+        prevented = true
+      },
+      shiftKey: false
+    })
+    expect(handled).toBe(false)
+    expect(prevented).toBe(false)
+  })
+})