collavre 0.24.0 → 0.25.0

data/app/javascript/lib/lexical/__tests__/link_toolbar.test.js

@@ -0,0 +1,62 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  createEditor,
+} from 'lexical'
+import { $createLinkNode, LinkNode } from '@lexical/link'
+import {
+  $createCreativeLinkNode,
+  $isCreativeLinkNode,
+  CreativeLinkNode,
+} from '../creative_link_node'
+import { $createToolbarLinkNode, $findLinkNode } from '../link_toolbar'
+
+function createTestEditor() {
+  return createEditor({
+    namespace: 'link-toolbar-test',
+    nodes: [LinkNode, CreativeLinkNode],
+    onError(error) {
+      throw error
+    },
+  })
+}
+
+describe('link toolbar helpers', () => {
+  test('finds regular and Creative links from their text children', () => {
+    const editor = createTestEditor()
+
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      const regularText = $createTextNode('External')
+      const creativeText = $createTextNode('Creative')
+      const regularLink = $createLinkNode('https://example.com').append(regularText)
+      const creativeLink = $createCreativeLinkNode('/creatives/42', 42).append(creativeText)
+      paragraph.append(regularLink, creativeLink)
+      $getRoot().append(paragraph)
+
+      expect($findLinkNode([regularText])).toBe(regularLink)
+      expect($findLinkNode([creativeText])).toBe(creativeLink)
+      expect($findLinkNode([creativeLink])).toBe(creativeLink)
+      expect($findLinkNode([paragraph])).toBeNull()
+    }, { discrete: true })
+  })
+
+  test('preserves Creative identity for canonical URLs and converts external URLs', () => {
+    const editor = createTestEditor()
+
+    editor.update(() => {
+      const creativeLink = $createToolbarLinkNode('/creatives/73')
+      const regularLink = $createToolbarLinkNode('https://example.com')
+
+      expect($isCreativeLinkNode(creativeLink)).toBe(true)
+      expect(creativeLink.getCreativeId()).toBe(73)
+      expect($isCreativeLinkNode(regularLink)).toBe(false)
+      expect(regularLink.getType()).toBe('link')
+    }, { discrete: true })
+  })
+})

data/app/javascript/lib/lexical/creative_link_node.js

@@ -0,0 +1,101 @@
+import { LinkNode } from "@lexical/link"
+import { $applyNodeReplacement } from "lexical"
+
+const CREATIVE_PATH = /^\/creatives\/(\d+)(?:[/?#]|$)/
+
+export function creativeIdFromUrl(url) {
+  const match = String(url || "").match(CREATIVE_PATH)
+  return match ? Number(match[1]) : null
+}
+
+export class CreativeLinkNode extends LinkNode {
+  __creativeId
+
+  static getType() {
+    return "creative-link"
+  }
+
+  static clone(node) {
+    return new CreativeLinkNode(
+      node.__url,
+      node.__creativeId,
+      { rel: node.__rel, target: node.__target, title: node.__title },
+      node.__key
+    )
+  }
+
+  constructor(url = "", creativeId = null, attributes = {}, key) {
+    super(url, attributes, key)
+    this.__creativeId = Number(creativeId || creativeIdFromUrl(url)) || null
+  }
+
+  createDOM(config) {
+    const element = super.createDOM(config)
+    if (this.__creativeId) element.dataset.creativeId = String(this.__creativeId)
+    return element
+  }
+
+  updateDOM(prevNode, element, config) {
+    super.updateDOM(prevNode, element, config)
+    const creativeId = this.getCreativeId()
+    if (creativeId) {
+      element.dataset.creativeId = String(creativeId)
+    } else {
+      delete element.dataset.creativeId
+    }
+    return false
+  }
+
+  static importDOM() {
+    return {
+      a: (element) => {
+        const creativeId = Number(element.dataset.creativeId) || creativeIdFromUrl(element.getAttribute("href"))
+        if (!creativeId) return null
+
+        return {
+          conversion: () => ({
+            node: $createCreativeLinkNode(
+              element.getAttribute("href") || `/creatives/${creativeId}`,
+              creativeId,
+              {
+                rel: element.getAttribute("rel"),
+                target: element.getAttribute("target"),
+                title: element.getAttribute("title")
+              }
+            )
+          }),
+          priority: 2
+        }
+      }
+    }
+  }
+
+  static importJSON(serializedNode) {
+    return $createCreativeLinkNode(
+      serializedNode.url,
+      serializedNode.creativeId,
+      serializedNode
+    ).updateFromJSON(serializedNode)
+  }
+
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      creativeId: this.getCreativeId(),
+      type: "creative-link",
+      version: 1
+    }
+  }
+
+  getCreativeId() {
+    return this.getLatest().__creativeId
+  }
+}
+
+export function $createCreativeLinkNode(url, creativeId, attributes) {
+  return $applyNodeReplacement(new CreativeLinkNode(url, creativeId, attributes))
+}
+
+export function $isCreativeLinkNode(node) {
+  return node instanceof CreativeLinkNode
+}

