collavre 0.24.0 → 0.25.0

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

@@ -0,0 +1,186 @@
+/**
+ * @jest-environment jsdom
+ */
+import {
+  creativeTreeContainer,
+  hideTreeEmptyState,
+  restoreTreeEmptyState,
+  PAGINATION_PENDING_ATTRIBUTE,
+} from '../creative_tree_empty_state'
+
+const EMPTY_HTML = '<div data-creatives-empty-state=""><p>No sub-creatives found.</p></div>'
+
+const EMPTY_TEMPLATE = `<template id="creatives-empty-state-template">${EMPTY_HTML}</template>`
+
+function renderEmptyTree() {
+  document.body.innerHTML = `<div id="creatives">${EMPTY_HTML}</div>`
+  return document.getElementById('creatives')
+}
+
+// The state after a client-side tree render: rows replaced the whole container,
+// so the server-rendered placeholder is gone and only the template survives.
+function renderRenderedTree(innerHtml = '') {
+  document.body.innerHTML = `${EMPTY_TEMPLATE}<div id="creatives">${innerHtml}</div>`
+  return document.getElementById('creatives')
+}
+
+function placeholder(container) {
+  return container.querySelector('[data-creatives-empty-state]')
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+test('creativeTreeContainer resolves the tree container', () => {
+  const container = renderEmptyTree()
+  expect(creativeTreeContainer()).toBe(container)
+})
+
+test('creativeTreeContainer returns null when the tree is not on the page', () => {
+  document.body.innerHTML = ''
+  expect(creativeTreeContainer()).toBeNull()
+})
+
+test('hideTreeEmptyState hides the placeholder', () => {
+  const container = renderEmptyTree()
+
+  hideTreeEmptyState(container)
+
+  expect(placeholder(container).hidden).toBe(true)
+  expect(placeholder(container).style.display).toBe('none')
+})
+
+test('hideTreeEmptyState defaults to #creatives when no container is passed', () => {
+  const container = renderEmptyTree()
+
+  hideTreeEmptyState()
+
+  expect(placeholder(container).hidden).toBe(true)
+})
+
+test('hideTreeEmptyState is a no-op without a tree container', () => {
+  document.body.innerHTML = ''
+  expect(() => hideTreeEmptyState()).not.toThrow()
+  expect(() => hideTreeEmptyState(null)).not.toThrow()
+})
+
+test('restoreTreeEmptyState shows the placeholder again once the tree is empty', () => {
+  const container = renderEmptyTree()
+  hideTreeEmptyState(container)
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container).hidden).toBe(false)
+  expect(placeholder(container).style.display).toBe('')
+  expect(placeholder(container).textContent).toContain('No sub-creatives found.')
+})
+
+test('restoreTreeEmptyState keeps the placeholder hidden while rows remain', () => {
+  const container = renderEmptyTree()
+  hideTreeEmptyState(container)
+  container.insertAdjacentHTML('beforeend', '<creative-tree-row creative-id="7"></creative-tree-row>')
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container).hidden).toBe(true)
+})
+
+test('restoreTreeEmptyState does not duplicate the placeholder', () => {
+  const container = renderEmptyTree()
+
+  restoreTreeEmptyState(container)
+
+  expect(container.querySelectorAll('[data-creatives-empty-state]')).toHaveLength(1)
+})
+
+test('restoreTreeEmptyState is a no-op when neither placeholder nor template exists', () => {
+  document.body.innerHTML = '<div id="creatives"></div>'
+  const container = document.getElementById('creatives')
+
+  restoreTreeEmptyState(container)
+
+  expect(container.innerHTML).toBe('')
+})
+
+test('restoreTreeEmptyState clones the template when the tree render wiped the container', () => {
+  const container = renderRenderedTree()
+
+  restoreTreeEmptyState(container)
+
+  const restored = placeholder(container)
+  expect(restored).not.toBeNull()
+  expect(restored.hidden).toBe(false)
+  expect(restored.textContent).toContain('No sub-creatives found.')
+})
+
+test('restoreTreeEmptyState does not clone the template while rows remain', () => {
+  const container = renderRenderedTree('<creative-tree-row creative-id="7"></creative-tree-row>')
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container)).toBeNull()
+})
+
+test('restoreTreeEmptyState does not clone the template when a placeholder is already present', () => {
+  document.body.innerHTML = `${EMPTY_TEMPLATE}<div id="creatives">${EMPTY_HTML}</div>`
+  const container = document.getElementById('creatives')
+  hideTreeEmptyState(container)
+
+  restoreTreeEmptyState(container)
+
+  expect(container.querySelectorAll('[data-creatives-empty-state]')).toHaveLength(1)
+  expect(placeholder(container).hidden).toBe(false)
+})
+
+test('cloning the template leaves the template itself untouched', () => {
+  const container = renderRenderedTree()
+
+  restoreTreeEmptyState(container)
+  hideTreeEmptyState(container)
+  container.replaceChildren()
+  restoreTreeEmptyState(container)
+
+  // A second restore after a second wipe must still produce a visible placeholder:
+  // hideTreeEmptyState() must not have mutated the template's own copy.
+  expect(placeholder(container).hidden).toBe(false)
+})
+
+test('restoreTreeEmptyState is a no-op without a tree container', () => {
+  document.body.innerHTML = ''
+  expect(() => restoreTreeEmptyState()).not.toThrow()
+  expect(() => restoreTreeEmptyState(null)).not.toThrow()
+})
+
+// Paginated "Chats" feed: an empty container is not an empty result set while the
+// load-more sentinel still has pages to fetch.
+test('restoreTreeEmptyState stays out of the way while more pages are queued', () => {
+  const container = renderRenderedTree()
+  container.setAttribute(PAGINATION_PENDING_ATTRIBUTE, 'true')
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container)).toBeNull()
+})
+
+test('restoreTreeEmptyState leaves an existing placeholder hidden while more pages are queued', () => {
+  const container = renderEmptyTree()
+  hideTreeEmptyState(container)
+  container.setAttribute(PAGINATION_PENDING_ATTRIBUTE, 'true')
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container).hidden).toBe(true)
+})
+
+test('restoreTreeEmptyState restores once the pending-pages marker is cleared', () => {
+  const container = renderRenderedTree()
+  container.setAttribute(PAGINATION_PENDING_ATTRIBUTE, 'true')
+  restoreTreeEmptyState(container)
+  container.removeAttribute(PAGINATION_PENDING_ATTRIBUTE)
+
+  restoreTreeEmptyState(container)
+
+  expect(placeholder(container)).not.toBeNull()
+  expect(placeholder(container).hidden).toBe(false)
+})

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

