@tessera-editor/react 0.1.0 → 0.2.0

package/src/__tests__/host-config.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeAll } from 'vitest'
+import { render, waitFor, act } from '@testing-library/react'
+import { Tessera } from '../Tessera'
+import type { Editor } from '@tiptap/core'
+
+/**
+ * Host configuration surface on the React binding: read-only mode, custom
+ * placeholder, block exclusion, and host buttons in the selection toolbar.
+ */
+
+const doc = {
+  type: 'doc',
+  content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello' }] }],
+}
+
+beforeAll(() => {
+  // jsdom implements no layout: prosemirror-view's coordsAtPos (used by
+  // scrollIntoView and the selection toolbar positioning) needs Range rects.
+  const rect = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 }
+  ;(Range.prototype as unknown as { getClientRects: () => unknown }).getClientRects = () => [rect]
+  ;(Range.prototype as unknown as { getBoundingClientRect: () => unknown }).getBoundingClientRect = () => rect
+})
+
+/** Select "Hello" and focus the view so the selection toolbar repositions in. */
+async function selectText(editor: Editor | null): Promise<void> {
+  await act(async () => {
+    editor!.commands.setTextSelection({ from: 1, to: 6 })
+    editor!.commands.focus()
+  })
+}
+
+describe('host configuration surface', () => {
+  it('editable=false renders a read-only editor', async () => {
+    let editor: Editor | null = null
+    const { container } = render(<Tessera content={doc} editable={false} onCreate={ed => (editor = ed)} />)
+    await waitFor(() => expect(editor).not.toBeNull())
+    expect(container.querySelector('.ProseMirror')?.getAttribute('contenteditable')).toBe('false')
+  })
+
+  it('editable defaults to true', async () => {
+    let editor: Editor | null = null
+    const { container } = render(<Tessera content={doc} onCreate={ed => (editor = ed)} />)
+    await waitFor(() => expect(editor).not.toBeNull())
+    expect(container.querySelector('.ProseMirror')?.getAttribute('contenteditable')).toBe('true')
+  })
+
+  it('placeholder overrides the empty-paragraph hint', async () => {
+    let editor: Editor | null = null
+    const { container } = render(<Tessera placeholder="从需求背景写起" onCreate={ed => (editor = ed)} />)
+    await waitFor(() => expect(editor).not.toBeNull())
+    await waitFor(() => {
+      expect(container.querySelector('[data-placeholder="从需求背景写起"]')).not.toBeNull()
+    })
+  })
+
+  it('excludeBlocks removes the node types from the mounted schema', async () => {
+    let editor: Editor | null = null
+    render(
+      <Tessera
+        excludeBlocks={['hint', 'collapsible', 'embedBlock', 'tocBlock', 'horizontalRule']}
+        onCreate={ed => (editor = ed)}
+      />,
+    )
+    await waitFor(() => expect(editor).not.toBeNull())
+    expect(editor!.state.schema.nodes.hint).toBeUndefined()
+    expect(editor!.state.schema.nodes.collapsible).toBeUndefined()
+    expect(editor!.state.schema.nodes.horizontalRule).toBeUndefined()
+    expect(editor!.state.schema.nodes.table).toBeDefined()
+    expect(editor!.state.schema.nodes.imageBlock).toBeDefined()
+  })
+
+  it('extraSelectionItems renders in the selection toolbar on text selection', async () => {
+    let editor: Editor | null = null
+    const { container } = render(
+      <Tessera
+        content={doc}
+        onCreate={ed => (editor = ed)}
+        extraSelectionItems={<button type="button">让 AI 改写此段</button>}
+      />,
+    )
+    await waitFor(() => expect(editor).not.toBeNull())
+    await selectText(editor)
+    await waitFor(() => {
+      const toolbar = container.querySelector('[data-testid="selection-toolbar"]')
+      expect(toolbar, '选区工具栏应出现').not.toBeNull()
+      expect(toolbar!.textContent).toContain('让 AI 改写此段')
+    })
+  })
+
+  it('comment button is hidden without an injected CommentStore', async () => {
+    let editor: Editor | null = null
+    const { container } = render(<Tessera content={doc} onCreate={ed => (editor = ed)} />)
+    await waitFor(() => expect(editor).not.toBeNull())
+    await selectText(editor)
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="selection-toolbar"]')).not.toBeNull()
+    })
+    const toolbar = container.querySelector('[data-testid="selection-toolbar"]')!
+    expect(toolbar.textContent).not.toContain('💬')
+    // collapsible node is present by default → its button stays
+    expect(toolbar.textContent).toContain('▸')
+  })
+
+  it('collapsible button is hidden when collapsible is excluded', async () => {
+    let editor: Editor | null = null
+    const { container } = render(
+      <Tessera content={doc} excludeBlocks={['collapsible']} onCreate={ed => (editor = ed)} />,
+    )
+    await waitFor(() => expect(editor).not.toBeNull())
+    await selectText(editor)
+    await waitFor(() => {
+      expect(container.querySelector('[data-testid="selection-toolbar"]')).not.toBeNull()
+    })
+    expect(container.querySelector('[data-testid="selection-toolbar"]')!.textContent).not.toContain('▸')
+  })
+})

