collavre 0.22.0 → 0.24.0

data/app/javascript/lib/editor/code_languages.js

@@ -0,0 +1,173 @@
+// Shared code-language resolution for syntax highlighting.
+//
+// Both the Lexical editor (registerCodeHighlighting) and the rendered creative
+// view (lib/utils/markdown.js highlightCodeBlocks) tokenize code with the SAME
+// global Prism instance. @lexical/code only preloads a fixed grammar set and its
+// `loadCodeLanguage` is a no-op, so any language we want to highlight must be
+// registered on the shared `prismjs` singleton up front. The side-effect imports
+// below add the common languages @lexical/code omits (ruby, bash, json, yaml,
+// go, php); importing this module anywhere makes them available to BOTH surfaces.
+// `prismjs` core must load first — the component files mutate the global Prism.
+import "prismjs"
+import "prismjs/components/prism-ruby"
+import "prismjs/components/prism-bash"
+import "prismjs/components/prism-json"
+import "prismjs/components/prism-yaml"
+import "prismjs/components/prism-go"
+import "prismjs/components/prism-php"
+
+// A curated highlight.js instance used ONLY for language auto-detection (not for
+// rendering — rendering is Prism). A small, codebase-relevant subset keeps
+// `highlightAuto` from matching obscure languages (the full set mislabels plain
+// JS as "arcade"); detection accuracy comes from limiting the candidates.
+import hljs from "highlight.js/lib/core"
+import javascript from "highlight.js/lib/languages/javascript"
+import typescript from "highlight.js/lib/languages/typescript"
+import ruby from "highlight.js/lib/languages/ruby"
+import python from "highlight.js/lib/languages/python"
+import css from "highlight.js/lib/languages/css"
+import xml from "highlight.js/lib/languages/xml"
+import json from "highlight.js/lib/languages/json"
+import yaml from "highlight.js/lib/languages/yaml"
+import bash from "highlight.js/lib/languages/bash"
+import sql from "highlight.js/lib/languages/sql"
+import go from "highlight.js/lib/languages/go"
+import java from "highlight.js/lib/languages/java"
+
+const DETECT_LANGUAGES = {
+  javascript, typescript, ruby, python, css, xml, json, yaml, bash, sql, go, java
+}
+for (const [name, def] of Object.entries(DETECT_LANGUAGES)) {
+  if (!hljs.getLanguage(name)) hljs.registerLanguage(name, def)
+}
+const DETECT_SUBSET = Object.keys(DETECT_LANGUAGES)
+
+// @lexical/code's tokenizer default: an unlabeled or new code block tokenizes as
+// JavaScript. We treat that exact value (and an empty/missing language) as
+// "unconfirmed" — eligible for re-detection — while honoring any other explicit
+// fence language the user set.
+export const DEFAULT_CODE_LANGUAGE = "javascript"
+const RE_DETECTABLE = new Set(["", "javascript"])
+
+// Tracks which CodeNodes received their language from an EXPLICIT source label
+// (a fence ```ruby / ```javascript, a <pre lang>, a <code class="language-X">)
+// during import, keyed per editor by node key. Detection must skip these so an
+// explicit choice is never overridden by content auto-detection.
+//
+// This is the linchpin for honoring "javascript": @lexical/code bakes
+// "javascript" onto unlabeled/new code blocks (its tokenizer default), making
+// "javascript" ambiguous — it could be the baked default OR a deliberate
+// choice. The source label disambiguates them, but only at import time, before
+// baking. We capture that signal here so the post-bake detection transform can
+// tell "user wrote ```javascript" (honor) from "baked default" (re-detect).
+const importResolvedLanguages = new WeakMap()
+
+export function markLanguageResolved(editor, key) {
+  let keys = importResolvedLanguages.get(editor)
+  if (!keys) {
+    keys = new Set()
+    importResolvedLanguages.set(editor, keys)
+  }
+  keys.add(key)
+}
+
+export function isLanguageResolved(editor, key) {
+  const keys = importResolvedLanguages.get(editor)
+  return Boolean(keys && keys.has(key))
+}
+
+export function clearLanguageResolved(editor) {
+  importResolvedLanguages.delete(editor)
+}
+
+// Canonicalize fence aliases to the Prism grammar name. highlight.js uses a few
+// different names (xml↔markup, shell↔bash) so detection results are mapped too.
+const FENCE_ALIAS = {
+  rb: "ruby",
+  py: "python",
+  yml: "yaml",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  ts: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  tsx: "typescript",
+  html: "markup",
+  htm: "markup",
+  xml: "markup",
+  golang: "go"
+}
+
+export function normalizeFenceLang(lang) {
+  if (!lang) return ""
+  const l = String(lang).trim().toLowerCase()
+  if (!/^[\w+-]+$/.test(l)) return ""
+  return FENCE_ALIAS[l] || l
+}
+
+// Bridge an imported HTML fragment so @lexical/code's importer picks up the
+// fence language whichever renderer produced the HTML. @lexical/code's
+// $convertPreElement reads ONLY `data-language` on the <pre>, but the two
+// renderers that feed the editor encode the language differently:
+//   - commonmarker (server reopen):      <pre lang="ruby">…
+//   - marked / renderMarkdown (the       <pre><code class="language-ruby">…
+//     markdown→rich toggle in the editor)
+// Without this, the markdown→rich switch dropped the explicit fence language
+// (it lived on the <code>, not the <pre>), so the block fell back to content
+// detection / the javascript default — i.e. it reverted to the previous result.
+// We normalize either form onto `data-language`. Unlabeled blocks are left
+// alone for the content-detection transform to handle.
+export function bridgeCodeFenceLanguages(container) {
+  if (!container) return
+  container.querySelectorAll("pre:not([data-language])").forEach((pre) => {
+    let lang = normalizeFenceLang(pre.getAttribute("lang"))
+    if (!lang) {
+      const code = pre.querySelector('code[class*="language-"]')
+      const match = code && /(?:^|\s)language-([\w+-]+)/.exec(code.className || "")
+      if (match) lang = normalizeFenceLang(match[1])
+    }
+    if (lang) pre.setAttribute("data-language", lang)
+  })
+}
+
+// Minimum margin by which the detected language's relevance must beat plain
+// JavaScript's own relevance for the SAME text before we override the
+// JavaScript default. This keeps real JS as JS (margin 0) while confidently
+// switching Ruby/bash/yaml/python (margins 3–12).
+const DETECT_MARGIN = 3
+const MIN_DETECT_LENGTH = 12
+
+// Resolve the highlighting language for a code block.
+//   - An explicit, non-default fence language ("ruby", "python", …) is honored.
+//   - An unlabeled block, or one stuck on the "javascript" default, is
+//     re-detected from its content; we only switch away from JavaScript when
+//     detection is confident (see DETECT_MARGIN), otherwise the original value
+//     is kept. Returns "" for an unlabeled block we can't confidently detect
+//     (render as plaintext rather than forcing JavaScript).
+export function detectCodeLanguage(code, declared) {
+  const norm = normalizeFenceLang(declared)
+  if (norm && !RE_DETECTABLE.has(norm)) return norm
+
+  const text = (code || "").trim()
+  if (text.length < MIN_DETECT_LENGTH) return norm
+
+  let best
+  try {
+    best = hljs.highlightAuto(text, DETECT_SUBSET)
+  } catch (_e) {
+    return norm
+  }
+  if (!best || !best.language) return norm
+
+  const cand = FENCE_ALIAS[best.language] || best.language
+  if (cand === "javascript") return norm
+
+  let jsRelevance = 0
+  try {
+    jsRelevance = hljs.highlight(text, { language: "javascript" }).relevance
+  } catch (_e) {
+    jsRelevance = 0
+  }
+  return best.relevance - jsRelevance >= DETECT_MARGIN ? cand : norm
+}

