collavre 0.22.0 → 0.24.0

data/app/javascript/modules/creative_row_editor_helpers.js

@@ -0,0 +1,76 @@
+// Pure, closure-independent helpers extracted from creative_row_editor.js.
+//
+// Every function here depends only on its arguments (and the module-local
+// layout constants below) — none captures editor closure state. Keeping them in
+// a separate module shrinks the main editor module and makes these units
+// individually testable. Behavior is identical to the original inline versions.
+
+const BULLET_STARTING_LEVEL = 3;
+const HEADING_INDENT_STEP_EM = 0.4;
+const BULLET_INDENT_STEP_PX = 30;
+
+export function treeRowElement(node) {
+  return node && node.closest ? node.closest('creative-tree-row') : null;
+}
+
+export function hasDatasetValue(element, key) {
+  if (!element || !element.dataset) return false;
+  return Object.prototype.hasOwnProperty.call(element.dataset, key);
+}
+
+export function setRowDatasetValue(row, key, value) {
+  if (!row || !row.dataset) return;
+  if (value === undefined || value === null) {
+    delete row.dataset[key];
+  } else {
+    row.dataset[key] = String(value);
+  }
+}
+
+export function isMarkdownEmpty(md) {
+  return !md || md.trim().length === 0;
+}
+
+export function buildChildrenLoadUrl(parentId, childLevel, selectMode) {
+  const params = new URLSearchParams();
+  params.set('level', String(childLevel));
+  params.set('select_mode', selectMode ? '1' : '0');
+  return `/creatives/${parentId}/children?${params.toString()}`;
+}
+
+export function readRowLevel(row) {
+  if (!row) return null;
+  if (row.isTitle) return 0;
+  if (row.getAttribute) {
+    const levelAttr = row.getAttribute('level');
+    if (levelAttr) {
+      const parsed = Number(levelAttr);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+  }
+  if (typeof row.level === 'number') {
+    return row.level;
+  }
+  if (row.level) {
+    const parsed = Number(row.level);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  const tree = row.querySelector ? row.querySelector('.creative-tree') : null;
+  if (tree && tree.dataset?.level) {
+    const parsed = Number(tree.dataset.level);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return 1;
+}
+
+export function editorPaddingForLevel(level) {
+  if (typeof level !== 'number' || Number.isNaN(level) || level <= 1) {
+    return '0px';
+  }
+  if (level <= BULLET_STARTING_LEVEL) {
+    const emValue = (level - 1) * HEADING_INDENT_STEP_EM;
+    return emValue ? `${emValue}em` : '0px';
+  }
+  const pxValue = (level - BULLET_STARTING_LEVEL) * BULLET_INDENT_STEP_PX;
+  return `${pxValue}px`;
+}

data/app/javascript/modules/creative_save_queue.js

@@ -0,0 +1,95 @@
+// The autosave request lifecycle extracted from creative_row_editor.js.
+//
+// The inline editor persists edits on a debounce and also saves directly on
+// structural changes (reorder, indent, progress toggle). Two invariants kept
+// getting re-broken across dozens of fix commits ("Prevent double saves...",
+// "Skip in-flight request during queue deduplication"):
+//
+//   1. Debounce: rapid edits collapse into a single trailing save; re-arming
+//      the timer must cancel the previous one.
+//   2. Single-flight: at most one save request is in flight at a time. A save
+//      requested while one is running must NOT start a second request — it
+//      returns the in-flight promise. (Dirty-tracking in the editor re-arms and
+//      a later schedule/flush persists the newer buffer.)
+//
+// This class owns exactly those two concerns — the debounce timer and the
+// single-flight guard around the request promise. It deliberately does NOT own
+// the editor's dirty flags (isDirty / pendingSave), which track *what* changed;
+// this owns *when the request runs*. Behavior is identical to the original
+// inline `saveTimer` / `saving` / `savePromise` logic; the timer functions are
+// injectable so the state machine is testable without real timers.
+export class CreativeSaveQueue {
+  constructor({ debounceMs = 5000, setTimer, clearTimer } = {}) {
+    this._debounceMs = debounceMs;
+    // Wrap the timer functions so they are invoked as free functions. Passing
+    // `setTimeout`/`clearTimeout` directly and calling them as `this._setTimer(...)`
+    // would invoke them with `this === queue`, which throws "Illegal invocation"
+    // in real browsers (jsdom does not, which is why unit tests can't catch it).
+    // Tests inject their own timer fns; production uses these window-bound wrappers.
+    this._setTimer = setTimer || ((fn, ms) => setTimeout(fn, ms));
+    this._clearTimer = clearTimer || ((id) => clearTimeout(id));
+    this._timer = null;
+    this._saving = false;
+    this._promise = Promise.resolve();
+  }
+
+  /** True while a save request is in flight. */
+  get saving() {
+    return this._saving;
+  }
+
+  /** The most recent (possibly in-flight) save promise. */
+  get promise() {
+    return this._promise;
+  }
+
+  /**
+   * Arm the debounce timer to invoke `flush` after `debounceMs`. Re-arming
+   * cancels any previously scheduled flush, so only the latest edit's timer
+   * fires (trailing debounce).
+   * @param {() => void} flush
+   */
+  schedule(flush) {
+    this.cancelTimer();
+    this._timer = this._setTimer(() => {
+      this._timer = null;
+      flush();
+    }, this._debounceMs);
+  }
+
+  /** Cancel a pending debounce timer, if any. Idempotent. */
+  cancelTimer() {
+    if (this._timer !== null) {
+      this._clearTimer(this._timer);
+      this._timer = null;
+    }
+  }
+
+  /**
+   * Run `execute` under the single-flight guard.
+   *
+   * - If a save is already in flight, returns the in-flight promise WITHOUT
+   *   invoking `execute` (the coalescing invariant).
+   * - Otherwise cancels any pending debounce, then invokes `execute`. `execute`
+   *   returns the save request promise, or a nullish value to signal "nothing
+   *   to persist" (e.g. empty content) — in which case no in-flight state is
+   *   entered and a resolved promise is returned. Invoking `execute` before
+   *   committing `saving` preserves the original ordering, where an empty-save
+   *   short-circuit never flips the in-flight flag.
+   *
+   * `saving` is cleared when the returned promise settles (success or failure).
+   * @param {() => (Promise|null|undefined)} execute
+   * @returns {Promise}
+   */
+  runExclusive(execute) {
+    if (this._saving) return this._promise;
+    this.cancelTimer();
+    const request = execute();
+    if (request == null) return Promise.resolve();
+    this._saving = true;
+    this._promise = Promise.resolve(request).finally(() => {
+      this._saving = false;
+    });
+    return this._promise;
+  }
+}

data/app/javascript/modules/creative_tree_dom.js

@@ -0,0 +1,260 @@
+// Tree-DOM navigation & geometry helpers extracted from creative_row_editor.js.
+//
+// This is slice 2 of the creative_row_editor god-file decomposition (slice 1 was
+// the save-queue single-flight/debounce cluster, already in creative_save_queue.js).
+//
+// Every function here operates purely on the DOM nodes passed as arguments (plus
+// `document` for id/selector lookups) — none captures the editor closure's shared
+// state (currentTree, form, parentInput, isDirty, pendingSave, uploadsPending, …).
+// That is exactly why this cluster is a clean seam: it can be lifted out and unit
+// tested against a jsdom fixture without standing up the whole inline editor.
+//
+// The cluster underpins the structural-move paths (levelUp / levelDown / addNew /
+// move) that compute a node's parent, its before/after siblings, and its indent
+// level — the inputs to the recurring "parentId loss / wrong ordering" bug class.
+// Pinning them with characterization tests raises the floor under those moves.
+//
+// NOTE ON BINDING HAZARDS: none of these functions use setTimeout / setInterval /
+// requestAnimationFrame / queueMicrotask, and none rely on `this`. They are plain
+// functions invoked by name, so the "Illegal invocation" class of real-browser
+// regression (a prior timer-extraction bug that jsdom could not catch) does not
+// apply here. The only DOM writes are element mutations (insertBefore, appendChild,
+// setAttribute, dataset, style, requestUpdate) invoked on the passed nodes.
+import { treeRowElement, readRowLevel, buildChildrenLoadUrl } from './creative_row_editor_helpers';
+
+export function creativeTreeElement(node) {
+  if (!node) return null;
+  if (node.classList && node.classList.contains('creative-tree')) return node;
+  if (node.querySelector) {
+    const inner = node.querySelector('.creative-tree');
+    if (inner) return inner;
+  }
+  return null;
+}
+
+export function creativeIdFrom(node) {
+  const treeEl = creativeTreeElement(node);
+  if (treeEl && treeEl.dataset) {
+    return treeEl.dataset.id || '';
+  }
+  if (node?.getAttribute) {
+    return node.getAttribute('creative-id') || node.getAttribute('data-id') || '';
+  }
+  return '';
+}
+
+export function siblingTreeRow(row, direction) {
+  if (!row) return null;
+  const step = direction === 'previous' ? 'previousSibling' : 'nextSibling';
+  let node = row[step];
+  while (node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node[step];
+      continue;
+    }
+    if (node.matches?.('creative-tree-row')) return node;
+    if (node.classList?.contains?.('creative-children')) {
+      node = node[step];
+      continue;
+    }
+    node = node[step];
+  }
+  return null;
+}
+
+export function siblingOrderingForRow(row) {
+  const beforeRow = siblingTreeRow(row, 'next');
+  const afterRow = siblingTreeRow(row, 'previous');
+  return {
+    beforeId: beforeRow ? creativeIdFrom(beforeRow) : '',
+    afterId: afterRow ? creativeIdFrom(afterRow) : ''
+  };
+}
+
+export function treeContainerElement(tree) {
+  if (!tree) return null;
+  const row = treeRowElement(tree);
+  if (row && row.parentNode) return row.parentNode;
+  return tree.parentNode;
+}
+
+export function nodeAfterTreeBlock(tree) {
+  if (!tree) return null;
+  const row = treeRowElement(tree);
+  if (!row) return tree.nextSibling;
+  let node = row.nextSibling;
+  while (node && node.nodeType === Node.TEXT_NODE) node = node.nextSibling;
+  const treeId = tree.dataset?.id;
+  if (treeId) {
+    const childrenContainer = document.getElementById(`creative-children-${treeId}`);
+    if (childrenContainer && childrenContainer.parentNode === row.parentNode && node === childrenContainer) {
+      node = childrenContainer.nextSibling;
+      while (node && node.nodeType === Node.TEXT_NODE) node = node.nextSibling;
+    }
+  }
+  return node;
+}
+
+export function normalizeRowNode(node) {
+  if (!node) return null;
+  if (node.matches && node.matches('creative-tree-row')) return node;
+  if (node.classList && node.classList.contains('creative-tree')) {
+    const row = treeRowElement(node);
+    return row || node;
+  }
+  return node;
+}
+
+export function childrenContainerForTree(tree) {
+  if (!tree) return null;
+  const treeId = tree.dataset?.id;
+  if (treeId) {
+    const byId = document.getElementById(`creative-children-${treeId}`);
+    if (byId) return byId;
+  }
+  if (tree.children && tree.children.length > 0) {
+    for (const child of tree.children) {
+      if (child && child.classList && child.classList.contains('creative-children')) {
+        return child;
+      }
+    }
+  }
+  const row = treeRowElement(tree);
+  if (row) {
+    let sibling = row.nextElementSibling;
+    while (sibling) {
+      if (sibling.matches?.('creative-tree-row')) break;
+      if (sibling.classList?.contains('creative-children')) return sibling;
+      sibling = sibling.nextElementSibling;
+    }
+  }
+  return null;
+}
+
+export function ensureChildrenContainer(tree) {
+  if (!tree) return null;
+  let container = childrenContainerForTree(tree);
+  if (container) return container;
+  const parentId = tree.dataset?.id;
+  if (!parentId) return null;
+  container = document.createElement('div');
+  container.className = 'creative-children';
+  container.id = `creative-children-${parentId}`;
+  const parentRow = treeRowElement(tree);
+  const parentLevel = readRowLevel(parentRow) || 1;
+  const childLevel = parentLevel + 1;
+  const selectModeActive = parentRow?.hasAttribute?.('select-mode') ? 1 : 0;
+  container.dataset.loadUrl = buildChildrenLoadUrl(parentId, childLevel, selectModeActive);
+  container.dataset.expanded = 'true';
+  if (container.dataset.loaded) delete container.dataset.loaded;
+  const row = treeRowElement(tree);
+  const parentContainer = row?.parentNode || tree.parentNode;
+  if (parentContainer) {
+    const afterRow = row?.nextSibling;
+    if (afterRow) {
+      parentContainer.insertBefore(container, afterRow);
+    } else {
+      parentContainer.appendChild(container);
+    }
+  } else {
+    tree.appendChild(container);
+  }
+  return container;
+}
+
+export function expandChildrenContainer(container) {
+  if (!container) return;
+  container.style.display = '';
+  if (container.dataset) {
+    container.dataset.expanded = 'true';
+  }
+}
+
+export function moveTreeBlock(tree, targetContainer, referenceNode = null) {
+  if (!tree || !targetContainer) return;
+  const row = treeRowElement(tree);
+  if (!row) return;
+  const nodesToMove = [row];
+  const childContainer = childrenContainerForTree(tree);
+  if (childContainer) nodesToMove.push(childContainer);
+  nodesToMove.forEach((node) => {
+    if (!node) return;
+    if (referenceNode) {
+      targetContainer.insertBefore(node, referenceNode);
+    } else {
+      targetContainer.appendChild(node);
+    }
+  });
+}
+
+export function listAllTreeNodes() {
+  const root = document.getElementById('creatives');
+  if (root) return Array.from(root.querySelectorAll('.creative-tree'));
+  return Array.from(document.querySelectorAll('.creative-tree'));
+}
+
+export function findPreviousTree(tree) {
+  if (!tree) return null;
+  const nodes = listAllTreeNodes();
+  const index = nodes.indexOf(tree);
+  if (index <= 0) return null;
+  const currentLevel = getTreeLevel(tree);
+  for (let i = index - 1; i >= 0; i--) {
+    const candidate = nodes[i];
+    if (!candidate) continue;
+    const candidateLevel = getTreeLevel(candidate);
+    if (candidateLevel === currentLevel) return candidate;
+    if (candidateLevel < currentLevel) return null;
+  }
+  return null;
+}
+
+export function getTreeLevel(tree) {
+  if (!tree) return 1;
+  const levelValue = Number(tree.dataset?.level);
+  if (!Number.isNaN(levelValue) && levelValue > 0) {
+    return levelValue;
+  }
+  const row = treeRowElement(tree);
+  return readRowLevel(row) || 1;
+}
+
+export function updateTreeLevels(tree, delta) {
+  if (!tree || !delta) return;
+  const currentLevel = Number(tree.dataset?.level) || 1;
+  const nextLevel = Math.max(1, currentLevel + delta);
+  tree.dataset.level = String(nextLevel);
+  const row = treeRowElement(tree);
+  if (row) {
+    row.setAttribute('level', nextLevel);
+    row.level = nextLevel;
+    row.requestUpdate?.();
+  }
+  const container = childrenContainerForTree(tree);
+  if (!container) return;
+  Array.from(container.children || []).forEach((childRow) => {
+    if (!childRow.matches?.('creative-tree-row')) return;
+    const childTree = childRow.querySelector('.creative-tree');
+    if (childTree) {
+      updateTreeLevels(childTree, delta);
+    }
+  });
+}
+
+export function setTreeLevel(tree, targetLevel) {
+  if (!tree || typeof targetLevel !== 'number') return;
+  const currentLevel = Number(tree.dataset?.level) || 1;
+  const delta = targetLevel - currentLevel;
+  if (delta === 0) return;
+  updateTreeLevels(tree, delta);
+}
+
+export function removeTreeElement(tree) {
+  if (!tree) return;
+  const row = treeRowElement(tree);
+  if (row) {
+    row.remove();
+  } else if (tree.remove) {
+    tree.remove();
+  }
+}

data/app/javascript/modules/export_to_markdown.js

@@ -1,3 +1,4 @@
+import { alertDialog } from '../lib/utils/dialog';
 
 if (!window.isExportMarkdownEnabled) {
     window.isExportMarkdownEnabled = true;
@@ -27,7 +28,7 @@ if (!window.isExportMarkdownEnabled) {
                             URL.revokeObjectURL(url);
                         }, 0);
                     })
