collavre 0.22.0 → 0.24.0

data/app/javascript/lib/utils/markdown.js

@@ -1,66 +1,39 @@
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
 import { addTableDownloadButtons } from './table_download'
-import hljs from 'highlight.js/lib/core'
-
-// Register only commonly used languages to keep the bundle small
-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 markdownLang from 'highlight.js/lib/languages/markdown'
-import diff from 'highlight.js/lib/languages/diff'
-import erb from 'highlight.js/lib/languages/erb'
-import go from 'highlight.js/lib/languages/go'
-import java from 'highlight.js/lib/languages/java'
-import plaintext from 'highlight.js/lib/languages/plaintext'
-
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('js', javascript)
-hljs.registerLanguage('typescript', typescript)
-hljs.registerLanguage('ts', typescript)
-hljs.registerLanguage('ruby', ruby)
-hljs.registerLanguage('rb', ruby)
-hljs.registerLanguage('python', python)
-hljs.registerLanguage('py', python)
-hljs.registerLanguage('css', css)
-hljs.registerLanguage('html', xml)
-hljs.registerLanguage('xml', xml)
-hljs.registerLanguage('json', json)
-hljs.registerLanguage('yaml', yaml)
-hljs.registerLanguage('yml', yaml)
-hljs.registerLanguage('bash', bash)
-hljs.registerLanguage('sh', bash)
-hljs.registerLanguage('shell', bash)
-hljs.registerLanguage('sql', sql)
-hljs.registerLanguage('markdown', markdownLang)
-hljs.registerLanguage('md', markdownLang)
-hljs.registerLanguage('diff', diff)
-hljs.registerLanguage('erb', erb)
-hljs.registerLanguage('go', go)
-hljs.registerLanguage('java', java)
-hljs.registerLanguage('plaintext', plaintext)
-hljs.registerLanguage('text', plaintext)
-
-function highlightCode(code, lang) {
-  if (lang && hljs.getLanguage(lang)) {
-    try {
-      return hljs.highlight(code, { language: lang }).value
-    } catch (_) { /* fall through */ }
-  }
-  // Auto-detect for unlabeled code blocks
-  try {
-    return hljs.highlightAuto(code).value
-  } catch (_) {
-    return code
-  }
-}
+
+// Prism syntax highlighting for ALL rendered code blocks. The Lexical editor
+// highlights code with Prism (@lexical/code) and tags each token with a
+// `lexical-token-*` class (see lib/editor/code_token_theme.js). Every other
+// surface that renders a fenced block — the rendered creative description, the
+// markdown-mode preview, and chat/comments — tokenizes with the SAME Prism
+// instance, the SAME language components @lexical/code loads, and the SAME
+// token→class map, so a code block looks identical everywhere. The shared
+// code_languages module below registers the extra grammars @lexical/code omits
+// (ruby, bash, …) on the same Prism singleton and resolves each block's language
+// identically to the editor, so the tokenizers stay aligned.
+import Prism from 'prismjs'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markup'
+import 'prismjs/components/prism-markdown'
+import 'prismjs/components/prism-c'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-objectivec'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-powershell'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-rust'
+import 'prismjs/components/prism-swift'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-java'
+import 'prismjs/components/prism-cpp'
+import { CODE_TOKEN_THEME } from '../editor/code_token_theme'
+import { detectCodeLanguage, normalizeFenceLang } from '../editor/code_languages'
+
+// We tokenize manually; stop Prism from auto-highlighting `code[class*=language-]`
+// on DOMContentLoaded (which would double-process comment code blocks).
+Prism.manual = true
 
 // Sanitize language identifier to prevent class attribute injection
 function sanitizeLang(lang) {
@@ -68,6 +41,12 @@ function sanitizeLang(lang) {
   return lang.replace(/[^a-zA-Z0-9_-]/g, '')
 }
 
+// `breaks: true` so a single newline renders as <br> (GitHub/Slack style),
+// matching the canonical markdown_source where consecutive rich-editor lines are
+// stored one-per-line instead of separated by a blank line. Applies app-wide
+// (creative descriptions and comments) so a line break always means a line break.
+marked.use({ breaks: true })
+
 // Custom renderer for code blocks with syntax highlighting + mermaid
 marked.use({
   renderer: {
@@ -77,27 +56,38 @@ marked.use({
         const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
         return `<div class="mermaid-chart">${escaped}</div>`
       }
-      const highlighted = highlightCode(text, safeLang)
-      const langClass = safeLang ? ` language-${safeLang}` : ''
-      return `<pre><code class="hljs${langClass}">${highlighted}</code></pre>`
+      // Highlight with the SAME Prism engine + `lexical-token-*` classes the
+      // editor and rendered creative description use (see highlightToLexicalHtml),
+      // so a fenced block is colored identically across the markdown-mode preview,
+      // chat/comments, the editor, and the rendered creative — one engine, one
+      // palette. An explicit fence language is honored verbatim (matching the
+      // editor); only genuinely unlabeled blocks are content-detected.
+      const resolved = safeLang ? normalizeFenceLang(safeLang) : detectCodeLanguage(text, '')
+      const highlighted = highlightToLexicalHtml(text, resolved)
+      const langAttr = resolved ? ` lang="${resolved}"` : ''
+      const codeClass = resolved ? ` class="language-${resolved}"` : ''
+      return `<pre${langAttr}><code${codeClass}>${highlighted}</code></pre>`
     }
   }
 })
 
-// Allow hljs span classes through DOMPurify
+// Allow the shared Prism `lexical-token-*` span classes through DOMPurify
 DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
   if (node.tagName === 'SPAN' && data.attrName === 'class') {
     const classes = data.attrValue.split(/\s+/)
-    const safe = classes.filter(c => c.startsWith('hljs-'))
+    // `lexical-token-*` is the single token-class family every surface now emits
+    // (editor, rendered creative, markdown preview, comments) so they highlight
+    // identically.
+    const safe = classes.filter(c => c.startsWith('lexical-token-'))
     if (safe.length > 0) {
       data.attrValue = safe.join(' ')
       data.forceKeepAttr = true
     }
   }
-  // Allow hljs and language-* classes on code elements
+  // Allow language-* classes on code elements (the language hint Prism reads)
   if (node.tagName === 'CODE' && data.attrName === 'class') {
     const classes = data.attrValue.split(/\s+/)
-    const safe = classes.filter(c => c === 'hljs' || c.startsWith('language-'))
+    const safe = classes.filter(c => c.startsWith('language-'))
     if (safe.length > 0) {
       data.attrValue = safe.join(' ')
       data.forceKeepAttr = true
@@ -137,6 +127,103 @@ export function renderCommentMarkdown(text) {
   return sanitize(html.trim())
 }
 
+function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+function wrapToken(text, type) {
+  const cls = type ? CODE_TOKEN_THEME[type] : undefined
+  if (!cls) return escapeHtml(text)
+  // Mirror @lexical/code, which splits a token's text on newlines/tabs into
+  // separate highlight nodes (the whitespace between them carries no token
+  // class), so the rendered span structure matches the editor exactly — not
+  // just the colors.
+  return text
+    .split(/(\n|\t)/)
+    .map((piece) =>
+      piece === '\n' || piece === '\t' || piece === ''
+        ? escapeHtml(piece)
+        : `<span class="${cls}">${escapeHtml(piece)}</span>`
+    )
+    .join('')
+}
+
+// Flatten a Prism token stream into `lexical-token-*` span HTML, mirroring how
+// @lexical/code's registerCodeHighlighting assigns exactly ONE class (the
+// nearest enclosing token type) to each leaf text node. `type` is the enclosing
+// token type handed down to bare string leaves, so the rendered view tokenizes
+// and classes identically to the editor.
+function tokensToLexicalHtml(tokens, type) {
+  let html = ''
+  for (const token of tokens) {
+    if (typeof token === 'string') {
+      html += wrapToken(token, type)
+    } else if (typeof token.content === 'string') {
+      const leafType = token.type === 'prefix' && typeof token.alias === 'string'
+        ? token.alias
+        : token.type
+      html += wrapToken(token.content, leafType)
+    } else if (Array.isArray(token.content)) {
+      html += tokensToLexicalHtml(token.content, token.type === 'unchanged' ? undefined : token.type)
+    }
+  }
+  return html
+}
+
+function highlightToLexicalHtml(code, lang) {
+  // No grammar (unlabeled / unsupported language) → render as plaintext rather
+  // than forcing JavaScript, so a block we can't confidently classify isn't
+  // mis-colored as JS.
+  const grammar = lang ? Prism.languages[lang] : null
+  if (!grammar) return escapeHtml(code)
+  return tokensToLexicalHtml(Prism.tokenize(code, grammar), undefined)
+}
+
+// Re-tokenize server-rendered creative description code blocks with Prism.
+//
+// Creative descriptions are rendered server-side by commonmarker. We disable its
+// built-in syntect highlighter (which bakes a fixed dark theme inline), so the
+// stored HTML arrives as plain `<pre lang="ruby"><code>raw source</code></pre>`.
+// This pass re-tokenizes that source with the SAME Prism instance, language set,
+// and `lexical-token-*` token classes the editor uses, so edit mode and rendered
+// mode are colored token-for-token identically (not just the same palette) and
+// follow the light/dark theme via the shared `--syntax-*` variables.
+//
+// Reading `textContent` (not innerHTML) means legacy descriptions whose stored
+// HTML still carries baked-in inline-styled spans get re-highlighted too — no
+// data migration needed. Idempotent via the `data-hljs-highlighted` marker.
+export function highlightCodeBlocks(container) {
+  if (!container) return
+  const blocks = container.querySelectorAll('pre code:not([data-hljs-highlighted])')
+  blocks.forEach((code) => {
+    const pre = code.closest('pre')
+    let lang = sanitizeLang(pre && pre.getAttribute('lang'))
+    if (!lang) {
+      const match = /(?:^|\s)language-([\w-]+)/.exec(code.className || '')
+      if (match) lang = sanitizeLang(match[1])
+    }
+    // Resolve the language the same way the editor does. In the rendered view the
+    // language always comes from the stored source (a real fence / <pre lang>), so
+    // an explicit label is honored verbatim — including "javascript" — exactly as
+    // the editor honors an import-resolved language. Only genuinely unlabeled
+    // blocks are content-detected. This keeps edit and view in lock-step; without
+    // it the view would re-detect an explicit ```javascript to ruby while the
+    // editor honored javascript, and the two would disagree.
+    const resolved = lang ? normalizeFenceLang(lang) : detectCodeLanguage(code.textContent, '')
+    // Build the markup ourselves with escaped text and only `lexical-token-*`
+    // classes, then sanitize as defense-in-depth (DOMPurify keeps those spans
+    // via the class hook and neutralizes anything unexpected).
+    code.innerHTML = sanitize(highlightToLexicalHtml(code.textContent, resolved))
+    code.dataset.hljsHighlighted = 'true'
+    // Drop any baked-in inline background (e.g. syntect's dark `<pre style=…>`)
+    // so the theme-aware --color-code-bg from code_highlight.css wins.
+    if (pre) pre.removeAttribute('style')
+  })
+}
+
 // Lazy-load mermaid and render diagrams in a container
 let mermaidReady = false
 

data/app/javascript/lib/utils/sanitize_description.js

@@ -0,0 +1,31 @@
+import DOMPurify from 'dompurify'
+
+// Trusted YouTube embed origins. The server's `embed_youtube_iframe` helper
+// (app/helpers/application_helper.rb) only ever emits `youtube.com/embed/...`
+// iframes, so we mirror that here and refuse every other iframe source.
+const YOUTUBE_EMBED_SRC =
+  /^https:\/\/(www\.)?(youtube\.com|youtube-nocookie\.com)\/embed\//i
+
+// DOMPurify's default config strips <iframe> entirely, which silently removed
+// the YouTube preview iframe the server had already generated — the description
+// rendered blank. Re-allow iframes, but only from trusted YouTube embed origins
+// so arbitrary iframe injection (clickjacking / XSS) stays blocked.
+DOMPurify.addHook('uponSanitizeElement', (node, data) => {
+  if (data.tagName !== 'iframe') return
+  const src = node.getAttribute && node.getAttribute('src')
+  if (!src || !YOUTUBE_EMBED_SRC.test(src)) {
+    node.parentNode && node.parentNode.removeChild(node)
+  }
+})
+
+// Mirrors the iframe attributes in EMBED_ALLOWED_ATTRS server-side.
+const PURIFY_CONFIG = {
+  ADD_TAGS: ['iframe'],
+  ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder']
+}
+
+// Sanitize creative description HTML for client-side rendering while keeping the
+// server-generated YouTube preview iframe intact.
+export function sanitizeDescriptionHtml(html) {
+  return DOMPurify.sanitize(html ?? '', PURIFY_CONFIG)
+}

data/app/javascript/lib/utils/table_download.js

@@ -161,3 +161,18 @@ export function addTableDownloadButtons(contentElement) {
     wrapper.appendChild(table)
   })
 }
+
+/**
+ * Wraps only the tables in a creative row's *display* areas
+ * (.creative-content / .creative-title-content). The inline edit form is
+ * appended into .creative-tree as a sibling of these areas, so scanning the
+ * whole row would move the live Lexical editor / markdown-preview <table>
+ * into a wrapper and corrupt in-progress table edits.
+ */
+export function addCreativeTableDownloadButtons(rowElement) {
+  if (!rowElement) return
+
+  rowElement
+    .querySelectorAll('.creative-content, .creative-title-content')
+    .forEach((area) => addTableDownloadButtons(area))
+}

data/app/javascript/modules/__tests__/creative_inline_payload.test.js

@@ -0,0 +1,231 @@
+/**
+ * Characterization tests for the inline creative payload mapping cluster
+ * extracted from creative_row_editor.js (slice 3 of the god-file decomposition).
+ *
+ * These pin the CURRENT behavior of the inverse pair that drives instant UI:
+ *   - inlinePayloadFromTree: reads a payload OUT of a rendered tree row's dataset
+ *   - updateRowFromData:     writes a server/API payload INTO a row's dataset
+ *
+ * The fixture mirrors the real creative-tree render: a `creative-tree-row`
+ * custom element wrapping a `.creative-tree` node whose `data-id`/`data-parent-id`
+ * carry the tree identity.
+ *
+ * Intentionally behavior-preserving: any surprising result below (e.g. missing
+ * fields defaulting to 0/'' rather than being omitted, or `hasOwnProperty`-gated
+ * writes) documents existing behavior, not an endorsement of it.
+ */
+import { inlinePayloadFromTree, updateRowFromData } from '../creative_inline_payload';
+
+// Build one row: <creative-tree-row><div.creative-tree/></creative-tree-row>
+function makeRow(id, { parentId = '', level = 1 } = {}) {
+  const row = document.createElement('creative-tree-row');
+  row.setAttribute('creative-id', String(id));
+  row.setAttribute('level', String(level));
+  const tree = document.createElement('div');
+  tree.className = 'creative-tree';
+  tree.id = `creative-${id}`;
+  tree.dataset.id = String(id);
+  tree.dataset.parentId = parentId;
+  tree.dataset.level = String(level);
+  row.appendChild(tree);
+  return { row, tree };
+}
+
+describe('inlinePayloadFromTree', () => {
+  test('returns null for falsy tree', () => {
+    expect(inlinePayloadFromTree(null)).toBeNull();
+    expect(inlinePayloadFromTree(undefined)).toBeNull();
+  });
+
+  test('returns null when tree has no wrapping creative-tree-row', () => {
+    const orphan = document.createElement('div');
+    orphan.dataset.id = '5';
+    expect(inlinePayloadFromTree(orphan)).toBeNull();
+  });
+
+  test('returns null when row exists but tree has no data-id', () => {
+    const { tree } = makeRow('9');
+    delete tree.dataset.id;
+    expect(inlinePayloadFromTree(tree)).toBeNull();
+  });
+
+  test('builds a fully-defaulted payload from a minimal row (only id)', () => {
+    const { tree } = makeRow('42', { parentId: '' });
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '42',
+      description: '',
+      description_raw_html: '',
+      origin_id: '',
+      parent_id: '',
+      progress: 0,
+      content_type: null,
+      markdown_editor: null,
+      markdown_source: null,
+    });
+  });
+
+  test('reads all fields from a fully-populated row', () => {
+    const { row, tree } = makeRow('7', { parentId: '3' });
+    row.dataset.descriptionHtml = '<p>hi</p>';
+    row.dataset.descriptionRawHtml = '<p>raw</p>';
+    row.dataset.progressValue = '55';
+    row.dataset.originId = '99';
+    row.dataset.contentType = 'markdown';
+    row.dataset.markdownEditor = 'rich';
+    row.dataset.markdownSource = '# hi';
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '7',
+      description: '<p>hi</p>',
+      description_raw_html: '<p>raw</p>',
+      origin_id: '99',
+      parent_id: '3',
+      progress: 55,
+      content_type: 'markdown',
+      markdown_editor: 'rich',
+      markdown_source: '# hi',
+    });
+  });
+
+  test('description falls back to raw html when descriptionHtml absent', () => {
+    const { row, tree } = makeRow('8');
+    row.dataset.descriptionRawHtml = '<p>only-raw</p>';
+    const payload = inlinePayloadFromTree(tree);
+    expect(payload.description).toBe('<p>only-raw</p>');
+    expect(payload.description_raw_html).toBe('<p>only-raw</p>');
+  });
+
+  test('non-numeric progress coerces to 0 (NaN guard)', () => {
+    const { row, tree } = makeRow('11');
+    row.dataset.progressValue = 'abc';
+    expect(inlinePayloadFromTree(tree).progress).toBe(0);
+  });
+
+  test('progress present but empty-string reads as 0', () => {
+    const { row, tree } = makeRow('12');
+    row.dataset.progressValue = '';
+    // Number('' ?? 0) === Number('') === 0
+    expect(inlinePayloadFromTree(tree).progress).toBe(0);
+  });
+});
+
+describe('updateRowFromData', () => {
+  test('no-ops on falsy row or data', () => {
+    const { row } = makeRow('1');
+    expect(() => updateRowFromData(null, { description: 'x' })).not.toThrow();
+    expect(() => updateRowFromData(row, null)).not.toThrow();
+    expect(row.dataset.descriptionHtml).toBeUndefined();
+  });
+
+  test('writes description + raw html (raw falls back to description)', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: '<p>d</p>' });
+    expect(row.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionRawHtml).toBe('<p>d</p>');
+  });
+
+  test('explicit description_raw_html is preserved distinctly', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: '<p>d</p>', description_raw_html: '<p>r</p>' });
+    expect(row.dataset.descriptionHtml).toBe('<p>d</p>');
+    expect(row.dataset.descriptionRawHtml).toBe('<p>r</p>');
+  });
+
+  test('missing description writes empty string (not skipped)', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { progress: 10 });
+    expect(row.dataset.descriptionHtml).toBe('');
+    expect(row.dataset.descriptionRawHtml).toBe('');
+  });
+
+  test('progress_html only written when non-null', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', progress_html: '<b>50%</b>' });
+    expect(row.progressHtml).toBe('<b>50%</b>');
+    expect(row.dataset.progressHtml).toBe('<b>50%</b>');
+
+    const { row: row2 } = makeRow('2');
+    updateRowFromData(row2, { description: 'd', progress_html: null });
+    expect(row2.dataset.progressHtml).toBeUndefined();
+  });
+
+  test('progress written from own key; null clears dataset value', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', progress: 30 });
+    expect(row.dataset.progressValue).toBe('30');
+
+    // `?? ''` maps null/undefined to '', and setRowDatasetValue deletes on ''? no:
+    // value '' is a string -> stored as ''.  null -> '' -> stored as ''.
+    const { row: row2 } = makeRow('2');
+    updateRowFromData(row2, { description: 'd', progress: null });
+    expect(row2.dataset.progressValue).toBe('');
+  });
+
+  test('hasOwnProperty gating: absent keys leave dataset untouched', () => {
+    const { row } = makeRow('1');
+    row.dataset.originId = 'pre';
+    row.dataset.contentType = 'pre';
+    updateRowFromData(row, { description: 'd' });
+    // origin_id / content_type not in payload -> not overwritten
+    expect(row.dataset.originId).toBe('pre');
+    expect(row.dataset.contentType).toBe('pre');
+  });
+
+  test('origin_id / content_type / markdown_source / markdown_editor round-trip', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, {
+      description: 'd',
+      origin_id: '77',
+      content_type: 'markdown',
+      markdown_source: '# s',
+      markdown_editor: 'rich',
+    });
+    expect(row.dataset.originId).toBe('77');
+    expect(row.dataset.contentType).toBe('markdown');
+    expect(row.dataset.markdownSource).toBe('# s');
+    expect(row.dataset.markdownEditor).toBe('rich');
+  });
+
+  test('has_children truthy sets attribute + property; falsy removes', () => {
+    const { row } = makeRow('1');
+    updateRowFromData(row, { description: 'd', has_children: true });
+    expect(row.hasAttribute('has-children')).toBe(true);
+    expect(row.hasChildren).toBe(true);
+
+    updateRowFromData(row, { description: 'd', has_children: false });
+    expect(row.hasAttribute('has-children')).toBe(false);
+    expect(row.hasChildren).toBe(false);
+  });
+
+  test('calls requestUpdate when the row exposes it', () => {
+    const { row } = makeRow('1');
+    let called = 0;
+    row.requestUpdate = () => { called += 1; };
+    updateRowFromData(row, { description: 'd' });
+    expect(called).toBe(1);
+  });
+
+  test('round-trip: updateRowFromData then inlinePayloadFromTree', () => {
+    const { row, tree } = makeRow('50', { parentId: '2' });
+    updateRowFromData(row, {
+      description: '<p>body</p>',
+      description_raw_html: '<p>raw</p>',
+      progress: 40,
+      origin_id: '5',
+      content_type: 'markdown',
+      markdown_source: '# md',
+      markdown_editor: 'source',
+    });
+    expect(inlinePayloadFromTree(tree)).toEqual({
+      id: '50',
+      description: '<p>body</p>',
+      description_raw_html: '<p>raw</p>',
+      origin_id: '5',
+      parent_id: '2',
+      progress: 40,
+      content_type: 'markdown',
+      markdown_editor: 'source',
+      markdown_source: '# md',
+    });
+  });
+});