collavre 0.22.0 → 0.23.0

data/app/javascript/lib/editor/__tests__/code_edit_view_token_parity.test.js

@@ -0,0 +1,121 @@
+/** @jest-environment jsdom */
+// Does the LIVE-entered Lexical editor color a JS-fenced block token-for-token
+// the same as the rendered view? User report: render → edit shows different
+// colors than the view, but refresh/cancel/title agree. This pins whether the
+// divergence is in token CLASSES (language/tokenizer) or purely CSS container.
+import { createEditor, $getRoot, $createParagraphNode, $isTextNode, $isElementNode, $isLineBreakNode } from "lexical"
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { ListItemNode, ListNode } from "@lexical/list"
+import { LinkNode, AutoLinkNode } from "@lexical/link"
+import { CodeNode, CodeHighlightNode, registerCodeHighlighting, $isCodeNode, $isCodeHighlightNode } from "@lexical/code"
+import { $generateNodesFromDOM } from "@lexical/html"
+import { renderMarkdown, highlightCodeBlocks } from "../../utils/markdown"
+import { CODE_TOKEN_THEME } from "../code_token_theme"
+import {
+  bridgeCodeFenceLanguages, detectCodeLanguage, normalizeFenceLang,
+  markLanguageResolved, isLanguageResolved, clearLanguageResolved,
+} from "../code_languages"
+
+const RUBY = `# frozen_string_literal: true
+
+module CollavreCompat
+  module_function
+
+  def call(receiver, method_name, *args, **kwargs)
+    params = receiver.method(method_name).parameters
+    accepted = params.filter_map { |type, name| name if %i[key keyreq].include?(type) }
+    receiver.public_send(method_name, *args, **kwargs)
+  end
+end`
+
+function buildEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    nodes: [HeadingNode, QuoteNode, CodeNode, CodeHighlightNode, ListItemNode, ListNode, LinkNode, AutoLinkNode],
+    onError: (e) => { throw e },
+  })
+  const el = document.createElement("div")
+  el.contentEditable = "true"
+  document.body.appendChild(el)
+  editor.setRootElement(el)
+  registerCodeHighlighting(editor)
+  editor.registerNodeTransform(CodeNode, (node) => {
+    if (isLanguageResolved(editor, node.getKey())) return
+    const current = node.getLanguage()
+    const norm = normalizeFenceLang(current)
+    if (norm && norm !== "javascript") return
+    const detected = detectCodeLanguage(node.getTextContent(), current)
+    if (detected && detected !== "javascript" && detected !== current) node.setLanguage(detected)
+  })
+  return { editor, el }
+}
+
+function loadHtml(editor, html) {
+  editor.update(() => {
+    const root = $getRoot()
+    clearLanguageResolved(editor)
+    root.getChildren().forEach((c) => c.remove())
+    const doc = new DOMParser().parseFromString(html || "", "text/html")
+    const container = doc.body
+    bridgeCodeFenceLanguages(container)
+    const nodes = $generateNodesFromDOM(editor, container)
+    const mark = (list) => list.forEach((node) => {
+      if ($isCodeNode(node)) { if (node.getLanguage()) markLanguageResolved(editor, node.getKey()) }
+      else if ($isElementNode(node) && typeof node.getChildren === "function") mark(node.getChildren())
+    })
+    mark(nodes)
+    let pending = null
+    const flush = () => { if (pending) { root.append(pending); pending = null } }
+    nodes.forEach((node) => {
+      const inline = $isTextNode(node) || $isLineBreakNode(node) || ($isElementNode(node) && node.isInline())
+      if (inline) { if (!pending) pending = $createParagraphNode(); pending.append(node); return }
+      flush(); root.append(node)
+    })
+    flush()
+  }, { discrete: true })
+}
+
+// Sequence of [class, text] for every COLORED token span in the VIEW DOM,
+// ignoring structure (linebreaks/tabs/untokenized whitespace) — what determines color.
+function coloredViewTokens(rootEl) {
+  const code = rootEl.querySelector("code") || rootEl
+  return Array.from(code.querySelectorAll("span"))
+    .filter((s) => /(^|\s)lexical-token-/.test(s.className))
+    .map((s) => [s.className, s.textContent])
+}
+
+// Same sequence from the EDITOR's node state: each CodeHighlightNode maps its
+// highlightType through the SHARED CODE_TOKEN_THEME exactly as the rendered span
+// would. Untyped highlight nodes (whitespace) carry no class → excluded, mirroring
+// the view's bare-text whitespace.
+function coloredEditorTokens(editor) {
+  const out = []
+  editor.read(() => {
+    $getRoot().getChildren().forEach((c) => {
+      if (!$isCodeNode(c)) return
+      c.getChildren().forEach((child) => {
+        if (!$isCodeHighlightNode(child)) return
+        const type = child.getHighlightType()
+        const cls = type ? CODE_TOKEN_THEME[type] : undefined
+        if (cls) out.push([cls, child.getTextContent()])
+      })
+    })
+  })
+  return out
+}
+
+describe("edit ↔ view token-color parity for explicit javascript", () => {
+  test("live-entered editor and rendered view emit the same colored-token sequence", () => {
+    const { editor } = buildEditor()
+    loadHtml(editor, renderMarkdown("```javascript\n" + RUBY + "\n```"))
+    const editorTokens = coloredEditorTokens(editor)
+
+    const viewDiv = document.createElement("div")
+    viewDiv.innerHTML = '<pre lang="javascript"><code>' + RUBY.replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</code></pre>"
+    highlightCodeBlocks(viewDiv)
+    const viewTokens = coloredViewTokens(viewDiv)
+
+    expect(editorTokens.length).toBeGreaterThan(0)
+    expect(editorTokens).toEqual(viewTokens)
+  })
+})