-                    .catch(err => alert(err));
+                    .catch(err => alertDialog(err));
             });
         }
     });

data/app/javascript/modules/lexical_inline_editor.jsx

@@ -52,7 +52,8 @@ export function createInlineEditor(container, {
             suppressNextChange = false
             return
           }
-          currentHtml = value
+          // value is { html, markdown }; keep currentHtml for the render fallback.
+          currentHtml = value?.html ?? ""
           onChange?.(value)
         }}
         onReady={(api) => {

data/app/javascript/modules/slide_view.js

@@ -1,5 +1,7 @@
 import { createSubscription } from '../services/cable'
-import DOMPurify from 'dompurify'
+import { highlightCodeBlocks } from '../lib/utils/markdown'
+import { addTableDownloadButtons } from '../lib/utils/table_download'
+import { sanitizeDescriptionHtml } from '../lib/utils/sanitize_description'
 
 document.addEventListener('DOMContentLoaded', function() {
   var container = document.getElementById('slide-view');
@@ -24,6 +26,10 @@ document.addEventListener('DOMContentLoaded', function() {
     load(index, false);
   } else {
     updateUrl(index);
+    // Initial slide is server-rendered (static ERB): re-tokenize its code blocks
+    // and attach table download buttons, same as the JS-loaded slides below.
+    highlightCodeBlocks(contentEl);
+    addTableDownloadButtons(contentEl);
   }
 
   function updateUrl(idx) {
@@ -60,8 +66,11 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         contentEl.innerHTML = '';
         var el = document.createElement(tag);
-        el.innerHTML = DOMPurify.sanitize(data.description);
+        el.className = 'creative-content';
+        el.innerHTML = sanitizeDescriptionHtml(data.description_embedded_html || data.description);
         contentEl.appendChild(el);
+        highlightCodeBlocks(el);
+        addTableDownloadButtons(el);
         if (captionEl) {
           captionEl.textContent = data.prompt || '';
         }