data/app/javascript/lib/editor/code_token_theme.js

@@ -0,0 +1,41 @@
+// Prism token type → CSS class map for code-block syntax highlighting.
+//
+// Single source of truth shared by the Lexical editor
+// (components/InlineLexicalEditor.jsx, passed as theme.codeHighlight to
+// registerCodeHighlighting) and the rendered creative view
+// (lib/utils/markdown.js highlightCodeBlocks). Both tokenize code with the same
+// Prism instance and tag each token with these `lexical-token-*` classes, so
+// edit mode and rendered mode are colored identically by the shared
+// `.lexical-token-*` rules in actiontext.css. One map means the two surfaces
+// can never drift apart.
+export const CODE_TOKEN_THEME = {
+  atrule: "lexical-token-atrule",
+  attr: "lexical-token-attr",
+  boolean: "lexical-token-boolean",
+  builtin: "lexical-token-builtin",
+  cdata: "lexical-token-cdata",
+  char: "lexical-token-char",
+  class: "lexical-token-class",
+  comment: "lexical-token-comment",
+  constant: "lexical-token-constant",
+  deleted: "lexical-token-deleted",
+  doctype: "lexical-token-doctype",
+  entity: "lexical-token-entity",
+  function: "lexical-token-function",
+  important: "lexical-token-important",
+  inserted: "lexical-token-inserted",
+  keyword: "lexical-token-keyword",
+  namespace: "lexical-token-namespace",
+  number: "lexical-token-number",
+  operator: "lexical-token-operator",
+  prolog: "lexical-token-prolog",
+  property: "lexical-token-property",
+  punctuation: "lexical-token-punctuation",
+  regex: "lexical-token-regex",
+  selector: "lexical-token-selector",
+  string: "lexical-token-string",
+  symbol: "lexical-token-symbol",
+  tag: "lexical-token-tag",
+  url: "lexical-token-url",
+  variable: "lexical-token-variable"
+}

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

