@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/link-preview.test.tsx

@@ -0,0 +1,600 @@
+/**
+ * LinkPreview — ADR-150 D8, and the two review amendments that gave it teeth.
+ *
+ * These are written against AC 27 and AC 32, which are the acceptance criteria
+ * that describe a DEFECT rather than a feature:
+ *
+ *   AC 27 — the media geometry is reserved before load, an image failure leaves
+ *           the text card intact, the dismiss button is never nested inside the
+ *           link, and reduced motion gets the still-frame/play treatment.
+ *   AC 32 — the still frame renders from a CROSS-ORIGIN image without a
+ *           `SecurityError`: the canvas is displayed, and no `toDataURL()` /
+ *           `getImageData()` call exists on that path.
+ *
+ * AC 32 is the one that cannot be written as "it works". A tainted canvas
+ * displays perfectly and throws only when it is READ, so a passing render tells
+ * you nothing. Both halves are therefore asserted: the read APIs are spied on
+ * and must never fire, and the source of the module is scanned so a future
+ * "let's cache the still as a data URL" refactor fails here rather than in a
+ * browser someone else is using.
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { LinkPreview, LINK_PREVIEW_DEFAULT_ASPECT } from '../link-preview'
+import { Thread } from '../thread'
+import type { ThreadComment, ThreadLinkPreview } from '../types'
+
+afterEach(cleanup)
+
+const HASH_A = 'a'.repeat(64)
+const HASH_B = 'b'.repeat(64)
+
+function preview(over: Partial<ThreadLinkPreview> = {}): ThreadLinkPreview {
+  return {
+    urlHash: HASH_A,
+    href: 'https://example.com/article#section-3',
+    title: 'The one about reserved layout slots',
+    domain: 'example.com',
+    description: 'A description long enough to want two lines and no more.',
+    imageUrl: 'https://cdn.example.com/og.png',
+    siteName: 'Example Journal',
+    imageAspect: null,
+    canHide: true,
+    ...over,
+  }
+}
+
+/**
+ * jsdom serializes `aspect-ratio: 1.777` as `1.777 / 1`, so the raw string is
+ * an implementation detail of cssstyle rather than anything this component
+ * promised. Compare the NUMBER.
+ */
+function declaredAspect(el: HTMLElement): number {
+  const raw = el.style.aspectRatio
+  expect(raw).not.toBe('')
+  const [w, h] = raw.split('/')
+  return Number(w) / (h === undefined ? 1 : Number(h))
+}
+
+/** The media well: the only element carrying a declared aspect ratio. */
+function mediaSlot(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('[style*="aspect-ratio"]')
+}
+
+function image(): HTMLImageElement {
+  const node = document.querySelector('img')
+  if (node === null) throw new Error('no preview image')
+  return node
+}
+
+/** A 2D context that records draws and would SCREAM if anything read it back. */
+function stubCanvas() {
+  const drawImage = vi.fn()
+  const getImageData = vi.fn(() => {
+    throw new Error('getImageData() on a tainted canvas throws SecurityError')
+  })
+  const context = { drawImage, getImageData } as unknown as CanvasRenderingContext2D
+  const getContext = vi
+    .spyOn(HTMLCanvasElement.prototype, 'getContext')
+    .mockImplementation(() => context)
+  const toDataURL = vi
+    .spyOn(HTMLCanvasElement.prototype, 'toDataURL')
+    .mockImplementation(() => {
+      throw new Error('toDataURL() on a tainted canvas throws SecurityError')
+    })
+  return {
+    drawImage,
+    getImageData,
+    toDataURL,
+    restore: () => {
+      getContext.mockRestore()
+      toDataURL.mockRestore()
+    },
+  }
+}
+
+interface MotionStub {
+  /** Flip the preference and notify subscribers, as a real browser would. */
+  readonly set: (next: boolean) => void
+  readonly restore: () => void
+}
+
+/**
+ * A `matchMedia` that can actually CHANGE.
+ *
+ * `use-attachments.test.tsx` collects listeners but never fires them, so it can
+ * only test the mount-time value. The preference flipping mid-session is the
+ * interesting case here — someone turning reduced motion on while a comment is
+ * on screen has asked for the animation to stop NOW — so this one dispatches.
+ */
+function stubReducedMotion(initial: boolean): MotionStub {
+  const listeners = new Set<(event: MediaQueryListEvent) => void>()
+  let reduce = initial
+  const original = window.matchMedia
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (queryText: string) => ({
+      get matches() {
+        return reduce && queryText.includes('prefers-reduced-motion')
+      },
+      media: queryText,
+      addEventListener: (_: string, fn: (event: MediaQueryListEvent) => void) => {
+        listeners.add(fn)
+      },
+      removeEventListener: (_: string, fn: (event: MediaQueryListEvent) => void) => {
+        listeners.delete(fn)
+      },
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  })
+  return {
+    set: (next: boolean) => {
+      reduce = next
+      act(() => {
+        for (const fn of [...listeners]) fn({ matches: next } as MediaQueryListEvent)
+      })
+    },
+    restore: () => {
+      Object.defineProperty(window, 'matchMedia', {
+        configurable: true,
+        writable: true,
+        value: original,
+      })
+    },
+  }
+}
+
+/** Fake a decoded image so `captureStill` has real dimensions to draw. */
+function markLoaded(img: HTMLImageElement, width = 800, height = 450) {
+  Object.defineProperties(img, {
+    naturalWidth: { configurable: true, value: width },
+    naturalHeight: { configurable: true, value: height },
+    complete: { configurable: true, value: true },
+  })
+  fireEvent.load(img)
+}
+
+describe('AC 27 - the media slot is declared before the bytes and kept when they never arrive', () => {
+  it('reserves 16:9 when the page declared no usable dimensions', () => {
+    render(<LinkPreview preview={preview({ imageAspect: null })} />)
+    const slot = mediaSlot()
+    expect(slot).not.toBeNull()
+    expect(declaredAspect(slot as HTMLElement)).toBeCloseTo(LINK_PREVIEW_DEFAULT_ASPECT, 10)
+  })
+
+  it('uses the declared ratio when the page supplied one', () => {
+    render(<LinkPreview preview={preview({ imageAspect: 1.25 })} />)
+    expect(declaredAspect(mediaSlot() as HTMLElement)).toBeCloseTo(1.25, 10)
+  })
+
+  it.each([
+    ['zero', 0, LINK_PREVIEW_DEFAULT_ASPECT],
+    ['negative', -4, LINK_PREVIEW_DEFAULT_ASPECT],
+    ['not a number', Number.NaN, LINK_PREVIEW_DEFAULT_ASPECT],
+    ['infinite', Number.POSITIVE_INFINITY, LINK_PREVIEW_DEFAULT_ASPECT],
+    // A hairline and a needle: clamped rather than allowed to collapse the row.
+    ['absurdly wide', 1000, 10],
+    ['absurdly tall', 0.0001, 0.1],
+  ])('refuses a %s ratio and still declares a usable box', (_label, declared, expected) => {
+    render(<LinkPreview preview={preview({ imageAspect: declared })} />)
+    expect(declaredAspect(mediaSlot() as HTMLElement)).toBeCloseTo(expected, 10)
+    cleanup()
+  })
+
+  it('keeps the SAME reserved box when the image fails, and keeps the text', () => {
+    render(<LinkPreview preview={preview({ imageAspect: 1.25 })} />)
+    const before = declaredAspect(mediaSlot() as HTMLElement)
+
+    fireEvent.error(image())
+
+    const after = mediaSlot()
+    expect(after).not.toBeNull()
+    // The whole point: a dead third-party CDN must not move the thread.
+    expect(declaredAspect(after as HTMLElement)).toBeCloseTo(before, 10)
+    expect(document.querySelector('img')).toBeNull()
+    expect(screen.getByText('The one about reserved layout slots')).toBeInTheDocument()
+    expect(
+      screen.getByText('A description long enough to want two lines and no more.'),
+    ).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://example.com/article#section-3')
+  })
+
+  it('declares no media slot at all when the row carries no image', () => {
+    render(<LinkPreview preview={preview({ imageUrl: null })} />)
+    expect(mediaSlot()).toBeNull()
+    expect(document.querySelector('img')).toBeNull()
+    // A text card is still a card.
+    expect(screen.getByRole('link')).toBeInTheDocument()
+  })
+})
+
+describe('AC 27 - the dismiss button is a SIBLING of the link, never a child', () => {
+  it('renders both controls and nests neither inside the other', () => {
+    render(<LinkPreview preview={preview()} onHide={vi.fn()} />)
+    const link = screen.getByRole('link')
+    const dismiss = screen.getByRole('button', {
+      name: 'Dismiss link preview: The one about reserved layout slots',
+    })
+    // Invalid HTML and unusable from a keyboard. Assert it in both directions
+    // so neither element can be moved inside the other later.
+    expect(link.contains(dismiss)).toBe(false)
+    expect(dismiss.contains(link)).toBe(false)
+    expect(within(link).queryByRole('button')).toBeNull()
+    expect(link.querySelector('a')).toBeNull()
+  })
+
+  it('opens in a new tab without handing the opener over', () => {
+    render(<LinkPreview preview={preview()} />)
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('target', '_blank')
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+  })
+
+  it('reports the preview it was asked to hide', () => {
+    const onHide = vi.fn()
+    const row = preview()
+    render(<LinkPreview preview={row} onHide={onHide} />)
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'Dismiss link preview: The one about reserved layout slots',
+      }),
+    )
+    expect(onHide).toHaveBeenCalledTimes(1)
+    expect(onHide).toHaveBeenCalledWith(row)
+  })
+
+  it('renders no dismiss control when the viewer cannot hide it', () => {
+    render(<LinkPreview preview={preview({ canHide: false })} onHide={vi.fn()} />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('renders no dismiss control when the host wired no mutation', () => {
+    // An affordance that silently does nothing is worse than no affordance.
+    render(<LinkPreview preview={preview({ canHide: true })} />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+})
+
+describe('AC 27 / AC 32 - reduced motion gets a drawn still, never a read-back one', () => {
+  it('hides the live image behind a captured frame with an explicit play control', () => {
+    const motion = stubReducedMotion(true)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      const img = image()
+      // Hidden from the first paint, so an animated og:image is never seen by
+      // someone who asked for less motion.
+      expect(img.style.visibility).toBe('hidden')
+
+      const still = document.querySelector('canvas')
+      expect(still).not.toBeNull()
+      expect(still).toHaveAttribute('hidden')
+
+      markLoaded(img)
+
+      expect(canvas.drawImage).toHaveBeenCalledTimes(1)
+      expect(canvas.drawImage).toHaveBeenCalledWith(img, 0, 0, 800, 450)
+      expect(still).toHaveProperty('width', 800)
+      expect(still).toHaveProperty('height', 450)
+      // DISPLAYED. That is legal on a tainted canvas and is the whole design.
+      expect(still).not.toHaveAttribute('hidden')
+
+      // A second load notification must not re-snapshot: the still is stable,
+      // not a second frame of the animation.
+      markLoaded(img)
+      expect(canvas.drawImage).toHaveBeenCalledTimes(1)
+
+      const play = screen.getByRole('button', { name: 'Play preview image from example.com' })
+      fireEvent.click(play)
+      expect(
+        screen.queryByRole('button', { name: 'Play preview image from example.com' }),
+      ).toBeNull()
+      expect(image().style.visibility).toBe('visible')
+      expect(document.querySelector('canvas')).toHaveAttribute('hidden')
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+
+  it('never reads the tainted canvas back', () => {
+    const motion = stubReducedMotion(true)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      markLoaded(image())
+      // Both throw `SecurityError` in a browser the moment a cross-origin
+      // image has been drawn. Reaching either is the bug this asserts against.
+      expect(canvas.toDataURL).not.toHaveBeenCalled()
+      expect(canvas.getImageData).not.toHaveBeenCalled()
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+
+  it('never sets crossOrigin, which would break the image on most of the web', () => {
+    const motion = stubReducedMotion(true)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      const img = image()
+      // Setting it would untaint the canvas and make every origin that sends
+      // no CORS header fail to load at all (D4, review amendment).
+      expect(img.hasAttribute('crossorigin')).toBe(false)
+      expect(img.crossOrigin).toBeNull()
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+
+  it('captures and covers the image when the preference is turned on MID-SESSION', () => {
+    const motion = stubReducedMotion(false)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      const img = image()
+      markLoaded(img)
+      expect(canvas.drawImage).not.toHaveBeenCalled()
+      expect(img.style.visibility).toBe('visible')
+
+      // Somebody just asked for less motion. An og:image that keeps animating
+      // from here has ignored them at the moment they asked.
+      motion.set(true)
+
+      expect(canvas.drawImage).toHaveBeenCalledTimes(1)
+      expect(image().style.visibility).toBe('hidden')
+      expect(document.querySelector('canvas')).not.toHaveAttribute('hidden')
+      expect(
+        screen.getByRole('button', { name: 'Play preview image from example.com' }),
+      ).toBeInTheDocument()
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+
+  it('stops a playing image again when the preference is turned back on', () => {
+    const motion = stubReducedMotion(true)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      markLoaded(image())
+      fireEvent.click(screen.getByRole('button', { name: 'Play preview image from example.com' }))
+      expect(image().style.visibility).toBe('visible')
+
+      motion.set(false)
+      motion.set(true)
+
+      // The explicit "play" was a choice about one moment, not a standing
+      // opt-out of the preference.
+      expect(image().style.visibility).toBe('hidden')
+      expect(
+        screen.getByRole('button', { name: 'Play preview image from example.com' }),
+      ).toBeInTheDocument()
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+
+  it('autoplays with no play control when motion is not restricted', () => {
+    const motion = stubReducedMotion(false)
+    const canvas = stubCanvas()
+    try {
+      render(<LinkPreview preview={preview()} />)
+      expect(image().style.visibility).toBe('visible')
+      markLoaded(image())
+      expect(canvas.drawImage).not.toHaveBeenCalled()
+      expect(
+        screen.queryByRole('button', { name: 'Play preview image from example.com' }),
+      ).toBeNull()
+    } finally {
+      canvas.restore()
+      motion.restore()
+    }
+  })
+})
+
+describe('D4 privacy + D8 display rules', () => {
+  it('sends no referrer and loads lazily, with a decorative alt', () => {
+    render(<LinkPreview preview={preview()} />)
+    const img = image()
+    expect(img).toHaveAttribute('referrerpolicy', 'no-referrer')
+    expect(img).toHaveAttribute('loading', 'lazy')
+    // The page supplied no trustworthy description of its own image.
+    expect(img.getAttribute('alt')).toBe('')
+  })
+
+  it('leads with the worker-derived domain, not the page-chosen site name', () => {
+    render(<LinkPreview preview={preview()} />)
+    const link = screen.getByRole('link')
+    const text = link.textContent ?? ''
+    // "Your Bank - evil.example" is a very different claim from the reverse.
+    expect(text.indexOf('example.com')).toBeLessThan(text.indexOf('Example Journal'))
+  })
+
+  it('does not repeat the site name when it is only the domain again', () => {
+    render(<LinkPreview preview={preview({ siteName: 'Example.com' })} />)
+    const link = screen.getByRole('link')
+    expect((link.textContent ?? '').match(/example\.com/gi)).toHaveLength(1)
+  })
+
+  it('renders no empty line and no orphan separator for whitespace-only fields', () => {
+    render(<LinkPreview preview={preview({ description: '   ', siteName: ' ' })} />)
+    const link = screen.getByRole('link')
+    expect(link.textContent).not.toContain('\u00B7')
+    // The description slot is absent rather than present-and-empty: an empty
+    // <p> would reserve a line of nothing under the title.
+    expect(document.querySelectorAll('p')).toHaveLength(0)
+  })
+
+  it('renders a title-only card when description, image and site name are all absent', () => {
+    render(
+      <LinkPreview
+        preview={preview({ description: null, imageUrl: null, siteName: null })}
+      />,
+    )
+    expect(screen.getByText('The one about reserved layout slots')).toBeInTheDocument()
+    expect(mediaSlot()).toBeNull()
+  })
+
+  it('clamps the description to two lines rather than letting it run', () => {
+    render(<LinkPreview preview={preview()} />)
+    const description = screen.getByText(
+      'A description long enough to want two lines and no more.',
+    )
+    expect(description.className).toContain('line-clamp-2')
+  })
+
+  it('falls back to the domain when a row somehow carries a blank title', () => {
+    // D5 makes a non-empty title the condition for an `ok` row, so this is
+    // defence rather than a feature: a blank one would otherwise produce a link
+    // with no accessible name and a dismiss labelled "Dismiss link preview: ".
+    render(<LinkPreview preview={preview({ title: '   ' })} onHide={vi.fn()} />)
+    expect(screen.getByRole('link')).toHaveAccessibleName(/example\.com/)
+    expect(
+      screen.getByRole('button', { name: 'Dismiss link preview: example.com' }),
+    ).toBeInTheDocument()
+  })
+
+  it('drops a stale broken/played state when a refresh swaps the image', () => {
+    // D6: a stale `ok` row keeps rendering while a refresh runs, so the same
+    // card (keyed by URL hash) can be handed a new og:image without unmounting.
+    const { rerender } = render(<LinkPreview preview={preview()} />)
+    fireEvent.error(image())
+    expect(document.querySelector('img')).toBeNull()
+
+    rerender(<LinkPreview preview={preview({ imageUrl: 'https://cdn.example.com/og-2.png' })} />)
+
+    const refreshed = image()
+    expect(refreshed).toHaveAttribute('src', 'https://cdn.example.com/og-2.png')
+    expect(mediaSlot()).not.toBeNull()
+  })
+
+  it('renders the strings as TEXT, never as markup', () => {
+    const hostile = '<img src=x onerror="alert(1)">'
+    render(<LinkPreview preview={preview({ title: hostile, description: hostile })} />)
+    // React escaped both; the only <img> is the og:image itself.
+    expect(document.querySelectorAll('img')).toHaveLength(1)
+    expect(screen.getAllByText(hostile).length).toBeGreaterThan(0)
+  })
+})
+
+/* ── the seam: one renderer for roots and replies ───────────────────────── */
+
+const NOW = Date.UTC(2026, 8, 8, 12, 0, 0)
+
+function comment(over: Partial<ThreadComment> = {}): ThreadComment {
+  return {
+    id: 'c_root',
+    bodyMd: 'Have a look at https://example.com/article',
+    createdAt: NOW - 60_000,
+    author: { id: 'u_1', name: 'Dana' },
+    ...over,
+  }
+}
+
+function commentBox(id: string): HTMLElement {
+  const node = document.querySelector<HTMLElement>(`[data-comment-id="${id}"]`)
+  if (node === null) throw new Error(`no comment ${id}`)
+  return node
+}
+
+describe('AC 27 / D8 - root and reply comments use the same renderer and callback seam', () => {
+  const COMMENTS: readonly ThreadComment[] = [
+    comment({ id: 'c_root', linkPreviews: [preview({ title: 'Root card' })] }),
+    comment({
+      id: 'c_reply',
+      parentId: 'c_root',
+      linkPreviews: [preview({ urlHash: HASH_B, title: 'Reply card' })],
+    }),
+  ]
+
+  it('renders a card on a root AND on a reply', () => {
+    render(<Thread comments={COMMENTS} now={NOW} />)
+    expect(within(commentBox('c_root')).getByText('Root card')).toBeInTheDocument()
+    expect(within(commentBox('c_reply')).getByText('Reply card')).toBeInTheDocument()
+  })
+
+  it('hands the host the comment id and the url hash from either level', () => {
+    const onHideLinkPreview = vi.fn()
+    render(<Thread comments={COMMENTS} now={NOW} onHideLinkPreview={onHideLinkPreview} />)
+
+    fireEvent.click(
+      within(commentBox('c_root')).getByRole('button', {
+        name: 'Dismiss link preview: Root card',
+      }),
+    )
+    fireEvent.click(
+      within(commentBox('c_reply')).getByRole('button', {
+        name: 'Dismiss link preview: Reply card',
+      }),
+    )
+
+    expect(onHideLinkPreview.mock.calls).toEqual([
+      ['c_root', HASH_A],
+      ['c_reply', HASH_B],
+    ])
+  })
+
+  it('renders every card the worker sent, in the order it sent them', () => {
+    render(
+      <Thread
+        comments={[
+          comment({
+            id: 'c_root',
+            linkPreviews: [
+              preview({ urlHash: HASH_A, title: 'First' }),
+              preview({ urlHash: HASH_B, title: 'Second' }),
+              preview({ urlHash: 'c'.repeat(64), title: 'Third' }),
+            ],
+          }),
+        ]}
+        now={NOW}
+      />,
+    )
+    // Scoped to the card TITLES: the comment body autolinks its own bare URL,
+    // so `getAllByRole('link')` inside a comment box legitimately includes a
+    // link that is not a preview.
+    const titles = within(commentBox('c_root'))
+      .getAllByText(/^(?:First|Second|Third)$/)
+      .map((el) => el.textContent)
+    expect(titles).toEqual(['First', 'Second', 'Third'])
+  })
+
+  it('shows no cards on a tombstone', () => {
+    render(
+      <Thread
+        comments={[
+          comment({
+            id: 'c_root',
+            deletedAt: NOW - 1_000,
+            linkPreviews: [preview({ title: 'Should not survive a delete' })],
+          }),
+        ]}
+        now={NOW}
+      />,
+    )
+    expect(screen.queryByText('Should not survive a delete')).toBeNull()
+    expect(document.querySelector('canvas')).toBeNull()
+    // The thread says "[deleted]" in more than one place (the body and the
+    // byline), so this asserts presence rather than uniqueness.
+    expect(screen.getAllByText('[deleted]').length).toBeGreaterThan(0)
+  })
+
+  it('renders nothing extra for a comment with no previews', () => {
+    render(<Thread comments={[comment({ id: 'c_root' })]} now={NOW} />)
+    const box = within(commentBox('c_root'))
+    // The body still autolinks its own URL — that is markdown, not a card.
+    expect(box.getByRole('link')).toHaveTextContent('https://example.com/article')
+    expect(mediaSlot()).toBeNull()
+    expect(box.queryByText('The one about reserved layout slots')).toBeNull()
+  })
+})

package/src/thread/__tests__/markdown-format.test.ts

@@ -0,0 +1,82 @@
+// @vitest-environment node
+/**
+ * ADR-147 D7 — the toolbar wires real behaviour or it is not rendered.
+ *
+ * The composer's toolbar is exactly this function plus a caret restore, so
+ * these tests ARE the toolbar's contract. The reference's decorative toolbar
+ * is the anti-pattern being replaced, and a test suite is the difference
+ * between "the buttons do something" and "the buttons look like they do".
+ */
+
+import { describe, expect, it } from 'vitest'
+import { applyMarkdownFormat } from '../markdown-format'
+
+describe('applyMarkdownFormat — wrappers', () => {
+  it('wraps the selection and keeps it selected', () => {
+    const edit = applyMarkdownFormat('make this bold', 10, 14, 'bold')
+    expect(edit.value).toBe('make this **bold**')
+    expect(edit.value.slice(edit.selectionStart, edit.selectionEnd)).toBe('bold')
+  })
+
+  it('leaves the caret between the markers on an empty selection', () => {
+    const edit = applyMarkdownFormat('', 0, 0, 'bold')
+    expect(edit.value).toBe('****')
+    expect(edit.selectionStart).toBe(2)
+    expect(edit.selectionEnd).toBe(2)
+  })
+
+  it('unwraps when the markers are INSIDE the selection', () => {
+    const edit = applyMarkdownFormat('a **bold** b', 2, 10, 'bold')
+    expect(edit.value).toBe('a bold b')
+    expect(edit.value.slice(edit.selectionStart, edit.selectionEnd)).toBe('bold')
+  })
+
+  it('unwraps when the markers are OUTSIDE the selection', () => {
+    const edit = applyMarkdownFormat('a **bold** b', 4, 8, 'bold')
+    expect(edit.value).toBe('a bold b')
+    expect(edit.value.slice(edit.selectionStart, edit.selectionEnd)).toBe('bold')
+  })
+
+  it('uses _ for italic and a backtick for code', () => {
+    expect(applyMarkdownFormat('x', 0, 1, 'italic').value).toBe('_x_')
+    expect(applyMarkdownFormat('x', 0, 1, 'code').value).toBe('`x`')
+  })
+})
+
+describe('applyMarkdownFormat — link', () => {
+  it('makes the selection the label and selects the url placeholder', () => {
+    const edit = applyMarkdownFormat('see the plan', 8, 12, 'link')
+    expect(edit.value).toBe('see the [plan](url)')
+    expect(edit.value.slice(edit.selectionStart, edit.selectionEnd)).toBe('url')
+  })
+
+  it('puts the caret inside the brackets when nothing is selected', () => {
+    const edit = applyMarkdownFormat('', 0, 0, 'link')
+    expect(edit.value).toBe('[](url)')
+    expect(edit.selectionStart).toBe(1)
+    expect(edit.selectionEnd).toBe(1)
+  })
+})
+
+describe('applyMarkdownFormat — list', () => {
+  it('prefixes every line the selection touches, not just the selected words', () => {
+    const edit = applyMarkdownFormat('one\ntwo\nthree', 1, 6, 'list')
+    expect(edit.value).toBe('- one\n- two\nthree')
+  })
+
+  it('toggles the prefix back off', () => {
+    const edit = applyMarkdownFormat('- one\n- two', 0, 11, 'list')
+    expect(edit.value).toBe('one\ntwo')
+  })
+
+  it('leaves blank lines alone', () => {
+    const edit = applyMarkdownFormat('one\n\ntwo', 0, 8, 'list')
+    expect(edit.value).toBe('- one\n\n- two')
+  })
+})
+
+describe('applyMarkdownFormat — robustness', () => {
+  it('clamps an out-of-range or reversed selection instead of slicing wildly', () => {
+    expect(applyMarkdownFormat('abc', 99, -4, 'bold').value).toBe('**abc**')
+  })
+})