@tessera-editor/react 0.1.0

package/src/CommentPanel.tsx

@@ -0,0 +1,192 @@
+import { useContext, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { getCommentStore, getIdentityService, listCommentRanges } from '@tessera-editor/core'
+import type { CommentThread } from '@tessera-editor/core'
+import { TesseraContext } from './context'
+import { useTesseraPortalRoot } from './portal'
+
+/**
+ * Inline comments (v1.1): comment composer on selection (⌘⌥M or the 💬
+ * toolbar button), side panel with threads in document order, resolve /
+ * delete, ↑/↓ thread navigation. Data flows through the injected
+ * CommentStore + IdentityService.
+ */
+
+interface ThreadView extends CommentThread {
+  from: number
+}
+
+function uid(prefix: string): string {
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
+}
+
+export function CommentPanel() {
+  const { editor, t } = useContext(TesseraContext)!
+  const [visible, setVisible] = useState(false)
+  const [threads, setThreads] = useState<ThreadView[]>([])
+
+  const refresh = async () => {
+    const store = getCommentStore(editor)
+    if (!store) {
+      return
+    }
+    const all = await store.list()
+    const ranges = listCommentRanges(editor.state)
+    const views: ThreadView[] = []
+    for (const range of ranges) {
+      const thread = all.find(tr => tr.id === range.threadId)
+      if (thread) {
+        views.push({ ...thread, from: range.from })
+      }
+    }
+    views.sort((a, b) => a.from - b.from)
+    setThreads(views)
+  }
+
+  useEffect(() => {
+    const open = () => {
+      setVisible(true)
+      void refresh()
+    }
+    editor.on('tessera:commentPanel', open)
+    editor.on('transaction', refresh)
+    return () => {
+      editor.off('tessera:commentPanel', open)
+      editor.off('transaction', refresh)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor])
+
+  if (!visible) {
+    return null
+  }
+
+  const store = getCommentStore(editor)
+  const identity = getIdentityService(editor)
+  const me = identity?.getCurrentUser() ?? { id: 'anonymous', name: 'Anonymous' }
+
+  const toggleResolve = async (thread: ThreadView) => {
+    if (!store) {
+      return
+    }
+    const next = { ...thread, resolved: !thread.resolved }
+    delete (next as Partial<ThreadView>).from
+    await store.upsert(next as CommentThread)
+    editor.commands.setCommentResolved(thread.id, next.resolved)
+    await refresh()
+  }
+
+  const removeThread = async (thread: ThreadView) => {
+    if (!store) {
+      return
+    }
+    await store.remove(thread.id)
+    editor.commands.removeCommentThread(thread.id)
+    await refresh()
+  }
+
+  return (
+    <div className="tessera-comment-panel" data-testid="comment-panel">
+      <div className="tessera-ask-header">
+        <span>
+          {t('commentTitle')} · {threads.filter(x => !x.resolved).length}
+        </span>
+        <div className="tessera-history-actions">
+          <button type="button" title="↑" onClick={() => editor.commands.focusNextCommentThread()}>
+            ↑
+          </button>
+          <button type="button" title="↓" onClick={() => editor.commands.focusNextCommentThread()}>
+            ↓
+          </button>
+          <button type="button" onClick={() => setVisible(false)}>
+            ×
+          </button>
+        </div>
+      </div>
+      {!store ? <div className="tessera-ask-error">CommentStore not injected</div> : null}
+      <div className="tessera-ask-body">
+        {threads.length === 0 ? <div className="tessera-toc-empty">{t('commentEmpty')}</div> : null}
+        {threads.map(thread => (
+          <div key={thread.id} className={`tessera-thread${thread.resolved ? ' tessera-thread--resolved' : ''}`}>
+            <div className="tessera-thread-quote">“{thread.quote}”</div>
+            {thread.entries.map(entry => (
+              <div key={entry.id} className="tessera-thread-entry">
+                <span className="tessera-thread-author">{entry.authorName}</span>
+                <span className="tessera-thread-text">{entry.text}</span>
+              </div>
+            ))}
+            <div className="tessera-thread-actions">
+              <button type="button" onClick={() => void toggleResolve(thread)}>
+                {thread.resolved ? t('commentReopen') : t('commentResolve')}
+              </button>
+              <button type="button" className="tessera-danger" onClick={() => void removeThread(thread)}>
+                {t('commentDelete')}
+              </button>
+              {thread.resolved ? <span className="tessera-thread-badge">{t('commentResolvedBadge')}</span> : null}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="tessera-comment-hint">⌘⌥M / 💬 · {me.name}</div>
+    </div>
+  )
+}
+
+/** Selection-toolbar composer popover: quote + comment → thread + mark. */
+export function CommentComposer({ onClose }: { onClose: () => void }) {
+  const { editor, t } = useContext(TesseraContext)!
+  const [text, setText] = useState('')
+  const portalRoot = useTesseraPortalRoot(editor)
+  const quote = editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to, ' ')
+
+  const submit = async () => {
+    if (!text.trim()) {
+      return
+    }
+    const store = getCommentStore(editor)
+    if (!store) {
+      return
+    }
+    const identity = getIdentityService(editor)
+    const me = identity?.getCurrentUser() ?? { id: 'anonymous', name: 'Anonymous' }
+    const thread: CommentThread = {
+      id: uid('thread'),
+      quote,
+      resolved: false,
+      createdAt: Date.now(),
+      entries: [{ id: uid('c'), authorId: me.id, authorName: me.name, text: text.trim(), ts: Date.now() }],
+    }
+    await store.upsert(thread)
+    editor.commands.addCommentThread(thread.id)
+    onClose()
+    editor.emit('tessera:commentPanel', {})
+  }
+
+  if (!portalRoot) {
+    return null
+  }
+
+  return createPortal(
+    <div className="tessera-popover tessera-comment-composer" data-testid="comment-composer">
+      <div className="tessera-thread-quote">“{quote.slice(0, 60)}{quote.length > 60 ? '…' : ''}”</div>
+      <textarea
+        autoFocus
+        value={text}
+        placeholder={t('commentPlaceholder')}
+        onChange={e => setText(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            void submit()
+          }
+        }}
+      />
+      <div className="tessera-comment-composer-actions">
+        <button type="button" disabled={!text.trim()} onClick={() => void submit()}>
+          {t('commentSend')}
+        </button>
+      </div>
+    </div>,
+    portalRoot,
+  )
+}

package/src/EmbedTocViews.tsx

@@ -0,0 +1,120 @@
+import { useContext, useEffect, useState } from 'react'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import type { NodeViewProps } from '@tiptap/react'
+import { EmbedBlock, TocBlock } from '@tessera-editor/core'
+import { TesseraContext } from './context'
+
+/** Sandboxed iframe embed (default: no scripts, no same-origin). */
+function EmbedView({ node, updateAttributes, selected }: NodeViewProps) {
+  const { t } = useContext(TesseraContext)!
+  const [url, setUrl] = useState(typeof node.attrs.src === 'string' ? node.attrs.src : '')
+  const src = typeof node.attrs.src === 'string' ? node.attrs.src : ''
+  const height = typeof node.attrs.height === 'number' ? node.attrs.height : 360
+
+  if (!src) {
+    return (
+      <NodeViewWrapper className="tessera-embed tessera-embed-empty" data-selected={selected}>
+        <input
+          className="tessera-embed-input"
+          value={url}
+          placeholder={t('embedPlaceholder')}
+          onChange={e => setUrl(e.target.value)}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              apply()
+            }
+          }}
+          contentEditable={false}
+        />
+        <button type="button" className="tessera-embed-apply" onClick={apply} contentEditable={false}>
+          {t('embedApply')}
+        </button>
+      </NodeViewWrapper>
+    )
+  }
+
+  function apply() {
+    const next = url.trim()
+    if (/^https?:\/\/.+/.test(next)) {
+      updateAttributes({ src: next })
+    }
+  }
+
+  return (
+    <NodeViewWrapper className="tessera-embed" data-selected={selected}>
+      <div className="tessera-embed-frame" style={{ height: `${height}px` }} contentEditable={false}>
+        <iframe
+          src={src}
+          title={node.attrs.title ?? src}
+          sandbox=""
+          referrerPolicy="no-referrer"
+          loading="lazy"
+        />
+      </div>
+      <a className="tessera-embed-link" href={src} target="_blank" rel="noreferrer" contentEditable={false}>
+        {t('embedOpen')} ↗
+      </a>
+    </NodeViewWrapper>
+  )
+}
+
+/** Table of contents derived live from document headings. */
+function TocView({ editor }: NodeViewProps) {
+  const { t } = useContext(TesseraContext)!
+  const [items, setItems] = useState<{ id: string; level: number; text: string }[]>([])
+
+  useEffect(() => {
+    const scan = () => {
+      const found: { id: string; level: number; text: string }[] = []
+      editor.state.doc.forEach((node, _offset, index) => {
+        void index
+        if (node.type.name === 'heading' && typeof node.attrs.id === 'string') {
+          found.push({ id: node.attrs.id, level: Number(node.attrs.level), text: node.textContent })
+        }
+      })
+      setItems(found)
+    }
+    scan()
+    editor.on('transaction', scan)
+    return () => {
+      editor.off('transaction', scan)
+    }
+  }, [editor])
+
+  return (
+    <NodeViewWrapper className="tessera-toc">
+      <div className="tessera-toc-title">{t('itemToc')}</div>
+      {items.length === 0 ? (
+        <div className="tessera-toc-empty">{t('tocEmpty')}</div>
+      ) : (
+        <div className="tessera-toc-list" contentEditable={false}>
+          {items.map(item => (
+            <button
+              key={item.id}
+              type="button"
+              className="tessera-toc-item"
+              data-level={item.level}
+              onClick={() => {
+                document.querySelector(`[data-id="${item.id}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+              }}
+            >
+              {item.text}
+            </button>
+          ))}
+        </div>
+      )}
+    </NodeViewWrapper>
+  )
+}
+
+export const EmbedBlockView = EmbedBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(EmbedView)
+  },
+})
+
+export const TocBlockView = TocBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(TocView)
+  },
+})

package/src/EmojiMenu.tsx

@@ -0,0 +1,134 @@
+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 { EmojiItem } from '@tessera-editor/core'
+
+/**
+ * Emoji picker UI (acceptance §2, v1.1): `:` opens a grid of emoji filtered
+ * by name/keywords; arrows + Return insert, click inserts, Esc closes.
+ * Same mounting contract as the slash menu (wrapper appended into
+ * .tessera-root so theme tokens resolve).
+ */
+
+export const EmojiMenuView = forwardRef<
+  { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
+  SuggestionProps<EmojiItem>
+>(function EmojiMenuView({ items, command, clientRect }, ref) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [rect, setRect] = useState<DOMRect | null>(null)
+  const gridRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setRect(clientRect?.() ?? null)
+  }, [items, clientRect])
+
+  useEffect(() => {
+    setSelectedIndex(0)
+  }, [items])
+
+  useEffect(() => {
+    gridRef.current
+      ?.querySelectorAll<HTMLElement>('.tessera-emoji-item')
+      [selectedIndex]?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIndex])
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: SuggestionKeyDownProps) => {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+        setSelectedIndex(i => (i + 1) % Math.max(items.length, 1))
+        return true
+      }
+      if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+        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 menuMax = 264
+  const style: CSSProperties = rect
+    ? (() => {
+        const fitsBelow = rect.bottom + 8 + menuMax <= window.innerHeight
+        const fitsAbove = rect.top - 8 - menuMax >= 0
+        const flip = !fitsBelow && fitsAbove
+        return {
+          left: `${Math.min(rect.left, window.innerWidth - 300)}px`,
+          top: flip ? undefined : `${Math.min(rect.bottom + 8, window.innerHeight - menuMax)}px`,
+          bottom: flip ? `${window.innerHeight - rect.top + 8}px` : undefined,
+        }
+      })()
+    : { left: -9999, top: -9999 }
+
+  return (
+    <div ref={gridRef} className="tessera-emoji-menu" style={style} data-testid="emoji-menu">
+      {items.map((item, i) => (
+        <button
+          key={item.name}
+          type="button"
+          className="tessera-emoji-item"
+          title={`:${item.name}:`}
+          data-selected={i === selectedIndex}
+          onMouseEnter={() => setSelectedIndex(i)}
+          onClick={() => command(item)}
+        >
+          {item.char}
+        </button>
+      ))}
+    </div>
+  )
+})
+
+/** Suggestion render factory: mounts the grid into the component root. */
+export function createEmojiRenderer() {
+  return () => {
+    let renderer: ReactRenderer | null = null
+    let wrapper: HTMLDivElement | null = null
+
+    return {
+      onStart: (props: SuggestionProps<EmojiItem>) => {
+        renderer = new ReactRenderer(EmojiMenuView, {
+          props: { ...props },
+          editor: props.editor as Editor,
+        })
+        wrapper = document.createElement('div')
+        wrapper.className = 'tessera-emoji-wrapper'
+        wrapper.appendChild(renderer.element)
+        const host = props.editor.view.dom.closest('.tessera-root') ?? document.body
+        host.appendChild(wrapper)
+      },
+      onUpdate: (props: SuggestionProps<EmojiItem>) => {
+        renderer?.updateProps({ ...props })
+      },
+      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
+      },
+    }
+  }
+}

package/src/EmptyLineToolbar.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { CSSProperties } from 'react'
+import { createPortal } from 'react-dom'
+import { defaultSlashItems } from '@tessera-editor/core'
+import type { SlashMenuItem, TesseraTranslator } from '@tessera-editor/core'
+import { aiSlashItems } from '@tessera-editor/ai'
+import type { Editor } from '@tiptap/react'
+import { TesseraContext } from './context'
+import { useTesseraPortalRoot } from './portal'
+
+/**
+ * Slite-style empty-line toolbar (acceptance §5): appears when the caret sits
+ * in an EMPTY paragraph. Quick row + "›" expands the full block list (same
+ * items as the slash menu). NOT a Notion-style floating "+" button.
+ *
+ * IME guard: while an input method composition is active we neither show,
+ * hide, nor move the toolbar (M0 spike finding).
+ */
+
+function buildItems(editor: Editor, t: TesseraTranslator, hasAi: boolean): SlashMenuItem[] {
+  const base = defaultSlashItems(t)
+  if (!hasAi) {
+    return base
+  }
+  // AI items need a runtime; context provides it — reconstructed here via
+  // context injection from the parent (see useItems below).
+  return base
+}
+
+export function EmptyLineToolbar() {
+  const { editor, t, ai } = useContext(TesseraContext)!
+  const [style, setStyle] = useState<CSSProperties | null>(null)
+  const [expanded, setExpanded] = useState(false)
+  const [panelPlacement, setPanelPlacement] = useState<'bottom' | 'top'>('bottom')
+  const [panelMaxHeight, setPanelMaxHeight] = useState<number | undefined>(undefined)
+  const composingRef = useRef(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const portalRoot = useTesseraPortalRoot(editor)
+
+  const hideAll = useCallback(() => {
+    setStyle(null)
+    setExpanded(false)
+    editor.view.dom.removeAttribute('data-toolbar-line')
+  }, [editor])
+
+  const reposition = useCallback(() => {
+    const dom = editor.view.dom
+    if (composingRef.current || !editor.isFocused) {
+      setStyle(null)
+      dom.removeAttribute('data-toolbar-line')
+      return
+    }
+    const { $from, empty } = editor.state.selection
+    const isEmptyParagraph =
+      empty && $from.parent.type.name === 'paragraph' && $from.parent.content.size === 0
+    if (!isEmptyParagraph) {
+      setStyle(null)
+      setExpanded(false)
+      dom.removeAttribute('data-toolbar-line')
+      return
+    }
+    const coords = editor.view.coordsAtPos($from.pos)
+    // the toolbar is glued to the anchor line; once that line leaves the
+    // visible part of the editor (inner scroll or page scroll) it must go
+    const viewRect = dom.getBoundingClientRect()
+    if (
+      coords.top < Math.max(viewRect.top, 0) - 2 ||
+      coords.top > Math.min(viewRect.bottom, window.innerHeight) + 2
+    ) {
+      hideAll()
+      return
+    }
+    setStyle({
+      position: 'fixed',
+      // Float just ABOVE the empty line so the caret stays visible; the
+      // toolbar bottom sits a couple of pixels over the line's top edge.
+      top: `${Math.max(2, coords.top - 38)}px`,
+      left: `${coords.left}px`,
+    })
+    // hide the placeholder text while the toolbar owns this line
+    dom.setAttribute('data-toolbar-line', 'true')
+  }, [editor, hideAll])
+
+  useEffect(() => {
+    const hide = () => {
+      setStyle(null)
+      setExpanded(false)
+    }
+    const onCompositionStart = () => {
+      composingRef.current = true
+      setStyle(null)
+    }
+    const onCompositionEnd = () => {
+      composingRef.current = false
+      requestAnimationFrame(reposition)
+    }
+    // scroll inside our own panel (its scrollbar) must not close the menu;
+    // any other scroll keeps the toolbar glued to the anchor line via
+    // reposition (which hides it once the line leaves the viewport)
+    const onScroll = (event: Event) => {
+      const node = rootRef.current
+      if (node && event.target instanceof Node && node.contains(event.target)) {
+        return
+      }
+      requestAnimationFrame(reposition)
+    }
+
+    const dom = editor.view.dom
+    editor.on('selectionUpdate', reposition)
+    editor.on('focus', reposition)
+    editor.on('blur', hide)
+    dom.addEventListener('compositionstart', onCompositionStart)
+    dom.addEventListener('compositionend', onCompositionEnd)
+    window.addEventListener('scroll', onScroll, true)
+    return () => {
+      editor.off('selectionUpdate', reposition)
+      editor.off('focus', reposition)
+      editor.off('blur', hide)
+      dom.removeEventListener('compositionstart', onCompositionStart)
+      dom.removeEventListener('compositionend', onCompositionEnd)
+      window.removeEventListener('scroll', onScroll, true)
+    }
+  }, [editor, reposition])
+
+  // Slite-style placement: near the bottom of the viewport the panel opens
+  // upward and is clamped to the available space instead of spilling past
+  // the content edge
+  useLayoutEffect(() => {
+    const toolbar = rootRef.current
+    if (!expanded || !toolbar) {
+      setPanelPlacement('bottom')
+      setPanelMaxHeight(undefined)
+      return
+    }
+    const rect = toolbar.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    const natural = panelRef.current?.offsetHeight ?? 320
+    const flip = spaceBelow < natural + 12 && spaceAbove > spaceBelow
+    setPanelPlacement(flip ? 'top' : 'bottom')
+    const avail = (flip ? spaceAbove : spaceBelow) - 12
+    setPanelMaxHeight(avail > 120 && avail < natural ? avail : undefined)
+  }, [expanded, style])
+
+  if (!style || !portalRoot) {
+    return null
+  }
+
+  const items = buildItems(editor, t, !!ai)
+
+  const runItem = (item: SlashMenuItem) => {
+    const { $from } = editor.state.selection
+    item.command({ editor, range: { from: $from.pos, to: $from.pos } })
+    setExpanded(false)
+  }
+
+  return createPortal(
+    <div
+      ref={rootRef}
+      className="tessera-emptyline-toolbar"
+      style={style}
+      data-testid="empty-line-toolbar"
+      onMouseDown={e => e.preventDefault()}
+    >
+      <button type="button" className="tessera-tb-btn" title={t('itemText')} onClick={() => runItem(items.find(i => i.id === 'text')!)}>
+        ¶
+      </button>
+      <button type="button" className="tessera-tb-btn" title={t('itemH2')} onClick={() => runItem(items.find(i => i.id === 'h2')!)}>
+        H2
+      </button>
+      <button type="button" className="tessera-tb-btn" title={t('itemBullet')} onClick={() => runItem(items.find(i => i.id === 'bulletList')!)}>
+        •
+      </button>
+      <button type="button" className="tessera-tb-btn" title={t('itemTask')} onClick={() => runItem(items.find(i => i.id === 'taskList')!)}>
+        ☑
+      </button>
+      <button type="button" className="tessera-tb-btn" title={t('itemQuote')} onClick={() => runItem(items.find(i => i.id === 'quote')!)}>
+        ❝
+      </button>
+      <button type="button" className="tessera-tb-btn" title={t('itemCode')} onClick={() => runItem(items.find(i => i.id === 'codeBlock')!)}>
+        {'</>'}
+      </button>
+      <button
+        type="button"
+        className="tessera-tb-btn tessera-emptyline-expand"
+        title={t('emptyLineExpand')}
+        data-expanded={expanded}
+        onClick={() => setExpanded(v => !v)}
+      >
+        ›
+      </button>
+
+      {expanded ? (
+        <div
+          ref={panelRef}
+          className="tessera-emptyline-panel"
+          data-placement={panelPlacement}
+          style={panelMaxHeight ? { maxHeight: panelMaxHeight } : undefined}
+          data-testid="empty-line-panel"
+        >
+          {items.map(item => (
+            <button key={item.id} type="button" className="tessera-slash-item" onClick={() => runItem(item)}>
+              <span className="tessera-slash-item-title">{item.title}</span>
+              <span className="tessera-slash-item-desc">{item.description}</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>,
+    portalRoot,
+  )
+}
+
+export { aiSlashItems }