@@ -0,0 +1,326 @@
+import {
+  createEditor,
+  $getRoot,
+  $createParagraphNode,
+  $createTextNode,
+  $createRangeSelection,
+  $setSelection,
+  DecoratorNode
+} from "lexical"
+
+// Minimal top-level decorator (stands in for ImageNode/VideoNode/AttachmentNode)
+// so we can assert the toggle never removes media blocks. Its text content is
+// empty, exactly like real media nodes.
+class TestMediaNode extends DecoratorNode {
+  static getType() {
+    return "test-media"
+  }
+  static clone(node) {
+    return new TestMediaNode(node.__key)
+  }
+  createDOM() {
+    return document.createElement("div")
+  }
+  updateDOM() {
+    return false
+  }
+  decorate() {
+    return null
+  }
+}
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text"
+import { CodeNode, CodeHighlightNode, $createCodeNode, $isCodeNode } from "@lexical/code"
+import {
+  ListNode,
+  ListItemNode,
+  $createListNode,
+  $createListItemNode,
+  $isListNode
+} from "@lexical/list"
+import {
+  TableNode,
+  TableRowNode,
+  TableCellNode,
+  $createTableNodeWithDimensions,
+  $isTableNode
+} from "@lexical/table"
+import { $toggleCodeBlockForSelection } from "../code_block_toggle"
+
+function buildEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    onError(error) {
+      throw error
+    },
+    nodes: [
+      HeadingNode,
+      QuoteNode,
+      CodeNode,
+      CodeHighlightNode,
+      ListNode,
+      ListItemNode,
+      TableNode,
+      TableRowNode,
+      TableCellNode,
+      TestMediaNode
+    ]
+  })
+  registerRichText(editor)
+  return editor
+}
+
+function appendParagraph(root, text) {
+  const paragraph = $createParagraphNode()
+  paragraph.append($createTextNode(text))
+  root.append(paragraph)
+  return paragraph
+}
+
+describe("$toggleCodeBlockForSelection", () => {
+  it("merges every selected paragraph into a single code block (not just the last line)", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const a = appendParagraph(root, "line one")
+        appendParagraph(root, "line two")
+        const c = appendParagraph(root, "line three")
+        const selection = $createRangeSelection()
+        selection.anchor.set(a.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(c.getFirstChild().getKey(), "line three".length, "text")
+        $setSelection(selection)
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children).toHaveLength(1)
+      expect($isCodeNode(children[0])).toBe(true)
+      expect(children[0].getTextContent()).toBe("line one\nline two\nline three")
+    })
+  })
+
+  it("converts a single collapsed-selection paragraph into a code block", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const p = appendParagraph(root, "hello")
+        p.getFirstChild().selectEnd()
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children).toHaveLength(1)
+      expect($isCodeNode(children[0])).toBe(true)
+      expect(children[0].getTextContent()).toBe("hello")
+    })
+  })
+
+  it("toggles a selected code block back into one paragraph per line", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const codeNode = $createCodeNode()
+        codeNode.append($createTextNode("a\nb"))
+        root.append(codeNode)
+        codeNode.selectEnd()
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children.some($isCodeNode)).toBe(false)
+      expect(children.map((child) => child.getTextContent())).toEqual(["a", "b"])
+    })
+  })
+
+  it("absorbs a mixed selection (heading + paragraph) into one code block", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const heading = new HeadingNode("h1")
+        heading.append($createTextNode("Title"))
+        root.append(heading)
+        const body = appendParagraph(root, "body")
+        const selection = $createRangeSelection()
+        selection.anchor.set(heading.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(body.getFirstChild().getKey(), "body".length, "text")
+        $setSelection(selection)
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children).toHaveLength(1)
+      expect($isCodeNode(children[0])).toBe(true)
+      expect(children[0].getTextContent()).toBe("Title\nbody")
+    })
+  })
+
+  it("does not flatten a table when the caret is inside a table cell", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const table = $createTableNodeWithDimensions(2, 2, false)
+        root.append(table)
+        const cellParagraph = table.getFirstChild().getFirstChild().getFirstChild()
+        cellParagraph.append($createTextNode("cell"))
+        cellParagraph.getFirstChild().selectEnd()
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      expect(children.some($isTableNode)).toBe(true)
+      expect(children.some($isCodeNode)).toBe(false)
+    })
+  })
+
+  it("does not fold table-cell content into the merge when a table sits inside the range", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const before = appendParagraph(root, "before")
+        const table = $createTableNodeWithDimensions(2, 2, false)
+        root.append(table)
+        // Put text in the first cell so we can assert it is never merged out.
+        const cellParagraph = table.getFirstChild().getFirstChild().getFirstChild()
+        cellParagraph.clear()
+        cellParagraph.append($createTextNode("cell"))
+        const after = appendParagraph(root, "after")
+        // Endpoints are the outside paragraphs; the range walks through the
+        // table interior. getTableCell content top-levels to the cell paragraph,
+        // which must be excluded from the merge (it is table-scoped).
+        const selection = $createRangeSelection()
+        selection.anchor.set(before.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(after.getFirstChild().getKey(), "after".length, "text")
+        $setSelection(selection)
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      // Table survives in place; its cell text is NOT pulled into any code block,
+      // and "after" is not moved above the table (document order preserved).
+      expect(children.map((c) => c.getType())).toEqual(["code", "table", "code"])
+      const table = children.find($isTableNode)
+      expect(table.getTextContent()).toContain("cell")
+      const codeBlocks = children.filter($isCodeNode)
+      expect(codeBlocks.map((c) => c.getTextContent())).toEqual(["before", "after"])
+    })
+  })
+
+  it("leaves the whole list intact when only one bullet is selected", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const list = $createListNode("bullet")
+        const first = $createListItemNode()
+        first.append($createTextNode("one"))
+        const second = $createListItemNode()
+        second.append($createTextNode("two"))
+        list.append(first, second)
+        root.append(list)
+        // Caret sits in the first bullet only.
+        first.getFirstChild().selectEnd()
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      // The list survives whole — the unselected second bullet is not absorbed
+      // into a code block, and no code block is created from a single bullet.
+      expect(children.some($isListNode)).toBe(true)
+      expect(children.some($isCodeNode)).toBe(false)
+      expect(children.find($isListNode).getTextContent()).toContain("two")
+    })
+  })
+
+  it("merges surrounding text but leaves a list in place (structural, order preserved)", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const before = appendParagraph(root, "before")
+        const list = $createListNode("bullet")
+        const item = $createListItemNode()
+        item.append($createTextNode("bullet"))
+        list.append(item)
+        root.append(list)
+        const after = appendParagraph(root, "after")
+        const selection = $createRangeSelection()
+        selection.anchor.set(before.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(after.getFirstChild().getKey(), "after".length, "text")
+        $setSelection(selection)
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      // List stays in place; "after" is not pulled above it (order preserved).
+      expect(children.map((c) => c.getType())).toEqual(["code", "list", "code"])
+      const codeBlocks = children.filter($isCodeNode)
+      expect(codeBlocks.map((c) => c.getTextContent())).toEqual(["before", "after"])
+    })
+  })
+
+  it("merges surrounding text but leaves a selected media (decorator) block intact", () => {
+    const editor = buildEditor()
+    editor.update(
+      () => {
+        const root = $getRoot()
+        root.clear()
+        const before = appendParagraph(root, "before")
+        const media = new TestMediaNode()
+        root.append(media)
+        const after = appendParagraph(root, "after")
+        const selection = $createRangeSelection()
+        selection.anchor.set(before.getFirstChild().getKey(), 0, "text")
+        selection.focus.set(after.getFirstChild().getKey(), "after".length, "text")
+        $setSelection(selection)
+        $toggleCodeBlockForSelection()
+      },
+      { discrete: true }
+    )
+
+    editor.read(() => {
+      const children = $getRoot().getChildren()
+      // Media block must survive AND stay in document order. Text on each side of
+      // it becomes its own code block — "after" is never pulled above the media.
+      expect(children.map((c) => c.getType())).toEqual(["code", "test-media", "code"])
+      const codeBlocks = children.filter($isCodeNode)
+      expect(codeBlocks.map((c) => c.getTextContent())).toEqual(["before", "after"])
+    })
+  })
+})