collavre 0.22.0 → 0.23.0

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
+}

data/app/javascript/controllers/__tests__/inbox_badge_controller.test.js

@@ -0,0 +1,73 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const createSubscription = jest.fn()
+const renderStreamMessage = jest.fn()
+
+jest.unstable_mockModule('../../services/cable', () => ({
+  createSubscription,
+}))
+
+jest.unstable_mockModule('@hotwired/turbo-rails', () => ({
+  Turbo: { renderStreamMessage },
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const InboxBadgeController = (await import('../inbox_badge_controller')).default
+
+describe('InboxBadgeController', () => {
+  let application
+  let container
+  let subscription
+
+  beforeEach(() => {
+    subscription = { unsubscribe: jest.fn() }
+    createSubscription.mockReset()
+    renderStreamMessage.mockReset()
+    createSubscription.mockReturnValue(subscription)
+
+    container = document.createElement('div')
+    container.setAttribute('data-controller', 'inbox-badge')
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('inbox-badge', InboxBadgeController)
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ''
+  })
+
+  test('subscribes to the namespaced InboxBadgeChannel on connect', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(createSubscription).toHaveBeenCalledTimes(1)
+    expect(createSubscription).toHaveBeenCalledWith(
+      { channel: 'Collavre::InboxBadgeChannel' },
+      expect.objectContaining({ received: expect.any(Function) }),
+    )
+  })
+
+  test('renders the transmitted badge snapshot through Turbo on its own subscription', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    const [, callbacks] = createSubscription.mock.calls[0]
+    const snapshot = '<turbo-stream action="replace" target="desktop-inbox-badge"></turbo-stream>'
+    callbacks.received(snapshot)
+
+    expect(renderStreamMessage).toHaveBeenCalledWith(snapshot)
+  })
+
+  test('unsubscribes when the controller disconnects', async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    container.remove()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(subscription.unsubscribe).toHaveBeenCalledTimes(1)
+  })
+})

data/app/javascript/controllers/comment_controller.js

@@ -3,6 +3,7 @@ import { renderCommentMarkdown, renderMermaidDiagrams } from '../lib/utils/markd
 import { addTableDownloadButtons } from '../lib/utils/table_download'
 import CommonPopup from '../lib/common_popup'
 import csrfFetch from '../lib/api/csrf_fetch'
+import { alertDialog, confirmDialog } from '../lib/utils/dialog'
 
 // Global tracker: persists streaming state across Turbo replacements
 // (each replacement creates a new controller instance, losing instance state)
@@ -248,7 +249,7 @@ export default class extends Controller {
       const data = await response.json()
       this.updateReactionsUI(data)
     } catch (error) {
-      alert(error?.message || 'Failed to update reaction')
+      alertDialog(error?.message || 'Failed to update reaction')
     }
   }
 
@@ -495,7 +496,7 @@ export default class extends Controller {
     const creativeId = button.dataset.creativeId
     const confirmText = button.dataset.confirmText || 'Restore original messages?'
 
-    if (!confirm(confirmText)) return
+    if (!(await confirmDialog(confirmText, { danger: true }))) return
 
     button.disabled = true
     try {
@@ -511,12 +512,12 @@ export default class extends Controller {
         // the summary comment (this one) will be destroyed via broadcast too
       } else {
         const data = await response.json().catch(() => ({}))
-        alert(data.error || 'Failed to restore')
+        alertDialog(data.error || 'Failed to restore')
         button.disabled = false
       }
     } catch (error) {
       console.error('Error restoring snapshot:', error)
-      alert('Failed to restore')
+      alertDialog('Failed to restore')
       button.disabled = false
     }
   }