data/app/javascript/lib/lexical/creative_link_trigger.js

@@ -0,0 +1,98 @@
+import {
+  $createRangeSelection,
+  $createTextNode,
+  $getNodeByKey,
+  $getSelection,
+  $isRangeSelection,
+  $isTextNode,
+  $setSelection,
+} from "lexical"
+import { $createCreativeLinkNode } from "./creative_link_node"
+
+function currentTrigger() {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return null
+
+  const node = selection.anchor.getNode()
+  if (!$isTextNode(node)) return null
+  if (["code", "link", "creative-link"].includes(node.getParent()?.getType())) return null
+
+  const offset = selection.anchor.offset
+  if (node.getTextContent().slice(0, offset).slice(-2) !== "[[") return null
+
+  return { key: node.getKey(), start: offset - 2, end: offset }
+}
+
+function selectionRect(editor) {
+  const domSelection = window.getSelection?.()
+  if (domSelection?.rangeCount) {
+    const rect = domSelection.getRangeAt(0).getBoundingClientRect?.()
+    if (rect) return rect
+  }
+  return editor.getRootElement()?.getBoundingClientRect?.() || null
+}
+
+export function insertCreativeLinkAtTrigger(editor, trigger, item) {
+  if (!trigger || !item?.id) return false
+  let inserted = false
+
+  editor.update(() => {
+    const node = $getNodeByKey(trigger.key)
+    if (!$isTextNode(node)) return
+    if (node.getTextContent().slice(trigger.start, trigger.end) !== "[[") return
+
+    const selection = $createRangeSelection()
+    selection.anchor.set(trigger.key, trigger.start, "text")
+    selection.focus.set(trigger.key, trigger.end, "text")
+    $setSelection(selection)
+
+    const link = $createCreativeLinkNode(`/creatives/${item.id}`, item.id)
+    link.append($createTextNode(item.label || String(item.id)))
+    const trailingSpace = $createTextNode(" ")
+    selection.insertNodes([link, trailingSpace])
+    trailingSpace.selectEnd()
+    inserted = true
+  }, { discrete: true })
+
+  if (inserted) editor.focus()
+  return inserted
+}
+
+export function registerCreativeLinkTrigger(editor, openPicker) {
+  let pickerOpen = false
+  let dismissedTrigger = null
+
+  return editor.registerUpdateListener(({ editorState }) => {
+    if (pickerOpen) return
+
+    let trigger = null
+    editorState.read(() => {
+      trigger = currentTrigger()
+    })
+    if (!trigger) {
+      dismissedTrigger = null
+      return
+    }
+    if (
+      dismissedTrigger &&
+      dismissedTrigger.key === trigger.key &&
+      dismissedTrigger.start === trigger.start &&
+      dismissedTrigger.end === trigger.end
+    ) return
+
+    pickerOpen = true
+    const opened = openPicker({
+      anchorRect: selectionRect(editor),
+      onSelect: (item) => {
+        insertCreativeLinkAtTrigger(editor, trigger, item)
+        pickerOpen = false
+      },
+      onClose: () => {
+        dismissedTrigger = trigger
+        pickerOpen = false
+        editor.focus()
+      }
+    })
+    if (opened === false) pickerOpen = false
+  })
+}