data/app/javascript/lib/editor/__tests__/code_language_roundtrip.test.js

@@ -0,0 +1,152 @@
+/** @jest-environment jsdom */
+// Integration test for the markdown→rich language round-trip. Mirrors the
+// InlineLexicalEditor wiring: bridge the imported HTML, mark code blocks whose
+// language came from an explicit source label, register the detection transform
+// that honors resolved languages and only re-detects unlabeled/new blocks.
+import { createEditor, $getRoot, $createParagraphNode, $createTextNode, $isTextNode, $isElementNode, $isLineBreakNode } from "lexical"
+import { HeadingNode, QuoteNode } from "@lexical/rich-text"
+import { ListItemNode, ListNode } from "@lexical/list"
+import { LinkNode, AutoLinkNode } from "@lexical/link"
+import { CodeNode, CodeHighlightNode, registerCodeHighlighting, $isCodeNode, $createCodeNode } from "@lexical/code"
+import { $generateNodesFromDOM } from "@lexical/html"
+import { $convertToMarkdownString } from "@lexical/markdown"
+import { MARKDOWN_TRANSFORMERS, normalizeMarkdownBlankLines } from "../../lexical/markdown_serialize"
+import { renderMarkdown } from "../../utils/markdown"
+import {
+  bridgeCodeFenceLanguages, detectCodeLanguage, normalizeFenceLang,
+  markLanguageResolved, isLanguageResolved, clearLanguageResolved,
+} from "../code_languages"
+
+const RUBY = `module CollavreCompat
+  module_function
+  def call(receiver, method_name, *args, **kwargs)
+    params = receiver.method(method_name).parameters
+    receiver.public_send(method_name, *args, **kwargs)
+  end
+end`
+
+function buildEditor() {
+  const editor = createEditor({
+    namespace: "test",
+    nodes: [HeadingNode, QuoteNode, CodeNode, CodeHighlightNode, ListItemNode, ListNode, LinkNode, AutoLinkNode],
+    onError: (e) => { throw e },
+  })
+  const el = document.createElement("div")
+  el.contentEditable = "true"
+  document.body.appendChild(el)
+  editor.setRootElement(el)
+  registerCodeHighlighting(editor)
+  editor.registerNodeTransform(CodeNode, (node) => {
+    if (isLanguageResolved(editor, node.getKey())) return
+    const current = node.getLanguage()
+    const norm = normalizeFenceLang(current)
+    if (norm && norm !== "javascript") return
+    const detected = detectCodeLanguage(node.getTextContent(), current)
+    if (detected && detected !== "javascript" && detected !== current) {
+      node.setLanguage(detected)
+    }
+  })
+  return editor
+}
+
+function loadHtml(editor, html) {
+  editor.update(() => {
+    const root = $getRoot()
+    clearLanguageResolved(editor)
+    root.getChildren().forEach((c) => c.remove())
+    const doc = new DOMParser().parseFromString(html || "", "text/html")
+    const container = doc.body
+    bridgeCodeFenceLanguages(container)
+    const nodes = $generateNodesFromDOM(editor, container)
+    const mark = (list) => list.forEach((node) => {
+      if ($isCodeNode(node)) { if (node.getLanguage()) markLanguageResolved(editor, node.getKey()) }
+      else if ($isElementNode(node) && typeof node.getChildren === "function") mark(node.getChildren())
+    })
+    mark(nodes)
+    let pending = null
+    const flush = () => { if (pending) { root.append(pending); pending = null } }
+    nodes.forEach((node) => {
+      const inline = $isTextNode(node) || $isLineBreakNode(node) || ($isElementNode(node) && node.isInline())
+      if (inline) { if (!pending) pending = $createParagraphNode(); pending.append(node); return }
+      flush(); root.append(node)
+    })
+    flush()
+  }, { discrete: true })
+}
+
+function codeLang(editor) {
+  let lang = null
+  editor.read(() => { $getRoot().getChildren().forEach((c) => { if ($isCodeNode(c)) lang = c.getLanguage() }) })
+  return lang
+}
+
+function fence(editor) {
+  let md = ""
+  editor.update(() => { md = normalizeMarkdownBlankLines($convertToMarkdownString(MARKDOWN_TRANSFORMERS)) }, { discrete: true })
+  return md.split("\n")[0]
+}
+
+describe("code-block language round-trip (markdown ↔ rich)", () => {
+  test("explicit javascript fence over ruby content is HONORED (not re-detected)", () => {
+    const editor = buildEditor()
+    loadHtml(editor, renderMarkdown("```javascript\n" + RUBY + "\n```"))
+    expect(codeLang(editor)).toBe("javascript")
+    expect(fence(editor)).toBe("```javascript")
+  })
+
+  test("explicit python fence over ruby content is honored", () => {
+    const editor = buildEditor()
+    loadHtml(editor, renderMarkdown("```python\n" + RUBY + "\n```"))
+    expect(codeLang(editor)).toBe("python")
+  })
+
+  test("unlabeled ruby content is auto-detected to ruby", () => {
+    const editor = buildEditor()
+    loadHtml(editor, renderMarkdown("```\n" + RUBY + "\n```"))
+    expect(codeLang(editor)).toBe("ruby")
+  })
+
+  test("a NEW (typed) code block still auto-detects from content", () => {
+    const editor = buildEditor()
+    editor.update(() => {
+      const root = $getRoot()
+      clearLanguageResolved(editor)
+      root.getChildren().forEach((c) => c.remove())
+      const code = $createCodeNode() // no language: simulates toolbar insert
+      code.append($createTextNode(RUBY))
+      root.append(code)
+    }, { discrete: true })
+    expect(codeLang(editor)).toBe("ruby")
+  })
+
+  test("server-reopen form <pre lang=javascript> is also honored", () => {
+    const editor = buildEditor()
+    loadHtml(editor, '<pre lang="javascript"><code>' + RUBY + "</code></pre>")
+    expect(codeLang(editor)).toBe("javascript")
+  })
+})
+
+import { highlightCodeBlocks } from "../../utils/markdown"
+
+function renderView(html) {
+  const div = document.createElement("div")
+  div.innerHTML = html
+  highlightCodeBlocks(div)
+  return div.querySelector("pre code").innerHTML
+}
+
+describe("rendered view honors explicit language (edit/view parity)", () => {
+  const RUBY_TOKENS = `module M\n  def call(x)\n  end\nend`
+  test("explicit javascript is NOT silently re-detected to ruby in the view", () => {
+    const asJs = renderView('<pre lang="javascript"><code>' + RUBY_TOKENS + "</code></pre>")
+    const asRuby = renderView('<pre lang="ruby"><code>' + RUBY_TOKENS + "</code></pre>")
+    // Different tokenizers → different markup. If js were re-detected to ruby
+    // they would be identical (the old bug).
+    expect(asJs).not.toBe(asRuby)
+  })
+  test("unlabeled block is content-detected (matches the ruby tokenization)", () => {
+    const unlabeled = renderView("<pre><code>" + RUBY_TOKENS + "</code></pre>")
+    const asRuby = renderView('<pre lang="ruby"><code>' + RUBY_TOKENS + "</code></pre>")
+    expect(unlabeled).toBe(asRuby)
+  })
+})

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

