collavre 0.22.0 → 0.23.0

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

@@ -0,0 +1,88 @@
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection
+} from "lexical"
+import { registerRichText } from "@lexical/rich-text"
+import {
+  isSelectionAtDocumentStart,
+  isSelectionAtDocumentEnd
+} from "../selection_boundary"
+
+function buildEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    onError(error) {
+      throw error
+    }
+  })
+  registerRichText(editor)
+  return editor
+}
+
+// Builds a document with the given lines (one paragraph per line) and places a
+// collapsed cursor in the requested paragraph at the requested offset.
+function setup(lines, { paragraphIndex, offset }) {
+  const editor = buildEditor()
+  let result = null
+  editor.update(
+    () => {
+      const root = $getRoot()
+      root.clear()
+      const textNodes = lines.map((line) => {
+        const p = $createParagraphNode()
+        const t = $createTextNode(line)
+        p.append(t)
+        root.append(p)
+        return t
+      })
+      const target = textNodes[paragraphIndex]
+      target.select(offset, offset)
+    },
+    { discrete: true }
+  )
+  editor.getEditorState().read(() => {
+    const selection = $getSelection()
+    result = {
+      atStart: isSelectionAtDocumentStart(selection),
+      atEnd: isSelectionAtDocumentEnd(selection)
+    }
+  })
+  return result
+}
+
+describe("selection boundary helpers", () => {
+  it("treats cursor at the very start of the first line as document start", () => {
+    const r = setup(["line1", "line2"], { paragraphIndex: 0, offset: 0 })
+    expect(r.atStart).toBe(true)
+  })
+
+  it("does NOT treat start of the second paragraph as document start", () => {
+    // This is the bug: after Enter, the cursor sits at offset 0 of a new
+    // paragraph. ArrowUp must move the cursor up, not jump to the row above.
+    const r = setup(["line1", "line2"], { paragraphIndex: 1, offset: 0 })
+    expect(r.atStart).toBe(false)
+  })
+
+  it("does NOT treat mid-text cursor as document start", () => {
+    const r = setup(["line1"], { paragraphIndex: 0, offset: 2 })
+    expect(r.atStart).toBe(false)
+  })
+
+  it("treats cursor at the very end of the last line as document end", () => {
+    const r = setup(["line1", "line2"], { paragraphIndex: 1, offset: 5 })
+    expect(r.atEnd).toBe(true)
+  })
+
+  it("does NOT treat end of the first paragraph as document end", () => {
+    const r = setup(["line1", "line2"], { paragraphIndex: 0, offset: 5 })
+    expect(r.atEnd).toBe(false)
+  })
+
+  it("does NOT treat mid-text cursor as document end", () => {
+    const r = setup(["line1"], { paragraphIndex: 0, offset: 2 })
+    expect(r.atEnd).toBe(false)
+  })
+})

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

