@puredesktop/platform-editor 1.0.0-beta.1

package/src/toolbar/ToolBtn.tsx

@@ -0,0 +1,63 @@
+import type React from 'react'
+import { styled } from 'styled-components'
+
+export const ToolBtn = styled.button.attrs<{ $active?: boolean }>({
+  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+  },
+})<{ $active?: boolean }>`
+  align-items: center;
+  background: ${({ $active }) =>
+    $active
+      ? 'rgb(from var(--platform-colors-text) r g b / 0.05)'
+      : 'transparent'};
+  border: none;
+  border-radius: 6px;
+  color: var(--platform-colors-text);
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  font-weight: ${({ $active }) => ($active ? '600' : '400')};
+  height: 30px;
+  justify-content: center;
+  min-width: 30px;
+  padding: 0 7px;
+  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+  &:hover:not(:disabled) {
+    background: ${({ $active }) =>
+      $active
+        ? 'rgb(from var(--platform-colors-text) r g b / 0.08)'
+        : 'rgb(from var(--platform-colors-text) r g b / 0.045)'};
+  }
+`
+
+export const Divider = styled.span`
+  background: rgb(from var(--platform-colors-border) r g b / 0.92);
+  display: inline-block;
+  height: 16px;
+  margin: 0 12px;
+  width: 1px;
+`
+
+export const ToolbarRow = styled.div`
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 0;
+  margin: 0 auto;
+  padding: 4px 8px;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  width: 100%;
+  max-width: 680px;
+  background: var(--platform-colors-bg);
+  border-bottom: 1px solid var(--platform-colors-divider);
+`

package/src/toolbar/Toolbar.test.tsx

@@ -0,0 +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.',
+    )
+  })
+})