collavre 0.24.0 → 0.25.0

data/app/javascript/lib/common_popup.js

@@ -1,3 +1,20 @@
+// Gap between the anchor (caret, button) and the popup edge.
+const ANCHOR_GAP = 4
+// Breathing room kept between the popup and the edge of its region.
+const BOUNDS_PADDING = 8
+// Floor for the space-derived max-height. Header + search input already eat
+// ~90px, so anything under this leaves no list at all; overflowing the region
+// slightly beats rendering a sliver.
+const MIN_POPUP_HEIGHT = 160
+
+// Anchor provider for a popup hung off a live element. Pass this to showAt
+// instead of the element's rect so placement can re-measure it later; returns
+// null once the element leaves the document, where its rect would read as all
+// zeros and drag the popup into the top-left corner.
+export function elementAnchor(element) {
+  return () => (element?.isConnected ? element.getBoundingClientRect() : null)
+}
+
 export default class CommonPopup {
   constructor(element, { listElement, onSelect, renderItem, onClose, closeOnOutsideClick = true } = {}) {
     this.element = element
@@ -8,16 +25,49 @@ export default class CommonPopup {
     this.closeOnOutsideClick = closeOnOutsideClick
     this.items = []
     this.activeIndex = -1
+    // Pending showAt placement frame, so hide() can cancel it.
+    this._openFrame = null
+    // Set by showAt when the caller can re-measure its anchor — see anchorRect.
+    this._anchorProvider = null
+    this._anchorRect = null
+    // True once the placement frame has actually revealed the popup. isOpen() is
+    // already true during the frame between display:block and that reveal, so it
+    // cannot tell "on screen" apart from "measured but still blank" — and only
+    // the first of those may skip the blanking step. See showAt.
+    this._revealed = false
 
     this.handleOutsideClick = this.handleOutsideClick.bind(this)
+    this.handleViewportResize = this.handleViewportResize.bind(this)
   }
 
-  showAt(anchorRect, boundsElement = null) {
+  // `anchor` is either a rect or a function returning one. Prefer the function
+  // (see elementAnchor / caretAnchor): a rect is a snapshot, and the anchor can
+  // move while the popup is open — the on-screen keyboard shrinks the viewport
+  // and comments--presence lifts the composer clear of it on that same resize,
+  // so by the time we re-place, the opening rect points under the keyboard.
+  // Rects stay supported for anchors with nothing to re-measure, such as one
+  // derived from a text selection that has since been cleared.
+  showAt(anchor, boundsElement = null) {
     if (!this.element) return
 
+    // Typeahead popups call showAt on every keystroke to re-anchor a menu that
+    // is already up (see modules/command_menu.js). Blanking it to
+    // visibility:hidden and waiting a frame would then blink the menu off and
+    // back on once per character, so a popup already on screen is only re-placed.
+    const wasRevealed = this._revealed && this.element.isConnected
+
     // When set, the popup is caged inside this element's rect (e.g. the chat
     // box) instead of the viewport — see updatePosition.
     this._boundsElement = boundsElement
+    this._anchorProvider = typeof anchor === 'function' ? anchor : null
+    // Last known anchor geometry, so reposition() can re-place after the
+    // popup's content has changed size, and so a provider that stops resolving
+    // has something to fall back on.
+    this._anchorRect = this._anchorProvider ? null : anchor
+    // Keep the flip decision for the rest of this open: re-anchoring a menu
+    // that is already above the caret must not drop it back under the caret
+    // for a frame before it flips up again.
+    if (!wasRevealed) this._placedAbove = false
 
     // Re-opening while already open (e.g. clicking the same typo mark twice):
     // a listener from the previous open is still live, so the opening mousedown
@@ -28,11 +78,28 @@ export default class CommonPopup {
     document.removeEventListener('touchstart', this.handleOutsideClick)
 
     this.element.style.display = 'block'
-    this.element.style.visibility = 'hidden'
+    if (wasRevealed) {
+      // Already painted, so place it now rather than a frame late — otherwise
+      // the menu sits at the previous caret's position for one frame.
+      this.updatePosition(this.anchorRect())
+    } else {
+      this.element.style.visibility = 'hidden'
+    }
 
-    requestAnimationFrame(() => {
-      this.updatePosition(anchorRect)
+    cancelAnimationFrame(this._openFrame)
+    this._openFrame = requestAnimationFrame(() => {
+      this._openFrame = null
+      // The popup can be gone before this frame runs: hide() on a rapid
+      // open/close, or a Turbo navigation that tears the element out of the
+      // document without closing the popup. Registering here regardless would
+      // leave document/visualViewport holding this popup and its detached
+      // element forever, and hide()'s removals already ran against listeners
+      // that did not exist yet.
+      if (!this.isOpen() || !this.element.isConnected) return
+
+      this.updatePosition(this.anchorRect())
       this.element.style.visibility = 'visible'
+      this._revealed = true
       // Register the outside-click listeners only after the opening event has
       // finished propagating. When a popup is opened from a mousedown handler
       // (e.g. clicking a typo highlight), registering synchronously here would
@@ -43,42 +110,106 @@ export default class CommonPopup {
         document.addEventListener('mousedown', this.handleOutsideClick)
         document.addEventListener('touchstart', this.handleOutsideClick)
       }
+      // The on-screen keyboard shrinks the visual viewport without firing a
+      // window resize, and it opens *after* showAt (the consumer focuses its
+      // input a frame later), so the placement made here is already stale.
+      window.visualViewport?.addEventListener('resize', this.handleViewportResize)
     })
   }
 
+  // Re-run placement against the anchor showAt was given. Call this whenever the
+  // popup's content changes size: showAt measures one frame after opening, so a
+  // popup whose body arrives asynchronously (a fetched tree, search results) was
+  // sized while it still read "Loading…" and would otherwise keep the placement
+  // that placeholder height implied.
+  reposition() {
+    if (!this.isOpen()) return
+    this.updatePosition(this.anchorRect())
+  }
+
+  // The anchor's geometry now, not as it was when showAt ran.
+  anchorRect() {
+    if (!this._anchorProvider) return this._anchorRect
+
+    let rect = null
+    try {
+      rect = this._anchorProvider()
+    } catch {
+      rect = null
+    }
+    // The anchor can go away mid-open (Turbo swap, a textarea replaced by a
+    // stream update). Keep the last place we saw it rather than collapsing to
+    // the origin.
+    if (rect) this._anchorRect = rect
+    return this._anchorRect
+  }
+
+  handleViewportResize() {
+    this.reposition()
+  }
+
+  // The region the popup must stay inside: an explicit bounds element (the chat
+  // box) when caged, otherwise the visual viewport. window.innerHeight is the
+  // wrong number on mobile — it still counts the strip the keyboard covers.
+  regionRect() {
+    const bounds = this._boundsElement?.getBoundingClientRect?.()
+    if (bounds) return bounds
+
+    const viewport = window.visualViewport
+    const left = viewport?.offsetLeft || 0
+    const top = viewport?.offsetTop || 0
+    const width = viewport?.width || window.innerWidth
+    const height = viewport?.height || window.innerHeight
+    return { left, top, right: left + width, bottom: top + height, width, height }
+  }
+
   updatePosition(anchorRect) {
     if (!this.element) return
 
-    const scrollX = window.scrollX || window.pageXOffset || 0
-    const scrollY = window.scrollY || window.pageYOffset || 0
     const offsetParent = this.element.offsetParent
     const parentRect = offsetParent?.getBoundingClientRect?.() || { left: 0, top: 0 }
     const parentScrollX = offsetParent?.scrollLeft || 0
     const parentScrollY = offsetParent?.scrollTop || 0
-    const boundsPadding = 8
     const rect = anchorRect || this.element.getBoundingClientRect()
+    const anchorTop = rect?.top || 0
+    const anchorBottom = rect?.bottom || 0
 
-    let viewportLeft = (rect?.left || 0)
-    let viewportTop = (rect?.bottom || 0) + 4
-
+    // Measure unconstrained. A max-height left behind by an earlier placement
+    // would make offsetHeight report that cap instead of the content height, so
+    // every later call would agree the popup "fits" wherever it was first put.
+    this.element.style.maxHeight = ''
     const { offsetWidth: width, offsetHeight: height } = this.element
 
-    // Clamp within a container's rect when bounded (keeps the popup caged inside
-    // the chat box), otherwise within the viewport.
-    const bounds = this._boundsElement?.getBoundingClientRect?.()
-    let minLeft = boundsPadding
-    let minTop = boundsPadding
-    let maxLeft = window.innerWidth - width - boundsPadding
-    let maxTop = window.innerHeight - height - boundsPadding
-    if (bounds) {
-      minLeft = bounds.left + boundsPadding
-      minTop = bounds.top + boundsPadding
-      maxLeft = bounds.right - width - boundsPadding
-      maxTop = bounds.bottom - height - boundsPadding
-      // Cap size so a long list scrolls inside the box instead of spilling past it.
-      this.element.style.maxWidth = `${bounds.width - boundsPadding * 2}px`
-      this.element.style.maxHeight = `${bounds.height - boundsPadding * 2}px`
+    const region = this.regionRect()
+    const spaceBelow = region.bottom - BOUNDS_PADDING - (anchorBottom + ANCHOR_GAP)
+    const spaceAbove = (anchorTop - ANCHOR_GAP) - (region.top + BOUNDS_PADDING)
+
+    // Flip above the anchor when the popup genuinely does not fit below it and
+    // there is more room up there — a chat composer pinned to the bottom of the
+    // screen leaves almost nothing under the caret. Once flipped, stay flipped
+    // for the rest of this open: content that shrinks again (collapsing tree
+    // nodes) must not make the popup hop back across the anchor.
+    const placeAbove = this._placedAbove || (height > spaceBelow && spaceAbove > spaceBelow)
+    this._placedAbove = placeAbove
+
+    // Cap to the space actually available so the list scrolls inside the popup
+    // instead of running off-screen, both now and if the content grows later.
+    const available = Math.max(placeAbove ? spaceAbove : spaceBelow, MIN_POPUP_HEIGHT)
+    this.element.style.maxHeight = `${available}px`
+    if (this._boundsElement) {
+      this.element.style.maxWidth = `${region.width - BOUNDS_PADDING * 2}px`
     }
+    const renderedHeight = Math.min(height, available)
+
+    let viewportLeft = rect?.left || 0
+    let viewportTop = placeAbove
+      ? anchorTop - ANCHOR_GAP - renderedHeight
+      : anchorBottom + ANCHOR_GAP
+
+    const minLeft = region.left + BOUNDS_PADDING
+    const maxLeft = region.right - width - BOUNDS_PADDING
+    const minTop = region.top + BOUNDS_PADDING
+    const maxTop = region.bottom - renderedHeight - BOUNDS_PADDING
 
     viewportLeft = Math.max(minLeft, Math.min(viewportLeft, maxLeft))
     viewportTop = Math.max(minTop, Math.min(viewportTop, maxTop))
@@ -200,14 +331,22 @@ export default class CommonPopup {
 
   hide(reason = 'manual') {
     if (!this.element || !this.isOpen()) return
+    // Drop a placement frame that has not run yet, so it cannot re-show and
+    // re-register listeners after this close.
+    cancelAnimationFrame(this._openFrame)
+    this._openFrame = null
     this.element.style.display = 'none'
     this.element.style.visibility = ''
+    this._revealed = false
     this.items = []
     this.activeIndex = -1
     this.updateActiveItem()
 
     document.removeEventListener('mousedown', this.handleOutsideClick)
     document.removeEventListener('touchstart', this.handleOutsideClick)
+    window.visualViewport?.removeEventListener('resize', this.handleViewportResize)
+    this._anchorRect = null
+    this._anchorProvider = null
 
     if (typeof this.onClose === 'function') {
       this.onClose(reason)

data/app/javascript/lib/creative_link_prefetch.js

@@ -0,0 +1,27 @@
+export function isCreativeNavigation(url) {
+  url = new URL(url, window.location.origin)
+
+  return url.origin === window.location.origin && /\/creatives(?:\/|$)/.test(url.pathname)
+}
+
+// Only these HTML routes reach CreativesController#index visit persistence:
+// the Creative index and a single Creative show route (which redirects there).
+// Nested Creative routes load supporting UI and must not reserve a visit
+// sequence merely because a last-visited controller is connected.
+export function isCreativeVisitNavigation(url) {
+  url = new URL(url, window.location.origin)
+
+  return url.origin === window.location.origin && /\/creatives(?:\.html|\/\d+)?\/?$/.test(url.pathname)
+}
+
+export function preventCreativeLinkPrefetch(event) {
+  const link = event.target
+  if (!(link instanceof HTMLAnchorElement) || !isCreativeNavigation(link.href)) return
+
+  event.preventDefault()
+}
+
+// A prefetched Creative response can be promoted by Turbo without issuing a
+// second request. Prevent it globally so confirmed navigation remains the only
+// way to update the user's last visited Creative, regardless of link source.
+document.addEventListener("turbo:before-prefetch", preventCreativeLinkPrefetch)

data/app/javascript/lib/last_visited_creative.js

@@ -0,0 +1,97 @@
+import csrfFetch, { refreshCsrfToken } from './api/csrf_fetch'
+import { isCreativeVisitNavigation } from './creative_link_prefetch'
+
+let pendingRequestController = null
+const SEQUENCE_HEADER = 'X-Collavre-Last-Visited-Creative-Sequence'
+const TOKEN_HEADER = 'X-Collavre-Last-Visited-Creative-Token'
+
+function sequenceUrl(baseUrl) {
+  const url = new URL(baseUrl, window.location.origin)
+  url.pathname = `${url.pathname.replace(/\/$/, '')}/next_last_visited_sequence`
+  return `${url.pathname}${url.search}`
+}
+
+async function nextLastVisitedCreativeSequence(baseUrl, signal, retryCsrf = true) {
+  const response = await csrfFetch(sequenceUrl(baseUrl), {
+    method: 'PATCH',
+    headers: { Accept: 'application/json' },
+    signal,
+  })
+  if (response.status === 422 && retryCsrf && !signal?.aborted) {
+    await refreshCsrfToken({ signal })
+    if (signal?.aborted) return null
+    return nextLastVisitedCreativeSequence(baseUrl, signal, false)
+  }
+  if (!response.ok) return null
+
+  const sequence = Number((await response.json()).sequence)
+  return Number.isSafeInteger(sequence) && sequence > 0 ? sequence : null
+}
+
+export async function prepareLastVisitedCreativeNavigation(event, baseUrl, visitToken) {
+  const fetchOptions = event.detail?.fetchOptions
+  if (
+    !baseUrl ||
+    !visitToken ||
+    !fetchOptions ||
+    !isCreativeVisitNavigation(event.detail?.url) ||
+    String(fetchOptions.method || 'GET').toUpperCase() !== 'GET'
+  ) return
+
+  event.preventDefault()
+  try {
+    const sequence = await nextLastVisitedCreativeSequence(baseUrl)
+    if (!sequence) return
+
+    const headers = new Headers(fetchOptions.headers)
+    headers.set(TOKEN_HEADER, visitToken)
+    headers.set(SEQUENCE_HEADER, String(sequence))
+    fetchOptions.headers = headers
+  } finally {
+    event.detail.resume?.()
+  }
+}
+
+export function cancelPendingLastVisitedCreative() {
+  pendingRequestController?.abort()
+  pendingRequestController = null
+}
+
+export function rememberLastVisitedCreative(baseUrl, creativeId, visitToken) {
+  if (!baseUrl || !creativeId || !visitToken) return
+
+  cancelPendingLastVisitedCreative()
+  const requestController = new AbortController()
+  pendingRequestController = requestController
+  const url = new URL(baseUrl, window.location.origin)
+  url.pathname = `${url.pathname.replace(/\/$/, '')}/${encodeURIComponent(creativeId)}/remember_last_visited`
+  url.searchParams.set('visit_token', visitToken)
+  const request = (sequence) => csrfFetch(`${url.pathname}${url.search}`, {
+    method: 'PATCH',
+    headers: {
+      Accept: 'application/json',
+      [SEQUENCE_HEADER]: String(sequence),
+    },
+    signal: requestController.signal,
+  })
+
+  nextLastVisitedCreativeSequence(baseUrl, requestController.signal)
+    .then(async (sequence) => {
+      if (!sequence || requestController.signal.aborted) return null
+      return request(sequence)
+    })
+    .then(async (response) => {
+      if (!response) return
+      if (requestController.signal.aborted || response.ok || response.status !== 422) return
+
+      await refreshCsrfToken({ signal: requestController.signal })
+      if (requestController.signal.aborted) return
+      const sequence = await nextLastVisitedCreativeSequence(baseUrl, requestController.signal)
+      if (!sequence || requestController.signal.aborted) return
+      await request(sequence)
+    })
+    .catch(() => {})
+    .finally(() => {
+      if (pendingRequestController === requestController) pendingRequestController = null
+    })
+}

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

@@ -0,0 +1,162 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  createEditor,
+} from 'lexical'
+import { LinkNode } from '@lexical/link'
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'
+import {
+  $createCreativeLinkNode,
+  $isCreativeLinkNode,
+  CreativeLinkNode,
+  creativeIdFromUrl,
+} from '../creative_link_node'
+import { lexicalToMarkdown } from '../markdown_serialize'
+
+function createTestEditor() {
+  return createEditor({
+    namespace: 'creative-link-test',
+    nodes: [LinkNode, CreativeLinkNode],
+    onError(error) {
+      throw error
+    },
+  })
+}
+
+describe('CreativeLinkNode', () => {
+  test('extracts creative ids only from canonical internal paths', () => {
+    expect(creativeIdFromUrl('/creatives/42')).toBe(42)
+    expect(creativeIdFromUrl('/creatives/42?topic_id=3')).toBe(42)
+    expect(creativeIdFromUrl('https://example.com/creatives/42')).toBeNull()
+    expect(creativeIdFromUrl('/creatives/not-a-number')).toBeNull()
+  })
+
+  test('exports data-creative-id while keeping canonical Markdown', () => {
+    const editor = createTestEditor()
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      const link = $createCreativeLinkNode('/creatives/42', 42)
+      link.append($createTextNode('Internal page'))
+      paragraph.append(link)
+      $getRoot().append(paragraph)
+    }, { discrete: true })
+
+    let html = ''
+    editor.getEditorState().read(() => {
+      html = $generateHtmlFromNodes(editor)
+    })
+
+    expect(html).toContain('data-creative-id="42"')
+    expect(lexicalToMarkdown(editor)).toBe('[Internal page](/creatives/42)')
+  })
+
+  test('reconstructs the dedicated node from a canonical internal href', () => {
+    const editor = createTestEditor()
+    let imported = null
+
+    editor.update(() => {
+      const doc = new DOMParser().parseFromString(
+        '<p><a href="/creatives/77">Existing</a></p>',
+        'text/html',
+      )
+      const nodes = $generateNodesFromDOM(editor, doc.body)
+      nodes.forEach((node) => $getRoot().append(node))
+      imported = $getRoot().getFirstChild().getFirstChild()
+    }, { discrete: true })
+
+    let importedType = null
+    let importedCreativeId = null
+    editor.getEditorState().read(() => {
+      importedType = imported.getType()
+      importedCreativeId = imported.getCreativeId()
+    })
+    expect(importedType).toBe('creative-link')
+    expect(importedCreativeId).toBe(77)
+  })
+
+  test('imports serialized nodes and preserves link attributes when cloned', () => {
+    const editor = createTestEditor()
+    let imported = null
+    let cloned = null
+
+    editor.update(() => {
+      imported = CreativeLinkNode.importJSON({
+        type: 'creative-link',
+        version: 1,
+        url: '/creatives/51',
+        creativeId: 51,
+        rel: 'nofollow',
+        target: '_blank',
+        title: 'Imported page',
+      })
+      imported.append($createTextNode('Imported'))
+      const paragraph = $createParagraphNode()
+      paragraph.append(imported)
+      $getRoot().append(paragraph)
+      cloned = CreativeLinkNode.clone(imported)
+    }, { discrete: true })
+
+    editor.getEditorState().read(() => {
+      expect(imported.exportJSON()).toMatchObject({
+        type: 'creative-link',
+        creativeId: 51,
+        url: '/creatives/51',
+        rel: 'nofollow',
+        target: '_blank',
+        title: 'Imported page',
+      })
+      expect($isCreativeLinkNode(imported)).toBe(true)
+    })
+    expect(cloned.__url).toBe('/creatives/51')
+    expect(cloned.__creativeId).toBe(51)
+    expect(cloned.__rel).toBe('nofollow')
+    expect($isCreativeLinkNode({})).toBe(false)
+  })
+
+  test('updates and removes the DOM creative id with the node state', () => {
+    const editor = createTestEditor()
+
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      const linked = $createCreativeLinkNode('/creatives/61', 61)
+      const unlinked = $createCreativeLinkNode('/other', null)
+      paragraph.append(linked, unlinked)
+      $getRoot().append(paragraph)
+
+      const element = document.createElement('a')
+      linked.updateDOM(linked, element, {})
+      expect(element.dataset.creativeId).toBe('61')
+
+      unlinked.updateDOM(linked, element, {})
+      expect(element.hasAttribute('data-creative-id')).toBe(false)
+    }, { discrete: true })
+  })
+
+  test('imports data-creative-id without an href and keeps link attributes', () => {
+    const editor = createTestEditor()
+    let imported = null
+
+    editor.update(() => {
+      const doc = new DOMParser().parseFromString(
+        '<p><a data-creative-id="88" rel="nofollow" target="_blank" title="Page">Existing</a></p>',
+        'text/html',
+      )
+      const nodes = $generateNodesFromDOM(editor, doc.body)
+      nodes.forEach((node) => $getRoot().append(node))
+      imported = $getRoot().getFirstChild().getFirstChild()
+    }, { discrete: true })
+
+    editor.getEditorState().read(() => {
+      expect(imported.getURL()).toBe('/creatives/88')
+      expect(imported.getCreativeId()).toBe(88)
+      expect(imported.getRel()).toBe('nofollow')
+      expect(imported.getTarget()).toBe('_blank')
+      expect(imported.getTitle()).toBe('Page')
+    })
+  })
+})

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

@@ -0,0 +1,133 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  createEditor,
+} from 'lexical'
+import { LinkNode } from '@lexical/link'
+import { CreativeLinkNode } from '../creative_link_node'
+import { registerCreativeLinkTrigger } from '../creative_link_trigger'
+import { lexicalToMarkdown } from '../markdown_serialize'
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+function createTestEditor() {
+  const editor = createEditor({
+    namespace: 'creative-link-trigger-test',
+    nodes: [LinkNode, CreativeLinkNode],
+    onError(error) {
+      throw error
+    },
+  })
+  const root = document.createElement('div')
+  root.contentEditable = 'true'
+  document.body.appendChild(root)
+  editor.setRootElement(root)
+  return editor
+}
+
+describe('creative link [[ trigger', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('opens once and replaces the trigger with a canonical creative link', async () => {
+    const editor = createTestEditor()
+    const openPicker = jest.fn(() => true)
+    const unregister = registerCreativeLinkTrigger(editor, openPicker)
+
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      const text = $createTextNode('Before [[')
+      paragraph.append(text)
+      $getRoot().append(paragraph)
+      text.selectEnd()
+    }, { discrete: true })
+    await flush()
+
+    expect(openPicker).toHaveBeenCalledTimes(1)
+    openPicker.mock.calls[0][0].onSelect({ id: 99, label: 'Target page' })
+
+    expect(lexicalToMarkdown(editor)).toBe('Before [Target page](/creatives/99)')
+    expect(openPicker).toHaveBeenCalledTimes(1)
+    unregister()
+  })
+
+  test('keeps the trigger when the picker cannot open', async () => {
+    const editor = createTestEditor()
+    const openPicker = jest.fn(() => false)
+    const unregister = registerCreativeLinkTrigger(editor, openPicker)
+
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      const text = $createTextNode('[[')
+      paragraph.append(text)
+      $getRoot().append(paragraph)
+      text.selectEnd()
+    }, { discrete: true })
+    await flush()
+
+    expect(openPicker).toHaveBeenCalledTimes(1)
+    expect(lexicalToMarkdown(editor)).toBe('[[')
+    unregister()
+  })
+
+  test('does not immediately reopen a dismissed trigger', async () => {
+    const editor = createTestEditor()
+    const openPicker = jest.fn(() => true)
+    const unregister = registerCreativeLinkTrigger(editor, openPicker)
+
+    let textNode = null
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      textNode = $createTextNode('[[')
+      paragraph.append(textNode)
+      $getRoot().append(paragraph)
+      textNode.selectEnd()
+    }, { discrete: true })
+    await flush()
+
+    openPicker.mock.calls[0][0].onClose()
+    editor.update(() => textNode.getLatest().selectEnd(), { discrete: true })
+    await flush()
+
+    expect(openPicker).toHaveBeenCalledTimes(1)
+    unregister()
+  })
+
+  test('clears a dismissed trigger after editing away and opens for a new trigger', async () => {
+    const editor = createTestEditor()
+    const openPicker = jest.fn(() => true)
+    const unregister = registerCreativeLinkTrigger(editor, openPicker)
+
+    let textNode = null
+    editor.update(() => {
+      const paragraph = $createParagraphNode()
+      textNode = $createTextNode('[[')
+      paragraph.append(textNode)
+      $getRoot().append(paragraph)
+      textNode.selectEnd()
+    }, { discrete: true })
+    await flush()
+    openPicker.mock.calls[0][0].onClose()
+
+    editor.update(() => {
+      textNode.getLatest().setTextContent('plain')
+      textNode.getLatest().selectEnd()
+    }, { discrete: true })
+    await flush()
+    editor.update(() => {
+      textNode.getLatest().setTextContent('plain [[')
+      textNode.getLatest().selectEnd()
+    }, { discrete: true })
+    await flush()
+
+    expect(openPicker).toHaveBeenCalledTimes(2)
+    unregister()
+  })
+})