@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals';
+import { createListenerRegistry } from '../dom_listener_registry';
+
+describe('createListenerRegistry', () => {
+  test('releases every registered listener', () => {
+    const registry = createListenerRegistry();
+    const documentHandler = jest.fn();
+    const windowHandler = jest.fn();
+    registry.add(document, 'registry-document', documentHandler);
+    registry.add(window, 'registry-window', windowHandler);
+
+    registry.releaseAll();
+    document.dispatchEvent(new Event('registry-document'));
+    window.dispatchEvent(new Event('registry-window'));
+
+    expect(documentHandler).not.toHaveBeenCalled();
+    expect(windowHandler).not.toHaveBeenCalled();
+    expect(registry.size).toBe(0);
+  });
+
+  test('rebinds a Turbo session without retaining the old handler', () => {
+    const registry = createListenerRegistry();
+    const firstSession = jest.fn();
+    const secondSession = jest.fn();
+    registry.add(document.body, 'click', firstSession);
+
+    registry.releaseAll();
+    registry.add(document.body, 'click', secondSession);
+    document.body.click();
+
+    expect(firstSession).not.toHaveBeenCalled();
+    expect(secondSession).toHaveBeenCalledTimes(1);
+    registry.releaseAll();
+  });
+
+  test('preserves listener options when removing a binding', () => {
+    const registry = createListenerRegistry();
+    const handler = jest.fn();
+    registry.add(document, 'registry-capture', handler, { capture: true });
+
+    registry.releaseAll();
+    document.dispatchEvent(new Event('registry-capture'));
+
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  test('ignores targets that cannot register listeners', () => {
+    const registry = createListenerRegistry();
+
+    expect(() => registry.add(null, 'click', jest.fn())).not.toThrow();
+    expect(() => registry.add({}, 'click', jest.fn())).not.toThrow();
+    expect(registry.size).toBe(0);
+  });
+
+  test('releaseAll is idempotent', () => {
+    const registry = createListenerRegistry();
+    registry.add(document, 'registry-idempotent', jest.fn());
+
+    registry.releaseAll();
+
+    expect(() => registry.releaseAll()).not.toThrow();
+    expect(registry.size).toBe(0);
+  });
+});

data/app/javascript/modules/__tests__/support/inline_editor_dom.js

@@ -0,0 +1,159 @@
+// Shared DOM scaffolding for the inline row editor tests.
+//
+// initializeCreativeRowEditor() walks a large, fixed set of element ids that
+// the ERB renders (see _inline_edit_form.html.erb) and bails out on the first
+// missing one, so every suite that drives the real module needs the same
+// skeleton. It lives here rather than in one of the suites so the empty-state
+// recovery and removal tests stay in sync with each other.
+//
+// Not matched by jest's testMatch (`**/__tests__/**/*.test.js`), so it is not
+// collected as a suite of its own.
+
+export const BUTTON_IDS = [
+  'inline-metadata-btn', 'inline-toggle-markdown', 'inline-move-up', 'inline-move-down',
+  'inline-add', 'inline-level-down', 'inline-level-up', 'inline-archive', 'inline-delete',
+  'inline-delete-with-children', 'inline-link', 'inline-unconvert', 'inline-unlink',
+  'inline-close', 'metadata-popup-close', 'metadata-save-btn',
+]
+
+export const HIDDEN_INPUT_IDS = [
+  'inline-method', 'inline-creative-description', 'inline-content-type',
+  'inline-markdown-editor', 'inline-markdown-source', 'inline-parent-id',
+  'inline-before-id', 'inline-after-id', 'inline-child-id', 'inline-origin-id',
+]
+
+export const DIV_IDS = [
+  'markdown-editor-wrapper', 'markdown-preview', 'inline-progress-value',
+  'inline-save-status', 'metadata-popup',
+]
+
+export function buildEditorDom(container, {
+  saveFailedMessage,
+  archiveFailedMessage,
+  restoreFailedMessage,
+} = {}) {
+  const template = document.createElement('div')
+  template.id = 'inline-edit-form'
+  template.style.display = 'none'
+
+  const form = document.createElement('form')
+  form.id = 'inline-edit-form-element'
+  form.action = '/creatives'
+  // Mirrors the ERB: plain JS can't call `t()`, so the localized save-failure
+  // message rides on the form's data-* attribute.
+  if (saveFailedMessage) form.dataset.saveFailedMessage = saveFailedMessage
+  template.appendChild(form)
+
+  HIDDEN_INPUT_IDS.forEach((id) => {
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.id = id
+    form.appendChild(input)
+  })
+  const progress = document.createElement('input')
+  progress.type = 'checkbox'
+  progress.id = 'inline-creative-progress'
+  form.appendChild(progress)
+
+  const editorRoot = document.createElement('div')
+  editorRoot.id = 'lexical-inline-editor'
+  editorRoot.dataset.lexicalEditorRoot = ''
+  form.appendChild(editorRoot)
+
+  const markdownTextarea = document.createElement('textarea')
+  markdownTextarea.id = 'markdown-editor-textarea'
+  form.appendChild(markdownTextarea)
+  const metadataTextarea = document.createElement('textarea')
+  metadataTextarea.id = 'metadata-yaml-editor'
+  form.appendChild(metadataTextarea)
+  BUTTON_IDS.forEach((id) => {
+    const button = document.createElement('button')
+    button.type = 'button'
+    button.id = id
+    if (id === 'inline-archive') {
+      // Same reason as saveFailedMessage above: the archive/restore failure
+      // strings are localized in the ERB and read back off the button.
+      if (archiveFailedMessage) button.dataset.failureMessage = archiveFailedMessage
+      if (restoreFailedMessage) button.dataset.restoreFailureMessage = restoreFailedMessage
+    }
+    form.appendChild(button)
+  })
+  DIV_IDS.forEach((id) => {
+    const div = document.createElement('div')
+    div.id = id
+    form.appendChild(div)
+  })
+  container.appendChild(template)
+  return template
+}
+
+// The real <creative-tree-row> is a Lit component; the module only needs it to
+// expose a `.creative-tree` child, which is what the browser component renders.
+// A brand-new row has no `.creative-row` yet — that markup only appears after a
+// successful save inserts it — so the stub deliberately omits it.
+export function defineTreeRowStub() {
+  if (customElements.get('creative-tree-row')) return
+  customElements.define('creative-tree-row', class extends HTMLElement {
+    connectedCallback() {
+      if (this.querySelector('.creative-tree')) return
+      const tree = document.createElement('div')
+      tree.className = 'creative-tree'
+      this.appendChild(tree)
+    }
+  })
+}
+
+// The markup `_empty_state.html.erb` renders as the sole child of #creatives,
+// reduced to the parts the editor interacts with.
+//
+// The `data-creatives-empty-state` wrapper is what makes this a placeholder as far
+// as `creative_tree_empty_state.js` is concerned — that module hides and restores
+// the wrapper, not the card inside it — so the fixture has to carry it or the
+// hide/restore calls silently find nothing. `index.html.erb` also emits a pristine
+// copy in a `<template>` outside the container, which `restoreTreeEmptyState()`
+// clones when the tree render has wiped the original away; mirror that here so the
+// restore path is exercised as it is in the browser.
+export function renderEmptyState() {
+  const creatives = document.getElementById('creatives')
+  const markup = `
+    <div data-creatives-empty-state>
+      <div class="creative-empty-state">
+        <button type="button" class="new-root-creative-btn">Add</button>
+      </div>
+    </div>
+  `
+  creatives.innerHTML = markup
+
+  document.getElementById('creatives-empty-state-template')?.remove()
+  const template = document.createElement('template')
+  template.id = 'creatives-empty-state-template'
+  template.innerHTML = markup
+  document.body.appendChild(template)
+
+  return creatives.querySelector('[data-creatives-empty-state]')
+}
+
+// A row that already exists on the server, i.e. one that renders a
+// `.creative-row` and carries a creative id.
+export function appendExistingRow(id, container = document.getElementById('creatives')) {
+  const rowComponent = document.createElement('creative-tree-row')
+  rowComponent.setAttribute('creative-id', String(id))
+  rowComponent.dataset.descriptionRawHtml = '<p>existing</p>'
+  rowComponent.dataset.progressValue = '0'
+  // The stub only renders its .creative-tree child once connected.
+  container.appendChild(rowComponent)
+  const tree = rowComponent.querySelector('.creative-tree')
+  tree.id = `creative-${id}`
+  tree.dataset.id = String(id)
+  const row = document.createElement('div')
+  row.className = 'creative-row'
+  tree.appendChild(row)
+  return { rowComponent, tree, row }
+}
+
+// Lets queued microtasks and the rAF-deferred finalizeSetup() in startNew() run.
+export function flush() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => setTimeout(resolve, 0))
+  })
+}

