collavre 0.22.0 → 0.24.0

data/app/javascript/lib/api/queue_manager.js

@@ -1,8 +1,32 @@
-import csrfFetch from './csrf_fetch'
+import csrfFetch, { refreshCsrfToken } from './csrf_fetch'
+import { apiErrorFromResponse } from './api_error'
 
 const STORAGE_KEY = 'api_queue'
 const MAX_RETRIES = 3
 
+// Client errors that will never succeed on retry (validation, auth, conflict,
+// not-found). Retrying them just delays the real error and wastes round-trips,
+// so they fail fast straight to failedItems. 408 (timeout) and 429 (rate limit)
+// are intentionally excluded — those are worth retrying.
+const NON_RETRYABLE_STATUSES = new Set([400, 401, 403, 404, 409])
+
+// A 422 is ambiguous. A validation failure carries a server error payload
+// (e.g. { errors: [...] }) and will never succeed on retry. A stale CSRF token
+// (the meta-tag token drifts out of sync after the tab is backgrounded — see
+// Application#set_csrf_token_header) also returns 422 but with no payload, and
+// IS recoverable by refreshing the token and retrying.
+function isStaleCsrf(error) {
+    return !!error && error.status === 422 && !(error.errors && error.errors.length)
+}
+
+function isRetryable(error) {
+    if (!error) return true
+    if (NON_RETRYABLE_STATUSES.has(error.status)) return false
+    // Validation 422 (has payload) fails fast; payload-less 422 (stale CSRF) retries.
+    if (error.status === 422) return isStaleCsrf(error)
+    return true
+}
+
 /**
  * API Queue Manager
  * Manages asynchronous API requests with localStorage persistence,
@@ -267,9 +291,17 @@ class ApiQueueManager {
             } catch (error) {
                 console.error('API request failed:', error, item)
 
-                // Retry logic
-                if (item.retries < MAX_RETRIES) {
+                // Retry logic — skip retries for client errors that can't
+                // succeed on a repeat (e.g. 422 validation): fail fast so the
+                // user sees the real error immediately.
+                if (isRetryable(error) && item.retries < MAX_RETRIES) {
                     item.retries++
+                    // A payload-less 422 is a stale CSRF token; refresh it first
+                    // so the retry has a fresh token (the failed response itself
+                    // carries none — the forgery exception skips the after_action).
+                    if (isStaleCsrf(error)) {
+                        await refreshCsrfToken()
+                    }
                     // Move to end of queue for retry
                     this.queue.shift()
                     this.queue.push(item)
@@ -353,7 +385,9 @@ class ApiQueueManager {
         const response = await csrfFetch(url, options)
 
         if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+            // Surface the server's error payload (e.g. Rails { errors: [...] })
+            // instead of an opaque "HTTP 422" so the UI can show the real reason.
+            throw await apiErrorFromResponse(response)
         }
 
         return response

data/app/javascript/lib/common_popup.js

@@ -12,21 +12,38 @@ export default class CommonPopup {
     this.handleOutsideClick = this.handleOutsideClick.bind(this)
   }
 
-  showAt(anchorRect) {
+  showAt(anchorRect, boundsElement = null) {
     if (!this.element) return
 
+    // When set, the popup is caged inside this element's rect (e.g. the chat
+    // box) instead of the viewport — see updatePosition.
+    this._boundsElement = boundsElement
+
+    // Re-opening while already open (e.g. clicking the same typo mark twice):
+    // a listener from the previous open is still live, so the opening mousedown
+    // would bubble to it and hide() the popup right after we set display:block,
+    // leaving it stuck (the rAF below only re-flips visibility, not display).
+    // Drop stale listeners first so the opening event can't self-close it.
+    document.removeEventListener('mousedown', this.handleOutsideClick)
+    document.removeEventListener('touchstart', this.handleOutsideClick)
+
     this.element.style.display = 'block'
     this.element.style.visibility = 'hidden'
 
     requestAnimationFrame(() => {
       this.updatePosition(anchorRect)
       this.element.style.visibility = 'visible'
+      // Register the outside-click listeners only after the opening event has
+      // finished propagating. When a popup is opened from a mousedown handler
+      // (e.g. clicking a typo highlight), registering synchronously here would
+      // let that same mousedown keep bubbling to document, hit handleOutsideClick
+      // (target is outside the popup), and immediately hide() it — the popup
+      // would open and instantly vanish. Deferring one frame avoids that race.
+      if (this.closeOnOutsideClick) {
+        document.addEventListener('mousedown', this.handleOutsideClick)
+        document.addEventListener('touchstart', this.handleOutsideClick)
+      }
     })
-
-    if (this.closeOnOutsideClick) {
-      document.addEventListener('mousedown', this.handleOutsideClick)
-      document.addEventListener('touchstart', this.handleOutsideClick)
-    }
   }
 
   updatePosition(anchorRect) {
@@ -45,11 +62,26 @@ export default class CommonPopup {
     let viewportTop = (rect?.bottom || 0) + 4
 
     const { offsetWidth: width, offsetHeight: height } = this.element
-    const maxLeft = window.innerWidth - width - boundsPadding
-    const maxTop = window.innerHeight - height - boundsPadding
 
-    viewportLeft = Math.max(boundsPadding, Math.min(viewportLeft, maxLeft))
-    viewportTop = Math.max(boundsPadding, Math.min(viewportTop, maxTop))
+    // Clamp within a container's rect when bounded (keeps the popup caged inside
+    // the chat box), otherwise within the viewport.
+    const bounds = this._boundsElement?.getBoundingClientRect?.()
+    let minLeft = boundsPadding
+    let minTop = boundsPadding
+    let maxLeft = window.innerWidth - width - boundsPadding
+    let maxTop = window.innerHeight - height - boundsPadding
+    if (bounds) {
+      minLeft = bounds.left + boundsPadding
+      minTop = bounds.top + boundsPadding
+      maxLeft = bounds.right - width - boundsPadding
+      maxTop = bounds.bottom - height - boundsPadding
+      // Cap size so a long list scrolls inside the box instead of spilling past it.
+      this.element.style.maxWidth = `${bounds.width - boundsPadding * 2}px`
+      this.element.style.maxHeight = `${bounds.height - boundsPadding * 2}px`
+    }
+
+    viewportLeft = Math.max(minLeft, Math.min(viewportLeft, maxLeft))
+    viewportTop = Math.max(minTop, Math.min(viewportTop, maxTop))
 
     const left = viewportLeft - parentRect.left + parentScrollX
     const top = viewportTop - parentRect.top + parentScrollY

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