collavre 0.22.0 → 0.24.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/code_block_toggle.js

@@ -0,0 +1,130 @@
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getSelection,
+  $isDecoratorNode,
+  $isRangeSelection
+} from "lexical"
+import { $createCodeNode, $isCodeNode } from "@lexical/code"
+import { $isTableNode } from "@lexical/table"
+import { $isListNode } from "@lexical/list"
+
+/**
+ * Toggle the current selection between a code block and normal paragraphs.
+ *
+ * Must be called inside an editor.update() callback.
+ *
+ * Selecting several blocks and hitting the code-block button merges ALL of them
+ * into a single code block (one line per source block), instead of only the
+ * anchor block — the old single-node behaviour dropped every line but the last.
+ *
+ * When every selected top-level block is already a code block the toggle runs in
+ * reverse: each code block is expanded back into one paragraph per line.
+ * Text blocks (headings, quotes, paragraphs) are absorbed as plain text; tables,
+ * media, and lists are structural and left in place (see $isMergeableTextBlock).
+ */
+export function $toggleCodeBlockForSelection() {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection)) return
+
+  const topLevels = $selectedTopLevelBlocks(selection)
+  if (topLevels.length === 0) return
+
+  // All selected blocks are code → toggle OFF (expand each back to paragraphs).
+  if (topLevels.every($isCodeNode)) {
+    let lastParagraph = null
+    topLevels.forEach((codeNode) => {
+      lastParagraph = $expandCodeNodeToParagraphs(codeNode)
+    })
+    // The code nodes the selection referenced are gone; move the caret to the
+    // end of the expanded text so Lexical keeps a valid selection.
+    if (lastParagraph) lastParagraph.selectEnd()
+    return
+  }
+
+  // Otherwise → fold the selected TEXT blocks into code blocks. Tables and media
+  // (image/video/attachment DecoratorNodes) are structural: their text content is
+  // empty or a flattening of tabular data, so absorbing them would silently
+  // destroy the table/media. They are left in place, which SPLITS the selection:
+  // merging text from both sides of a structural block into one code block would
+  // pull later content across the block and corrupt document order. So each
+  // contiguous run of text blocks becomes its own code block, structural blocks
+  // untouched in between (matches the old paragraph-only guard, widened to
+  // headings/quotes/lists but not across structural containers).
+  let run = []
+  let lastCode = null
+  const flushRun = () => {
+    if (run.length === 0) return
+    const content = run.map((node) => node.getTextContent()).join("\n")
+    const codeNode = $createCodeNode()
+    codeNode.append($createTextNode(content))
+    run[0].replace(codeNode)
+    for (let index = 1; index < run.length; index += 1) run[index].remove()
+    lastCode = codeNode
+    run = []
+  }
+  topLevels.forEach((node) => {
+    if ($isMergeableTextBlock(node)) run.push(node)
+    else flushRun()
+  })
+  flushRun()
+  if (lastCode) lastCode.selectEnd()
+}
+
+// A block can be folded into a code block only if its text content faithfully
+// represents it. Tables (tabular structure) and decorator media (no text) do
+// not, so they are excluded from the merge to avoid destroying content.
+function $isMergeableTextBlock(node) {
+  if ($isTableNode(node) || $isDecoratorNode(node)) return false
+  // A ListNode is the top-level element for every bullet, so selecting text in
+  // ONE bullet top-levels to the whole list. Merging it would flatten every
+  // sibling bullet (via getTextContent()) and replace the entire list — losing
+  // unselected bullets. Item-granular folding (split the list, keep the rest) is
+  // out of scope here, so lists are treated as structural and left in place;
+  // convert a list to code via a ``` fence instead.
+  if ($isListNode(node)) return false
+  // TableCellNode is a shadow root, so getTopLevelElement() on cell content
+  // returns the cell's own paragraph — a plain block that slips past the
+  // $isTableNode check above. Merging that cell block with document-root blocks
+  // moves content across the table boundary (relocating outside text into a
+  // cell, or replacing the cell body). Never merge table-scoped blocks.
+  if (node.getParents().some($isTableNode)) return false
+  return true
+}
+
+// Distinct top-level blocks the selection touches, in document order. getNodes()
+// returns the range's nodes in document order; each maps to its owning top-level
+// element. Falls back to the anchor's block for a collapsed selection.
+function $selectedTopLevelBlocks(selection) {
+  const seen = new Set()
+  const blocks = []
+  selection.getNodes().forEach((node) => {
+    const topLevel = node.getTopLevelElement()
+    if (!topLevel || seen.has(topLevel.getKey())) return
+    seen.add(topLevel.getKey())
+    blocks.push(topLevel)
+  })
+  if (blocks.length === 0) {
+    const anchorTop = selection.anchor.getNode().getTopLevelElement()
+    if (anchorTop) blocks.push(anchorTop)
+  }
+  return blocks
+}
+
+// Replace a code block with one paragraph per line, preserving order. Returns
+// the last paragraph so the caller can restore a valid selection (the code
+// node the selection pointed at is gone once we replace it).
+function $expandCodeNodeToParagraphs(codeNode) {
+  const lines = codeNode.getTextContent().split("\n")
+  const firstParagraph = $createParagraphNode()
+  firstParagraph.append($createTextNode(lines[0] || ""))
+  codeNode.replace(firstParagraph)
+  let previous = firstParagraph
+  for (let index = 1; index < lines.length; index += 1) {
+    const paragraph = $createParagraphNode()
+    paragraph.append($createTextNode(lines[index]))
+    previous.insertAfter(paragraph)
+    previous = paragraph
+  }
+  return previous
+}

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