data/app/javascript/modules/command_args_form.js

@@ -348,9 +348,6 @@ export default class CommandArgsForm {
     if (command.name === 'topic') {
       return this._buildTopicText(command, values)
     }
-    if (command.name === 'work') {
-      return this._buildWorkText(command, values)
-    }
     if (command.name === 'compress') {
       return this._buildCompressText(command, values)
     }
@@ -375,15 +372,6 @@ export default class CommandArgsForm {
     return parts.join(' ')
   }
 
-  _buildWorkText(command, values) {
-    const parts = [command.label]
-    if (values.agent_name) {
-      parts.push(values.agent_name)
-    }
-    if (values.context) parts.push(values.context)
-    return parts.join(' ')
-  }
-
   _buildCompressText(command, values) {
     const parts = [command.label]
     if (values.instructions) parts.push(values.instructions)

data/app/javascript/modules/command_menu.js

@@ -1,8 +1,10 @@
 import CommonPopup from '../lib/common_popup'
-import { getCaretClientRect } from '../utils/caret_position'
+import { caretAnchor } from '../utils/caret_position'
 import CommandArgsForm from './command_args_form'
+import { openCreativeLinkPicker } from './creative_link_picker'
 
 let commandMenuInitialized = false
+let commandSubmissionSequence = 0
 
 if (!commandMenuInitialized) {
   commandMenuInitialized = true
@@ -15,6 +17,7 @@ if (!commandMenuInitialized) {
 
     const list = menu.querySelector('[data-popup-list]')
     const commandCache = new Map()
+    let skipNextMenuInput = false
 
     const argsForm = new CommandArgsForm({
       container: popup,
@@ -33,12 +36,53 @@ if (!commandMenuInitialized) {
       },
       onSubmit: (commandText) => {
         popupMenu.hide()
+        // clearCommandText() stripped only the "/" token, so anything still in
+        // the box is the draft the user had typed before opening the menu. The
+        // command is submitted on its own, so the draft cannot ride along with
+        // it — hand it to the form controller, which puts it back once the send
+        // settles, rather than dropping it on the floor here.
+        const draft = textarea.value
+        if (draft.trim()) {
+          textarea.dispatchEvent(new CustomEvent('comments--form:stash-draft', {
+            bubbles: true,
+            detail: { draft }
+          }))
+        }
         textarea.value = commandText
+        // Keep the normal input listeners (drafts, resize, submit state) in
+        // sync without treating this programmatic command as a new typeahead
+        // query. A schema command with no entered values is just "/name", so
+        // the command menu would otherwise reopen as soon as the form closes.
+        skipNextMenuInput = true
         textarea.dispatchEvent(new Event('input', { bubbles: true }))
         // Trigger form submission directly
         const submitBtn = document.querySelector('#new-comment-form [data-comments--form-target="submit"]')
         if (submitBtn) {
+          const submissionId = String(++commandSubmissionSequence)
+          let submissionStarted = false
+          const markSubmission = (event) => { event.commandSubmissionId = submissionId }
+          const onSubmissionStarted = (event) => {
+            if (event.detail?.submissionId === submissionId) submissionStarted = true
+          }
+          // Keep focus out of the textarea while its value is still the command
+          // being sent. The form announces settlement after success/failure
+          // cleanup, so typing cannot append to the in-flight command.
+          const onSubmissionSettled = (event) => {
+            if (event.detail?.submissionId !== submissionId) return
+            popup.removeEventListener('comments--form:submit-settled', onSubmissionSettled)
+            const active = document.activeElement
+            if (!active || active === document.body) textarea.focus()
+          }
+          submitBtn.addEventListener('click', markSubmission, { capture: true, once: true })
+          popup.addEventListener('comments--form:submit-started', onSubmissionStarted)
+          popup.addEventListener('comments--form:submit-settled', onSubmissionSettled)
           submitBtn.click()
+          submitBtn.removeEventListener('click', markSubmission, true)
+          popup.removeEventListener('comments--form:submit-started', onSubmissionStarted)
+          if (!submissionStarted) {
+            popup.removeEventListener('comments--form:submit-settled', onSubmissionSettled)
+            textarea.focus()
+          }
         }
       },
       onCancel: () => {
@@ -115,18 +159,25 @@ if (!commandMenuInitialized) {
       textarea.setSelectionRange(cleaned.length, cleaned.length)
     }
 
+    // Cached by creative id, and cached as the *promise* rather than its result:
+    // the list is fetched on every keystroke, so caching only after the response
+    // lands would fire one request per character of "/task" before the first one
+    // returns. In-flight callers share the request instead.
     function fetchCommands(creativeId) {
       if (!creativeId) return Promise.resolve([])
-      if (commandCache.has(creativeId)) return Promise.resolve(commandCache.get(creativeId))
+      if (commandCache.has(creativeId)) return commandCache.get(creativeId)
 
-      return fetch(`/creatives/${creativeId}/comments/commands`, { headers: { Accept: 'application/json' } })
+      const request = fetch(`/creatives/${creativeId}/comments/commands`, { headers: { Accept: 'application/json' } })
         .then((response) => (response.ok ? response.json() : []))
-        .then((data) => {
-          const list = Array.isArray(data) ? data : []
-          commandCache.set(creativeId, list)
-          return list
+        .then((data) => (Array.isArray(data) ? data : []))
+        .catch(() => {
+          // Don't leave a failed lookup cached — the next keystroke retries.
+          commandCache.delete(creativeId)
+          return []
         })
-        .catch(() => [])
+
+      commandCache.set(creativeId, request)
+      return request
     }
 
     function insert(command) {
@@ -158,45 +209,33 @@ if (!commandMenuInitialized) {
       }
 
       popupMenu.setItems(filtered)
-      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
-      popupMenu.showAt(caretRect)
+      popupMenu.showAt(caretAnchor(textarea))
     }
 
     function openCreativePicker(textarea) {
-      const modal = document.getElementById('link-creative-modal')
-      if (!modal) return
-
-      const controller = window.Stimulus?.getControllerForElementAndIdentifier(modal, 'link-creative')
-      if (!controller) return
-
-      // Clear the command text (e.g. "/crea", "/creative") from textarea
-      clearCommandText()
-
-      const caretRect = getCaretClientRect(textarea) || textarea.getBoundingClientRect()
-      controller.open(
-        caretRect,
-        (item) => {
-          // Insert markdown link at cursor position
-          const link = `[${item.label}](/creatives/${item.id})`
-          const curPos = textarea.selectionStart
-          const beforeCur = textarea.value.slice(0, curPos)
-          const afterCur = textarea.value.slice(curPos)
-          textarea.value = beforeCur + link + ' ' + afterCur
-          const newPos = curPos + link.length + 1
-          textarea.setSelectionRange(newPos, newPos)
-          textarea.focus()
-        },
-        () => {
-          textarea.focus()
-        }
-      )
+      openCreativeLinkPicker(textarea, {
+        triggerRange: { start: 0, end: textarea.selectionStart },
+      })
     }
 
     textarea.addEventListener('keydown', function (event) {
       if (popupMenu.handleKey(event)) return
     })
 
+    // Bumped by every input event, so a lookup that resolves after the user has
+    // typed on (or deleted the "/" entirely) is dropped instead of rendering the
+    // menu from a query that no longer matches the box — the late response would
+    // otherwise pop the menu back up over an unrelated draft.
+    let queryToken = 0
+
     textarea.addEventListener('input', function () {
+      const token = ++queryToken
+      if (skipNextMenuInput) {
+        skipNextMenuInput = false
+        popupMenu.hide()
+        return
+      }
+
       // If args form is open, don't show command menu
       if (argsForm.isOpen()) return
 
@@ -213,7 +252,10 @@ if (!commandMenuInitialized) {
       const query = match[1]
 
       fetchCommands(creativeId)
-        .then((commands) => show(commands, query))
+        .then((commands) => {
+          if (token !== queryToken) return
+          show(commands, query)
+        })
     })
   })
 }

data/app/javascript/modules/creative_link_picker.js

@@ -0,0 +1,56 @@
+import { caretAnchor } from '../utils/caret_position'
+
+const MARKDOWN_SPECIAL = /[\\`*_\[\]()<>~]/g
+
+export function escapeMarkdownLabel(label) {
+  return String(label || '').replace(MARKDOWN_SPECIAL, (character) => `\\${character}`)
+}
+
+export function markdownCreativeCommandRange(value, caretPosition) {
+  const beforeCaret = String(value || '').slice(0, caretPosition)
+  const match = beforeCaret.match(/(?:^|\n)(\/creative)$/)
+  if (!match) return null
+
+  return {
+    start: caretPosition - match[1].length,
+    end: caretPosition,
+  }
+}
+
+export function insertMarkdownCreativeLink(textarea, item) {
+  if (!textarea || !item?.id) return false
+
+  const position = textarea.selectionStart
+  const link = `[${escapeMarkdownLabel(item.label)}](/creatives/${item.id})`
+  textarea.setRangeText(`${link} `, position, textarea.selectionEnd, 'end')
+  textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  textarea.focus()
+  return true
+}
+
+export function openCreativeLinkPicker(textarea, {
+  triggerRange = null,
+  allowCreate = true,
+} = {}) {
+  if (!textarea) return false
+
+  const modal = document.getElementById('link-creative-modal')
+  const controller = modal && window.Stimulus?.getControllerForElementAndIdentifier(
+    modal,
+    'link-creative'
+  )
+  if (!controller) return false
+
+  if (triggerRange) {
+    textarea.setRangeText('', triggerRange.start, triggerRange.end, 'end')
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  controller.open(
+    caretAnchor(textarea),
+    (item) => insertMarkdownCreativeLink(textarea, item),
+    () => textarea.focus(),
+    { allowCreate }
+  )
+  return true
+}