collavre 0.22.0 → 0.24.0

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

@@ -0,0 +1,179 @@
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode,
+  $createRangeSelection,
+  $setSelection,
+  KEY_ENTER_COMMAND
+} from "lexical"
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text"
+import { CodeNode, CodeHighlightNode, $isCodeNode } from "@lexical/code"
+import { registerCodeFenceShortcut } from "../code_fence_shortcut"
+import { isLanguageResolved } from "../../editor/code_languages"
+
+function buildEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    onError(error) {
+      throw error
+    },
+    nodes: [HeadingNode, QuoteNode, CodeNode, CodeHighlightNode]
+  })
+  registerRichText(editor)
+  registerCodeFenceShortcut(editor)
+  return editor
+}
+
+// Put `text` into a fresh paragraph with the caret at its end — the state right
+// before the user presses Enter. This does NOT convert on its own; conversion is
+// the Enter keystroke, so the language token can be typed first.
+function setFenceLine(editor, text) {
+  editor.update(
+    () => {
+      const root = $getRoot()
+      root.clear()
+      const paragraph = $createParagraphNode()
+      const textNode = $createTextNode(text)
+      paragraph.append(textNode)
+      root.append(paragraph)
+      const selection = $createRangeSelection()
+      selection.anchor.set(textNode.getKey(), text.length, "text")
+      selection.focus.set(textNode.getKey(), text.length, "text")
+      $setSelection(selection)
+    },
+    { discrete: true }
+  )
+}
+
+// Dispatch a bare Enter (the fence-commit keystroke). Returns nothing; read the
+// editor state afterwards to assert the outcome.
+function pressEnter(editor, { shiftKey = false } = {}) {
+  editor.dispatchCommand(KEY_ENTER_COMMAND, {
+    shiftKey,
+    preventDefault() {}
+  })
+}
+
+describe("registerCodeFenceShortcut", () => {
+  it("does not convert until Enter — so ```lang can be typed first", () => {
+    const editor = buildEditor()
+    // The fence line is present with the caret at its end, but no Enter yet.
+    setFenceLine(editor, "```")
+    editor.read(() => {
+      expect($isCodeNode($getRoot().getFirstChild())).toBe(false)
+    })
+
+    // Extending the fence with a language must not have converted it either.
+    setFenceLine(editor, "```json")
+    editor.read(() => {
+      expect($isCodeNode($getRoot().getFirstChild())).toBe(false)
+    })
+  })
+
+  it("converts a bare ``` fence into an empty code block on Enter", () => {
+    const editor = buildEditor()
+    setFenceLine(editor, "```")
+    pressEnter(editor)
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children).toHaveLength(1)
+      expect($isCodeNode(children[0])).toBe(true)
+      expect(children[0].getTextContent()).toBe("")
+      expect(children[0].getLanguage()).toBeFalsy()
+    })
+  })
+
+  it("carries the language token from ```json on Enter", () => {
+    const editor = buildEditor()
+    setFenceLine(editor, "```json")
+    pressEnter(editor)
+
+    editor.read(() => {
+      const codeNode = $getRoot().getFirstChild()
+      expect($isCodeNode(codeNode)).toBe(true)
+      expect(codeNode.getLanguage()).toBe("json")
+    })
+  })
+
+  it("marks an explicit fence language resolved so highlighting won't relabel it", () => {
+    const editor = buildEditor()
+    // ```javascript is ambiguous with the tokenizer's baked default; without the
+    // resolved marker the detect transform would re-detect and could relabel it.
+    setFenceLine(editor, "```javascript")
+    pressEnter(editor)
+
+    let key
+    editor.read(() => {
+      const codeNode = $getRoot().getFirstChild()
+      expect($isCodeNode(codeNode)).toBe(true)
+      expect(codeNode.getLanguage()).toBe("javascript")
+      key = codeNode.getKey()
+    })
+    expect(isLanguageResolved(editor, key)).toBe(true)
+  })
+
+  it("does not mark a bare ``` fence resolved", () => {
+    const editor = buildEditor()
+    setFenceLine(editor, "```")
+    pressEnter(editor)
+
+    let key
+    editor.read(() => {
+      key = $getRoot().getFirstChild().getKey()
+    })
+    expect(isLanguageResolved(editor, key)).toBe(false)
+  })
+
+  it("leaves Shift+Enter as a soft newline, not a fence commit", () => {
+    const editor = buildEditor()
+    setFenceLine(editor, "```")
+    pressEnter(editor, { shiftKey: true })
+
+    editor.read(() => {
+      expect($isCodeNode($getRoot().getFirstChild())).toBe(false)
+    })
+  })
+
+  it("leaves prose that merely contains backticks untouched on Enter", () => {
+    const editor = buildEditor()
+    setFenceLine(editor, "run ```code``` inline")
+    pressEnter(editor)
+
+    editor.read(() => {
+      const child = $getRoot().getFirstChild()
+      expect($isCodeNode(child)).toBe(false)
+      expect(child.getTextContent()).toBe("run ```code``` inline")
+    })
+  })
+
+  it("does not convert a ``` paragraph when the caret is elsewhere", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const fence = $createParagraphNode()
+        fence.append($createTextNode("```"))
+        root.append(fence)
+        const other = $createParagraphNode()
+        const otherText = $createTextNode("elsewhere")
+        other.append(otherText)
+        root.append(other)
+        // Caret sits in the OTHER paragraph, not the fence line.
+        const selection = $createRangeSelection()
+        selection.anchor.set(otherText.getKey(), 1, "text")
+        selection.focus.set(otherText.getKey(), 1, "text")
+        $setSelection(selection)
+      },
+      { discrete: true }
+    )
+    pressEnter(editor)
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children.some($isCodeNode)).toBe(false)
+    })
+  })
+})

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

