@tessera-editor/react 0.1.0

package/src/HistoryPanel.tsx

@@ -0,0 +1,166 @@
+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())}`
+}

package/src/ImageNodeView.tsx

@@ -0,0 +1,120 @@
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { ImageBlock } from '@tessera-editor/core'
+import { useContext, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { TesseraContext } from './context'
+
+/**
+ * Image NodeView (acceptance §6): 悬停边缘箭头调宽、左/中/全宽对齐。
+ * Uploads flow through the injected UploadService (Tessera.tsx handles
+ * paste/drop/picker); this view only mutates node attributes.
+ */
+
+function AiImageNodeView({ node, updateAttributes, selected, decorations }: NodeViewProps) {
+  console.log('[imgview] decorations:', Array.isArray(decorations), decorations?.length)
+  const galleryAttrs = (() => {
+    for (const deco of decorations ?? []) {
+      const attrs = (deco as unknown as { type?: { attrs?: Record<string, string> } }).type?.attrs
+      if (attrs && 'data-gallery' in attrs) {
+        return attrs
+      }
+    }
+    return null
+  })()
+  const { t } = useContext(TesseraContext)!
+  const imgRef = useRef<HTMLImageElement>(null)
+  const [preview, setPreview] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!preview) return
+    const close = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setPreview(null)
+    }
+    window.addEventListener('keydown', close)
+    return () => window.removeEventListener('keydown', close)
+  }, [preview])
+  const { src, alt, width, align } = node.attrs as {
+    src: string
+    alt: string | null
+    width: number | null
+    align: 'left' | 'center' | 'full'
+  }
+
+  const startResize = (event: React.PointerEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    const startX = event.clientX
+    const startWidth = imgRef.current?.getBoundingClientRect().width ?? width ?? 400
+    const onMove = (e: PointerEvent) => {
+      const next = Math.round(Math.max(80, Math.min(startWidth + (e.clientX - startX), 1200)))
+      updateAttributes({ width: next })
+    }
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  if (!src) {
+    return (
+      <NodeViewWrapper className="tessera-image tessera-image-empty" data-selected={selected}>
+        <span>{t('imageUploadFailed')}</span>
+      </NodeViewWrapper>
+    )
+  }
+
+  return (
+    <NodeViewWrapper
+      className="tessera-image"
+      data-align={align}
+      data-selected={selected}
+      data-gallery={galleryAttrs ? 'true' : undefined}
+      data-gallery-index={galleryAttrs?.['data-gallery-index']}
+      data-gallery-size={galleryAttrs?.['data-gallery-size']}
+    >
+      <div className="tessera-image-frame" style={width ? { width: `${width}px` } : undefined}>
+        <img
+          ref={imgRef}
+          src={src}
+          alt={alt ?? ''}
+          draggable={false}
+          style={{ cursor: 'zoom-in' }}
+          onClick={e => {
+            e.stopPropagation()
+            setPreview(src)
+          }}
+        />
+        <div className="tessera-image-resize" onPointerDown={startResize} title="↔" />
+      </div>
+      {preview
+        ? createPortal(
+            <div className="tessera-lightbox" onClick={() => setPreview(null)}>
+              <img src={preview} alt={alt ?? ''} />
+            </div>,
+            document.body,
+          )
+        : null}
+      <div className="tessera-image-align">
+        <button type="button" title={t('imageAlignLeft')} data-on={align === 'left'} onClick={() => updateAttributes({ align: 'left' })}>
+          ⭰
+        </button>
+        <button type="button" title={t('imageAlignCenter')} data-on={align === 'center'} onClick={() => updateAttributes({ align: 'center' })}>
+          ⭤
+        </button>
+        <button type="button" title={t('imageAlignFull')} data-on={align === 'full'} onClick={() => updateAttributes({ align: 'full' })}>
+          ⭥
+        </button>
+      </div>
+    </NodeViewWrapper>
+  )
+}
+
+/** Binding-level image block: core schema + React NodeView. */
+export const ImageBlockView = ImageBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(AiImageNodeView)
+  },
+})

package/src/Panels.tsx

@@ -0,0 +1,205 @@
+import { useContext, useEffect, useRef, useState } from 'react'
+import { findReplaceKey } from '@tessera-editor/core'
+import type { FindReplaceState } from '@tessera-editor/core'
+import type { SuggestionSession } from '@tessera-editor/ai'
+import { TesseraContext } from './context'
+
+/** ⌘F find & replace panel — drives the core findReplace commands. */
+export function FindReplacePanel() {
+  const { editor, t } = useContext(TesseraContext)!
+  const [visible, setVisible] = useState(false)
+  const [query, setQuery] = useState('')
+  const [replacement, setReplacement] = useState('')
+  const [count, setCount] = useState(0)
+  const [active, setActive] = useState(0)
+  const queryRef = useRef(query)
+  queryRef.current = query
+
+  useEffect(() => {
+    const open = () => {
+      setVisible(true)
+      requestAnimationFrame(() => {
+        const input = document.querySelector<HTMLInputElement>('.tessera-find-input')
+        input?.focus()
+      })
+    }
+    editor.on('tessera:findPanel', open)
+
+    const sync = () => {
+      const s = findReplaceKey.getState(editor.state) as FindReplaceState | undefined
+      if (!s) {
+        return
+      }
+      setVisible(s.visible)
+      setCount(s.matches.length)
+      setActive(s.active)
+      if (s.query !== queryRef.current && !s.visible) {
+        setQuery(s.query)
+      }
+    }
+    editor.on('transaction', sync)
+    return () => {
+      editor.off('tessera:findPanel', open)
+      editor.off('transaction', sync)
+    }
+  }, [editor])
+
+  if (!visible) {
+    return null
+  }
+
+  const updateQuery = (value: string) => {
+    setQuery(value)
+    editor.commands.setFindQuery(value)
+  }
+
+  return (
+    <div className="tessera-find-panel" data-testid="find-panel">
+      <input
+        className="tessera-find-input"
+        autoFocus
+        value={query}
+        placeholder={t('findPlaceholder')}
+        onChange={e => updateQuery(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter') {
+            editor.commands.findNext()
+          }
+          if (e.key === 'Escape') {
+            editor.commands.closeFindPanel()
+          }
+        }}
+      />
+      <span className="tessera-find-count">{count > 0 ? `${active + 1}/${count}` : '0'}</span>
+      <button type="button" title={t('findPrev')} onClick={() => editor.commands.findPrev()}>
+        ↑
+      </button>
+      <button type="button" title={t('findNext')} onClick={() => editor.commands.findNext()}>
+        ↓
+      </button>
+      <input
+        value={replacement}
+        placeholder={t('replacePlaceholder')}
+        onChange={e => setReplacement(e.target.value)}
+      />
+      <button type="button" onClick={() => editor.commands.replaceCurrent(replacement)}>
+        {t('replaceOne')}
+      </button>
+      <button type="button" onClick={() => editor.commands.replaceAll(replacement)}>
+        {t('replaceAll')}
+      </button>
+      <button type="button" className="tessera-find-close" title={t('findClose')} onClick={() => editor.commands.closeFindPanel()}>
+        ×
+      </button>
+    </div>
+  )
+}
+
+/** AI 问答面板（/ask 唤起）：流式回答，不写文档。 */
+export function AskPanel() {
+  const { editor, t, ai } = useContext(TesseraContext)!
+  const [visible, setVisible] = useState(false)
+  const [question, setQuestion] = useState('')
+  const [answer, setAnswer] = useState('')
+  const [thinking, setThinking] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const open = () => setVisible(true)
+    editor.on('tessera:askPanel', open)
+    return () => {
+      editor.off('tessera:askPanel', open)
+    }
+  }, [editor])
+
+  if (!visible) {
+    return null
+  }
+
+  const ask = async () => {
+    if (!ai || !question.trim()) {
+      return
+    }
+    setThinking(true)
+    setAnswer('')
+    setError(null)
+    try {
+      await ai.ask(question, { onToken: token => setAnswer(prev => prev + token) })
+    } catch (err) {
+      setError(String(err))
+    } finally {
+      setThinking(false)
+    }
+  }
+
+  return (
+    <div className="tessera-ask-panel" data-testid="ask-panel">
+      <div className="tessera-ask-header">
+        <span>{t('aiTitle')}</span>
+        <button type="button" onClick={() => setVisible(false)}>
+          ×
+        </button>
+      </div>
+      {ai ? null : <div className="tessera-ask-error">{t('aiRuntimeMissing')}</div>}
+      <div className="tessera-ask-body">
+        {answer ? <div className="tessera-ask-answer">{answer}</div> : null}
+        {thinking ? <div className="tessera-ask-thinking">{t('aiThinking')}</div> : null}
+        {error ? <div className="tessera-ask-error">{error}</div> : null}
+      </div>
+      <div className="tessera-ask-input">
+        <input
+          value={question}
+          placeholder={t('aiAskPlaceholder')}
+          onChange={e => setQuestion(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              ask()
+            }
+          }}
+        />
+        <button type="button" disabled={!ai || thinking || !question.trim()} onClick={ask}>
+          {t('aiSend')}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/** "Agent 起草、人批准"：pending 建议存在时显示审阅条。 */
+export function SuggestionBar({
+  session,
+  onClear,
+}: {
+  session: SuggestionSession | null
+  onClear: () => void
+}) {
+  const { t } = useContext(TesseraContext)!
+  if (!session) {
+    return null
+  }
+  return (
+    <div className="tessera-suggestion-bar" data-testid="suggestion-bar">
+      <span className="tessera-suggestion-label">✨ {t('aiStreaming')}</span>
+      <button
+        type="button"
+        className="tessera-suggestion-accept"
+        onClick={() => {
+          session.accept()
+          onClear()
+        }}
+      >
+        {t('aiAccept')}
+      </button>
+      <button
+        type="button"
+        className="tessera-suggestion-reject"
+        onClick={() => {
+          session.reject()
+          onClear()
+        }}
+      >
+        {t('aiReject')}
+      </button>
+    </div>
+  )
+}