@puredesktop/platform-editor 1.0.0-beta.1 → 1.0.0-beta.2

package/src/toolbar/Toolbar.test.tsx

@@ -1,325 +1,325 @@
-// @vitest-environment happy-dom
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { EditorContext } from '@tiptap/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Toolbar } from './Toolbar.js'
-;(
-  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
-).IS_REACT_ACT_ENVIRONMENT = true
-
-interface MockEditorOptions {
-  selection?: { from: number; to: number }
-  active?: Record<string, boolean>
-  autoReviewPrompts?: boolean
-}
-
-function createChain() {
-  const chain = {
-    focus: vi.fn(() => chain),
-    undo: vi.fn(() => chain),
-    redo: vi.fn(() => chain),
-    toggleBlockquote: vi.fn(() => chain),
-    toggleOrderedList: vi.fn(() => chain),
-    toggleBulletList: vi.fn(() => chain),
-    toggleBold: vi.fn(() => chain),
-    toggleItalic: vi.fn(() => chain),
-    toggleCode: vi.fn(() => chain),
-    toggleUnderline: vi.fn(() => chain),
-    setLink: vi.fn(() => chain),
-    unsetLink: vi.fn(() => chain),
-    sinkListItem: vi.fn(() => chain),
-    toggleSubscript: vi.fn(() => chain),
-    toggleSuperscript: vi.fn(() => chain),
-    insertInlineMath: vi.fn(() => chain),
-    insertBlockMath: vi.fn(() => chain),
-    insertMermaidBlock: vi.fn(() => chain),
-    toggleTaskList: vi.fn(() => chain),
-    toggleCodeBlock: vi.fn(() => chain),
-    insertTable: vi.fn(() => chain),
-    insertFootnote: vi.fn(() => chain),
-    toggleIndexMarker: vi.fn(() => chain),
-    addRowAfter: vi.fn(() => chain),
-    addColumnAfter: vi.fn(() => chain),
-    deleteTable: vi.fn(() => chain),
-    run: vi.fn(() => true),
-  }
-  return chain
-}
-
-function createEditor(options: MockEditorOptions = {}) {
-  const chain = createChain()
-  const handlers = new Map<string, Set<() => void>>()
-  const active = options.active ?? {}
-  const selection = options.selection ?? { from: 1, to: 1 }
-  const doc = {
-    descendants: vi.fn((visitor: (node: unknown, pos: number) => boolean) => {
-      visitor(
-        {
-          type: { name: 'paragraph' },
-          textContent: 'Small layout failures are easy to spot.',
-          nodeSize: 42,
-        },
-        0,
-      )
-    }),
-  }
-  const editor = {
-    state: { selection, doc },
-    extensionManager: {
-      extensions: options.autoReviewPrompts
-        ? [{ name: 'autoReviewPrompts' }]
-        : [],
-    },
-    chain: vi.fn(() => chain),
-    can: vi.fn(() => ({
-      undo: vi.fn(() => true),
-      redo: vi.fn(() => false),
-    })),
-    isActive: vi.fn((name: string) => Boolean(active[name])),
-    getAttributes: vi.fn(() => ({ href: '' })),
-    on: vi.fn((event: string, handler: () => void) => {
-      if (!handlers.has(event)) handlers.set(event, new Set())
-      handlers.get(event)?.add(handler)
-    }),
-    off: vi.fn((event: string, handler: () => void) => {
-      handlers.get(event)?.delete(handler)
-    }),
-    emit(event: string) {
-      handlers.get(event)?.forEach(handler => handler())
-    },
-  }
-
-  return { editor, chain }
-}
-
-function renderToolbar({
-  editor,
-  onAddComment,
-  advancedTools,
-}: {
-  editor: ReturnType<typeof createEditor>['editor']
-  onAddComment?: Parameters<typeof Toolbar>[0]['onAddComment']
-  advancedTools?: Parameters<typeof Toolbar>[0]['advancedTools']
-}): { container: HTMLDivElement; root: Root } {
-  const container = document.createElement('div')
-  document.body.appendChild(container)
-  const root = createRoot(container)
-  act(() => {
-    root.render(
-      <EditorContext.Provider value={{ editor: editor as never }}>
-        <Toolbar onAddComment={onAddComment} advancedTools={advancedTools} />
-      </EditorContext.Provider>,
-    )
-  })
-  return { container, root }
-}
-
-function click(element: Element | null): void {
-  expect(element).not.toBeNull()
-  act(() => {
-    element?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-  })
-}
-
-afterEach(() => {
-  vi.restoreAllMocks()
-  document.body.innerHTML = ''
-})
-
-describe('Toolbar', () => {
-  it('toggles core writing controls through the editor command chain', () => {
-    const { editor, chain } = createEditor()
-    const { container } = renderToolbar({ editor })
-
-    click(container.querySelector('[title="Bold"]'))
-    click(container.querySelector('[title="Italic"]'))
-    click(container.querySelector('[title="Underline"]'))
-    click(container.querySelector('[title="Inline code"]'))
-    click(container.querySelector('[title="Blockquote"]'))
-    click(container.querySelector('[title="Ordered list"]'))
-    click(container.querySelector('[title="Bullet list"]'))
-
-    expect(chain.toggleBold).toHaveBeenCalledOnce()
-    expect(chain.toggleItalic).toHaveBeenCalledOnce()
-    expect(chain.toggleUnderline).toHaveBeenCalledOnce()
-    expect(chain.toggleCode).toHaveBeenCalledOnce()
-    expect(chain.toggleBlockquote).toHaveBeenCalledOnce()
-    expect(chain.toggleOrderedList).toHaveBeenCalledOnce()
-    expect(chain.toggleBulletList).toHaveBeenCalledOnce()
-  })
-
-  it('opens the advanced content dropdown and closes it on outside click', () => {
-    const { editor } = createEditor()
-    const { container } = renderToolbar({ editor })
-
-    click(container.querySelector('[title="More tools"]'))
-
-    expect(container.textContent).toContain('Insert inline equation')
-    expect(container.textContent).toContain('Insert table')
-    expect(container.querySelector('[data-open="true"]')).not.toBeNull()
-
-    act(() => {
-      document.body.dispatchEvent(
-        new MouseEvent('mousedown', { bubbles: true }),
-      )
-    })
-
-    expect(container.querySelector('[data-open="false"]')).not.toBeNull()
-  })
-
-  it('runs advanced dropdown content commands', () => {
-    const promptSpy = vi
-      .spyOn(window, 'prompt')
-      .mockReturnValueOnce('E = mc^2')
-      .mockReturnValueOnce('a / b')
-    const { editor, chain } = createEditor()
-    const { container } = renderToolbar({ editor })
-
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Insert inline equation'),
-      ) ?? null,
-    )
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Insert display equation'),
-      ) ?? null,
-    )
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Insert Mermaid diagram'),
-      ) ?? null,
-    )
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Insert table'),
-      ) ?? null,
-    )
-
-    expect(promptSpy).toHaveBeenCalledTimes(2)
-    expect(chain.insertInlineMath).toHaveBeenCalledWith({ latex: 'E = mc^2' })
-    expect(chain.insertBlockMath).toHaveBeenCalledWith({ latex: 'a / b' })
-    expect(chain.insertMermaidBlock).toHaveBeenCalledOnce()
-    expect(chain.insertTable).toHaveBeenCalledWith({
-      rows: 3,
-      cols: 3,
-      withHeaderRow: true,
-    })
-  })
-
-  it('can limit the advanced dropdown to formatting-only tools', () => {
-    const { editor } = createEditor()
-    const { container } = renderToolbar({
-      editor,
-      advancedTools: 'formatting',
-    })
-
-    click(container.querySelector('[title="More tools"]'))
-
-    expect(container.textContent).toContain('Subscript')
-    expect(container.textContent).toContain('Superscript')
-    expect(container.textContent).toContain('Mark for index')
-    expect(container.textContent).not.toContain('Insert inline equation')
-    expect(container.textContent).not.toContain('Insert table')
-    expect(container.textContent).not.toContain('Copy editorial review prompts')
-  })
-
-  it('enables comment actions only when text is selected', () => {
-    const onAddComment = vi.fn()
-    const withoutSelection = createEditor()
-    const { container: disabledContainer } = renderToolbar({
-      editor: withoutSelection.editor,
-      onAddComment,
-    })
-
-    expect(
-      disabledContainer
-        .querySelector('[title="Add comment to selection"]')
-        ?.hasAttribute('disabled'),
-    ).toBe(true)
-
-    document.body.innerHTML = ''
-    const withSelection = createEditor({ selection: { from: 1, to: 8 } })
-    const { container } = renderToolbar({
-      editor: withSelection.editor,
-      onAddComment,
-    })
-
-    expect(
-      container
-        .querySelector('[title="Add comment to selection"]')
-        ?.hasAttribute('disabled'),
-    ).toBe(false)
-  })
-
-  it('shows table-specific commands when the cursor is in a table', () => {
-    const { editor, chain } = createEditor({ active: { table: true } })
-    const { container } = renderToolbar({ editor })
-
-    click(container.querySelector('[title="More tools"]'))
-
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Add table row'),
-      ) ?? null,
-    )
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Add table column'),
-      ) ?? null,
-    )
-    click(container.querySelector('[title="More tools"]'))
-    click(
-      Array.from(container.querySelectorAll('button')).find(button =>
-        button.textContent?.includes('Delete table'),
-      ) ?? null,
-    )
-
-    expect(chain.addRowAfter).toHaveBeenCalledOnce()
-    expect(chain.addColumnAfter).toHaveBeenCalledOnce()
-    expect(chain.deleteTable).toHaveBeenCalledOnce()
-  })
-
-  it('copies editorial review prompts when the auto-review extension is present', async () => {
-    const clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: clipboard,
-    })
-    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {})
-    const { editor } = createEditor({ autoReviewPrompts: true })
-    const { container } = renderToolbar({ editor })
-
-    click(container.querySelector('[title="More tools"]'))
-    await act(async () => {
-      Array.from(container.querySelectorAll('button'))
-        .find(button =>
-          button.textContent?.includes('Copy editorial review prompts'),
-        )
-        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-    })
-
-    expect(clipboard.writeText).toHaveBeenCalledOnce()
-    const copied = clipboard.writeText.mock.calls[0]?.[0] as string
-    expect(copied).toContain('# Claim detection prompt')
-    expect(copied).toContain('one thing only: CLAIMS')
-    expect(copied).toContain('# Fact-check detection prompt')
-    expect(copied).toContain('one thing only: FACT-CHECK NEEDS')
-    expect(copied).toContain('# Source detection prompt')
-    expect(copied).toContain('one thing only: SOURCE checks')
-    expect(copied).toContain('# Thread detection prompt')
-    expect(copied).toContain('You are detecting THREADS')
-    expect(copied).toContain('# Logic detection prompt')
-    expect(copied).toContain('You are detecting LOGIC gaps')
-    expect(copied).toContain('Small layout failures are easy to spot.')
-    expect(alertSpy).toHaveBeenCalledWith(
-      'Copied editorial review prompts for 1 paragraph.',
-    )
-  })
-})
+// @vitest-environment happy-dom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { EditorContext } from '@tiptap/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Toolbar } from './Toolbar.js'
+;(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true
+
+interface MockEditorOptions {
+  selection?: { from: number; to: number }
+  active?: Record<string, boolean>
+  autoReviewPrompts?: boolean
+}
+
+function createChain() {
+  const chain = {
+    focus: vi.fn(() => chain),
+    undo: vi.fn(() => chain),
+    redo: vi.fn(() => chain),
+    toggleBlockquote: vi.fn(() => chain),
+    toggleOrderedList: vi.fn(() => chain),
+    toggleBulletList: vi.fn(() => chain),
+    toggleBold: vi.fn(() => chain),
+    toggleItalic: vi.fn(() => chain),
+    toggleCode: vi.fn(() => chain),
+    toggleUnderline: vi.fn(() => chain),
+    setLink: vi.fn(() => chain),
+    unsetLink: vi.fn(() => chain),
+    sinkListItem: vi.fn(() => chain),
+    toggleSubscript: vi.fn(() => chain),
+    toggleSuperscript: vi.fn(() => chain),
+    insertInlineMath: vi.fn(() => chain),
+    insertBlockMath: vi.fn(() => chain),
+    insertMermaidBlock: vi.fn(() => chain),
+    toggleTaskList: vi.fn(() => chain),
+    toggleCodeBlock: vi.fn(() => chain),
+    insertTable: vi.fn(() => chain),
+    insertFootnote: vi.fn(() => chain),
+    toggleIndexMarker: vi.fn(() => chain),
+    addRowAfter: vi.fn(() => chain),
+    addColumnAfter: vi.fn(() => chain),
+    deleteTable: vi.fn(() => chain),
+    run: vi.fn(() => true),
+  }
+  return chain
+}
+
+function createEditor(options: MockEditorOptions = {}) {
+  const chain = createChain()
+  const handlers = new Map<string, Set<() => void>>()
+  const active = options.active ?? {}
+  const selection = options.selection ?? { from: 1, to: 1 }
+  const doc = {
+    descendants: vi.fn((visitor: (node: unknown, pos: number) => boolean) => {
+      visitor(
+        {
+          type: { name: 'paragraph' },
+          textContent: 'Small layout failures are easy to spot.',
+          nodeSize: 42,
+        },
+        0,
+      )
+    }),
+  }
+  const editor = {
+    state: { selection, doc },
+    extensionManager: {
+      extensions: options.autoReviewPrompts
+        ? [{ name: 'autoReviewPrompts' }]
+        : [],
+    },
+    chain: vi.fn(() => chain),
+    can: vi.fn(() => ({
+      undo: vi.fn(() => true),
+      redo: vi.fn(() => false),
+    })),
+    isActive: vi.fn((name: string) => Boolean(active[name])),
+    getAttributes: vi.fn(() => ({ href: '' })),
+    on: vi.fn((event: string, handler: () => void) => {
+      if (!handlers.has(event)) handlers.set(event, new Set())
+      handlers.get(event)?.add(handler)
+    }),
+    off: vi.fn((event: string, handler: () => void) => {
+      handlers.get(event)?.delete(handler)
+    }),
+    emit(event: string) {
+      handlers.get(event)?.forEach(handler => handler())
+    },
+  }
+
+  return { editor, chain }
+}
+
+function renderToolbar({
+  editor,
+  onAddComment,
+  advancedTools,
+}: {
+  editor: ReturnType<typeof createEditor>['editor']
+  onAddComment?: Parameters<typeof Toolbar>[0]['onAddComment']
+  advancedTools?: Parameters<typeof Toolbar>[0]['advancedTools']
+}): { container: HTMLDivElement; root: Root } {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  act(() => {
+    root.render(
+      <EditorContext.Provider value={{ editor: editor as never }}>
+        <Toolbar onAddComment={onAddComment} advancedTools={advancedTools} />
+      </EditorContext.Provider>,
+    )
+  })
+  return { container, root }
+}
+
+function click(element: Element | null): void {
+  expect(element).not.toBeNull()
+  act(() => {
+    element?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+  })
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  document.body.innerHTML = ''
+})
+
+describe('Toolbar', () => {
+  it('toggles core writing controls through the editor command chain', () => {
+    const { editor, chain } = createEditor()
+    const { container } = renderToolbar({ editor })
+
+    click(container.querySelector('[title="Bold"]'))
+    click(container.querySelector('[title="Italic"]'))
+    click(container.querySelector('[title="Underline"]'))
+    click(container.querySelector('[title="Inline code"]'))
+    click(container.querySelector('[title="Blockquote"]'))
+    click(container.querySelector('[title="Ordered list"]'))
+    click(container.querySelector('[title="Bullet list"]'))
+
+    expect(chain.toggleBold).toHaveBeenCalledOnce()
+    expect(chain.toggleItalic).toHaveBeenCalledOnce()
+    expect(chain.toggleUnderline).toHaveBeenCalledOnce()
+    expect(chain.toggleCode).toHaveBeenCalledOnce()
+    expect(chain.toggleBlockquote).toHaveBeenCalledOnce()
+    expect(chain.toggleOrderedList).toHaveBeenCalledOnce()
+    expect(chain.toggleBulletList).toHaveBeenCalledOnce()
+  })
+
+  it('opens the advanced content dropdown and closes it on outside click', () => {
+    const { editor } = createEditor()
+    const { container } = renderToolbar({ editor })
+
+    click(container.querySelector('[title="More tools"]'))
+
+    expect(container.textContent).toContain('Insert inline equation')
+    expect(container.textContent).toContain('Insert table')
+    expect(container.querySelector('[data-open="true"]')).not.toBeNull()
+
+    act(() => {
+      document.body.dispatchEvent(
+        new MouseEvent('mousedown', { bubbles: true }),
+      )
+    })
+
+    expect(container.querySelector('[data-open="false"]')).not.toBeNull()
+  })
+
+  it('runs advanced dropdown content commands', () => {
+    const promptSpy = vi
+      .spyOn(window, 'prompt')
+      .mockReturnValueOnce('E = mc^2')
+      .mockReturnValueOnce('a / b')
+    const { editor, chain } = createEditor()
+    const { container } = renderToolbar({ editor })
+
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Insert inline equation'),
+      ) ?? null,
+    )
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Insert display equation'),
+      ) ?? null,
+    )
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Insert Mermaid diagram'),
+      ) ?? null,
+    )
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Insert table'),
+      ) ?? null,
+    )
+
+    expect(promptSpy).toHaveBeenCalledTimes(2)
+    expect(chain.insertInlineMath).toHaveBeenCalledWith({ latex: 'E = mc^2' })
+    expect(chain.insertBlockMath).toHaveBeenCalledWith({ latex: 'a / b' })
+    expect(chain.insertMermaidBlock).toHaveBeenCalledOnce()
+    expect(chain.insertTable).toHaveBeenCalledWith({
+      rows: 3,
+      cols: 3,
+      withHeaderRow: true,
+    })
+  })
+
+  it('can limit the advanced dropdown to formatting-only tools', () => {
+    const { editor } = createEditor()
+    const { container } = renderToolbar({
+      editor,
+      advancedTools: 'formatting',
+    })
+
+    click(container.querySelector('[title="More tools"]'))
+
+    expect(container.textContent).toContain('Subscript')
+    expect(container.textContent).toContain('Superscript')
+    expect(container.textContent).toContain('Mark for index')
+    expect(container.textContent).not.toContain('Insert inline equation')
+    expect(container.textContent).not.toContain('Insert table')
+    expect(container.textContent).not.toContain('Copy editorial review prompts')
+  })
+
+  it('enables comment actions only when text is selected', () => {
+    const onAddComment = vi.fn()
+    const withoutSelection = createEditor()
+    const { container: disabledContainer } = renderToolbar({
+      editor: withoutSelection.editor,
+      onAddComment,
+    })
+
+    expect(
+      disabledContainer
+        .querySelector('[title="Add comment to selection"]')
+        ?.hasAttribute('disabled'),
+    ).toBe(true)
+
+    document.body.innerHTML = ''
+    const withSelection = createEditor({ selection: { from: 1, to: 8 } })
+    const { container } = renderToolbar({
+      editor: withSelection.editor,
+      onAddComment,
+    })
+
+    expect(
+      container
+        .querySelector('[title="Add comment to selection"]')
+        ?.hasAttribute('disabled'),
+    ).toBe(false)
+  })
+
+  it('shows table-specific commands when the cursor is in a table', () => {
+    const { editor, chain } = createEditor({ active: { table: true } })
+    const { container } = renderToolbar({ editor })
+
+    click(container.querySelector('[title="More tools"]'))
+
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Add table row'),
+      ) ?? null,
+    )
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Add table column'),
+      ) ?? null,
+    )
+    click(container.querySelector('[title="More tools"]'))
+    click(
+      Array.from(container.querySelectorAll('button')).find(button =>
+        button.textContent?.includes('Delete table'),
+      ) ?? null,
+    )
+
+    expect(chain.addRowAfter).toHaveBeenCalledOnce()
+    expect(chain.addColumnAfter).toHaveBeenCalledOnce()
+    expect(chain.deleteTable).toHaveBeenCalledOnce()
+  })
+
+  it('copies editorial review prompts when the auto-review extension is present', async () => {
+    const clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: clipboard,
+    })
+    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {})
+    const { editor } = createEditor({ autoReviewPrompts: true })
+    const { container } = renderToolbar({ editor })
+
+    click(container.querySelector('[title="More tools"]'))
+    await act(async () => {
+      Array.from(container.querySelectorAll('button'))
+        .find(button =>
+          button.textContent?.includes('Copy editorial review prompts'),
+        )
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+
+    expect(clipboard.writeText).toHaveBeenCalledOnce()
+    const copied = clipboard.writeText.mock.calls[0]?.[0] as string
+    expect(copied).toContain('# Claim detection prompt')
+    expect(copied).toContain('one thing only: CLAIMS')
+    expect(copied).toContain('# Fact-check detection prompt')
+    expect(copied).toContain('one thing only: FACT-CHECK NEEDS')
+    expect(copied).toContain('# Source detection prompt')
+    expect(copied).toContain('one thing only: SOURCE checks')
+    expect(copied).toContain('# Thread detection prompt')
+    expect(copied).toContain('You are detecting THREADS')
+    expect(copied).toContain('# Logic detection prompt')
+    expect(copied).toContain('You are detecting LOGIC gaps')
+    expect(copied).toContain('Small layout failures are easy to spot.')
+    expect(alertSpy).toHaveBeenCalledWith(
+      'Copied editorial review prompts for 1 paragraph.',
+    )
+  })
+})