data/app/javascript/lib/lexical/link_toolbar.js

@@ -0,0 +1,23 @@
+import { $createLinkNode, $isLinkNode } from '@lexical/link'
+import {
+  $createCreativeLinkNode,
+  creativeIdFromUrl,
+} from './creative_link_node'
+
+export function $findLinkNode(nodes) {
+  for (const node of nodes) {
+    if ($isLinkNode(node)) return node
+
+    const parent = node.getParent()
+    if ($isLinkNode(parent)) return parent
+  }
+
+  return null
+}
+
+export function $createToolbarLinkNode(url) {
+  const creativeId = creativeIdFromUrl(url)
+  return creativeId
+    ? $createCreativeLinkNode(url, creativeId)
+    : $createLinkNode(url)
+}

data/app/javascript/lib/turbo_stream_actions.js

@@ -1,5 +1,6 @@
 import { Turbo } from "@hotwired/turbo-rails"
-import { createRow, applyRowProperties } from "../creatives/tree_renderer"
+import { createRow, applyRowProperties, replaceProgressControl, updateProgressHtml } from "../creatives/tree_renderer"
+import { hideTreeEmptyState, restoreTreeEmptyState } from "../modules/creative_tree_empty_state"
 
 // Register custom actions on both the imported Turbo and the global window.Turbo
 function registerStreamAction(name, handler) {
@@ -48,6 +49,7 @@ registerStreamAction("refresh_creative_tree", function () {
 
     // Update ancestor progress for all actions
     updateAncestorProgress(creative.ancestors)
+    document.dispatchEvent(new CustomEvent('workspace-tree:invalidate'))
 })
 
 function handleCreated(creative) {
@@ -83,6 +85,8 @@ function handleCreated(creative) {
 
         const newRow = createRow(adjustedCreative)
         insertAtCorrectPosition(newRow, adjustedCreative, targetContainer)
+        // The tree is no longer empty — drop the "no sub-creatives" placeholder.
+        hideTreeEmptyState(treeContainer)
     }
     // If no targetContainer found, the creative is relevant but we can't determine
     // the exact insertion point — it will appear on next page load.
@@ -289,6 +293,14 @@ function handleUpdated(creative) {
 }
 
 function handleDestroyed(creative) {
+    const creativeIds = [creative.id, creative.origin_id]
+        .filter((id) => id != null)
+        .map(String)
+
+    document.dispatchEvent(new CustomEvent('creative-destroyed', {
+        detail: { creativeIds: [...new Set(creativeIds)] }
+    }))
+
     const rows = findRowsForCreative(creative.id, creative.origin_id)
 
     if (rows.length === 0) return // Row not visible on this page
@@ -315,32 +327,27 @@ function handleDestroyed(creative) {
         }
     }
 
+    // Last row gone — bring the placeholder back.
+    restoreTreeEmptyState()
 }
 
-function updateProgressForRow(row, progress, progressText) {
+export function updateProgressForRow(row, progress, progressText, progressHtml = null) {
     if (progress == null) return
     const pct = Math.round(progress * 100)
-    const cssClass = pct >= 100 ? 'creative-progress-complete' : 'creative-progress-incomplete'
     // progressText from server: completion mark string, empty string (=complete but no mark), or null
     const displayText = progressText != null ? (progressText || '\u00a0\u00a0') : `${pct}%`
 
     row.dataset.progressValue = String(progress)
 
     if (row.progressHtml) {
-        // Try regex replacement on existing progress HTML (preserves chat buttons etc.)
-        const regex = /(<span[^>]*class="creative-progress-(?:in)?complete"[^>]*>)[^<]*(<\/span>)/
-        const updated = row.progressHtml.replace(regex, `$1${displayText}$2`)
+        const updated = progressHtml && !row.selectMode
+            ? replaceProgressControl(row.progressHtml, progressHtml)
+            : updateProgressHtml(row.progressHtml, progress, displayText)
+
         if (updated !== row.progressHtml) {
-            // Also update ONLY the first progress class (not chat buttons etc.)
-            const classUpdated = updated.replace(
-                /class="creative-progress-(?:in)?complete"/,
-                `class="${cssClass}"`
-            )
-            row.progressHtml = classUpdated
-            row.dataset.progressHtml = classUpdated
+            row.progressHtml = updated
+            row.dataset.progressHtml = updated
         }
-        // If regex didn't match, do NOT create fresh HTML — preserve existing progressHtml
-        // (it contains chat buttons, comment badges, etc.)
     }
 }
 
@@ -349,7 +356,7 @@ function updateAncestorProgress(ancestors) {
     ancestors.forEach(anc => {
         // findRowsForCreative already handles origin_id fallback for linked creatives
         const rows = findRowsForCreative(anc.id, anc.origin_id)
-        if (rows[0]) updateProgressForRow(rows[0], anc.progress, anc.progress_text)
+        if (rows[0]) updateProgressForRow(rows[0], anc.progress, anc.progress_text, anc.progress_html)
     })
 }
 

data/app/javascript/lib/utils/__tests__/filter_navigation.test.js

@@ -0,0 +1,210 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import {
+  WORKSPACE_FRAME_ID,
+  applyFilterParam,
+  buildFilterUrl,
+  syncFilterButtons,
+  visitFilterUrl
+} from '../filter_navigation'
+
+// jsdom's window.location is unforgeable, so drive it through history instead
+// of replacing the object.
+function setLocation(href) {
+  window.history.replaceState({}, '', href)
+}
+
+describe('buildFilterUrl', () => {
+  test('keeps the current URL and its params when already on the index', () => {
+    setLocation('http://localhost/creatives?id=7&search=hi')
+
+    const url = buildFilterUrl({ indexPath: '/creatives', onIndex: true }, (params) => {
+      params.set('comment', 'true')
+    })
+
+    expect(url.pathname).toBe('/creatives')
+    expect(url.searchParams.get('id')).toBe('7')
+    expect(url.searchParams.get('search')).toBe('hi')
+    expect(url.searchParams.get('comment')).toBe('true')
+  })
+
+  test('preserves the root route pathname when the index is served at "/"', () => {
+    setLocation('http://localhost/?tags=a')
+
+    const url = buildFilterUrl({ indexPath: '/creatives', onIndex: true }, (params) => {
+      params.set('comment', 'true')
+    })
+
+    expect(url.pathname).toBe('/')
+    expect(url.searchParams.get('tags')).toBe('a')
+  })
+
+  test('redirects to the index and drops foreign params when elsewhere', () => {
+    setLocation('http://localhost/settings?tab=profile')
+
+    const url = buildFilterUrl({ indexPath: '/creatives', onIndex: false }, (params) => {
+      params.set('comment', 'true')
+    })
+
+    expect(url.pathname).toBe('/creatives')
+    expect(url.searchParams.get('tab')).toBeNull()
+    expect(url.searchParams.get('comment')).toBe('true')
+  })
+
+  test('falls back to the root path when no index path was provided', () => {
+    setLocation('http://localhost/settings')
+
+    const url = buildFilterUrl({ indexPath: '', onIndex: false }, () => {})
+
+    expect(url.pathname).toBe('/')
+  })
+})
+
+describe('applyFilterParam', () => {
+  test('turns the comment filter on when absent', () => {
+    const params = new URLSearchParams()
+    applyFilterParam(params, 'comment')
+    expect(params.get('comment')).toBe('true')
+  })
+
+  test('turns the comment filter off when already on', () => {
+    const params = new URLSearchParams('comment=true')
+    applyFilterParam(params, 'comment')
+    expect(params.has('comment')).toBe(false)
+  })
+
+  test('sets the complete progress range', () => {
+    const params = new URLSearchParams()
+    applyFilterParam(params, 'complete')
+    expect(params.get('min_progress')).toBe('1')
+    expect(params.get('max_progress')).toBe('1')
+  })
+
+  test('sets the incomplete progress range', () => {
+    const params = new URLSearchParams()
+    applyFilterParam(params, 'incomplete')
+    expect(params.get('min_progress')).toBe('0')
+    expect(params.get('max_progress')).toBe('0.99')
+  })
+
+  test('clears the progress range for "all" without touching other filters', () => {
+    const params = new URLSearchParams('min_progress=1&max_progress=1&comment=true')
+    applyFilterParam(params, 'all')
+    expect(params.has('min_progress')).toBe(false)
+    expect(params.has('max_progress')).toBe(false)
+    expect(params.get('comment')).toBe('true')
+  })
+})
+
+describe('visitFilterUrl', () => {
+  let visit
+
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    setLocation('http://localhost/creatives')
+    visit = jest.fn()
+    window.Turbo = { visit }
+  })
+
+  afterEach(() => {
+    delete window.Turbo
+    document.body.innerHTML = ''
+  })
+
+  test('replaces only the workspace frame when it is present', () => {
+    document.body.innerHTML = `<turbo-frame id="${WORKSPACE_FRAME_ID}"></turbo-frame>`
+
+    const result = visitFilterUrl(new URL('http://localhost/creatives?comment=true'))
+
+    expect(visit).toHaveBeenCalledWith('/creatives?comment=true', {
+      action: 'advance',
+      frame: WORKSPACE_FRAME_ID
+    })
+    expect(result).toBe(true)
+  })
+
+  test('performs a full Turbo visit when there is no workspace frame', () => {
+    const result = visitFilterUrl(new URL('http://localhost/creatives?comment=true'))
+
+    expect(visit).toHaveBeenCalledWith('/creatives?comment=true', { action: 'advance' })
+    expect(result).toBe(false)
+  })
+
+  test('omits the query string entirely when no filters remain', () => {
+    visitFilterUrl(new URL('http://localhost/creatives'))
+
+    expect(visit).toHaveBeenCalledWith('/creatives', { action: 'advance' })
+  })
+})
+
+describe('syncFilterButtons', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <button data-filter-state="any-filter" class="active"></button>
+      <button data-filter-state="progress:all"></button>
+      <button data-filter-state="progress:incomplete" class="active"></button>
+      <button data-filter-state="progress:complete"></button>
+      <button data-filter-state="comment"></button>
+      <button data-filter-state="archived" data-label-on="Hide archived" data-label-off="Show archived">Show archived</button>
+    `
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  function activeStates() {
+    return Array.from(document.querySelectorAll('[data-filter-state].active')).map(
+      (el) => el.dataset.filterState
+    )
+  }
+
+  test('activates the comment button and resets a stale progress selection', () => {
+    syncFilterButtons(new URL('http://localhost/creatives?comment=true'))
+
+    expect(activeStates().sort()).toEqual(['comment', 'progress:all'])
+  })
+
+  test('does not treat the comment filter as a generic "any filter"', () => {
+    syncFilterButtons(new URL('http://localhost/creatives?comment=true'))
+
+    expect(document.querySelector('[data-filter-state="any-filter"]').classList).not.toContain(
+      'active'
+    )
+  })
+
+  test('marks the search trigger active for progress, archive and search filters', () => {
+    syncFilterButtons(new URL('http://localhost/creatives?min_progress=1&max_progress=1'))
+    expect(activeStates()).toContain('any-filter')
+
+    syncFilterButtons(new URL('http://localhost/creatives?show_archived=true'))
+    expect(activeStates()).toContain('any-filter')
+
+    syncFilterButtons(new URL('http://localhost/creatives?search=abc'))
+    expect(activeStates()).toContain('any-filter')
+  })
+
+  test('ignores blank and whitespace-only filter values, matching server-side .present?', () => {
+    syncFilterButtons(new URL('http://localhost/creatives?search=%20%20%20&min_progress='))
+
+    expect(activeStates()).toEqual(['progress:all'])
+  })
+
+  test('recognizes the incomplete progress range', () => {
+    syncFilterButtons(new URL('http://localhost/creatives?min_progress=0&max_progress=0.99'))
+
+    expect(activeStates().sort()).toEqual(['any-filter', 'progress:incomplete'])
+  })
+
+  test('swaps the archive button label along with its active state', () => {
+    const button = document.querySelector('[data-filter-state="archived"]')
+
+    syncFilterButtons(new URL('http://localhost/creatives?show_archived=true'))
+    expect(button.textContent).toBe('Hide archived')
+
+    syncFilterButtons(new URL('http://localhost/creatives'))
+    expect(button.textContent).toBe('Show archived')
+  })
+})

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

@@ -151,3 +151,47 @@ describe("highlightCodeBlocks", () => {
     expect(el.querySelector("pre code").innerHTML).toBe(first)
   })
 })
+
+// Server-generated inbox/system comments embed a creative's plain-text label in
+// a markdown link: `[#{label}](#{path})`. Collavre::HtmlText.markdown_label
+// backslash-escapes the label before that interpolation; these cases pin down
+// what those escapes have to survive on the rendering side.
+describe("generated creative links tolerate hostile labels once escaped", () => {
+  const link = (label) => renderCommentMarkdown(`[${label}](/creatives/1)`)
+  const hrefOf = (html) => {
+    const el = document.createElement("div")
+    el.innerHTML = html
+    return el.querySelector("a")?.getAttribute("href")
+  }
+  const textOf = (html) => {
+    const el = document.createElement("div")
+    el.innerHTML = html
+    return el.querySelector("a")?.textContent
+  }
+
+  it("keeps an unescaped angle-bracket label from being dropped once escaped", () => {
+    // Raw `<x>` reaches marked as inline HTML and the sanitizer deletes it.
+    expect(textOf(link("A <x> tag"))).toBe("A  tag")
+    // `\<x\>` renders the brackets as literal text instead.
+    expect(textOf(link("A \\<x\\> tag"))).toBe("A <x> tag")
+  })
+
+  it("keeps a bracket-injecting label from hijacking the link destination", () => {
+    // Unescaped, the label closes the link early and supplies its own href.
+    expect(hrefOf(link("x](https://evil.example)"))).toBe("https://evil.example")
+    // Escaped, the destination stays the creative path and the label is literal.
+    const safe = link("x\\]\\(https://evil.example\\)")
+    expect(hrefOf(safe)).toBe("/creatives/1")
+    expect(textOf(safe)).toBe("x](https://evil.example)")
+  })
+
+  it("renders escaped emphasis and code characters as literal label text", () => {
+    expect(textOf(link("a\\*b\\*c \\_d\\_ \\`e\\` \\~f\\~"))).toBe("a*b*c _d_ `e` ~f~")
+  })
+
+  it("leaves an ordinary label untouched", () => {
+    const html = link("버그: 채팅 컨텍스트 라벨")
+    expect(hrefOf(html)).toBe("/creatives/1")
+    expect(textOf(html)).toBe("버그: 채팅 컨텍스트 라벨")
+  })
+})