@@ -0,0 +1,139 @@
+/**
+ * @jest-environment jsdom
+ *
+ * Regression for "an external image steals editing focus": clicking into the
+ * text to edit while an image is present used to wipe the caret. ImageResizer
+ * registered a CLICK_COMMAND handler that called the node-selection hook's
+ * setSelected(false) on any click outside the image. That hook, when the live
+ * selection is NOT already a NodeSelection (i.e. it is the RangeSelection caret
+ * the click just placed), synthesizes a fresh empty NodeSelection and replaces
+ * the caret with it — so the editor lost its caret and became uneditable the
+ * instant you clicked to edit. The fix uses clearSelection(), which only acts on
+ * an existing NodeSelection and leaves a RangeSelection (the caret) intact.
+ *
+ * ImageResizer is a .jsx React component that can't be imported under this
+ * native-ESM jest config, so this test reconstructs the two deselect paths and
+ * the exact CLICK_COMMAND handler logic on a headless editor.
+ */
+import {
+  createEditor,
+  $getRoot,
+  $getSelection,
+  $isRangeSelection,
+  $isNodeSelection,
+  $createNodeSelection,
+  $setSelection,
+  $createParagraphNode,
+  $createTextNode,
+  $applyNodeReplacement,
+  DecoratorNode,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+} from "lexical"
+
+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)) }
+
+// Build: [image][paragraph "hello"] with the caret placed inside the text,
+// i.e. the state right after a user clicks into the paragraph to edit.
+function setup() {
+  const editor = createEditor({ namespace: "t", nodes: [TestImageNode], onError: (e) => { throw e } })
+  // jsdom: createEditor needs a root element to dispatch DOM-bound commands.
+  const el = document.createElement("div")
+  el.contentEditable = "true"
+  document.body.appendChild(el)
+  editor.setRootElement(el)
+  let imageKey
+  editor.update(() => {
+    const root = $getRoot()
+    root.clear()
+    root.append($createImage("https://lipcoding.kr/x.png"))
+    const p = $createParagraphNode()
+    p.append($createTextNode("hello"))
+    root.append(p)
+    imageKey = root.getFirstChild().getKey()
+  }, { discrete: true })
+  editor.update(() => {
+    $getRoot().getLastChild().getFirstChild().select(2, 2)
+  }, { discrete: true })
+  return { editor, imageKey }
+}
+
+function selKind(editor) {
+  let kind = "none"
+  editor.getEditorState().read(() => {
+    const s = $getSelection()
+    if ($isRangeSelection(s)) kind = "range"
+    else if ($isNodeSelection(s)) kind = "node"
+  })
+  return kind
+}
+
+// Mirror of the hook's setSelected(false): the OLD, destructive deselect path.
+function setSelectedFalse(editor, key) {
+  editor.update(() => {
+    let selection = $getSelection()
+    if (!$isNodeSelection(selection)) {
+      selection = $createNodeSelection()
+      $setSelection(selection)
+    }
+    if ($isNodeSelection(selection)) selection.delete(key)
+  }, { discrete: true })
+}
+
+// Mirror of the hook's clearSelection(): the safe deselect path the fix uses.
+function clearSelection(editor) {
+  editor.update(() => {
+    const selection = $getSelection()
+    if ($isNodeSelection(selection)) selection.clear()
+  }, { discrete: true })
+}
+
+describe("image editing focus", () => {
+  test("the old setSelected(false) deselect destroys the caret (documents the bug)", () => {
+    const { editor, imageKey } = setup()
+    expect(selKind(editor)).toBe("range")
+    setSelectedFalse(editor, imageKey)
+    expect(selKind(editor)).not.toBe("range") // caret lost — the reported bug
+  })
+
+  test("clearSelection() leaves the caret intact", () => {
+    const { editor } = setup()
+    expect(selKind(editor)).toBe("range")
+    clearSelection(editor)
+    expect(selKind(editor)).toBe("range")
+  })
+
+  test("CLICK_COMMAND outside the image keeps the caret (fixed handler)", () => {
+    const { editor } = setup()
+
+    // Stand-in for ImageResizer's container ref; the click target is text
+    // outside it, exactly like clicking into the paragraph to edit.
+    const container = document.createElement("span")
+    const outsideTarget = document.createElement("span")
+
+    editor.registerCommand(
+      CLICK_COMMAND,
+      (event) => {
+        if (container && !container.contains(event.target)) {
+          clearSelection(editor) // fixed path (was setSelected(false))
+        }
+        return false
+      },
+      COMMAND_PRIORITY_LOW
+    )
+
+    expect(selKind(editor)).toBe("range")
+    editor.dispatchCommand(CLICK_COMMAND, { target: outsideTarget })
+    expect(selKind(editor)).toBe("range") // caret survives the click
+  })
+})