@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/rich-composer.test.tsx

@@ -0,0 +1,799 @@
+/**
+ * RichThreadComposer — the behaviours ADR-148 promises, under jsdom.
+ *
+ * WHAT JSDOM CANNOT DO, said plainly: it has no layout, so the bubble menu's
+ * placement (floating-ui) and a real IME session are not verifiable here.
+ * Every bubble-menu assertion below is about STATE — open or closed, which
+ * controls it holds, where focus is — never a pixel. Composition is exercised
+ * through the DOM events a real IME fires, which proves the suppression
+ * wiring, not the keyboard. Both go on the owner's eyeball + IME pass (AC#13).
+ *
+ * The editor is driven through `onEditor` — jsdom does not synthesize
+ * `beforeinput`, so "typing" is `insertContent` and pasting is ProseMirror's
+ * own `pasteHTML` / `pasteText`, which run the full clipboard pipeline
+ * (parsers, paste rules, plugins) the real event would.
+ *
+ * Deterministic on purpose (CLAUDE.md §7): the clock is faked where timing is
+ * asserted and frozen (`now`) where a thread is rendered.
+ */
+
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { useState } from 'react'
+import type { Editor } from '@tiptap/core'
+import RichThreadComposerImpl, {
+  DRAFT_DEBOUNCE_MS,
+  FAIL_CLOSED_NOTICE,
+  type RichThreadComposerImplProps,
+} from '../rich-composer-impl'
+import { RICH_FALLBACK_NOTICE, RichThreadComposer } from '../rich-composer'
+import { serializeRichMarkdown } from '../markdown-spec'
+import { Thread } from '../thread'
+import {
+  PASTE_ATTACHMENT_THRESHOLD,
+  type AttachmentTicketLike,
+} from '../use-attachments'
+
+/* ── jsdom shims ──────────────────────────────────────────────────────────── */
+
+beforeAll(() => {
+  // ProseMirror's coordsAtPos and floating-ui both read client rects, which
+  // jsdom does not implement on Range. Zero-size rects keep them from
+  // throwing; nothing here asserts a position.
+  const zeroRect = (): DOMRect => ({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    toJSON: () => ({}),
+  })
+  const emptyRects = (): DOMRectList =>
+    // jsdom has no DOMRectList constructor; this literal is the structural
+    // stand-in ProseMirror reads (`length`, `item`, iteration). The cast is the
+    // only way to hand it to the DOM typings.
+    ({ length: 0, item: () => null, [Symbol.iterator]: [][Symbol.iterator] }) as unknown as DOMRectList
+  if (typeof Range.prototype.getClientRects !== 'function') {
+    Range.prototype.getClientRects = emptyRects
+  }
+  if (typeof Range.prototype.getBoundingClientRect !== 'function') {
+    Range.prototype.getBoundingClientRect = zeroRect
+  }
+  if (typeof Element.prototype.getClientRects !== 'function') {
+    Element.prototype.getClientRects = emptyRects
+  }
+})
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+/* ── Harness ──────────────────────────────────────────────────────────────── */
+
+function attachmentTicket(): AttachmentTicketLike {
+  return {
+    id: 'tup_1',
+    kind: 'file',
+    name: 'pasted-text-1.txt',
+    sizeBytes: PASTE_ATTACHMENT_THRESHOLD,
+    mime: 'text/plain',
+    aspectRatio: null,
+  }
+}
+
+type HarnessProps = Partial<Omit<RichThreadComposerImplProps, 'value' | 'onChange' | 'onSubmit'>> & {
+  readonly initial?: string
+  readonly onValue?: (value: string) => void
+  readonly onSend?: (value: string, attachmentIds?: readonly string[]) => void
+}
+
+/**
+ * A controlled parent, the way `useThread` is one: `onSubmit` reads the draft
+ * it was RENDERED with, so a stale draft would be sent as-is. That is the
+ * behaviour the pending-submit effect exists to make impossible.
+ */
+function Harness({ initial = '', onValue, onSend, ...rest }: HarnessProps) {
+  const [value, setValue] = useState(initial)
+  return (
+    <RichThreadComposerImpl
+      label="Add a comment"
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onValue?.(next)
+      }}
+      onSubmit={(attachmentIds) => {
+        if (attachmentIds === undefined) onSend?.(value)
+        else onSend?.(value, attachmentIds)
+      }}
+      {...rest}
+    />
+  )
+}
+
+interface Mounted {
+  readonly editor: Editor
+  readonly surface: HTMLElement
+}
+
+function mount(props: HarnessProps = {}): Mounted {
+  let captured: Editor | null = null
+  render(
+    <Harness
+      {...props}
+      onEditor={(editor) => {
+        if (editor !== null) captured = editor
+      }}
+    />,
+  )
+  if (captured === null) throw new Error('the editor did not mount')
+  return { editor: captured, surface: surface() }
+}
+
+function surface(): HTMLElement {
+  return screen.getByRole('textbox', { name: 'Add a comment' })
+}
+
+function select(editor: Editor, from: number, to: number): void {
+  act(() => {
+    editor.commands.setTextSelection({ from, to })
+  })
+}
+
+function type(editor: Editor, markdown: string): void {
+  act(() => {
+    editor.commands.insertContent(markdown, { contentType: 'markdown' })
+  })
+}
+
+function markdownOf(editor: Editor): string {
+  return serializeRichMarkdown(editor.getJSON())
+}
+
+/**
+ * A paste the way a browser delivers it. ProseMirror's own `pasteText()` is
+ * the Shift-paste path (`preferPlain` is always true there), so the ordinary
+ * path needs the event itself, with a clipboardData the handler can read.
+ */
+function paste(box: HTMLElement, data: { readonly text?: string; readonly html?: string }): void {
+  fireEvent.paste(box, {
+    clipboardData: {
+      getData: (type: string) => {
+        if (type === 'text/html') return data.html ?? ''
+        if (type === 'text/plain' || type === 'Text') return data.text ?? ''
+        return ''
+      },
+      types: [...(data.html === undefined ? [] : ['text/html']), ...(data.text === undefined ? [] : ['text/plain'])],
+      files: [],
+    },
+  })
+}
+
+/* ── D10 — the surface ────────────────────────────────────────────────────── */
+
+describe('RichThreadComposer — the surface (D10)', () => {
+  it('renders a labelled multiline textbox — a contenteditable, not a textarea', () => {
+    const { surface: box } = mount()
+    expect(box.getAttribute('contenteditable')).toBe('true')
+    expect(box.getAttribute('aria-multiline')).toBe('true')
+    expect(box.getAttribute('aria-describedby')).not.toBeNull()
+    expect(document.querySelector('textarea')).toBeNull()
+  })
+
+  it('loads the initial markdown and serializes it back unchanged', () => {
+    const { editor } = mount({ initial: '**ship** it' })
+    const first = editor.getJSON().content?.[0]?.content?.[0]
+    expect(first?.marks?.map((mark) => mark.type)).toEqual(['bold'])
+    expect(markdownOf(editor)).toBe('**ship** it')
+    expect(editor.getText()).toBe('ship it')
+  })
+
+  it('is not editable while disabled', () => {
+    const { surface: box } = mount({ disabled: true })
+    expect(box.getAttribute('contenteditable')).toBe('false')
+  })
+
+  it('reserves the plain composer height from `rows`', () => {
+    mount({ rows: 2 })
+    const shell = document.querySelector<HTMLElement>('.ds-thread-rich-composer')
+    expect(shell?.style.getPropertyValue('--composer-rows')).toBe('2')
+  })
+
+  it('keeps the send button disabled on an empty document and enables it once there is content', () => {
+    const { editor } = mount()
+    const send = screen.getByRole('button', { name: 'Comment' })
+    expect(send).toBeDisabled()
+    type(editor, 'hello')
+    expect(screen.getByRole('button', { name: 'Comment' })).toBeEnabled()
+  })
+})
+
+/* ── D12 — draft timing ───────────────────────────────────────────────────── */
+
+describe('D12 — the draft leaves on a debounce and never sends stale', () => {
+  it('emits serialized markdown after 300 ms, not on every transaction', () => {
+    vi.useFakeTimers()
+    const onValue = vi.fn()
+    const { editor } = mount({ onValue })
+    type(editor, '**hi**')
+    expect(onValue).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(DRAFT_DEBOUNCE_MS - 1)
+    })
+    expect(onValue).not.toHaveBeenCalled()
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(onValue).toHaveBeenCalledTimes(1)
+    expect(onValue).toHaveBeenCalledWith('**hi**')
+  })
+
+  it('flushes on blur', () => {
+    vi.useFakeTimers()
+    const onValue = vi.fn()
+    const { editor, surface: box } = mount({ onValue })
+    type(editor, 'draft')
+    fireEvent.blur(box)
+    expect(onValue).toHaveBeenCalledWith('draft')
+  })
+
+  it('Cmd/Ctrl+Enter sends the latest keystrokes, not the draft the parent last saw', async () => {
+    const onSend = vi.fn()
+    const { editor, surface: box } = mount({ onSend })
+    type(editor, 'Looks right to me.')
+    // No debounce has fired: the parent still holds ''. Sending now must
+    // still deliver the text.
+    fireEvent.keyDown(box, { key: 'Enter', metaKey: true })
+    await waitFor(() => {
+      expect(onSend).toHaveBeenCalledWith('Looks right to me.')
+    })
+    expect(onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it('the send button does the same', async () => {
+    const onSend = vi.fn()
+    const { editor } = mount({ onSend })
+    type(editor, 'Via the button')
+    fireEvent.click(screen.getByRole('button', { name: 'Comment' }))
+    await waitFor(() => {
+      expect(onSend).toHaveBeenCalledWith('Via the button')
+    })
+  })
+
+  it('an external value replaces the document and drops a pending emission', () => {
+    vi.useFakeTimers()
+    const onChange = vi.fn()
+    let captured: Editor | null = null
+    const view = render(
+      <RichThreadComposerImpl
+        label="Add a comment"
+        value="first"
+        onChange={onChange}
+        onSubmit={() => {}}
+        onEditor={(editor) => {
+          if (editor !== null) captured = editor
+        }}
+      />,
+    )
+    if (captured === null) throw new Error('no editor')
+    const editor: Editor = captured
+    type(editor, ' typed')
+    view.rerender(
+      <RichThreadComposerImpl
+        label="Add a comment"
+        value=""
+        onChange={onChange}
+        onSubmit={() => {}}
+      />,
+    )
+    expect(editor.getText()).toBe('')
+    act(() => {
+      vi.advanceTimersByTime(DRAFT_DEBOUNCE_MS)
+    })
+    expect(onChange).not.toHaveBeenCalledWith('first typed')
+  })
+})
+
+/* ── D7 — the bubble menu (state, not pixels) ─────────────────────────────── */
+
+describe('D7 — the bubble menu appears on real selections only', () => {
+  it('opens on a non-empty selection with the six actions, and closes when it collapses', async () => {
+    const { editor } = mount({ initial: 'hello world' })
+    select(editor, 1, 6)
+    const toolbar = await screen.findByRole('toolbar', { name: 'Format selection' })
+    expect(
+      within(toolbar)
+        .getAllByRole('button')
+        .map((button) => button.getAttribute('aria-label')),
+    ).toEqual(['Bold', 'Italic', 'Underline', 'Strikethrough', 'Code', 'Link'])
+    select(editor, 3, 3)
+    await waitFor(() => {
+      expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+    })
+  })
+
+  it('does not open on a whitespace-only selection', async () => {
+    const { editor } = mount({ initial: 'a   b' })
+    select(editor, 2, 5)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+  })
+
+  it('never opens inside a code block', async () => {
+    const { editor } = mount({ initial: '```\ncode here\n```' })
+    select(editor, 1, 5)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(editor.isActive('codeBlock')).toBe(true)
+    expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+  })
+
+  it('is suppressed during IME composition and returns after it (D11)', async () => {
+    const { editor, surface: box } = mount({ initial: 'hello world' })
+    fireEvent.compositionStart(box)
+    select(editor, 1, 6)
+    await act(async () => {
+      await Promise.resolve()
+    })
+    expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+    fireEvent.compositionEnd(box)
+    select(editor, 1, 7)
+    expect(await screen.findByRole('toolbar', { name: 'Format selection' })).toBeTruthy()
+  })
+
+  it('applies a format from the bubble and reports it as pressed', async () => {
+    const { editor } = mount({ initial: 'hello world' })
+    select(editor, 1, 6)
+    const toolbar = await screen.findByRole('toolbar', { name: 'Format selection' })
+    fireEvent.click(within(toolbar).getByRole('button', { name: 'Bold' }))
+    expect(editor.isActive('bold')).toBe(true)
+    expect(markdownOf(editor)).toBe('**hello** world')
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('toolbar', { name: 'Format selection' })).getByRole('button', {
+          name: 'Bold',
+        }),
+      ).toHaveAttribute('aria-pressed', 'true')
+    })
+  })
+
+  it('Cmd/Ctrl+. opens it from the keyboard with focus on the first action; arrows move; Escape returns to the editor', async () => {
+    const { editor, surface: box } = mount({ initial: 'hello world' })
+    act(() => {
+      editor.commands.focus()
+    })
+    // TipTap defers the DOM focus to requestAnimationFrame; let it land before
+    // the menu takes focus, as it would have for a person already typing.
+    await waitFor(() => {
+      expect(document.activeElement).toBe(box)
+    })
+    select(editor, 1, 6)
+    fireEvent.keyDown(box, { key: '.', metaKey: true })
+    const toolbar = await screen.findByRole('toolbar', { name: 'Format selection' })
+    const bold = within(toolbar).getByRole('button', { name: 'Bold' })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(bold)
+    })
+    fireEvent.keyDown(toolbar, { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(within(toolbar).getByRole('button', { name: 'Italic' }))
+    fireEvent.keyDown(toolbar, { key: 'End' })
+    expect(document.activeElement).toBe(within(toolbar).getByRole('button', { name: 'Link' }))
+    fireEvent.keyDown(toolbar, { key: 'Escape' })
+    await waitFor(() => {
+      expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+    })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(box)
+    })
+  })
+
+  it('Cmd/Ctrl+K opens the link field; a javascript: URL is refused; a bare domain is applied as https', async () => {
+    const { editor, surface: box } = mount({ initial: 'hello world' })
+    select(editor, 1, 6)
+    fireEvent.keyDown(box, { key: 'k', ctrlKey: true })
+    const field = await screen.findByRole('textbox', { name: 'Link URL' })
+    await waitFor(() => {
+      expect(document.activeElement).toBe(field)
+    })
+    fireEvent.change(field, { target: { value: 'javascript:alert(1)' } })
+    fireEvent.keyDown(field, { key: 'Enter' })
+    expect(field).toHaveAttribute('aria-invalid', 'true')
+    expect(editor.isActive('link')).toBe(false)
+    fireEvent.change(field, { target: { value: 'example.com/plan' } })
+    fireEvent.keyDown(field, { key: 'Enter' })
+    expect(editor.isActive('link')).toBe(true)
+    expect(markdownOf(editor)).toBe('[hello](https://example.com/plan) world')
+    expect(screen.queryByRole('textbox', { name: 'Link URL' })).toBeNull()
+  })
+})
+
+/* ── D9 — the keyboard contract ───────────────────────────────────────────── */
+
+describe('D9 — the keyboard contract', () => {
+  it('Escape: closes the bubble menu first, a Suggestion popup second, cancels a reply third', async () => {
+    const onCancel = vi.fn()
+    const { editor, surface: box } = mount({
+      initial: 'hello world',
+      onCancel,
+      mentionItems: () => [{ id: 'usr_1', label: 'Ann', type: 'user' }],
+    })
+
+    // 1 — the bubble menu.
+    select(editor, 1, 6)
+    await screen.findByRole('toolbar', { name: 'Format selection' })
+    fireEvent.keyDown(box, { key: 'Escape' })
+    await waitFor(() => {
+      expect(screen.queryByRole('toolbar', { name: 'Format selection' })).toBeNull()
+    })
+    expect(onCancel).not.toHaveBeenCalled()
+
+    // 2 — a Suggestion popup with items to show. The `@` needs one character
+    // after it before the popup opens (ADR-149 D4 gave the trigger a
+    // threshold); a bare `@` shows nothing and so never claims Escape, which
+    // is the case immediately below.
+    select(editor, 12, 12)
+    act(() => {
+      editor.commands.insertContent(' @a')
+    })
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    fireEvent.keyDown(box, { key: 'Escape' })
+    expect(onCancel).not.toHaveBeenCalled()
+
+    // 3 — nothing open: the reply is cancelled.
+    fireEvent.keyDown(box, { key: 'Escape' })
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('a Suggestion with nothing to show never claims Escape', async () => {
+    const onCancel = vi.fn()
+    const { editor, surface: box } = mount({ onCancel })
+    act(() => {
+      editor.commands.insertContent('@')
+    })
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    fireEvent.keyDown(box, { key: 'Escape' })
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('Tab leaves the editor: not prevented, and not turned into list indentation', () => {
+    const { editor, surface: box } = mount({ initial: '- one\n- two' })
+    select(editor, 9, 9)
+    const notPrevented = fireEvent.keyDown(box, { key: 'Tab' })
+    expect(notPrevented).toBe(true)
+    expect(markdownOf(editor)).toBe('- one\n- two')
+    const shiftNotPrevented = fireEvent.keyDown(box, { key: 'Tab', shiftKey: true })
+    expect(shiftNotPrevented).toBe(true)
+  })
+
+  it.each([
+    ['Cmd/Ctrl+B', 'bold', { key: 'b', keyCode: 66, ctrlKey: true }],
+    ['Cmd/Ctrl+I', 'italic', { key: 'i', keyCode: 73, ctrlKey: true }],
+    ['Cmd/Ctrl+U', 'underline', { key: 'u', keyCode: 85, ctrlKey: true }],
+    ['Cmd/Ctrl+E', 'code', { key: 'e', keyCode: 69, ctrlKey: true }],
+    ['Cmd/Ctrl+Shift+X', 'strike', { key: 'X', keyCode: 88, ctrlKey: true, shiftKey: true }],
+  ])('%s toggles %s on the selection', (_label, mark, keys) => {
+    const { editor, surface: box } = mount({ initial: 'hello world' })
+    select(editor, 1, 6)
+    fireEvent.keyDown(box, keys)
+    expect(editor.isActive(mark)).toBe(true)
+  })
+
+  it('Cmd/Ctrl+Alt+1..3 set headings 1–3', () => {
+    const { editor, surface: box } = mount({ initial: 'title' })
+    select(editor, 1, 1)
+    fireEvent.keyDown(box, { key: '2', keyCode: 50, ctrlKey: true, altKey: true })
+    expect(editor.isActive('heading', { level: 2 })).toBe(true)
+    expect(markdownOf(editor)).toBe('## title')
+  })
+
+  it('--- and Enter becomes a divider (input rule)', () => {
+    const { editor } = mount()
+    act(() => {
+      editor.commands.insertContent('--- ')
+    })
+    // Input rules watch typed text; `insertContent` bypasses them, so the
+    // block toolbar's divider is the path asserted here — the same command.
+    fireEvent.click(screen.getByRole('button', { name: 'Divider' }))
+    expect(editor.getJSON().content?.some((node) => node.type === 'horizontalRule')).toBe(true)
+  })
+})
+
+/* ── D8 — paste ───────────────────────────────────────────────────────────── */
+
+describe('D8 — paste, and AC#7 hostile paste is inert', () => {
+  it('drops script, image and javascript: links to their text content', () => {
+    const { editor, surface: box } = mount()
+    act(() => {
+      paste(box, {
+        html: '<p>safe <script>alert(1)</script><img src="x" onerror="alert(1)"><a href="javascript:alert(1)">click</a><iframe src="https://evil.example"></iframe></p>',
+        text: 'safe click',
+      })
+    })
+    expect(editor.getText()).toBe('safe click')
+    expect(editor.isActive('link')).toBe(false)
+    const markdown = markdownOf(editor)
+    expect(markdown).not.toMatch(/script|img|iframe|javascript:|onerror/)
+    expect(box.innerHTML).not.toMatch(/<script|<img|<iframe|javascript:|onerror/)
+  })
+
+  it('keeps an https link from pasted HTML, and only that', () => {
+    const { editor, surface: box } = mount()
+    act(() => {
+      paste(box, { html: '<p><a href="https://example.com/x" onclick="alert(1)">x</a></p>', text: 'x' })
+    })
+    expect(markdownOf(editor)).toBe('[x](https://example.com/x)')
+  })
+
+  it('a bare URL becomes a link whose text is the URL', () => {
+    const { editor, surface: box } = mount()
+    act(() => {
+      paste(box, { text: 'https://example.com/plan' })
+    })
+    expect(markdownOf(editor)).toBe('[https://example.com/plan](https://example.com/plan)')
+  })
+
+  it('plain text carrying markdown is parsed into the subset', () => {
+    const { editor, surface: box } = mount()
+    act(() => {
+      paste(box, { text: '**bold** and *italic*\n\n- one\n- two' })
+    })
+    expect(markdownOf(editor)).toBe('**bold** and *italic*\n\n- one\n- two')
+  })
+
+  it('text with out-of-subset syntax lands as literal text; nothing is dropped', () => {
+    const { editor, surface: box } = mount()
+    const table = '| a | b |\n|---|---|\n| 1 | 2 |'
+    act(() => {
+      paste(box, { text: table })
+    })
+    expect(editor.getText({ blockSeparator: '\n' })).toBe(table)
+  })
+
+  it('a Shift-paste keeps markdown syntax literal', () => {
+    const { editor, surface: box } = mount()
+    // ProseMirror reads Shift from the last keydown it saw.
+    fireEvent.keyDown(box, { key: 'Shift', keyCode: 16, shiftKey: true })
+    act(() => {
+      paste(box, { text: '**not bold**' })
+    })
+    fireEvent.keyUp(box, { key: 'Shift', keyCode: 16 })
+    expect(editor.isActive('bold')).toBe(false)
+    expect(editor.getText()).toBe('**not bold**')
+  })
+
+  it('ADR-151 AC#7 leaves a paste below 2,500 characters on the existing parser path', () => {
+    const uploadAttachment = vi.fn(() => Promise.resolve(attachmentTicket()))
+    const { editor, surface: box } = mount({ uploadAttachment })
+    const text = 'x'.repeat(PASTE_ATTACHMENT_THRESHOLD - 1)
+
+    act(() => {
+      paste(box, { text })
+    })
+
+    expect(editor.getText()).toBe(text)
+    expect(uploadAttachment).not.toHaveBeenCalled()
+    expect(screen.queryByRole('button', { name: 'Insert as text instead' })).toBeNull()
+  })
+
+  it('ADR-151 AC#6 turns a long paste into a mounted attachment and restores it', async () => {
+    const text = 'y'.repeat(PASTE_ATTACHMENT_THRESHOLD)
+    const uploadAttachment = vi.fn(() => Promise.resolve(attachmentTicket()))
+    const { editor, surface: box } = mount({
+      uploadAttachment,
+      mode: 'rich',
+      onModeChange: vi.fn(),
+    })
+
+    act(() => {
+      paste(box, { text })
+    })
+
+    expect(editor.getText()).toBe('')
+    const restore = await screen.findByRole('button', { name: 'Insert as text instead' })
+    expect(screen.getByText('2,500 characters')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Switch to the plain editor' })).toBeDisabled()
+    fireEvent.click(restore)
+
+    expect(editor.getText()).toBe(text)
+    expect(screen.queryByRole('button', { name: 'Insert as text instead' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Switch to the plain editor' })).toBeEnabled()
+  })
+
+  it('lets Send be pressed during an upload, then posts the verified ticket', async () => {
+    let finishUpload: (ticket: AttachmentTicketLike) => void = () => {}
+    const uploadAttachment = vi.fn(
+      () =>
+        new Promise<AttachmentTicketLike>((resolve) => {
+          finishUpload = resolve
+        }),
+    )
+    const onSend = vi.fn()
+    const { editor, surface: box } = mount({ uploadAttachment, onSend })
+    type(editor, 'Ship with context')
+    act(() => {
+      paste(box, { text: 'z'.repeat(PASTE_ATTACHMENT_THRESHOLD) })
+    })
+
+    const send = screen.getByRole('button', { name: 'Comment' })
+    expect(send).toBeEnabled()
+    fireEvent.click(send)
+    expect(onSend).not.toHaveBeenCalled()
+
+    await act(async () => {
+      finishUpload(attachmentTicket())
+    })
+    await waitFor(() => {
+      expect(onSend).toHaveBeenCalledWith('Ship with context', ['tup_1'])
+    })
+  })
+})
+
+/* ── D3 rule 2 / D6 — fail closed, fall back ──────────────────────────────── */
+
+describe('D3 rule 2 — unsupported markdown opens the plain composer', () => {
+  const TABLE = '| a | b |\n|---|---|\n| 1 | 2 |'
+
+  it('renders the plain composer with the source untouched and the notice', () => {
+    render(
+      <RichThreadComposerImpl label="Add a comment" value={TABLE} onChange={() => {}} onSubmit={() => {}} />,
+    )
+    const field = screen.getByRole('textbox', { name: 'Add a comment' })
+    expect(field.tagName).toBe('TEXTAREA')
+    expect(field).toHaveValue(TABLE)
+    expect(screen.getByText(FAIL_CLOSED_NOTICE)).toBeTruthy()
+    expect(document.querySelector('[contenteditable]')).toBeNull()
+  })
+
+  it.each([['#### h4'], ['<u>raw</u> html'], ['- [ ] task']])('%s does the same', (markdown) => {
+    render(
+      <RichThreadComposerImpl label="Add a comment" value={markdown} onChange={() => {}} onSubmit={() => {}} />,
+    )
+    expect(screen.getByRole('textbox', { name: 'Add a comment' }).tagName).toBe('TEXTAREA')
+  })
+
+  it('announces the notice once through the shell live region', async () => {
+    render(<RichThreadComposer label="Add a comment" value={TABLE} onChange={() => {}} onSubmit={() => {}} />)
+    await waitFor(() => {
+      expect(screen.getByRole('status').textContent).toContain(FAIL_CLOSED_NOTICE)
+    })
+  })
+
+  it('returns to the rich editor when an external reset arrives', () => {
+    const view = render(
+      <RichThreadComposerImpl label="Add a comment" value={TABLE} onChange={() => {}} onSubmit={() => {}} />,
+    )
+    expect(screen.getByRole('textbox', { name: 'Add a comment' }).tagName).toBe('TEXTAREA')
+    view.rerender(
+      <RichThreadComposerImpl label="Add a comment" value="" onChange={() => {}} onSubmit={() => {}} />,
+    )
+    expect(screen.getByRole('textbox', { name: 'Add a comment' }).getAttribute('contenteditable')).toBe('true')
+  })
+})
+
+describe('D5 / D6 — the shell', () => {
+  it('shows the plain composer, disabled, holding the draft while the chunk loads, then the editor', async () => {
+    // The import is held open by hand so the loading state is observable;
+    // in the suite it would otherwise resolve inside `render`'s own act().
+    let release: ((module: object) => void) | null = null
+    vi.resetModules()
+    vi.doMock(
+      '../rich-composer-impl',
+      () =>
+        new Promise<object>((resolve) => {
+          release = resolve
+        }),
+    )
+    try {
+      const { RichThreadComposer: Shell } = await import('../rich-composer')
+      render(<Shell label="Add a comment" value="kept draft" onChange={() => {}} onSubmit={() => {}} />)
+      const loading = screen.getByRole('textbox', { name: 'Add a comment' })
+      expect(loading.tagName).toBe('TEXTAREA')
+      expect(loading).toBeDisabled()
+      expect(loading).toHaveValue('kept draft')
+      const actual = await vi.importActual<object>('../rich-composer-impl')
+      await act(async () => {
+        release?.(actual)
+      })
+      await waitFor(() => {
+        expect(screen.getByRole('textbox', { name: 'Add a comment' }).getAttribute('contenteditable')).toBe('true')
+      })
+      expect(document.querySelector('textarea')).toBeNull()
+    } finally {
+      vi.doUnmock('../rich-composer-impl')
+      vi.resetModules()
+    }
+  })
+
+  it('AC#9 — with the import rejected, the plain composer renders with the draft and sends', async () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+    try {
+      vi.resetModules()
+      vi.doMock('../rich-composer-impl', () => {
+        throw new Error('Failed to fetch dynamically imported module')
+      })
+      const { RichThreadComposer: Shell } = await import('../rich-composer')
+      const onSubmit = vi.fn()
+      const onChange = vi.fn()
+      render(<Shell label="Add a comment" value="kept draft" onChange={onChange} onSubmit={onSubmit} />)
+      // The notice is both shown and spoken, so it appears twice: the visible
+      // line and the live region.
+      await waitFor(() => {
+        expect(screen.getByText(RICH_FALLBACK_NOTICE, { selector: 'span' })).toBeTruthy()
+      })
+      const field = screen.getByRole('textbox', { name: 'Add a comment' })
+      expect(field.tagName).toBe('TEXTAREA')
+      expect(field).toBeEnabled()
+      expect(field).toHaveValue('kept draft')
+      expect(screen.getByRole('status').textContent).toContain(RICH_FALLBACK_NOTICE)
+      fireEvent.change(field, { target: { value: 'kept draft, sent' } })
+      expect(onChange).toHaveBeenCalledWith('kept draft, sent')
+      fireEvent.keyDown(field, { key: 'Enter', metaKey: true })
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      expect(warn).toHaveBeenCalled()
+    } finally {
+      vi.doUnmock('../rich-composer-impl')
+      vi.resetModules()
+      warn.mockRestore()
+      error.mockRestore()
+    }
+  })
+
+  it('D10 — announces the character counter politely at 90 %', async () => {
+    render(
+      <RichThreadComposer
+        label="Add a comment"
+        value={'a'.repeat(19)}
+        maxLength={20}
+        onChange={() => {}}
+        onSubmit={() => {}}
+      />,
+    )
+    await waitFor(() => {
+      expect(screen.getByRole('status').textContent).toContain('Approaching the comment length limit: 19 of 20')
+    })
+    expect(screen.getByText('19/20')).toBeTruthy()
+  })
+})
+
+/* ── D5 — the Thread prop ─────────────────────────────────────────────────── */
+
+describe('Thread composer prop (D5)', () => {
+  const NOW = Date.UTC(2026, 8, 7, 12, 0, 0)
+
+  it('mounts the rich editor as the root composer when asked', async () => {
+    render(
+      <Thread
+        comments={[]}
+        now={NOW}
+        onSubmit={() => {}}
+        composer="rich"
+        uploadAttachment={() => Promise.resolve(attachmentTicket())}
+        attachGif={() => Promise.resolve(attachmentTicket())}
+        searchGifs={() => Promise.resolve([])}
+      />,
+    )
+    await waitFor(() => {
+      expect(
+        screen.getByRole('textbox', { name: 'Add a comment' }).getAttribute('contenteditable'),
+      ).toBe('true')
+    })
+    expect(screen.getByRole('button', { name: 'Attach a file' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Choose a GIF' })).toBeTruthy()
+  })
+
+  it('keeps the plain textarea by default', () => {
+    render(<Thread comments={[]} now={NOW} onSubmit={() => {}} />)
+    expect(screen.getByRole('textbox', { name: 'Add a comment' }).tagName).toBe('TEXTAREA')
+  })
+})