package/src/__tests__/setup.ts

@@ -0,0 +1,4 @@
+// jsdom implements no layout, so it lacks Element.scrollIntoView entirely —
+// any component whose effects call it would crash under test. Components
+// under test here (slash/emoji menus) call it to follow keyboard highlight.
+Element.prototype.scrollIntoView = () => {}

package/src/__tests__/slash-menu-scroll.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, act } from '@testing-library/react'
+import { createRef } from 'react'
+import { SlashMenuView, type SlashMenuViewProps } from '../SlashMenu'
+import type { SlashMenuItem } from '@tessera-editor/core'
+
+/**
+ * Regression: ArrowDown past the menu's visible fold must scroll the
+ * highlighted item back into view. The follow logic lives in an effect keyed
+ * on selectedIndex that queries [data-selected="true"] inside the menu
+ * container — which only works when the container ref is actually attached.
+ */
+
+const items: SlashMenuItem[] = Array.from({ length: 40 }, (_, i) => ({
+  id: `item-${i}`,
+  group: 'basic',
+  title: `Item ${i}`,
+  command: () => {},
+}))
+
+const scrollSpy = vi.fn()
+
+beforeEach(() => {
+  scrollSpy.mockClear()
+  ;(Element.prototype as unknown as { scrollIntoView: unknown }).scrollIntoView = scrollSpy
+})
+
+describe('SlashMenuView keyboard scroll follow', () => {
+  it('keeps the highlighted item in view when navigating past the fold', () => {
+    const ref = createRef<{ onKeyDown: (props: { event: KeyboardEvent }) => boolean }>()
+    const props = {
+      items,
+      command: vi.fn(),
+      clientRect: () => new DOMRect(100, 200, 8, 18),
+      t: (key: string) => key,
+    } as unknown as SlashMenuViewProps
+    const { container } = render(<SlashMenuView ref={ref} {...props} />)
+
+    const menu = container.querySelector('[data-testid="slash-menu"]')
+    expect(menu).toBeTruthy()
+
+    act(() => {
+      for (let i = 0; i < 25; i++) {
+        ref.current!.onKeyDown({ event: new KeyboardEvent('keydown', { key: 'ArrowDown' }) })
+      }
+    })
+
+    const selected = menu!.querySelector('[data-selected="true"]')
+    expect(selected?.textContent).toContain('Item 25')
+    expect(scrollSpy).toHaveBeenCalledWith({ block: 'nearest' })
+    expect(scrollSpy.mock.contexts.some(el => el === selected)).toBe(true)
+  })
+})

package/src/context.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
 import type { Editor } from '@tiptap/react'
 import type { TesseraLocale, TesseraTranslator } from '@tessera-editor/core'
 import type { AiController } from '@tessera-editor/ai'
@@ -8,6 +9,12 @@ export interface TesseraContextValue {
   locale: TesseraLocale
   t: TesseraTranslator
   ai: AiController | null
+  /**
+   * Host buttons appended to the selection toolbar (e.g. custom AI actions).
+   * A render function receives the live editor + translator, so a host button
+   * like 「让 AI 改写此段」 can read the current selection on click.
+   */
+  extraSelectionItems?: ReactNode | ((ctx: { editor: Editor; t: TesseraTranslator }) => ReactNode)
 }
 
 export const TesseraContext = createContext<TesseraContextValue | null>(null)

package/src/index.ts

@@ -1,10 +1,11 @@
 export { Tessera } from './Tessera'
 export type { TesseraProps } from './Tessera'
+export type { Editor } from '@tiptap/react'
+export type { Content, JSONContent } from '@tiptap/core'
 export { EmptyLineToolbar } from './EmptyLineToolbar'
 export { SelectionToolbar } from './SelectionToolbar'
 export { SlashMenuView, createSlashRenderer } from './SlashMenu'
 export { FindReplacePanel, AskPanel, SuggestionBar } from './Panels'
-export { HistoryPanel } from './HistoryPanel'
 export { CommentPanel, CommentComposer } from './CommentPanel'
 export { BlockContextMenuUI } from './BlockMenu'
 export { ImageBlockView } from './ImageNodeView'

package/src/HistoryPanel.tsx