@@ -0,0 +1,163 @@
+import { createEditor, $getRoot, $createParagraphNode, $createTextNode } from "lexical"
+import { $convertFromMarkdownString, $convertToMarkdownString } from "@lexical/markdown"
+import {
+  TableNode,
+  TableRowNode,
+  TableCellNode,
+  $createTableNode,
+  $createTableRowNode,
+  $createTableCellNode,
+  TableCellHeaderStates
+} from "@lexical/table"
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { ListNode, ListItemNode } from "@lexical/list"
+import { LinkNode } from "@lexical/link"
+import { CodeNode, CodeHighlightNode } from "@lexical/code"
+import { MARKDOWN_TRANSFORMERS } from "../markdown_serialize"
+
+// Drives a headless editor through markdown -> Lexical -> markdown so the TABLE
+// transformer's import (replace) and export paths are exercised together.
+function makeEditor() {
+  return createEditor({
+    namespace: "table-test",
+    onError(error) {
+      throw error
+    },
+    nodes: [
+      HeadingNode,
+      QuoteNode,
+      ListNode,
+      ListItemNode,
+      LinkNode,
+      CodeNode,
+      CodeHighlightNode,
+      TableNode,
+      TableRowNode,
+      TableCellNode
+    ]
+  })
+}
+
+function roundTrip(markdown) {
+  const editor = makeEditor()
+  editor.update(
+    () => {
+      $convertFromMarkdownString(markdown, MARKDOWN_TRANSFORMERS)
+    },
+    { discrete: true }
+  )
+  let result = ""
+  editor.getEditorState().read(() => {
+    result = $convertToMarkdownString(MARKDOWN_TRANSFORMERS)
+  })
+  return result
+}
+
+// Build a 1x1 table whose only cell holds the given literal text, export it to
+// markdown, then re-import and read the cell back — i.e. a true save -> reopen
+// cycle that never assumes how the text is escaped on the wire.
+function saveReopenCellText(cellText) {
+  const writer = makeEditor()
+  let markdown = ""
+  writer.update(
+    () => {
+      const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS)
+      cell.append($createParagraphNode().append($createTextNode(cellText)))
+      const table = $createTableNode()
+      table.append($createTableRowNode().append(cell))
+      $getRoot().append(table)
+    },
+    { discrete: true }
+  )
+  writer.getEditorState().read(() => {
+    markdown = $convertToMarkdownString(MARKDOWN_TRANSFORMERS)
+  })
+
+  const reader = makeEditor()
+  reader.update(
+    () => {
+      $convertFromMarkdownString(markdown, MARKDOWN_TRANSFORMERS)
+    },
+    { discrete: true }
+  )
+  let text = null
+  reader.getEditorState().read(() => {
+    const table = $getRoot()
+      .getChildren()
+      .find((n) => n.getType() === "table")
+    text = table ? table.getFirstChild().getFirstChild().getTextContent() : null
+  })
+  return text
+}
+
+describe("TABLE markdown transformer", () => {
+  it("round-trips a header + body table", () => {
+    const md = "| Name | Age |\n| --- | --- |\n| Ada | 36 |\n| Linus | 54 |"
+    const out = roundTrip(md)
+    expect(out).toContain("| Name | Age |")
+    expect(out).toContain("| --- | --- |")
+    expect(out).toContain("| Ada | 36 |")
+    expect(out).toContain("| Linus | 54 |")
+  })
+
+  it("round-trips a table with an empty cell", () => {
+    const md = "| A | B |\n| --- | --- |\n|  | y |"
+    const out = roundTrip(md)
+    expect(out).toContain("| A | B |")
+    expect(out).toContain("|  | y |")
+  })
+
+  it("preserves inline formatting inside cells", () => {
+    const md = "| H |\n| --- |\n| **bold** |"
+    expect(roundTrip(md)).toContain("**bold**")
+  })
+
+  it("leaves a non-table paragraph untouched", () => {
+    const md = "Just a sentence."
+    expect(roundTrip(md).trim()).toBe("Just a sentence.")
+  })
+
+  it("treats an alignment divider (leading/trailing colons) as a header", () => {
+    const md = "| L | R |\n| :--- | ---: |\n| a | b |"
+    const out = roundTrip(md)
+    // A divider row promotes the prior row to a header, which re-exports as "---".
+    expect(out).toContain("| L | R |")
+    expect(out).toContain("| --- | --- |")
+    expect(out).toContain("| a | b |")
+  })
+
+  it("preserves a literal pipe typed inside a cell", () => {
+    // A user types "a|b" into a cell. Without escaping, export emits an
+    // unescaped pipe which GFM re-parses as an extra column on the next render.
+    const md = "| H1 | H2 |\n| --- | --- |\n| a\\|b | ok |"
+    const out = roundTrip(md)
+    expect(out).toContain("| a\\|b | ok |")
+  })
+
+  it("save->reopen preserves a literal backslash-n (not a newline) in a cell", () => {
+    // "a\nb" is the literal chars a, backslash, n, b (e.g. a regex or path), NOT
+    // a newline. A prior bug decoded the backslash-n into a real newline, splitting
+    // the cell (CodeQL #42). The escape must be complete (CodeQL #43, backslash).
+    expect(saveReopenCellText("a\\nb")).toBe("a\\nb")
+  })
+
+  it("save->reopen preserves a literal backslash in a cell", () => {
+    expect(saveReopenCellText("C:\\path")).toBe("C:\\path")
+  })
+
+  it("save->reopen preserves a backslash directly before a pipe in a cell", () => {
+    // The adversarial case for incomplete escaping: a backslash adjacent to the
+    // pipe that gets escaped. Both must survive intact.
+    expect(saveReopenCellText("a\\|b")).toBe("a\\|b")
+  })
+
+  it("does not hang on a pathological colon/pipe row (ReDoS guard)", () => {
+    // Before the -+ fix, the divider regex backtracked exponentially on rows of
+    // alternating colons and pipes. This must complete effectively instantly.
+    const evil = "|" + Array(40).fill(":").join("|") + "|x"
+    const start = process.hrtime.bigint()
+    roundTrip(evil)
+    const ms = Number(process.hrtime.bigint() - start) / 1e6
+    expect(ms).toBeLessThan(1000)
+  })
+})

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

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode,
+  $applyNodeReplacement,
+  DecoratorNode,
+} from "lexical"
+import { ensureTrailingParagraph, registerTrailingParagraph } from "../trailing_paragraph"
+
+// Stand-in for the production image/video/attachment nodes (those are .jsx and
+// can't be imported here). Only the graph-relevant shape matters: a "image"
+// DecoratorNode that is NOT inline, exactly like image_node.jsx.
+class TestImageNode extends DecoratorNode {
+  __src
+  static getType() { return "image" }
+  static clone(n) { return new TestImageNode(n.__src, n.__key) }
+  static importJSON() { return $createImage("") }
+  constructor(src = "", key) { super(key); this.__src = src }
+  createDOM() { return document.createElement("span") }
+  updateDOM() { return false }
+  decorate() { return null }
+}
+function $createImage(src) { return $applyNodeReplacement(new TestImageNode(src)) }
+
+function newEditor() {
+  return createEditor({ namespace: "t", nodes: [TestImageNode], onError: (e) => { throw e } })
+}
+
+function rootTypes(editor) {
+  let types = []
+  editor.getEditorState().read(() => {
+    types = $getRoot().getChildren().map((c) => c.getType())
+  })
+  return types
+}
+
+describe("ensureTrailingParagraph (pure helper)", () => {
+  test("appends a paragraph when the last root child is a decorator", () => {
+    const editor = newEditor()
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      const p = $createParagraphNode()
+      p.append($createTextNode("hello"))
+      root.append(p, $createImage("https://lipcoding.kr/x.png"))
+      ensureTrailingParagraph(root)
+    }, { discrete: true })
+    expect(rootTypes(editor)).toEqual(["paragraph", "image", "paragraph"])
+  })
+
+  test("image-only content becomes editable (image + trailing paragraph)", () => {
+    const editor = newEditor()
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      root.append($createImage("https://lipcoding.kr/x.png"))
+      ensureTrailingParagraph(root)
+    }, { discrete: true })
+    expect(rootTypes(editor)).toEqual(["image", "paragraph"])
+  })
+
+  test("no-op when the last child is already a paragraph", () => {
+    const editor = newEditor()
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      root.append($createImage("a"), $createParagraphNode())
+      ensureTrailingParagraph(root)
+    }, { discrete: true })
+    expect(rootTypes(editor)).toEqual(["image", "paragraph"])
+  })
+})
+
+describe("registerTrailingParagraph (RootNode transform)", () => {
+  test("fires on update: trailing image gets a paragraph appended automatically", () => {
+    const editor = newEditor()
+    registerTrailingParagraph(editor)
+    // Simulate editing that leaves an image as the last block.
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      const p = $createParagraphNode()
+      p.append($createTextNode("hello"))
+      root.append(p, $createImage("https://lipcoding.kr/x.png"))
+    }, { discrete: true })
+    expect(rootTypes(editor)).toEqual(["paragraph", "image", "paragraph"])
+  })
+
+  test("terminates (does not append unboundedly)", () => {
+    const editor = newEditor()
+    registerTrailingParagraph(editor)
+    editor.update(() => {
+      const root = $getRoot()
+      root.clear()
+      root.append($createImage("a"))
+    }, { discrete: true })
+    // exactly one trailing paragraph, not many
+    expect(rootTypes(editor)).toEqual(["image", "paragraph"])
+  })
+})

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

