@tessera-editor/react 0.1.0

package/src/SelectionToolbar.tsx

@@ -0,0 +1,367 @@
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { docToMarkdown } from '@tessera-editor/core'
+import { IMPROVE_PRESETS, improveSelection } from '@tessera-editor/ai'
+import type { SuggestionSession } from '@tessera-editor/ai'
+import { TesseraContext } from './context'
+import { useTesseraPortalRoot } from './portal'
+import { CommentComposer } from './CommentPanel'
+
+/**
+ * Selection toolbar (acceptance §4): 划词浮现。按钮序：Improve(AI) / B / I /
+ * U / S / 行内代码 / 颜色 / 高亮(5色) / 链接 / 转折叠块 / More(Copy as Markdown)。
+ */
+
+const TEXT_COLORS = ['#262629', '#d9414f', '#e8912d', '#31a56f', '#2f9ea8', '#4f6df5', '#7a4fd8', '#98a0ab']
+const HIGHLIGHT_COLORS = ['#fff2a8', '#d6eaff', '#d3f5df', '#fdd9e7', '#e6dcff']
+
+type PopoverKind = null | 'color' | 'highlight' | 'link' | 'improve' | 'more' | 'comment'
+
+/**
+ * Popover container that flips above the toolbar when there is not enough
+ * room below (Slite-style placement). Measured in a layout effect so the
+ * flip happens before the first paint.
+ */
+function FlipPopover({
+  posKey,
+  className = '',
+  testId,
+  children,
+}: {
+  posKey: unknown
+  className?: string
+  testId?: string
+  children: ReactNode
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [placement, setPlacement] = useState<'bottom' | 'top'>('bottom')
+  const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined)
+
+  useLayoutEffect(() => {
+    const pop = ref.current
+    const toolbar = pop?.parentElement
+    if (!pop || !toolbar) {
+      return
+    }
+    const rect = toolbar.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    const natural = pop.offsetHeight
+    const flip = spaceBelow < natural + 12 && spaceAbove > spaceBelow
+    setPlacement(flip ? 'top' : 'bottom')
+    const avail = (flip ? spaceAbove : spaceBelow) - 12
+    setMaxHeight(avail > 100 && avail < natural ? avail : undefined)
+  }, [posKey])
+
+  return (
+    <div
+      ref={ref}
+      className={`tessera-popover${className ? ` ${className}` : ''}`}
+      data-placement={placement}
+      style={maxHeight ? { maxHeight, overflowY: 'auto' } : undefined}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function SelectionToolbar({ onSession }: { onSession: (session: SuggestionSession | null) => void }) {
+  const { editor, t, ai } = useContext(TesseraContext)!
+  const [style, setStyle] = useState<CSSProperties | null>(null)
+  const [popover, setPopover] = useState<PopoverKind>(null)
+  const [linkValue, setLinkValue] = useState('')
+  const composingRef = useRef(false)
+  const portalRoot = useTesseraPortalRoot(editor)
+
+  const reposition = useCallback(() => {
+    if (composingRef.current || !editor.isFocused) {
+      setStyle(null)
+      return
+    }
+    const { from, to, empty } = editor.state.selection
+    if (empty) {
+      setStyle(null)
+      return
+    }
+    if (!editor.state.doc.textBetween(from, to, ' ').trim()) {
+      setStyle(null)
+      return
+    }
+    const start = editor.view.coordsAtPos(from)
+    const end = editor.view.coordsAtPos(to)
+    const left = (Math.min(start.left, end.left) + Math.min(Math.max(start.left, end.left), window.innerWidth - 20)) / 2
+    const top = Math.max(8, start.top - 48)
+    setStyle({
+      position: 'fixed',
+      top: `${top}px`,
+      left: `${Math.max(8, Math.min(left, window.innerWidth - 380))}px`,
+    })
+  }, [editor])
+
+  useEffect(() => {
+    const hide = () => {
+      setStyle(null)
+      setPopover(null)
+    }
+    const onSelectionUpdate = () => {
+      if (!editor.state.selection.empty) {
+        const existing = editor.getAttributes('link').href
+        setLinkValue(typeof existing === 'string' ? existing : '')
+      } else {
+        setPopover(null)
+      }
+      reposition()
+    }
+    const onCompositionStart = () => {
+      composingRef.current = true
+      setStyle(null)
+      setPopover(null)
+    }
+    const onCompositionEnd = () => {
+      composingRef.current = false
+      requestAnimationFrame(reposition)
+    }
+
+    const dom = editor.view.dom
+    editor.on('selectionUpdate', onSelectionUpdate)
+    editor.on('focus', reposition)
+    editor.on('blur', hide)
+    dom.addEventListener('compositionstart', onCompositionStart)
+    dom.addEventListener('compositionend', onCompositionEnd)
+    window.addEventListener('scroll', hide, true)
+    return () => {
+      editor.off('selectionUpdate', onSelectionUpdate)
+      editor.off('focus', reposition)
+      editor.off('blur', hide)
+      dom.removeEventListener('compositionstart', onCompositionStart)
+      dom.removeEventListener('compositionend', onCompositionEnd)
+      window.removeEventListener('scroll', hide, true)
+    }
+  }, [editor, reposition])
+
+  const chain = () => editor.chain().focus()
+
+  if (!style || !portalRoot) {
+    return null
+  }
+
+  const currentColor = (editor.getAttributes('textStyle').color as string | undefined) ?? null
+
+  return createPortal(
+    <div
+      className="tessera-selection-toolbar"
+      style={style}
+      data-testid="selection-toolbar"
+      onMouseDown={e => e.preventDefault()}
+    >
+      {ai ? (
+        <TbBtn title={t('tooltipImprove')} className="tessera-tb-ai" onClick={() => setPopover(p => (p === 'improve' ? null : 'improve'))}>
+          ✨
+        </TbBtn>
+      ) : null}
+      <TbBtn title={t('tooltipBold')} active={editor.isActive('bold')} onClick={() => chain().toggleBold().run()}>
+        <b>B</b>
+      </TbBtn>
+      <TbBtn title={t('tooltipItalic')} active={editor.isActive('italic')} onClick={() => chain().toggleItalic().run()}>
+        <i>I</i>
+      </TbBtn>
+      <TbBtn title={t('tooltipUnderline')} active={editor.isActive('underline')} onClick={() => chain().toggleUnderline().run()}>
+        <u>U</u>
+      </TbBtn>
+      <TbBtn title={t('tooltipStrike')} active={editor.isActive('strike')} onClick={() => chain().toggleStrike().run()}>
+        <s>S</s>
+      </TbBtn>
+      <TbBtn title={t('tooltipCode')} active={editor.isActive('code')} onClick={() => chain().toggleCode().run()}>
+        {'</>'}
+      </TbBtn>
+      <TbBtn title={t('tooltipColor')} active={!!currentColor} onClick={() => setPopover(p => (p === 'color' ? null : 'color'))}>
+        <span className="tessera-tb-colorchip" style={{ background: currentColor ?? '#262629' }} />
+      </TbBtn>
+      <TbBtn title={t('tooltipHighlight')} active={editor.isActive('highlight')} onClick={() => setPopover(p => (p === 'highlight' ? null : 'highlight'))}>
+        <span className="tessera-tb-colorchip" style={{ background: '#fff2a8' }} />
+      </TbBtn>
+      <TbBtn title={t('tooltipLink')} active={editor.isActive('link')} onClick={() => setPopover(p => (p === 'link' ? null : 'link'))}>
+        🔗
+      </TbBtn>
+      <TbBtn
+        title={t('tooltipCommentV11')}
+        active={editor.isActive('comment')}
+        onClick={() => setPopover(p => (p === 'comment' ? null : 'comment'))}
+      >
+        💬
+      </TbBtn>
+      <TbBtn title={t('tooltipTurnCollapsible')} onClick={() => chain().insertCollapsible().run()}>
+        ▸
+      </TbBtn>
+      <TbBtn title={t('tooltipMore')} onClick={() => setPopover(p => (p === 'more' ? null : 'more'))}>
+        ⋯
+      </TbBtn>
+
+      {popover === 'color' ? (
+        <FlipPopover posKey={style}>
+          <button type="button" className="tessera-color-swatch tessera-color-none" title={t('colorDefault')} onClick={() => chain().unsetColor().run()} />
+          {TEXT_COLORS.map(color => (
+            <button key={color} type="button" className="tessera-color-swatch" style={{ background: color }} onClick={() => chain().setColor(color).run()} />
+          ))}
+        </FlipPopover>
+      ) : null}
+
+      {popover === 'highlight' ? (
+        <FlipPopover posKey={style}>
+          <button type="button" className="tessera-color-swatch tessera-color-none" title={t('highlightNone')} onClick={() => chain().unsetHighlight().run()} />
+          {HIGHLIGHT_COLORS.map(color => (
+            <button key={color} type="button" className="tessera-color-swatch" style={{ background: color }} onClick={() => chain().toggleHighlight({ color }).run()} />
+          ))}
+        </FlipPopover>
+      ) : null}
+
+      {popover === 'link' ? (
+        <FlipPopover posKey={style} className="tessera-link-popover">
+          <input
+            autoFocus
+            value={linkValue}
+            placeholder={t('linkPlaceholder')}
+            onChange={e => setLinkValue(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter' && linkValue.trim()) {
+                chain().toggleLink({ href: linkValue.trim() }).run()
+                setPopover(null)
+              }
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              if (linkValue.trim()) {
+                chain().toggleLink({ href: linkValue.trim() }).run()
+              }
+              setPopover(null)
+            }}
+          >
+            {t('linkApply')}
+          </button>
+          {editor.isActive('link') ? (
+            <button
+              type="button"
+              className="tessera-danger"
+              onClick={() => {
+                chain().unsetLink().run()
+                setPopover(null)
+              }}
+            >
+              {t('linkRemove')}
+            </button>
+          ) : null}
+        </FlipPopover>
+      ) : null}
+
+      {popover === 'more' ? (
+        <FlipPopover posKey={style} className="tessera-popover-menu">
+          <button
+            type="button"
+            onClick={async () => {
+              const { to } = editor.state.selection
+              const start = editor.state.selection.$from.before(1)
+              const sliced = editor.state.doc.cut(start, to)
+              await navigator.clipboard.writeText(docToMarkdown(sliced, editor.state.schema))
+              setPopover(null)
+            }}
+          >
+            {t('tooltipCopyMarkdown')}
+          </button>
+        </FlipPopover>
+      ) : null}
+
+      {popover === 'improve' ? <ImprovePopover posKey={style} onSession={onSession} onClose={() => setPopover(null)} /> : null}
+      {popover === 'comment' ? <CommentComposer onClose={() => setPopover(null)} /> : null}
+    </div>,
+    portalRoot,
+  )
+}
+
+function TbBtn({
+  title,
+  active,
+  className,
+  onClick,
+  children,
+}: {
+  title: string
+  active?: boolean
+  className?: string
+  onClick: () => void
+  children: ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      className={`tessera-tb-btn${className ? ` ${className}` : ''}`}
+      data-active={active ?? false}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+function ImprovePopover({
+  posKey,
+  onSession,
+  onClose,
+}: {
+  posKey: unknown
+  onSession: (s: SuggestionSession | null) => void
+  onClose: () => void
+}) {
+  const { editor, t, locale, ai } = useContext(TesseraContext)!
+  const [instruction, setInstruction] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const run = async (presetInstruction?: string) => {
+    if (!ai) {
+      setError(t('aiRuntimeMissing'))
+      return
+    }
+    onClose()
+    setBusy(true)
+    try {
+      const session = await improveSelection(editor, ai.runtime, { instruction: presetInstruction })
+      onSession(session)
+    } catch (err) {
+      setError(String(err))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <FlipPopover posKey={posKey} className="tessera-improve-popover" testId="improve-popover">
+      {IMPROVE_PRESETS.map(preset => (
+        <button key={preset.id} type="button" disabled={busy} onClick={() => run(preset.instruction)}>
+          {locale === 'zh-CN' ? preset.labelZh : preset.labelEn}
+        </button>
+      ))}
+      <div className="tessera-improve-custom">
+        <input
+          value={instruction}
+          placeholder={t('aiImprovePrompt')}
+          onChange={e => setInstruction(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && instruction.trim()) {
+              run(instruction.trim())
+            }
+          }}
+        />
+        <button type="button" disabled={busy || !instruction.trim()} onClick={() => run(instruction.trim())}>
+          {t('aiImproveRun')}
+        </button>
+      </div>
+      {error ? <div className="tessera-popover-error">{error}</div> : null}
+    </FlipPopover>
+  )
+}

package/src/SlashMenu.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useImperativeHandle, useRef, useState, forwardRef } from 'react'
+import type { CSSProperties } from 'react'
+import type { Editor } from '@tiptap/core'
+import { ReactRenderer } from '@tiptap/react'
+import type { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion'
+import type { SlashMenuItem, TesseraTranslator } from '@tessera-editor/core'
+
+/**
+ * Slash menu UI (acceptance §1): "/" 唤起、输入过滤（core 层完成）、
+ * 上下键导航、Return 插入、右侧显示快捷键、分组展示。
+ */
+
+export interface SlashMenuViewProps extends SuggestionProps<SlashMenuItem> {
+  t: TesseraTranslator
+}
+
+export const SlashMenuView = forwardRef<{ onKeyDown: (props: SuggestionKeyDownProps) => boolean }, SlashMenuViewProps>(
+  function SlashMenuView({ items, command, clientRect, t }, ref) {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const listRef = useRef<HTMLDivElement>(null)
+    const [rect, setRect] = useState<DOMRect | null>(null)
+
+    useEffect(() => {
+      setRect(clientRect?.() ?? null)
+    }, [items, clientRect])
+
+    useEffect(() => {
+      setSelectedIndex(0)
+    }, [items])
+
+    useEffect(() => {
+      listRef.current?.querySelector<HTMLElement>('[data-selected="true"]')?.scrollIntoView({ block: 'nearest' })
+    }, [selectedIndex])
+
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === 'ArrowDown') {
+          setSelectedIndex(i => (i + 1) % Math.max(items.length, 1))
+          return true
+        }
+        if (event.key === 'ArrowUp') {
+          setSelectedIndex(i => (i - 1 + Math.max(items.length, 1)) % Math.max(items.length, 1))
+          return true
+        }
+        if (event.key === 'Enter') {
+          const item = items[selectedIndex]
+          if (item) {
+            command(item)
+          }
+          return true
+        }
+        return false
+      },
+    }))
+
+    if (items.length === 0) {
+      return null
+    }
+
+    const groups = groupBy(items, item => item.group)
+    let flatIndex = -1
+
+    const style: CSSProperties = rect
+      ? (() => {
+          // flip by the MENU's max height, not the caret position: a menu
+          // opened mid-viewport would otherwise spill past the viewport bottom
+          const menuMax = 336 // max-height 320 + padding/border allowance
+          const fitsBelow = rect.bottom + 8 + menuMax <= window.innerHeight
+          const fitsAbove = rect.top - 8 - menuMax >= 0
+          const flip = !fitsBelow && fitsAbove
+          return {
+            position: 'fixed',
+            left: `${Math.min(rect.left, window.innerWidth - 340)}px`,
+            top: flip ? undefined : `${Math.min(rect.bottom + 8, window.innerHeight - menuMax)}px`,
+            bottom: flip ? `${window.innerHeight - rect.top + 8}px` : undefined,
+            width: 320,
+          }
+        })()
+      : { position: 'fixed', left: -9999, top: -9999 }
+
+    return (
+      <div className="tessera-slash-menu" style={style} data-testid="slash-menu">
+        {Array.from(groups.entries()).map(([group, groupItems]) => (
+          <div key={group} className="tessera-slash-group">
+            <div className="tessera-slash-group-title">
+              {group === 'ai' ? t('groupAi') : group === 'advanced' ? t('groupAdvanced') : t('groupBasic')}
+            </div>
+            {groupItems.map(item => {
+              flatIndex += 1
+              const idx = flatIndex
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  className="tessera-slash-item"
+                  data-selected={idx === selectedIndex}
+                  onMouseEnter={() => setSelectedIndex(idx)}
+                  onClick={() => command(item)}
+                >
+                  <span className="tessera-slash-item-title">{item.title}</span>
+                  <span className="tessera-slash-item-desc">{item.description}</span>
+                  {item.shortcut ? <span className="tessera-slash-item-shortcut">{item.shortcut}</span> : null}
+                </button>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    )
+  },
+)
+
+function groupBy<T>(items: T[], key: (item: T) => string): Map<string, T[]> {
+  const map = new Map<string, T[]>()
+  for (const item of items) {
+    const k = key(item)
+    const list = map.get(k) ?? []
+    list.push(item)
+    map.set(k, list)
+  }
+  return map
+}
+
+/** Suggestion render factory: mounts the React view in a body-level wrapper. */
+export function createSlashRenderer(t: TesseraTranslator) {
+  return () => {
+    let renderer: ReactRenderer | null = null
+    let wrapper: HTMLDivElement | null = null
+
+    return {
+      onStart: (props: SuggestionProps<SlashMenuItem>) => {
+        renderer = new ReactRenderer(SlashMenuView, {
+          props: { ...props, t },
+          editor: props.editor as Editor,
+        })
+        wrapper = document.createElement('div')
+        wrapper.className = 'tessera-slash-wrapper'
+        wrapper.appendChild(renderer.element)
+        // theme tokens live on .tessera-root — a body portal renders the menu
+        // with unresolved (transparent) chrome
+        const host = props.editor.view.dom.closest('.tessera-root') ?? document.body
+        host.appendChild(wrapper)
+      },
+      onUpdate: (props: SuggestionProps<SlashMenuItem>) => {
+        renderer?.updateProps({ ...props, t })
+      },
+      onKeyDown: (props: SuggestionKeyDownProps) => {
+        if (props.event.key === 'Escape') {
+          wrapper?.remove()
+          renderer?.destroy()
+          renderer = null
+          wrapper = null
+          return true
+        }
+        return (renderer?.ref as { onKeyDown?: (p: SuggestionKeyDownProps) => boolean } | null)?.onKeyDown?.(props) ?? false
+      },
+      onExit: () => {
+        wrapper?.remove()
+        renderer?.destroy()
+        renderer = null
+        wrapper = null
+      },
+    }
+  }
+}