collavre 0.22.0 → 0.24.0

data/app/javascript/components/__tests__/creative_tree_row_parent_id.test.js

@@ -0,0 +1,87 @@
+/**
+ * Regression: parentId single source of truth.
+ *
+ * The tree row component used to render `data-parent-id=${this.parentId ?? nothing}`,
+ * which OMITTED the attribute whenever parentId was null. `addNew` derives a new
+ * sibling's parent from `prev.dataset.parentId`, so an absent attribute produced an
+ * `undefined` parent downstream and lost the real parent for newly-added siblings.
+ *
+ * The single convention: `data-parent-id` is ALWAYS emitted on `.creative-tree`.
+ * A non-empty value is the parent id; "" means "root / no parent". This mirrors the
+ * dynamic-creation path (`dataset.parentId = parentId || ''`).
+ */
+
+// The component calls `customElements.define(...)` at module-eval time and reads
+// `customElements` as a bare global. The jest environment only exposes it on
+// `window`, so bridge it before importing the component.
+beforeAll(() => {
+  if (typeof globalThis.customElements === "undefined") {
+    globalThis.customElements = window.customElements;
+  }
+});
+
+async function mountRow(props) {
+  await import("../creative_tree_row.js");
+  const el = document.createElement("creative-tree-row");
+  Object.assign(el, props);
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+// The `.creative-tree` element is what the editor reads via `tree.dataset.parentId`.
+function treeOf(el) {
+  return el.querySelector(".creative-tree");
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("creative-tree-row parentId convention", () => {
+  test("non-title row under a page-title parent keeps the parent id", async () => {
+    const el = await mountRow({ creativeId: "8", parentId: "5", level: 2 });
+    const tree = treeOf(el);
+
+    // The attribute is always present and carries the real parent id — this is
+    // exactly what addNew reads (`prev.dataset.parentId`) when deriving a sibling.
+    expect(tree.hasAttribute("data-parent-id")).toBe(true);
+    expect(tree.dataset.parentId).toBe("5");
+  });
+
+  test("root row emits an explicit empty marker instead of omitting the attribute", async () => {
+    const el = await mountRow({ creativeId: "5", parentId: null, level: 1 });
+    const tree = treeOf(el);
+
+    // Before the fix this attribute was omitted (ambiguous root vs unknown).
+    expect(tree.hasAttribute("data-parent-id")).toBe(true);
+    expect(tree.dataset.parentId).toBe("");
+  });
+
+  test("title row preserves its own parent (nested page) instead of dropping it", async () => {
+    const el = await mountRow({ creativeId: "5", parentId: "2", isTitle: true });
+    const tree = treeOf(el);
+
+    expect(tree.classList.contains("creative-tree-title")).toBe(true);
+    expect(tree.hasAttribute("data-parent-id")).toBe(true);
+    expect(tree.dataset.parentId).toBe("2");
+  });
+
+  test("root title row emits explicit empty marker", async () => {
+    const el = await mountRow({ creativeId: "5", parentId: null, isTitle: true });
+    const tree = treeOf(el);
+
+    expect(tree.hasAttribute("data-parent-id")).toBe(true);
+    expect(tree.dataset.parentId).toBe("");
+  });
+
+  test("addNew sibling derivation reads the correct parent from a page-title child", async () => {
+    // Simulate the editor's else-branch derivation: parentId = prev.dataset.parentId
+    // for a child row that lives under a page-title parent (id 5).
+    const child = await mountRow({ creativeId: "8", parentId: "5", level: 2 });
+    const prev = treeOf(child);
+
+    const derivedParentId = prev.dataset.parentId || "";
+    expect(derivedParentId).toBe("5"); // sibling inherits the page-title parent
+  });
+});

data/app/javascript/components/creative_tree_row.js

@@ -1,7 +1,9 @@
 import { LitElement, html, svg, nothing } from "lit";
-import DOMPurify from "dompurify";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { parseEmojis } from "../utils/emoji_parser";
+import { highlightCodeBlocks } from "../lib/utils/markdown";
+import { addCreativeTableDownloadButtons } from "../lib/utils/table_download";
+import { sanitizeDescriptionHtml } from "../lib/utils/sanitize_description";
 import csrfFetch from "../lib/api/csrf_fetch";
 
 const BULLET_STARTING_LEVEL = 3;
@@ -78,6 +80,19 @@ class CreativeTreeRow extends LitElement {
   updated(changedProperties) {
     this._attachHandlers();
 
+    // Re-tokenize the server-rendered description code blocks with hljs so they
+    // match the editor's palette and follow light/dark theme. Idempotent: only
+    // unmarked blocks are processed, and lit re-renders description DOM (dropping
+    // the marker) only when descriptionHtml actually changes.
+    highlightCodeBlocks(this);
+
+    // Attach CSV/Excel download toolbars to markdown tables in the description
+    // display areas so creative tables match the chat-message table UI.
+    // Scoped to .creative-content/.creative-title-content (not the whole row)
+    // so the inline editor's own tables are never wrapped. Idempotent, safe on
+    // every Lit re-render.
+    addCreativeTableDownloadButtons(this);
+
     if (changedProperties.has('loadingChildren')) {
       if (this.loadingChildren) {
         this._startAnimation();
@@ -99,8 +114,10 @@ class CreativeTreeRow extends LitElement {
 
   set descriptionHtml(value) {
     const oldValue = this._descriptionHtml;
-    // Always sanitize when setting new HTML
-    const sanitized = DOMPurify.sanitize(value ?? "");
+    // Always sanitize when setting new HTML. Uses the shared sanitizer so the
+    // server-generated YouTube preview iframe survives (default DOMPurify config
+    // strips all iframes, which is what broke the YouTube link preview).
+    const sanitized = sanitizeDescriptionHtml(value);
     this._descriptionHtml = sanitized;
     this.dataset.descriptionHtml = sanitized;
     this.requestUpdate("descriptionHtml", oldValue);
@@ -191,6 +208,12 @@ class CreativeTreeRow extends LitElement {
     if (this._progressToggle) this._progressToggle.addEventListener("click", this._handleProgressToggle, { passive: false });
   }
 
+  // parentId convention (single source of truth): `data-parent-id` is ALWAYS
+  // emitted on the `.creative-tree` element. A non-empty value is the parent
+  // creative id; an empty string ("") means "root / no parent". This mirrors
+  // the dynamic-creation path (`dataset.parentId = parentId || ''`) so readers
+  // never have to disambiguate an *absent* attribute (unknown) from a real
+  // root, which previously dropped the parent for newly-added siblings.
   render() {
     if (this.isTitle) {
       return this._renderTitle();
@@ -207,7 +230,7 @@ class CreativeTreeRow extends LitElement {
         class="creative-tree"
         id=${this.domId ?? nothing}
         data-id=${this.creativeId ?? nothing}
-        data-parent-id=${this.parentId ?? nothing}
+        data-parent-id=${this.parentId ?? ""}
         data-level=${this.level ?? nothing}
         draggable=${draggableAttr}
         data-action=${dragActions}
@@ -233,7 +256,7 @@ class CreativeTreeRow extends LitElement {
         class="creative-tree creative-tree-title"
         id=${this.domId ?? nothing}
         data-id=${this.creativeId ?? nothing}
-        data-parent-id=${this.parentId ?? nothing}
+        data-parent-id=${this.parentId ?? ""}
       >
         <div class="creative-row" style="background-color: transparent;" data-creatives--select-mode-target="row">
           <div class="creative-row-start" style="align-items: center;">

data/app/javascript/components/plugins/list_tab_indent_plugin.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { registerListTabIndentation } from "../../lib/lexical/list_tab_indent"
+
+/**
+ * Enables Tab / Shift+Tab nesting for list items in the inline editor.
+ * The actual command handling lives in registerListTabIndentation so it can be
+ * unit-tested against a headless editor.
+ */
+export default function ListTabIndentPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => registerListTabIndentation(editor), [editor])
+
+  return null
+}

data/app/javascript/components/plugins/markdown_shortcuts_plugin.jsx

@@ -6,16 +6,19 @@ import {
   ORDERED_LIST,
   CODE
 } from "@lexical/markdown"
+import { registerCodeFenceShortcut } from "../../lib/lexical/code_fence_shortcut"
 
 /**
  * Markdown-style shortcuts for the creative inline editor:
  *
  * - "* " / "- " / "+ " at line start → unordered list
  * - "1. " (any number) at line start → ordered list
- * - "```" + space at line start → code block
+ * - "```" (optionally "```lang") on its own line → code block
  *
- * These fire on text change (not on Enter), so they don't conflict
- * with the Enter→addNew() shortcut on desktop.
+ * The list transformers fire on text change. The built-in CODE transformer
+ * needs "``` " (trailing space); registerCodeFenceShortcut adds the Enter path,
+ * converting a "```" (or "```lang") line to a code block when Enter is pressed —
+ * so the language can be typed before the fence commits.
  */
 const CREATIVE_MARKDOWN_TRANSFORMERS = [
   UNORDERED_LIST,
@@ -27,7 +30,15 @@ export default function MarkdownShortcutsPlugin() {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
-    return registerMarkdownShortcuts(editor, CREATIVE_MARKDOWN_TRANSFORMERS)
+    const unregisterShortcuts = registerMarkdownShortcuts(
+      editor,
+      CREATIVE_MARKDOWN_TRANSFORMERS
+    )
+    const unregisterFence = registerCodeFenceShortcut(editor)
+    return () => {
+      unregisterShortcuts()
+      unregisterFence()
+    }
   }, [editor])
 
   return null

data/app/javascript/components/plugins/table_hover_actions_plugin.jsx

@@ -0,0 +1,405 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable"
+import {
+  $deleteTableColumnAtSelection,
+  $deleteTableRowAtSelection,
+  $getTableAndElementByKey,
+  $getTableColumnIndexFromTableCellNode,
+  $getTableRowIndexFromTableCellNode,
+  $insertTableColumnAtSelection,
+  $insertTableRowAtSelection,
+  $isTableCellNode,
+  $isTableNode,
+  getTableElement,
+  TableNode
+} from "@lexical/table"
+import { $findMatchingParent, mergeRegister } from "@lexical/utils"
+import { $getNearestNodeFromDOMNode, isHTMLElement } from "lexical"
+
+// Cell-boundary action buttons, all driven purely by `mousemove` (never by focus
+// or selection): hover near a table's bottom edge to append a row, near its right
+// edge to append a column, and hover any cell to reveal "×" buttons in the row's
+// left gutter / the column's top gutter that delete that row / column.
+//
+// Delete used to live in a chevron dropdown (TableActionMenuPlugin) that tracked
+// the editor selection and portaled a floating menu. On desktop, clicking the
+// chevron stole focus from the contenteditable, which collapsed the selection out
+// of the editor and made the menu flash-then-close while the chevron bounced — a
+// focus/selection/render-timing race that could not be reproduced headless and
+// survived four positioning fixes. This mousemove-driven approach has none of that
+// machinery (no selection tracking, no $moveMenu, no click-outside, no focus
+// dependency), which is exactly why the add "+" buttons always worked on PC and
+// mobile alike. Ported/extended from the Lexical playground's TableHoverActions.
+
+const BUTTON_WIDTH_PX = 20
+const DELETE_BUTTON_PX = 18
+
+// Build a CSS selector from a theme class name (mirrors the playground helper).
+function getThemeSelector(getTheme, name) {
+  const className = getTheme()?.[name]
+  if (typeof className !== "string") {
+    throw new Error(`getThemeSelector: required theme property ${name} not defined`)
+  }
+  return className
+    .split(/\s+/g)
+    .map((cls) => `.${cls}`)
+    .join()
+}
+
+// Trailing-edge debounce with a maxWait ceiling and a cancel() method.
+function useDebounce(fn, ms, maxWait) {
+  const fnRef = useRef(fn)
+  fnRef.current = fn
+  return useMemo(() => {
+    let timer = null
+    let firstCall = 0
+    const invoke = (args) => {
+      timer = null
+      firstCall = 0
+      fnRef.current(...args)
+    }
+    const debounced = (...args) => {
+      const now = Date.now()
+      if (!timer) firstCall = now
+      if (timer) clearTimeout(timer)
+      const waitedFor = now - firstCall
+      const remainingMax = maxWait != null ? Math.max(0, maxWait - waitedFor) : Infinity
+      const delay = Math.min(ms, remainingMax)
+      timer = setTimeout(() => invoke(args), delay)
+    }
+    debounced.cancel = () => {
+      if (timer) clearTimeout(timer)
+      timer = null
+      firstCall = 0
+    }
+    return debounced
+  }, [ms, maxWait])
+}
+
+function getMouseInfo(event, getTheme) {
+  const target = event.target
+  const tableCellClass = getThemeSelector(getTheme, "tableCell")
+
+  if (isHTMLElement(target)) {
+    const tableDOMNode = target.closest(`td${tableCellClass}, th${tableCellClass}`)
+
+    const isOutside = !(
+      tableDOMNode ||
+      target.closest(`button${getThemeSelector(getTheme, "tableAddRows")}`) ||
+      target.closest(`button${getThemeSelector(getTheme, "tableAddColumns")}`) ||
+      target.closest(`button${getThemeSelector(getTheme, "tableDeleteRows")}`) ||
+      target.closest(`button${getThemeSelector(getTheme, "tableDeleteColumns")}`) ||
+      target.closest("div.TableCellResizer__resizer")
+    )
+
+    return { isOutside, tableDOMNode }
+  }
+  return { isOutside: true, tableDOMNode: null }
+}
+
+function TableHoverActionsContainer({ anchorElem }) {
+  const [editor, { getTheme }] = useLexicalComposerContext()
+  const isEditable = useLexicalEditable()
+  const [isShownRow, setShownRow] = useState(false)
+  const [isShownColumn, setShownColumn] = useState(false)
+  const [isShownDeleteRow, setShownDeleteRow] = useState(false)
+  const [isShownDeleteColumn, setShownDeleteColumn] = useState(false)
+  const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false)
+  const [position, setPosition] = useState({})
+  const [deleteRowPosition, setDeleteRowPosition] = useState({})
+  const [deleteColumnPosition, setDeleteColumnPosition] = useState({})
+  const tableSetRef = useRef(new Set())
+  const tableCellDOMNodeRef = useRef(null)
+
+  const hideAll = () => {
+    setShownRow(false)
+    setShownColumn(false)
+    setShownDeleteRow(false)
+    setShownDeleteColumn(false)
+  }
+
+  const debouncedOnMouseMove = useDebounce(
+    (event) => {
+      const { isOutside, tableDOMNode } = getMouseInfo(event, getTheme)
+
+      if (isOutside) {
+        hideAll()
+        return
+      }
+
+      if (!tableDOMNode) return
+
+      tableCellDOMNodeRef.current = tableDOMNode
+
+      let hoveredRowNode = null
+      let hoveredColumnNode = null
+      let tableDOMElement = null
+      let canDeleteRow = false
+      let canDeleteColumn = false
+
+      editor.getEditorState().read(
+        () => {
+          const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode)
+
+          if ($isTableCellNode(maybeTableCell)) {
+            const table = $findMatchingParent(maybeTableCell, (node) => $isTableNode(node))
+            if (!$isTableNode(table)) return
+
+            tableDOMElement = getTableElement(table, editor.getElementByKey(table.getKey()))
+
+            if (tableDOMElement) {
+              const rowCount = table.getChildrenSize()
+              const colCount = table.getChildAtIndex(0)?.getChildrenSize()
+
+              const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell)
+              const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell)
+
+              if (rowIndex === rowCount - 1) {
+                hoveredRowNode = maybeTableCell
+              } else if (colIndex === colCount - 1) {
+                hoveredColumnNode = maybeTableCell
+              }
+
+              // Deleting the only row/column would leave a degenerate table, so
+              // the gutter "×" only appears when more than one remains.
+              canDeleteRow = rowCount > 1
+              canDeleteColumn = (colCount ?? 0) > 1
+            }
+          }
+        },
+        { editor }
+      )
+
+      if (!tableDOMElement) return
+
+      const {
+        width: tableElemWidth,
+        y: tableElemY,
+        right: tableElemRight,
+        left: tableElemLeft,
+        bottom: tableElemBottom,
+        height: tableElemHeight
+      } = tableDOMElement.getBoundingClientRect()
+
+      const parentElement = tableDOMElement.parentElement
+      let tableHasScroll = false
+      if (parentElement && parentElement.classList.contains("lexical-table-wrapper")) {
+        tableHasScroll = parentElement.scrollWidth > parentElement.clientWidth
+      }
+      const { y: editorElemY, left: editorElemLeft } = anchorElem.getBoundingClientRect()
+
+      // ----- Append "+" bars (last row / last column), unchanged behaviour. -----
+      if (hoveredRowNode) {
+        const isMac = /^mac/i.test(navigator.platform)
+
+        setShownColumn(false)
+        setShownRow(true)
+        setPosition({
+          height: BUTTON_WIDTH_PX,
+          left:
+            tableHasScroll && parentElement
+              ? parentElement.offsetLeft
+              : tableElemLeft - editorElemLeft,
+          top: tableElemBottom - editorElemY + (tableHasScroll && !isMac ? 16 : 5),
+          width:
+            tableHasScroll && parentElement ? parentElement.offsetWidth : tableElemWidth
+        })
+      } else if (hoveredColumnNode) {
+        setShownColumn(true)
+        setShownRow(false)
+        setPosition({
+          height: tableElemHeight,
+          left: tableElemRight - editorElemLeft + 5,
+          top: tableElemY - editorElemY,
+          width: BUTTON_WIDTH_PX
+        })
+      } else {
+        setShownRow(false)
+        setShownColumn(false)
+      }
+
+      // ----- Delete "×" buttons for the hovered cell's own row and column. -----
+      const cellRect = tableDOMNode.getBoundingClientRect()
+
+      if (canDeleteRow) {
+        // Vertical strip in the row's left gutter, just outside the table edge.
+        setShownDeleteRow(true)
+        setDeleteRowPosition({
+          top: cellRect.top - editorElemY,
+          height: cellRect.height,
+          left: Math.max(0, tableElemLeft - editorElemLeft - DELETE_BUTTON_PX - 4),
+          width: DELETE_BUTTON_PX
+        })
+      } else {
+        setShownDeleteRow(false)
+      }
+
+      if (canDeleteColumn) {
+        // Horizontal strip in the column's top gutter, just above the table edge.
+        setShownDeleteColumn(true)
+        setDeleteColumnPosition({
+          left: cellRect.left - editorElemLeft,
+          width: cellRect.width,
+          top: Math.max(0, tableElemY - editorElemY - DELETE_BUTTON_PX - 4),
+          height: DELETE_BUTTON_PX
+        })
+      } else {
+        setShownDeleteColumn(false)
+      }
+    },
+    50,
+    250
+  )
+
+  // Hide the buttons whenever a table resizes so a button can't end up overlapping
+  // a row/column after text entry grows a cell.
+  const tableResizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      hideAll()
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!shouldListenMouseMove) return
+
+    document.addEventListener("mousemove", debouncedOnMouseMove)
+
+    return () => {
+      hideAll()
+      debouncedOnMouseMove.cancel()
+      document.removeEventListener("mousemove", debouncedOnMouseMove)
+    }
+  }, [shouldListenMouseMove, debouncedOnMouseMove])
+
+  useEffect(() => {
+    const unregister = mergeRegister(
+      editor.registerMutationListener(
+        TableNode,
+        (mutations) => {
+          editor.getEditorState().read(
+            () => {
+              let resetObserver = false
+              for (const [key, type] of mutations) {
+                if (type === "created") {
+                  tableSetRef.current.add(key)
+                  resetObserver = true
+                } else if (type === "destroyed") {
+                  tableSetRef.current.delete(key)
+                  resetObserver = true
+                }
+              }
+              if (resetObserver) {
+                tableResizeObserver.disconnect()
+                for (const tableKey of tableSetRef.current) {
+                  const { tableElement } = $getTableAndElementByKey(tableKey)
+                  // Guard: the key may be destroyed between the mutation batch
+                  // and this read, leaving no element to observe.
+                  if (tableElement) tableResizeObserver.observe(tableElement)
+                }
+                setShouldListenMouseMove(tableSetRef.current.size > 0)
+              }
+            },
+            { editor }
+          )
+        },
+        { skipInitialization: false }
+      )
+    )
+    // Disconnect the observer on unmount; mergeRegister only unregisters the
+    // mutation listener, so without this the observer leaks table DOM refs
+    // across editor open/close cycles.
+    return () => {
+      unregister()
+      tableResizeObserver.disconnect()
+    }
+  }, [editor, tableResizeObserver])
+
+  const insertAction = (insertRow) => {
+    editor.update(() => {
+      if (tableCellDOMNodeRef.current) {
+        const maybeTableNode = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current)
+        maybeTableNode?.selectEnd()
+        if (insertRow) {
+          $insertTableRowAtSelection()
+          setShownRow(false)
+        } else {
+          $insertTableColumnAtSelection()
+          setShownColumn(false)
+        }
+      }
+    })
+  }
+
+  const deleteAction = (deleteRow) => {
+    editor.update(() => {
+      if (tableCellDOMNodeRef.current) {
+        const maybeTableCell = $getNearestNodeFromDOMNode(tableCellDOMNodeRef.current)
+        if ($isTableCellNode(maybeTableCell)) {
+          // Anchor the selection in the hovered cell so the delete targets its
+          // row/column (mousemove never moved the editor selection there).
+          maybeTableCell.selectEnd()
+          if (deleteRow) {
+            $deleteTableRowAtSelection()
+            setShownDeleteRow(false)
+          } else {
+            $deleteTableColumnAtSelection()
+            setShownDeleteColumn(false)
+          }
+        }
+      }
+    })
+  }
+
+  if (!isEditable) return null
+
+  return (
+    <>
+      {isShownRow && (
+        <button
+          type="button"
+          aria-label="Add row"
+          className={`${getTheme()?.tableAddRows}`}
+          style={{ ...position }}
+          onClick={() => insertAction(true)}
+        />
+      )}
+      {isShownColumn && (
+        <button
+          type="button"
+          aria-label="Add column"
+          className={`${getTheme()?.tableAddColumns}`}
+          style={{ ...position }}
+          onClick={() => insertAction(false)}
+        />
+      )}
+      {isShownDeleteRow && (
+        <button
+          type="button"
+          aria-label="Delete row"
+          className={`${getTheme()?.tableDeleteRows}`}
+          style={{ ...deleteRowPosition }}
+          onClick={() => deleteAction(true)}
+        />
+      )}
+      {isShownDeleteColumn && (
+        <button
+          type="button"
+          aria-label="Delete column"
+          className={`${getTheme()?.tableDeleteColumns}`}
+          style={{ ...deleteColumnPosition }}
+          onClick={() => deleteAction(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default function TableHoverActionsPlugin({ anchorElem = document.body } = {}) {
+  const isEditable = useLexicalEditable()
+
+  return isEditable
+    ? createPortal(<TableHoverActionsContainer anchorElem={anchorElem} />, anchorElem)
+    : null
+}