@@ -0,0 +1,93 @@
+import { detectCodeLanguage, normalizeFenceLang, bridgeCodeFenceLanguages, DEFAULT_CODE_LANGUAGE } from "../code_languages"
+
+const RUBY = `# frozen_string_literal: true
+module CollavreCompat
+  module_function
+
+  def call(receiver, method_name, *args, **kwargs)
+    params = receiver.method(method_name).parameters
+    receiver.public_send(method_name, *args, **kwargs)
+  end
+end`
+
+describe("normalizeFenceLang", () => {
+  it("canonicalizes aliases", () => {
+    expect(normalizeFenceLang("rb")).toBe("ruby")
+    expect(normalizeFenceLang("YML")).toBe("yaml")
+    expect(normalizeFenceLang("sh")).toBe("bash")
+    expect(normalizeFenceLang("html")).toBe("markup")
+  })
+
+  it("returns empty for missing or unsafe input", () => {
+    expect(normalizeFenceLang("")).toBe("")
+    expect(normalizeFenceLang(null)).toBe("")
+    expect(normalizeFenceLang("not a lang")).toBe("")
+  })
+})
+
+describe("detectCodeLanguage", () => {
+  it("honors an explicit, non-default fence language without re-detecting", () => {
+    // Even though this looks like Ruby, an explicit `python` fence is respected.
+    expect(detectCodeLanguage(RUBY, "python")).toBe("python")
+    expect(detectCodeLanguage(RUBY, "rb")).toBe("ruby")
+  })
+
+  it("re-detects Ruby content stuck on the javascript default", () => {
+    expect(detectCodeLanguage(RUBY, "javascript")).toBe("ruby")
+    expect(detectCodeLanguage(RUBY, "")).toBe("ruby")
+    expect(detectCodeLanguage(RUBY, undefined)).toBe("ruby")
+  })
+
+  it("keeps real JavaScript as javascript (detection does not beat JS for JS)", () => {
+    const js = "function add(a, b) {\n  const total = a + b\n  return total\n}"
+    expect(detectCodeLanguage(js, "javascript")).toBe("javascript")
+  })
+
+  it("does not detect from a too-short snippet", () => {
+    expect(detectCodeLanguage("x = 1", "javascript")).toBe("javascript")
+    expect(detectCodeLanguage("x = 1", "")).toBe("")
+  })
+
+  it("exposes the javascript default constant", () => {
+    expect(DEFAULT_CODE_LANGUAGE).toBe("javascript")
+  })
+})
+
+describe("bridgeCodeFenceLanguages", () => {
+  function parse(html) {
+    const doc = new DOMParser().parseFromString(html, "text/html")
+    return doc.body
+  }
+
+  it("bridges commonmarker's <pre lang> to data-language", () => {
+    const c = parse('<pre lang="ruby"><code>x = 1</code></pre>')
+    bridgeCodeFenceLanguages(c)
+    expect(c.querySelector("pre").getAttribute("data-language")).toBe("ruby")
+  })
+
+  it("bridges marked's <code class=\"language-X\"> to data-language on <pre>", () => {
+    // This is the markdown→rich toggle case: renderMarkdown emits the fence
+    // language on the <code>, not the <pre>, so it was dropped on reopen.
+    const c = parse('<pre><code class="hljs language-ruby">x = 1</code></pre>')
+    bridgeCodeFenceLanguages(c)
+    expect(c.querySelector("pre").getAttribute("data-language")).toBe("ruby")
+  })
+
+  it("canonicalizes aliases while bridging", () => {
+    const c = parse('<pre><code class="language-rb">x = 1</code></pre>')
+    bridgeCodeFenceLanguages(c)
+    expect(c.querySelector("pre").getAttribute("data-language")).toBe("ruby")
+  })
+
+  it("does not overwrite an existing data-language", () => {
+    const c = parse('<pre lang="python" data-language="ruby"><code>x = 1</code></pre>')
+    bridgeCodeFenceLanguages(c)
+    expect(c.querySelector("pre").getAttribute("data-language")).toBe("ruby")
+  })
+
+  it("leaves a language-less block alone (detection handles it later)", () => {
+    const c = parse("<pre><code>x = 1</code></pre>")
+    bridgeCodeFenceLanguages(c)
+    expect(c.querySelector("pre").hasAttribute("data-language")).toBe(false)
+  })
+})

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"
+}