@@ -1,166 +0,0 @@
-import { useContext, useEffect, useState } from 'react'
-import {
-  diffDocs,
-  diffSummary,
-  getStorageService,
-} from '@tessera-editor/core'
-import type { DocSnapshot, BlockDiffEntry } from '@tessera-editor/core'
-import { TesseraContext } from './context'
-
-/**
- * Version history panel (v1.1): snapshots from the injected StorageService,
- * block+word level diff against the current doc, one-click restore.
- */
-export function HistoryPanel() {
-  const { editor, t } = useContext(TesseraContext)!
-  const [visible, setVisible] = useState(false)
-  const [snapshots, setSnapshots] = useState<DocSnapshot[]>([])
-  const [selected, setSelected] = useState<DocSnapshot | null>(null)
-  const [entries, setEntries] = useState<BlockDiffEntry[] | null>(null)
-  const [summary, setSummary] = useState({ added: 0, removed: 0, changed: 0 })
-
-  const refresh = async () => {
-    const storage = getStorageService(editor)
-    if (!storage) {
-      return
-    }
-    const list = await storage.listSnapshots()
-    setSnapshots([...list].sort((a, b) => b.ts - a.ts))
-  }
-
-  useEffect(() => {
-    const open = () => {
-      setVisible(true)
-      void refresh()
-    }
-    editor.on('tessera:historyPanel', open)
-    const saved = () => void refresh()
-    editor.on('tessera:snapshotSaved', saved as never)
-    return () => {
-      editor.off('tessera:historyPanel', open)
-      editor.off('tessera:snapshotSaved', saved as never)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor])
-
-  if (!visible) {
-    return null
-  }
-
-  const hasStorage = !!getStorageService(editor)
-
-  const select = (snap: DocSnapshot) => {
-    setSelected(snap)
-    const result = diffDocs(snap.doc as never, editor.getJSON() as never)
-    setEntries(result)
-    setSummary(diffSummary(result.filter(e => e.kind !== 'unchanged')))
-  }
-
-  const restore = (snap: DocSnapshot) => {
-    if (!window.confirm(t('historyConfirmRestore'))) {
-      return
-    }
-    editor.commands.setContent(snap.doc as never)
-    setVisible(false)
-  }
-
-  return (
-    <div className="tessera-history-panel" data-testid="history-panel">
-      <div className="tessera-ask-header">
-        <span>{t('historyTitle')}</span>
-        <div className="tessera-history-actions">
-          {hasStorage ? (
-            <button type="button" onClick={() => editor.commands.captureSnapshot()}>
-              {t('historyCapture')}
-            </button>
-          ) : null}
-          <button type="button" onClick={() => setVisible(false)}>
-            ×
-          </button>
-        </div>
-      </div>
-      {!hasStorage ? (
-        <div className="tessera-ask-error">{t('aiRuntimeMissing').replace('AI Runtime', 'StorageService')}</div>
-      ) : null}
-      <div className="tessera-history-body">
-        <div className="tessera-history-list">
-          {snapshots.length === 0 ? <div className="tessera-toc-empty">{t('historyEmpty')}</div> : null}
-          {snapshots.map(snap => (
-            <button
-              key={snap.id}
-              type="button"
-              className="tessera-history-item"
-              data-selected={selected?.id === snap.id}
-              onClick={() => select(snap)}
-            >
-              <span className="tessera-history-time">{formatTime(snap.ts)}</span>
-              {snap.label ? <span className="tessera-history-label">{snap.label}</span> : null}
-              <span className="tessera-history-action" role="button" tabIndex={0}
-                onClick={e => {
-                  e.stopPropagation()
-                  restore(snap)
-                }}
-                onKeyDown={e => {
-                  if (e.key === 'Enter') restore(snap)
-                }}
-              >
-                {t('historyRestore')}
-              </span>
-            </button>
-          ))}
-        </div>
-        {selected ? (
-          <div className="tessera-history-diff">
-            <div className="tessera-diff-summary">
-              +{summary.added} {t('historyDiffAdded')} · −{summary.removed} {t('historyDiffRemoved')} · ~{summary.changed}{' '}
-              {t('historyDiffChanged')}
-            </div>
-            {(entries ?? [])
-              .filter(e => e.kind !== 'unchanged')
-              .slice(0, 80)
-              .map((entry, i) => (
-                <div key={entry.id ?? i} className={`tessera-diff-block tessera-diff-block--${entry.kind}`}>
-                  <span className="tessera-diff-badge">
-                    {entry.kind === 'added'
-                      ? t('historyDiffAdded')
-                      : entry.kind === 'removed'
-                        ? t('historyDiffRemoved')
-                        : t('historyDiffChanged')}
-                  </span>
-                  {entry.kind === 'changed' && entry.wordDiff ? (
-                    <span className="tessera-diff-text">
-                      {entry.wordDiff.map((part, j) => (
-                        <span key={j} className={`tessera-diff-part tessera-diff-part--${part.type}`}>
-                          {part.text}
-                        </span>
-                      ))}
-                    </span>
-                  ) : (
-                    <span className="tessera-diff-text">{blockText(entry)}</span>
-                  )}
-                </div>
-              ))}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-function blockText(entry: BlockDiffEntry): string {
-  const json = entry.after ?? entry.before
-  const walk = (node: unknown): string => {
-    if (!node || typeof node !== 'object') {
-      return ''
-    }
-    const n = node as { text?: string; content?: unknown[] }
-    return (n.text ?? '') + (n.content ?? []).map(walk).join('')
-  }
-  return walk(json).trim().slice(0, 120)
-}
-
-function formatTime(ts: number): string {
-  const d = new Date(ts)
-  const pad = (n: number) => String(n).padStart(2, '0')
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
-}