RubyGems - collavre - Versions diffs - 0.22.0 → 0.23.0 - Mend

collavre 0.22.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

data/app/javascript/lib/utils/dialog.js ADDED Viewed

@@ -0,0 +1,300 @@
+/**
+ * dialog — Promise-based, in-app replacements for the native browser dialogs
+ * window.alert(), window.confirm() and window.prompt().
+ *
+ * Why: the packaged desktop app runs inside a Tauri (WKWebView) webview, which
+ * does not reliably present native dialogs — alert() shows nothing, confirm()
+ * returns false with no UI, and prompt() returns null. Every action gated on
+ * `if (confirm(...))` then silently no-ops, and every `alert(error)` swallows
+ * the message, so a failure looks like data loss. Rendering our own DOM modal
+ * behaves identically in a browser and in the webview, removing the native
+ * dialog dependency entirely.
+ *
+ * Public API (all return Promises so callers `await` them):
+ *   await alertDialog(message)                  → undefined  (single OK button)
+ *   await confirmDialog(message, { danger })    → boolean    (OK / Cancel)
+ *   await promptDialog(message, { defaultValue })→ string|null (input + OK / Cancel)
+ *
+ * Reuses the shared .modal-dialog styles (modal_dialog.css) so any host app or
+ * engine that bundles the collavre stylesheet renders these consistently.
+ */
+// Localized default button labels. Dialog *messages* are localized by the
+// caller (server-side strings / data attributes); only the generic OK/Cancel
+// buttons need a locale here. Locale comes from <html lang>, falling back to
+// the webview/browser language.
+const LABELS = {
+  ko: { ok: '확인', cancel: '취소' },
+  en: { ok: 'OK', cancel: 'Cancel' },
+}
+function localeLabels() {
+  const lang = (
+    document.documentElement.lang ||
+    navigator.language ||
+    'en'
+  ).toLowerCase()
+  const key = Object.keys(LABELS).find((l) => lang.startsWith(l))
+  return LABELS[key] || LABELS.en
+}
+// Stack of open dialogs so keyboard handling only targets the topmost one.
+const stack = []
+/**
+ * Internal modal builder shared by alert/confirm/prompt.
+ *
+ * @param {object} config
+ * @param {string} config.message      Body text (rendered as text, never HTML).
+ * @param {string|null} config.title   Optional header title.
+ * @param {boolean} config.danger      Style the confirm button as destructive.
+ * @param {boolean} config.showCancel  Render a Cancel button (confirm/prompt).
+ * @param {string} config.confirmText  Confirm button label.
+ * @param {string} config.cancelText   Cancel button label.
+ * @param {object|null} config.input   When set, render a text input:
+ *        { defaultValue?: string, placeholder?: string }
+ * @returns {Promise<{ confirmed: boolean, value: string|null }>}
+ *        confirmed=true on OK/Enter; false on Cancel/Escape/overlay dismiss.
+ *        value=current input text (always '' when no input is rendered).
+ */
+function runDialog(config) {
+  const labels = localeLabels()
+  const {
+    message,
+    title = null,
+    danger = false,
+    showCancel = false,
+    confirmText = labels.ok,
+    cancelText = labels.cancel,
+    input = null,
+  } = config
+  return new Promise((resolve) => {
+    const previousFocus = document.activeElement
+    const overlay = document.createElement('div')
+    overlay.className = 'modal-dialog-overlay open'
+    // A real <dialog> (not a <div>): showModal() promotes it into the browser
+    // top layer so it renders ABOVE native <dialog> lightboxes (also top layer)
+    // and z-index:9999 fullscreen popups. A plain z-index can never beat the
+    // top layer, so an in-app confirm gated behind those surfaces would be
+    // invisible and look hung — the exact silent-no-op failure this module
+    // exists to remove.
+    const dialog = document.createElement('dialog')
+    dialog.className = 'modal-dialog modal-dialog-compact open'
+    dialog.setAttribute('role', 'alertdialog')
+    dialog.setAttribute('aria-modal', 'true')
+    if (title) {
+      const header = document.createElement('div')
+      header.className = 'modal-dialog-header'
+      const titleEl = document.createElement('div')
+      titleEl.className = 'modal-dialog-title'
+      titleEl.textContent = title
+      header.appendChild(titleEl)
+      dialog.appendChild(header)
+    }
+    const body = document.createElement('div')
+    body.className = 'modal-dialog-body'
+    // Message text. textContent (not innerHTML): the message may contain
+    // untrusted content, and native dialogs never rendered HTML either.
+    // white-space: pre-wrap (CSS) preserves the \n line breaks they honored.
+    if (message != null && String(message) !== '') {
+      const text = document.createElement('div')
+      text.className = 'confirm-dialog-message'
+      text.textContent = String(message)
+      body.appendChild(text)
+    }
+    // Optional input field (promptDialog).
+    let inputEl = null
+    if (input) {
+      inputEl = document.createElement('input')
+      inputEl.type = 'text'
+      inputEl.className = 'modal-dialog-input'
+      if (input.placeholder) inputEl.placeholder = input.placeholder
+      inputEl.value = input.defaultValue != null ? String(input.defaultValue) : ''
+      // Spacing when a message precedes the input.
+      if (body.childNodes.length > 0) inputEl.style.marginTop = 'var(--space-3)'
+      body.appendChild(inputEl)
+    }
+    dialog.appendChild(body)
+    const footer = document.createElement('div')
+    footer.className = 'modal-dialog-footer'
+    let cancelBtn = null
+    if (showCancel) {
+      cancelBtn = document.createElement('button')
+      cancelBtn.type = 'button'
+      cancelBtn.className = 'modal-dialog-btn modal-dialog-btn-secondary'
+      cancelBtn.textContent = cancelText
+      footer.appendChild(cancelBtn)
+    }
+    const confirmBtn = document.createElement('button')
+    confirmBtn.type = 'button'
+    confirmBtn.className =
+      'modal-dialog-btn ' +
+      (danger ? 'modal-dialog-btn-danger' : 'modal-dialog-btn-primary')
+    confirmBtn.textContent = confirmText
+    footer.appendChild(confirmBtn)
+    dialog.appendChild(footer)
+    const entry = { dialog }
+    let settled = false
+    function close(confirmed) {
+      if (settled) return
+      settled = true
+      const value = inputEl ? inputEl.value : ''
+      const i = stack.indexOf(entry)
+      if (i !== -1) stack.splice(i, 1)
+      document.removeEventListener('keydown', onKeydown, true)
+      overlay.remove() // no-op when never appended (top-layer path)
+      // Exit the top layer before detaching (close event is not observed here).
+      try {
+        if (dialog.open && typeof dialog.close === 'function') dialog.close()
+      } catch (_) {
+        /* unsupported — removal below still drops it from the top layer */
+      }
+      dialog.remove()
+      // Restore focus to whatever triggered the dialog.
+      try {
+        if (previousFocus && typeof previousFocus.focus === 'function') {
+          previousFocus.focus()
+        }
+      } catch (_) {
+        /* element gone — ignore */
+      }
+      resolve({ confirmed, value })
+    }
+    function onKeydown(e) {
+      // Only the topmost dialog reacts to keys.
+      if (stack[stack.length - 1] !== entry) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        close(false)
+      } else if (e.key === 'Enter') {
+        // In a text input, Enter submits (parity with native prompt).
+        e.preventDefault()
+        e.stopPropagation()
+        close(true)
+      }
+    }
+    if (cancelBtn) cancelBtn.addEventListener('click', () => close(false))
+    confirmBtn.addEventListener('click', () => close(true))
+    // Click on the ::backdrop (its event target is the <dialog> itself, since
+    // the panel content is nested) dismisses — parity with the old overlay.
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) close(false)
+    })
+    // Escape on a modal <dialog> fires `cancel`; route it through our teardown
+    // (focus restore + promise resolution) instead of the bare native close.
+    dialog.addEventListener('cancel', (e) => {
+      e.preventDefault()
+      close(false)
+    })
+    document.addEventListener('keydown', onKeydown, true)
+    document.body.appendChild(dialog)
+    stack.push(entry)
+    // Promote into the top layer. Fall back to a z-index overlay backdrop only
+    // where showModal is unavailable (jsdom under tests, very old webviews).
+    let topLayer = false
+    try {
+      dialog.showModal()
+      topLayer = true
+    } catch (_) {
+      /* no showModal — manual backdrop + stacking below */
+    }
+    if (!topLayer) {
+      dialog.setAttribute('open', '')
+      overlay.addEventListener('click', () => close(false))
+      document.body.insertBefore(overlay, dialog)
+    }
+    // Focus the input (prompt) or the confirm button (alert/confirm) so Enter
+    // accepts, matching native dialog behavior.
+    if (inputEl) {
+      inputEl.focus()
+      inputEl.select()
+    } else {
+      confirmBtn.focus()
+    }
+  })
+}
+/**
+ * alertDialog — in-app replacement for window.alert().
+ * Resolves (undefined) when dismissed. Usually fire-and-forget at call sites,
+ * but returns a Promise so callers may `await` it when ordering matters.
+ *
+ *   alertDialog('Failed to save')
+ *   await alertDialog('Done', { title: 'Export' })
+ */
+export function alertDialog(message, options = {}) {
+  const { title = null, confirmText, danger = false } = options
+  return runDialog({
+    message,
+    title,
+    danger,
+    showCancel: false,
+    confirmText,
+  }).then(() => undefined)
+}
+/**
+ * confirmDialog — in-app replacement for window.confirm().
+ * Resolves true when confirmed, false when cancelled/dismissed.
+ *
+ *   if (await confirmDialog(message, { danger: true })) doDestructiveThing()
+ */
+export function confirmDialog(message, options = {}) {
+  const { confirmText, cancelText, danger = false, title = null } = options
+  return runDialog({
+    message,
+    title,
+    danger,
+    showCancel: true,
+    confirmText,
+    cancelText,
+  }).then((r) => r.confirmed)
+}
+/**
+ * promptDialog — in-app replacement for window.prompt().
+ * Resolves the entered string when confirmed, or null when cancelled/dismissed
+ * (parity with native prompt, which returns null on cancel).
+ *
+ *   const name = await promptDialog('New name?', { defaultValue: current })
+ *   if (name !== null) rename(name)
+ */
+export function promptDialog(message, options = {}) {
+  const {
+    defaultValue = '',
+    placeholder = '',
+    confirmText,
+    cancelText,
+    title = null,
+  } = options
+  return runDialog({
+    message,
+    title,
+    showCancel: true,
+    confirmText,
+    cancelText,
+    input: { defaultValue, placeholder },
+  }).then((r) => (r.confirmed ? r.value : null))
+}
+export default confirmDialog

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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