data/app/javascript/controllers/comment_version_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { renderCommentMarkdown, renderMermaidDiagrams } from "../lib/utils/markdown"
+import { confirmDialog } from "../lib/utils/dialog"
 
 export default class extends Controller {
   static targets = ["prevBtn", "nextBtn", "indicator", "deleteBtn", "selectBtn"]
@@ -80,7 +81,7 @@ export default class extends Controller {
     // Can't delete if it's the only version
     if (versions.length <= 1) return
 
-    if (!confirm(this.deleteBtnTarget.dataset.confirmMessage || "Are you sure?")) return
+    if (!(await confirmDialog(this.deleteBtnTarget.dataset.confirmMessage || "Are you sure?", { danger: true }))) return
 
     const response = await fetch(
       `${this.versionsUrlValue}/${version.id}`,

data/app/javascript/controllers/comments/__tests__/form_controller_double_submit.test.js

@@ -0,0 +1,159 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import FormController from '../form_controller'
+
+// Regression harness for: "slow send API + double Enter => message sent twice".
+//
+// Scenario A proves the in-flight guard blocks a second Enter on the same
+// controller instance. Scenario B reproduces the real-world bug: a Turbo/
+// websocket morph reconnects the Stimulus controller mid-send, and (before the
+// fix) connect() reset this.sending, blowing away the guard so an impatient
+// second Enter re-sent the same message.
+describe('FormController - double submit on slow API', () => {
+  let application
+  let container
+  let controller
+
+  const FIXTURE = `
+    <div id="comments-popup"
+         data-controller="comments--form"
+         data-review-feedback-placeholder="Write feedback for this quote..."
+         data-review-summary-placeholder="Overall comment (optional)..."
+         data-review-add-quote="+ Add"
+         data-review-send="Send review"
+         data-review-send-question="Send question"
+         data-review-type-review="💬"
+         data-review-type-question="❓"
+         data-review-type-review-label="Review"
+         data-review-type-question-label="Question">
+      <form data-comments--form-target="form">
+        <input type="hidden" name="comment[quoted_comment_id]" data-comments--form-target="quotedCommentId" value="" />
+        <input type="hidden" name="comment[quoted_text]" data-comments--form-target="quotedText" value="" />
+        <div data-comments--form-target="quoteIndicator" style="display:none;">
+          <span data-comments--form-target="quoteIndicatorText"></span>
+        </div>
+        <div class="review-quotes-container" data-comments--form-target="reviewQuotesContainer" style="display:none;"></div>
+        <textarea data-comments--form-target="textarea" rows="2"></textarea>
+        <input type="checkbox" data-comments--form-target="privateCheckbox" />
+        <button type="submit" data-comments--form-target="submit">Send</button>
+        <button data-comments--form-target="cancel" style="display:none;">Cancel</button>
+        <button data-comments--form-target="moveButton" style="display:none;">Move</button>
+        <button data-comments--form-target="searchButton" style="display:none;">Search</button>
+        <button data-comments--form-target="voiceButton" style="display:none;">Voice</button>
+        <input type="file" data-comments--form-target="imageInput" style="display:none;" />
+        <button data-comments--form-target="imageButton" style="display:none;">Image</button>
+        <div data-comments--form-target="attachmentList"></div>
+      </form>
+    </div>`
+
+  beforeEach(async () => {
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-token'
+    document.head.appendChild(meta)
+
+    if (!global.DataTransfer) {
+      global.DataTransfer = class {
+        constructor() {
+          this.files = []
+          this.items = { add: (file) => this.files.push(file) }
+        }
+      }
+    }
+
+    container = document.createElement('div')
+    container.innerHTML = FIXTURE
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--form', FormController)
+    await new Promise((r) => setTimeout(r, 50))
+    controller = application.getControllerForElementAndIdentifier(
+      container.querySelector('#comments-popup'),
+      'comments--form',
+    )
+    controller.creativeId = '123'
+    controller.currentTopicId = '10073'
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.removeChild(container)
+  })
+
+  const pressEnter = (textarea) => {
+    textarea.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true }),
+    )
+  }
+
+  test('SCENARIO A: two Enter presses while a fetch is in-flight => fetch fires only once', () => {
+    const fetchSpy = jest.fn(() => new Promise(() => {})) // never resolves: slow API
+    global.fetch = fetchSpy
+    controller.creativeId = '111'
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'hello world'
+
+    pressEnter(textarea)
+    pressEnter(textarea) // impatient second Enter
+
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('SCENARIO B: a controller reconnect (morph) mid-send must NOT re-enable sending', () => {
+    const fetchSpy = jest.fn(() => new Promise(() => {})) // never resolves: slow API
+    global.fetch = fetchSpy
+    controller.creativeId = '222'
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'hello world'
+
+    pressEnter(textarea)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+    // A Turbo Stream / websocket broadcast morphs the comments area while the
+    // request is still in flight. Stimulus reconnects the controller, which
+    // resets the instance-only `this.sending` flag back to false.
+    controller.disconnect()
+    controller.connect()
+    controller.creativeId = '222'
+    controller.currentTopicId = '10073'
+
+    // The morph preserves the user's typed text; the impatient user hits Enter
+    // again because the slow API still has not responded.
+    controller.textareaTarget.value = 'hello world'
+    pressEnter(controller.textareaTarget)
+
+    // Durable (module-scope) guard must still block the duplicate.
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  test('SCENARIO C: after the request completes, the next message sends normally', async () => {
+    let resolveFetch
+    const fetchSpy = jest.fn(
+      () => new Promise((resolve) => { resolveFetch = resolve }),
+    )
+    global.fetch = fetchSpy
+    controller.creativeId = '333'
+    // Avoid touching the comment list / DOM rendering on success.
+    jest.spyOn(controller, 'resetForm').mockImplementation(() => {})
+
+    const textarea = controller.textareaTarget
+    textarea.value = 'first'
+    pressEnter(textarea)
+    expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+    // Resolve the first request, then let the promise microtasks (then/finally) run.
+    resolveFetch({ ok: true, status: 200, text: () => Promise.resolve('<div></div>') })
+    await new Promise((r) => setTimeout(r, 0))
+
+    controller.textareaTarget.value = 'second'
+    pressEnter(controller.textareaTarget)
+    expect(fetchSpy).toHaveBeenCalledTimes(2)
+  })
+})