@@ -0,0 +1,210 @@
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  INDENT_CONTENT_COMMAND,
+  KEY_TAB_COMMAND,
+  OUTDENT_CONTENT_COMMAND
+} from "lexical"
+import { $createListNode, $isListItemNode, $isListNode } from "@lexical/list"
+
+/**
+ * Tab / Shift+Tab indentation scoped to list items.
+ *
+ * Inside a list, Tab nests the current item (INDENT_CONTENT_COMMAND).
+ * Shift+Tab un-nests it (OUTDENT_CONTENT_COMMAND) when the item is nested;
+ * @lexical/list turns those indent changes into real nested <ul>/<ol> structure.
+ *
+ * At the OUTERMOST level OUTDENT_CONTENT_COMMAND is a no-op (there is no shallower
+ * indent to drop to), so Shift+Tab on a top-level item would do nothing. Other
+ * editors instead remove the list formatting for that item — the item leaves the
+ * list and becomes a normal paragraph. We replicate that here so Shift+Tab always
+ * has a visible, expected effect.
+ *
+ * Outside a list the command is ignored (returns false) so Tab keeps its default
+ * behaviour (moving focus out of the editor) and plain paragraphs never gain an
+ * indent the Markdown-canonical store can't represent cleanly.
+ *
+ * Returns the editor.registerCommand teardown so callers can clean up.
+ */
+export function registerListTabIndentation(editor) {
+  return editor.registerCommand(
+    KEY_TAB_COMMAND,
+    (event) => {
+      const selection = $getSelection()
+      if (!$isRangeSelection(selection)) return false
+      const listItem = $findListItemAncestor(selection)
+      if (!listItem) return false
+
+      event.preventDefault()
+
+      if (event.shiftKey) {
+        // Top-level item: drop out of the list entirely (other editors' behaviour),
+        // because OUTDENT has nothing shallower to move to. Nested item: un-nest one
+        // level via OUTDENT, which @lexical/list collapses back into flat structure.
+        if ($isTopLevelListItem(listItem)) {
+          // A selection can span several top-level items; un-list each so multi-item
+          // Shift+Tab matches the range-aware OUTDENT path instead of only dropping
+          // the anchor's item. Collect the items up front (converting one mutates the
+          // tree) and convert in document order — each conversion splits the list and
+          // leaves the next selected item at the head of the trailing list, so the
+          // result is clean sequential paragraphs.
+          $selectedTopLevelListItems(selection, listItem).forEach(
+            $convertListItemToParagraph
+          )
+          return true
+        }
+        return editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)
+      }
+
+      return editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)
+    },
+    COMMAND_PRIORITY_LOW
+  )
+}
+
+// A list item that exists only to hold a nested list (its first/only child is a
+// ListNode). @lexical/list uses this wrapper to represent indentation.
+function $isNestedListItemWrapper(node) {
+  return $isListItemNode(node) && $isListNode(node.getFirstChild())
+}
+
+function $findListItemAncestor(selection) {
+  const anchorNode = selection.anchor.getNode()
+  if ($isListItemNode(anchorNode)) return anchorNode
+  return anchorNode.getParents().find($isListItemNode) || null
+}
+
+// The distinct top-level list items the selection touches, in document order.
+// getNodes() returns the range's nodes in document order; we map each to its
+// owning list item and keep only top-level, non-wrapper ones (nested items go
+// through OUTDENT instead). Falls back to the anchor item when the range yields
+// nothing useful (e.g. a collapsed selection on an empty item).
+function $selectedTopLevelListItems(selection, fallbackItem) {
+  const seen = new Set()
+  const items = []
+  selection.getNodes().forEach((node) => {
+    const listItem = $isListItemNode(node)
+      ? node
+      : node.getParents().find($isListItemNode)
+    if (!listItem || seen.has(listItem.getKey())) return
+    if (!$isTopLevelListItem(listItem) || $isNestedListItemWrapper(listItem)) return
+    seen.add(listItem.getKey())
+    items.push(listItem)
+  })
+  if (items.length === 0 && fallbackItem) items.push(fallbackItem)
+  return items
+}
+
+// A list item is "top level" when its parent list is not nested inside another
+// list item. This holds both at the document root and inside a blockquote (where
+// the list's parent is the QuoteNode, not the root) — in both cases OUTDENT has
+// nothing shallower to drop to, so the item should leave the list instead.
+function $isTopLevelListItem(listItem) {
+  const parentList = listItem.getParent()
+  if (!$isListNode(parentList)) return false
+  return !$isListItemNode(parentList.getParent())
+}
+
+// Remove a single top-level list item from its list, turning it into a paragraph
+// in the same position. Items before it stay in the original list; items after it
+// move into a fresh trailing list so the surrounding list is split, not flattened.
+function $convertListItemToParagraph(listItem) {
+  const parentList = listItem.getParent()
+  if (!$isListNode(parentList)) return
+
+  const following = listItem.getNextSiblings()
+  // An item can hold both inline content (text) and a nested child list. Only the
+  // inline content belongs in the paragraph — a nested ListNode inside a paragraph
+  // is invalid block structure, so it is promoted to a sibling list block instead.
+  const children = listItem.getChildren()
+  const nestedLists = children.filter($isListNode)
+  const inlineChildren = children.filter((child) => !$isListNode(child))
+  const paragraph = $createParagraphNode()
+
+  parentList.insertAfter(paragraph)
+
+  // Keep block order: paragraph, then any promoted nested lists, then the split-off
+  // trailing items, by chaining insertAfter off the previously inserted block.
+  let anchor = paragraph
+  nestedLists.forEach((nestedList) => {
+    anchor.insertAfter(nestedList)
+    anchor = nestedList
+  })
+
+  if (following.length > 0) {
+    const listType = parentList.getListType()
+    // @lexical/list stores a nested child list as a *wrapper* list item (its only
+    // child is a ListNode) placed right after the parent item. The leading run of
+    // such wrappers are the removed item's own children: promote each wrapper's
+    // inner ListNode up one level as its own block, then drop the emptied wrapper.
+    // Moving the whole ListNode (not just its items) preserves the child list's own
+    // marker type — a bullet child of a numbered parent must stay a bullet list, not
+    // get renumbered. Promoting items rather than the wrapper also empties parentList
+    // so the cleanup below can remove it, avoiding an orphan <li><ul>. Once a real
+    // item appears the run ends; later wrappers belong to it and must stay nested.
+    let promotingChildren = true
+    const trailingItems = []
+    following.forEach((sibling) => {
+      if (promotingChildren && $isNestedListItemWrapper(sibling)) {
+        const childList = sibling.getFirstChild()
+        anchor.insertAfter(childList)
+        anchor = childList
+        sibling.remove()
+      } else {
+        promotingChildren = false
+        trailingItems.push(sibling)
+      }
+    })
+    if (trailingItems.length > 0) {
+      // For ordered lists the trailing items must keep their original numbers
+      // (e.g. "1. a / 2. b / 3. c" → outdent b → c stays 3, not restart at 1).
+      //
+      // When a same-type list was promoted directly before these items (the removed
+      // item's own ordered child list), Lexical's ListNode transform merges the two
+      // adjacent same-type lists and keeps the *first* list's start — a separate
+      // trailing list's start would be silently discarded. So append the trailing
+      // items into that promoted list instead and set its start so the first trailing
+      // item lands on its original value, with the promoted children filling the slots
+      // leading up to it ("1. a / 2. b / [1.] b1 / 3. c" → outdent b → "2. b1 / 3. c").
+      const mergesWithPromoted =
+        $isListNode(anchor) && anchor.getListType() === listType
+      if (mergesWithPromoted) {
+        if (listType === "number") {
+          // Count real items already in the promoted list (nested wrappers don't
+          // advance numbering) so the first trailing item keeps its original value.
+          const promotedItems = anchor
+            .getChildren()
+            .filter((child) => !$isNestedListItemWrapper(child)).length
+          // Clamp to 1: when more children are promoted than the removed item's
+          // value frees up (e.g. "1. b" with children b1, b2 → 1 + 1 - 2 = 0),
+          // a 0/negative start would render literally as "0."/"-1.". Falling back
+          // to 1 just renumbers the merged list sequentially from the top.
+          anchor.setStart(Math.max(1, listItem.getValue() + 1 - promotedItems))
+        }
+        trailingItems.forEach((sibling) => anchor.append(sibling))
+      } else {
+        const trailingStart =
+          listType === "number" ? listItem.getValue() + 1 : undefined
+        const trailingList = $createListNode(listType, trailingStart)
+        trailingItems.forEach((sibling) => trailingList.append(sibling))
+        anchor.insertAfter(trailingList)
+      }
+    }
+  }
+
+  if (inlineChildren.length > 0) {
+    // Moving the existing nodes (not cloning) keeps any caret pointing into them
+    // valid, so the cursor stays where the user was typing.
+    inlineChildren.forEach((child) => paragraph.append(child))
+  } else {
+    paragraph.select()
+  }
+
+  listItem.remove()
+
+  if (parentList.getChildrenSize() === 0) {
+    parentList.remove()
+  }
+}