@@ -0,0 +1,60 @@
+import {
+  $getSelection,
+  $isRangeSelection,
+  $isParagraphNode,
+  KEY_ENTER_COMMAND,
+  COMMAND_PRIORITY_HIGH
+} from "lexical"
+import { $createCodeNode } from "@lexical/code"
+import { markLanguageResolved } from "../editor/code_languages"
+
+// A paragraph whose entire text is a Markdown fence opener: three backticks,
+// optionally followed by a language token (e.g. ```ruby). Nothing may follow
+// the language, so normal prose that merely contains backticks is untouched.
+const FENCE_REGEX = /^```([\w+-]*)$/
+
+/**
+ * Open a code block when the user presses Enter on a "```" (optionally
+ * "```lang") line. The built-in @lexical/markdown CODE transformer only fires on
+ * "``` " + a trailing space, so Enter after the fence (what users actually do)
+ * left the paragraph as plain text; this adds the Enter path.
+ *
+ * Enter is used deliberately rather than reacting to the fence text itself:
+ * converting the moment the third backtick lands would swallow "```json" before
+ * the language could be typed. Conversion must wait for the delimiter — a space
+ * (handled by the built-in transformer) or Enter (handled here) — so whatever
+ * language the user typed between the fence and the delimiter is captured.
+ *
+ * Returns the editor.registerCommand teardown so callers can clean up.
+ */
+export function registerCodeFenceShortcut(editor) {
+  return editor.registerCommand(
+    KEY_ENTER_COMMAND,
+    (event) => {
+      // Shift+Enter is a soft newline within a block, never a fence commit.
+      if (event?.shiftKey) return false
+
+      const selection = $getSelection()
+      if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false
+
+      const paragraph = selection.anchor.getNode().getTopLevelElement()
+      if (!$isParagraphNode(paragraph)) return false
+
+      const match = paragraph.getTextContent().match(FENCE_REGEX)
+      if (!match) return false
+
+      // Swallow the newline Enter would otherwise insert; replace the fence line.
+      event?.preventDefault()
+      const language = match[1] || undefined
+      const codeNode = $createCodeNode(language)
+      paragraph.replace(codeNode)
+      // An explicit fence language must survive the highlight transform, which
+      // otherwise re-detects any block still on the "javascript" default and would
+      // silently relabel a deliberate ```javascript. Mirror the import path.
+      if (language) markLanguageResolved(editor, codeNode.getKey())
+      codeNode.selectStart()
+      return true
+    },
+    COMMAND_PRIORITY_HIGH
+  )
+}