@lincyaw/workbench 0.1.0 → 0.2.0-rc.1

package/src/document-editor/DocumentBlockPreview.tsx

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import type { BlockPreviewCommand } from '@lincyaw/kernel'
+import { toBlockPreviewPlaybackCancelled, toBlockPreviewPlaybackRequest, toBlockPreviewPosition } from '@lincyaw/kernel'
+import { PmIconButton, PmIcon, PmSkeleton } from '../components.tsx'
+import { useWorkbench, useWorkbenchState } from '../context.tsx'
+import { prepareDocumentPreview } from '../document-preview.ts'
+import { DOCUMENT_EDITOR_MESSAGES } from './messages.ts'
+import { BLOCK_PREVIEW_MESSAGES } from './block-preview-messages.ts'
+import { documentBlockSection, DocumentStepNarration } from './DocumentStepNarration.tsx'
+import { DocumentBlockPlayback } from './block-playback.ts'
+import { ComponentPropertiesDialog } from './ComponentPropertiesDialog.tsx'
+import { COMPONENT_PROPERTY_MESSAGES } from '../component-property-messages.ts'
+
+interface Snapshot { address: string, revision: string }
+// `preparing`: the server is still building what the preview needs; it is asked again until ready.
+interface PreviewState { snapshot?: Snapshot, status: 'idle' | 'loading' | 'preparing' | 'ready' | 'failed', failure?: 'build' | 'display' }
+/** A read-only runtime is a custom native block, independent from the document's editable JSON and selection. */
+export function DocumentBlockPreview({ blockId, fallback }: { blockId: string, fallback?: ReactNode }) {
+  const workbench = useWorkbench()
+  const source = useWorkbenchState(state => state.authoring)
+  const directory = useWorkbenchState(state => state.document)
+  const documentView = useWorkbenchState(state => state.webView === 'document')
+  const dark = useWorkbenchState(state => state.isDark)
+  const locale = useWorkbenchState(state => state.locale), t = DOCUMENT_EDITOR_MESSAGES[locale], p = BLOCK_PREVIEW_MESSAGES[locale]
+  const position = useWorkbenchState(state => state.position)
+  const navigation = useWorkbenchState(state => state.documentPositionToken)
+  const navigationIntent = useWorkbenchState(state => state.documentPositionIntent)
+  const sectionId = source?.content && documentBlockSection(source.content, blockId)
+  const section = sectionId ? source?.content?.sections[sectionId] : undefined
+  const stepId = section?.stepOrder[position && position.section === sectionId ? position.step : 0] ?? section?.stepOrder[0]
+  const [narrationOpen, setNarrationOpen] = useState(() => Boolean(workbench.pendingDocumentField(blockId, source?.identity)
+    || source?.identity && stepId && (workbench.documentTimingDraft(stepId, 'minimumHoldMs', source.identity, source.reset) || workbench.documentTimingDraft(stepId, 'trailingPauseMs', source.identity, source.reset)))), narrationPanel = useId()
+  const root = useRef<HTMLElement>(null), viewport = useRef<HTMLDivElement>(null), frame = useRef<HTMLIFrameElement | null>(null)
+  const mountFrame = useCallback((element: HTMLIFrameElement | null) => {
+    frame.current = element
+    element?.toggleAttribute('inert', true)
+  }, [])
+  const [visible, setVisible] = useState(false), [attempt, setAttempt] = useState(0), [height, setHeight] = useState<number>()
+  const [exposed, setExposed] = useState(false)
+  const [pageVisible, setPageVisible] = useState(() => document.visibilityState !== 'hidden')
+  const [state, setState] = useState<PreviewState>({ status: 'idle' })
+  const [properties, setProperties] = useState<{ identity: string, stepId?: string }>()
+  const currentState = useRef(state)
+  currentState.current = state
+  const runtimeGeneration = useRef(0), pauseRuntime = useRef<() => void>(() => {})
+  const mismatches = useRef(0)
+  const frameReady = useRef(false), [readiness, setReadiness] = useState(0)
+  const reportedStep = useRef<string>()
+  const reportedNavigation = useRef<string>()
+  const editingStep = useRef<string>()
+  const playback = useRef<DocumentBlockPlayback>()
+  const fail = useCallback((failure: 'build' | 'display' = 'display') => {
+    // Retire this child before React removes it. A queued ready/position message
+    // cannot restore a failed runtime or adopt its position in the document.
+    pauseRuntime.current()
+    runtimeGeneration.current++
+    frameReady.current = false
+    playback.current?.dispose()
+    playback.current = undefined
+    setState({ status: 'failed', failure })
+  }, [])
+  useEffect(() => {
+    const changed = () => setPageVisible(document.visibilityState !== 'hidden')
+    document.addEventListener('visibilitychange', changed)
+    changed()
+    return () => document.removeEventListener('visibilitychange', changed)
+  }, [])
+  useEffect(() => {
+    const element = viewport.current
+    if (!element) return
+    if (typeof IntersectionObserver === 'undefined') { setExposed(true); return }
+    // Offscreen frames can fetch ahead, but browsers suspend their animation
+    // frames. Their paint/clock handshake must not time out before they are seen.
+    const observer = new IntersectionObserver(entries => setExposed(entries.some(entry => entry.isIntersecting)))
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+  const [loadedVersion, setLoadedVersion] = useState<string>()
+  const [loadedProject, setLoadedProject] = useState(0), [loadedAttempt, setLoadedAttempt] = useState(0)
+  const enabled = visible && documentView
+  useEffect(() => {
+    const element = root.current
+    if (!element) return
+    if (typeof IntersectionObserver === 'undefined') { setVisible(true); return }
+    const observer = new IntersectionObserver(entries => setVisible(entries.some(entry => entry.isIntersecting)), { rootMargin: '200px' })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+  useEffect(() => {
+    if (!enabled || directory === undefined || !source?.version) return
+    if (!source.fingerprint) { fail('build'); return }
+    let current = true
+    const version = source.version
+    setState(before => ({ ...before, status: 'loading', failure: undefined }))
+    const preparing = () => { if (current) setState(before => (before.status === 'loading' ? { ...before, status: 'preparing' } : before)) }
+    void prepareDocumentPreview(workbench.client, { directory, version, fingerprint: source.fingerprint, project: source.projectRevision ?? 0 }, attempt > 0, preparing).then(snapshot => {
+      if (!current) return
+      setState({ snapshot, status: 'loading' }); setLoadedVersion(version); setLoadedProject(source.projectRevision ?? 0); setLoadedAttempt(attempt)
+    }, () => { if (current) fail('build') })
+    return () => { current = false }
+  }, [enabled, directory, source?.version, source?.fingerprint, source?.projectRevision, attempt, workbench, fail])
+  const address = state.snapshot ? new URL(state.snapshot.address) : undefined
+  address?.searchParams.set('presmium-block', blockId)
+  address?.searchParams.set('presmium-appearance', dark ? 'dark' : 'light')
+  // A saved version changes only the runtime frame; it never resets the native editor.
+  address?.searchParams.set('presmium-block-version', loadedVersion ?? '')
+  address?.searchParams.set('presmium-block-refresh', `${loadedProject}:${loadedAttempt}`)
+  const src = address?.href, origin = address?.origin
+  const command = useCallback((action: 'seek' | 'pause', at?: 'start' | 'end', token = navigation) => {
+    if (!origin || !state.snapshot || !sectionId || !stepId) return
+    const value: BlockPreviewCommand = { type: 'presmium:block-preview-command', action, document: directory ?? '', blockId, revision: state.snapshot.revision, sectionId, stepId, navigation: token, ...at ? { at } : {} }
+    frame.current?.contentWindow?.postMessage(value, origin)
+  }, [origin, state.snapshot, directory, blockId, sectionId, stepId, navigation])
+  pauseRuntime.current = () => command('pause')
+  const pause = useCallback(() => {
+    if (sectionId && stepId) {
+      editingStep.current = JSON.stringify([sectionId, stepId])
+      workbench.pauseDocumentStep(sectionId, stepId)
+      reportedStep.current = editingStep.current
+      reportedNavigation.current = workbench.getState().documentPositionToken
+    }
+    command('pause', undefined, reportedNavigation.current); workbench.stopAuditions()
+  }, [command, workbench, sectionId, stepId])
+  useEffect(() => {
+    if (!src || !origin || !enabled || !state.snapshot) return
+    const group = new DocumentBlockPlayback({
+      activate: stop => workbench.startDocumentPlayback(stop), failure: t.previewFailure,
+      current: request => {
+        const current = workbench.getState(), document = current.authoring?.content
+        return Boolean(current.document === directory && current.authoring?.version === loadedVersion && (current.authoring?.projectRevision ?? 0) === loadedProject && document
+          && request.navigation === current.documentPositionToken
+          && documentBlockSection(document, blockId) === request.sectionId && document.sections[request.sectionId]?.stepOrder.includes(request.stepId))
+      },
+      adopt: request => {
+        editingStep.current = undefined
+        reportedStep.current = JSON.stringify([request.sectionId, request.stepId])
+        workbench.observeDocumentStep(request.sectionId, request.stepId)
+        return reportedNavigation.current = workbench.getState().documentPositionToken
+      },
+      post: value => frame.current?.contentWindow?.postMessage(value, origin),
+    })
+    playback.current = group
+    return () => { group.dispose(); if (playback.current === group) playback.current = undefined }
+  }, [src, origin, enabled, loadedVersion, loadedProject, state.snapshot?.revision, directory, blockId, workbench, t.previewFailure])
+  useEffect(() => {
+    if (editingStep.current && sectionId && stepId) editingStep.current = JSON.stringify([sectionId, stepId])
+  }, [sectionId, stepId])
+  useEffect(() => { reportedStep.current = undefined; reportedNavigation.current = undefined; frameReady.current = false }, [src, enabled])
+  useEffect(() => {
+    if (!enabled || !frameReady.current || state.status !== 'ready' || !sectionId || !stepId || reportedStep.current === JSON.stringify([sectionId, stepId]) && reportedNavigation.current === navigation) return
+    const initial = reportedNavigation.current === undefined
+    reportedStep.current = JSON.stringify([sectionId, stepId])
+    reportedNavigation.current = navigation
+    command(!initial && navigationIntent === 'pause' ? 'pause' : 'seek', 'end')
+  }, [state.status, sectionId, stepId, navigation, navigationIntent, command, enabled, src, readiness])
+  useEffect(() => { frame.current?.toggleAttribute('inert', !frameReady.current || state.status !== 'ready') }, [readiness, state.status, enabled, src])
+  useEffect(() => {
+    if (!src || !origin || !enabled || !state.snapshot) return
+    const expected = state.snapshot.revision
+    const generation = runtimeGeneration.current
+    const listener = (event: MessageEvent) => {
+      if (generation !== runtimeGeneration.current || event.source !== frame.current?.contentWindow || event.origin !== origin) return
+      const value = event.data
+      if (!value || !['presmium:block-preview', 'presmium:block-preview-position', 'presmium:block-preview-playback-request', 'presmium:block-preview-playback-cancelled'].includes(value.type) || value.blockId !== blockId || value.document !== directory) return
+      if (value.revision !== expected) {
+        if (mismatches.current++ < 3) setAttempt(value => value + 1)
+        else fail('display')
+        return
+      }
+      const cancelled = toBlockPreviewPlaybackCancelled(value)
+      if (cancelled) {
+        playback.current?.cancelled(cancelled.request)
+        return
+      }
+      const request = toBlockPreviewPlaybackRequest(value)
+      if (request) {
+        playback.current?.request(request)
+        return
+      }
+      if (value.type !== 'presmium:block-preview' && value.type !== 'presmium:block-preview-position') return
+      if (value.type === 'presmium:block-preview-position') {
+        const current = workbench.getState()
+        if (current.document !== directory || current.authoring?.version !== loadedVersion || (current.authoring?.projectRevision ?? 0) !== loadedProject) return
+        const position = toBlockPreviewPosition(value), document = current.authoring?.content
+        if (position && position.navigation === current.documentPositionToken && document
+          && documentBlockSection(document, blockId) === position.sectionId && document.sections[position.sectionId]?.stepOrder.includes(position.stepId)) {
+          // A position posted just before pause must not replace an active field's target.
+          if (frame.current && frame.current.ownerDocument.activeElement === frame.current) editingStep.current = undefined
+          if (editingStep.current && editingStep.current !== JSON.stringify([position.sectionId, position.stepId])) return
+          reportedStep.current = JSON.stringify([position.sectionId, position.stepId])
+          workbench.observeDocumentStep(position.sectionId, position.stepId)
+          reportedNavigation.current = workbench.getState().documentPositionToken
+          const accepted: BlockPreviewCommand = { type: 'presmium:block-preview-command', action: 'sync', document: directory ?? '', blockId, revision: expected, sectionId: position.sectionId, stepId: position.stepId, navigation: reportedNavigation.current }
+          frame.current?.contentWindow?.postMessage(accepted, origin)
+        }
+        return
+      }
+      if (typeof value.height === 'number' && Number.isFinite(value.height)) setHeight(Math.max(1, Math.min(value.height, 4096)))
+      if (value.status === 'failed') fail('display')
+      else if (value.status === 'ready') {
+        if (!frameReady.current) { frameReady.current = true; setReadiness(value => value + 1) }
+        mismatches.current = 0; setState(before => ({ ...before, status: 'ready' }))
+      }
+    }
+    window.addEventListener('message', listener)
+    return () => { window.removeEventListener('message', listener) }
+  }, [src, origin, enabled, state.snapshot?.revision, blockId, directory, loadedVersion, loadedProject, workbench, fail])
+  useEffect(() => {
+    if (!src || !enabled || !exposed || !pageVisible || state.status !== 'loading') return
+    const generation = runtimeGeneration.current
+    const timeout = setTimeout(() => { if (generation === runtimeGeneration.current && currentState.current.status === 'loading') fail('display') }, 30_000)
+    return () => clearTimeout(timeout)
+  }, [src, enabled, exposed, pageVisible, state.status, fail])
+  const old = source?.dirty || source?.saving || source?.error || source?.restored || loadedVersion !== source?.version || loadedProject !== (source?.projectRevision ?? 0)
+  return <section ref={root} className="pm-ui-block-preview" data-block-preview={blockId} data-status={state.status} contentEditable={false}>
+    <header className="pm-ui-block-preview__header"><span className="pm-ui-block-preview__label" role={state.status === 'failed' ? 'status' : undefined}><PmIcon name="slides" />{state.status === 'failed' ? t.previewFailure : old && state.snapshot ? t.previewPrevious : state.status === 'preparing' ? p.preparing : state.status === 'loading' ? t.previewLoading : t.previewSnapshot}</span>
+      <span className="pm-ui-block-preview__actions">
+        {source?.content?.blocks[blockId]?.type === 'component' && <PmIconButton small icon="sliders" label={COMPONENT_PROPERTY_MESSAGES[locale].properties}
+          data-component-properties={blockId} disabled={!source.identity || workbench.client.capabilities?.readOnly} onClick={() => { if (source.identity && !workbench.client.capabilities?.readOnly) setProperties({ identity: source.identity, stepId }) }} />}
+        {workbench.client.capabilities?.narration !== false && <PmIconButton small icon="captions" label={t.stepCaptions} aria-expanded={narrationOpen} aria-controls={narrationOpen ? narrationPanel : undefined} aria-pressed={narrationOpen} disabled={!stepId} onClick={() => {
+          pause()
+          if (sectionId && stepId) workbench.observeDocumentStep(sectionId, stepId)
+          setNarrationOpen(value => !value)
+        }} />}
+        <PmIconButton small icon="refresh" label={state.status === 'failed' ? t.previewRetry : t.previewRefresh} hint={state.status === 'loading' ? t.previewLoading : state.status === 'preparing' ? p.preparing : state.status === 'failed' ? t.previewRetry : t.previewRefresh}
+          loading={state.status === 'loading' || state.status === 'preparing'} onClick={() => { pause(); if (!source?.fingerprint) void workbench.retryDocument(); setAttempt(value => value + 1) }} disabled={!enabled && state.status !== 'failed'} />
+      </span></header>
+    <div ref={viewport} className="pm-ui-block-preview__viewport" role="region" aria-label={t.previewTitle} tabIndex={enabled && src ? -1 : 0}
+      style={height === undefined ? undefined : { '--pm-block-content-height': `${height}px` } as CSSProperties}
+      onKeyDownCapture={event => { if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(event.key)) event.stopPropagation() }}>
+      {enabled && src ? <iframe key={src} ref={mountFrame} className="pm-ui-block-preview__frame" src={src} title={t.previewTitle} sandbox="allow-scripts allow-same-origin" onFocus={() => { editingStep.current = undefined }} /> : fallback}
+      {enabled && !src && (state.status === 'loading' || state.status === 'preparing') && <div className="pm-ui-block-preview__pending"><PmSkeleton shape="preview" label={state.status === 'preparing' ? p.preparingDetail : t.previewLoading} /></div>}
+      {state.status === 'failed' && <p className="pm-ui-block-preview__pending">{state.failure === 'build' ? p.buildFailure : p.displayFailure}</p>}
+    </div>
+    {sectionId && stepId && <DocumentStepNarration blockId={blockId} sectionId={sectionId} stepId={stepId} expanded={narrationOpen} panelId={narrationPanel} onPause={pause} />}
+    {properties && <ComponentPropertiesDialog identity={properties.identity} blockId={blockId} stepId={properties.stepId} onClose={() => setProperties(undefined)} />}
+  </section>
+}

package/src/document-editor/DocumentComments.tsx

@@ -0,0 +1,282 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
+import type { FocusEvent, ReactNode } from 'react'
+import { CommentEditorSubmitExtension, CommentsExtension } from '@blocknote/core/comments'
+import { components } from '@blocknote/mantine'
+import { FloatingThreadController, getReferenceText, Thread, useBlockNoteEditor, useCreateBlockNote, useEditorState, useExtension, useExtensionState, useThreads } from '@blocknote/react'
+import type { ComponentProps, ThreadProps } from '@blocknote/react'
+import type { Locale } from '../messages.ts'
+import { PmButton, PmEmpty, PmNotice, PmSelect } from '../components.tsx'
+import { enterSubmits } from './comments.ts'
+import type { DocumentCommentEditorHandle, DocumentThreadStore } from './comments.ts'
+import type { CommentDrafts, CommentDraftCandidate, CommentDraftRecord, CommentDraftReference, CommentDraftOperation } from './comment-drafts.ts'
+import { isNewCommentDraft, sameCommentDraftTarget } from './comment-drafts.ts'
+import { createRichProjection, nativeRichTextToProduct, productRichTextToNative } from './rich-text.ts'
+import { commentEditorSchema } from './schema.tsx'
+import type { DocumentEditorBlock } from './schema.tsx'
+import { DOCUMENT_EDITOR_MESSAGES } from './messages.ts'
+import { commentFloating } from './popover.tsx'
+
+export const COMMENT_EDITOR_CONTEXT = createContext<{ store: DocumentThreadStore, locale: Locale, sidebar: boolean, getPositionToken?(): string | undefined, onDraftRestore?(): void } | undefined>(undefined)
+const THREAD_CONTEXT = createContext<string | undefined>(undefined)
+const emptySubscribe = () => () => {}
+const emptyState = { candidates: [], pending: false, failed: false, reading: false } as const
+const referenceKey = (value: CommentDraftReference) => JSON.stringify([value.id, value.revision, value.token])
+const MantineCommentEditor = components.Comments.Editor
+// A native Thread retains its reply editor while another thread is selected.
+const composerDrafts = new WeakMap<object, { owner: CommentDrafts | undefined, current?: CommentDraftRecord, rich: ReturnType<typeof createRichProjection> }>()
+
+/** The public Thread boundary supplies identity; an editor never guesses the selected thread. */
+export function DocumentCommentThread(props: ThreadProps) {
+  return <THREAD_CONTEXT.Provider value={props.thread.id}><Thread {...props} /></THREAD_CONTEXT.Provider>
+}
+
+/** Keep the native controller and reply editor while body selection owns the pointer. */
+export function DocumentFloatingThreadController() {
+  const editor = useBlockNoteEditor(), { selectedThreadId } = useExtensionState(CommentsExtension)
+  const empty = useEditorState({ editor, on: 'selection', selector: ({ editor }) => editor.prosemirrorState.selection.empty })
+  const [selecting, setSelecting] = useState(false)
+  const blocked = selecting || !empty
+  const shown = useRef(false), thread = useRef(selectedThreadId)
+  shown.current = Boolean(selectedThreadId) && !blocked
+  thread.current = selectedThreadId
+  // The pointer that last pressed commented text, and the line of the thread chosen from it (the first line without one).
+  const point = useRef<{ x: number, y: number }>(), line = useRef<{ thread: string, index: number }>()
+  useEffect(() => {
+    // The view is read at event time: the one present when this effect runs can be replaced when the editor mounts.
+    const view = () => editor.prosemirrorView
+    let pressed = false
+    const down = (event: PointerEvent) => {
+      const current = view()
+      if (event.target instanceof Element && current?.dom.contains(event.target) && event.target.closest('[data-bn-thread-id]')) {
+        point.current = { x: event.clientX, y: event.clientY }; line.current = undefined
+      }
+      if (event.button !== 0 || event.isPrimary === false || !current?.editable || current.composing
+        || !(event.target instanceof Element) || !current.dom.contains(event.target) || event.target.closest('[contenteditable="false"]')) return
+      pressed = true
+      // A card already on screen stays through a plain click; a card the press would open waits for the click.
+      if (!shown.current) setSelecting(true)
+    }
+    const move = (event: PointerEvent) => {
+      // Only the native collapse flag gates a popover; ranges and content stay editor-owned.
+      if (pressed && event.buttons & 1 && document.getSelection()?.isCollapsed === false) setSelecting(true)
+    }
+    const click = () => {
+      if (!pressed) return
+      pressed = false
+      // PM may still report the previous caret at the end of a fast pointer selection.
+      setSelecting(document.getSelection()?.isCollapsed === false)
+    }
+    const key = (event: KeyboardEvent) => {
+      if (!(event.target instanceof Node) || !view()?.dom.contains(event.target)) return
+      pressed = false; setSelecting(false)
+      point.current = undefined; line.current = undefined
+    }
+    const cancel = () => { if (pressed) { pressed = false; setSelecting(true) } }
+    document.addEventListener('pointerdown', down, true)
+    document.addEventListener('pointermove', move, true)
+    document.addEventListener('keydown', key, true)
+    document.addEventListener('click', click)
+    document.addEventListener('pointercancel', cancel, true)
+    window.addEventListener('blur', cancel)
+    return () => {
+      pressed = false
+      document.removeEventListener('pointerdown', down, true)
+      document.removeEventListener('pointermove', move, true)
+      document.removeEventListener('keydown', key, true)
+      document.removeEventListener('click', click)
+      document.removeEventListener('pointercancel', cancel, true)
+      window.removeEventListener('blur', cancel)
+    }
+  }, [editor])
+  const floating = useMemo(() => commentFloating(() => {
+    const id = thread.current, body = editor.prosemirrorView?.dom
+    if (!id || !body) return
+    const rects = [...body.querySelectorAll(`[data-bn-thread-id="${CSS.escape(id)}"]:not([data-orphan="true"])`)]
+      .flatMap(mark => [...mark.getClientRects()]).filter(rect => rect.width > 0 && rect.height > 0)
+    if (!rects.length) return
+    if (line.current?.thread !== id) {
+      const at = point.current, distance = (rect: DOMRect) => at ? Math.hypot(Math.max(rect.left - at.x, 0, at.x - rect.right), Math.max(rect.top - at.y, 0, at.y - rect.bottom)) : 0
+      line.current = { thread: id, index: rects.reduce((best, rect, index) => distance(rect) < distance(rects[best]!) ? index : best, 0) }
+    }
+    return rects[Math.min(line.current.index, rects.length - 1)]
+  }), [editor])
+  return <FloatingThreadController floatingThread={DocumentCommentThread} floatingUIOptions={{
+    useFloatingOptions: { ...floating, open: Boolean(selectedThreadId) && !blocked },
+    elementProps: { className: blocked ? 'pm-ui-comment-hidden' : undefined },
+  }} />
+}
+
+/** Native Thread composition, with the same public focus/blur and position ordering as the sidebar. */
+export function DocumentThreadsSidebar({ children }: { children?: ReactNode }) {
+  const editor = useBlockNoteEditor(), comments = useExtension(CommentsExtension), threads = useThreads()
+  const { selectedThreadId, threadPositions } = useExtensionState(CommentsExtension)
+  const ordered = [...threads.values()].sort((a, b) => (threadPositions.get(a.id)?.from ?? Number.MAX_VALUE) - (threadPositions.get(b.id)?.from ?? Number.MAX_VALUE))
+  const focus = (id: string, event: FocusEvent) => { if (!(event.target as HTMLElement).closest('.bn-action-toolbar')) comments.selectThread(id) }
+  const blur = (event: FocusEvent) => {
+    const next = event.relatedTarget
+    if (!next || next.closest('.bn-action-toolbar')) return
+    const parent = next.closest('.bn-thread')
+    if (!parent || !(event.target instanceof Node) || !parent.contains(event.target)) comments.selectThread(undefined)
+  }
+  const context = useContext(COMMENT_EDITOR_CONTEXT), t = DOCUMENT_EDITOR_MESSAGES[context?.locale ?? 'en']
+  return <div className="bn-threads-sidebar">{children}<CommentDraftRetrieval />{!ordered.length && <PmEmpty icon="comment">{t.commentsEmpty}</PmEmpty>}{ordered.map(thread => <DocumentCommentThread key={thread.id} thread={thread}
+    selected={selectedThreadId === thread.id} orphaned={!threadPositions.has(thread.id)} referenceText={getReferenceText(editor, threadPositions.get(thread.id))}
+    onFocus={event => focus(thread.id, event)} onBlur={blur} tabIndex={0} />)}</div>
+}
+
+function DraftPreview({ candidate }: { candidate: CommentDraftCandidate }) {
+  const projection = useRef(createRichProjection())
+  const editor = useCreateBlockNote({ schema: commentEditorSchema, trailingBlock: false, initialContent: productRichTextToNative(candidate.content, projection.current) }, [candidate.id, candidate.revision, candidate.token])
+  return <MantineCommentEditor editor={editor} editable={false} autoFocus={false} />
+}
+
+export function DraftChoices({ candidates, disabled, onRecover, onDiscard, preview = false, canRecover, unavailableMessage }: {
+  candidates: readonly CommentDraftCandidate[], disabled?: boolean, onRecover?(candidate: CommentDraftCandidate): Promise<void>,
+  onDiscard(candidate: CommentDraftCandidate): Promise<void>, preview?: boolean, canRecover?(candidate: CommentDraftCandidate): boolean, unavailableMessage?: string,
+}) {
+  const context = useContext(COMMENT_EDITOR_CONTEXT), t = DOCUMENT_EDITOR_MESSAGES[context?.locale ?? 'en']
+  const [selected, setSelected] = useState(''), [busy, setBusy] = useState(false)
+  const candidate = candidates.find(value => referenceKey(value) === selected)
+  const act = async (action: (candidate: CommentDraftCandidate) => Promise<void>) => {
+    if (!candidate || busy || disabled) return
+    setBusy(true)
+    try { await action(candidate) } finally { setBusy(false) }
+  }
+  if (!candidates.length) return null
+  return <PmNotice tone="accent"><PmSelect label={t.commentDrafts} value={candidate ? selected : ''} disabled={disabled || busy} onChange={event => setSelected(event.target.value)}>
+    <option value="">{t.commentChooseDraft}</option>{candidates.map(value => <option key={referenceKey(value)} value={referenceKey(value)}>{new Date(value.updatedAt).toLocaleString(context?.locale)} · {isNewCommentDraft(value.target) ? t.commentNewDraft : value.target.commentId ? t.commentEditDraft : t.commentReplyDraft}{value.storage === 'session' ? ` · ${t.commentSessionOnly}` : ''}</option>)}
+  </PmSelect>{candidate && preview && <DraftPreview candidate={candidate} />}
+    {candidate && unavailableMessage && canRecover && !canRecover(candidate) && <PmNotice tone="warn">{unavailableMessage}</PmNotice>}
+    <span className="pmw-notice__actions">{onRecover && <PmButton small variant="primary" disabled={!candidate || disabled || busy || candidate.storage === 'session' || canRecover && !canRecover(candidate)} loading={busy} onClick={() => void act(onRecover)}>{t.commentRecover}</PmButton>}
+    <PmButton small disabled={!candidate || disabled || busy} onClick={() => void act(onDiscard)}>{t.commentDiscard}</PmButton></span>
+  </PmNotice>
+}
+
+function CommentDraftRetrieval() {
+  const context = useContext(COMMENT_EDITOR_CONTEXT), drafts = context?.store.drafts
+  const state = useSyncExternalStore(drafts?.subscribe ?? emptySubscribe, drafts?.snapshot ?? (() => emptyState))
+  const candidates = state.candidates.filter(value => !isNewCommentDraft(value.target) && (value.storage === 'session' || context?.store.draftTargetState(value.target) === 'unavailable'))
+  if (!drafts) return null
+  return <>{state.failed && <PmNotice tone="warn">{DOCUMENT_EDITOR_MESSAGES[context?.locale ?? 'en'].commentBackupFailed}</PmNotice>}<DraftChoices candidates={candidates} preview onDiscard={async candidate => { await drafts.discard(candidate) }} /></>
+}
+
+export function DocumentCommentEditor(props: ComponentProps['Comments']['Editor']) {
+  const context = useContext(COMMENT_EDITOR_CONTEXT), threadId = useContext(THREAD_CONTEXT)
+  const [handle, setHandle] = useState<DocumentCommentEditorHandle>(), [, setRevision] = useState(0), [recoveryFailure, setRecoveryFailure] = useState(false)
+  const currentHandle = useRef(handle), recoveryOwner = useRef(0)
+  currentHandle.current = handle
+  const current = useRef(props), active = useRef(true), input = useRef(0), composing = useRef(false), submitting = useRef(false), suppress = useRef(false)
+  current.current = props
+  const drafts = context?.store.drafts
+  const record = useMemo(() => {
+    let value = composerDrafts.get(props.editor)
+    if (!value || value.owner !== drafts) { value = { owner: drafts, rich: createRichProjection() }; composerDrafts.set(props.editor, value) }
+    return value
+  }, [props.editor, drafts])
+  const rich = useMemo(() => ({ current: record.rich }), [record])
+  const composerId = useRef(crypto.randomUUID())
+  const state = useSyncExternalStore(drafts?.subscribe ?? emptySubscribe, drafts?.snapshot ?? (() => emptyState))
+  useLayoutEffect(() => {
+    if (!context || !threadId) return
+    active.current = true; ++input.current
+    if (record.current && drafts && !drafts.owns(record.current)) record.current = undefined
+    const value = context.store.bindEditor(props.editor, props.editable, threadId)
+    setHandle(value)
+    const original = props.editor.getExtension(CommentEditorSubmitExtension)
+    let guarded: typeof original, stopEnter = () => {}
+    if (original && value.target && drafts) {
+      props.editor.replaceExtension(original, CommentEditorSubmitExtension({ onSubmit: async () => {
+        if (composing.current || !active.current) return
+        const target = value.target!, before = context.store.threadSnapshot(target.threadId), ids = new Set(before?.comments.map(comment => comment.id))
+        const own = record.current
+        submitting.current = true
+        try {
+          const result = original.submit(), thread = context.store.threadSnapshot(target.threadId)
+          const comment = target.commentId ? thread?.comments.find(comment => comment.id === target.commentId) : thread?.comments.find(comment => !ids.has(comment.id))
+          if (comment && thread !== before) { drafts.submitted(own, comment); record.current = undefined; setRevision(value => value + 1) }
+          await result
+        } finally { submitting.current = false }
+      } }))
+      guarded = props.editor.getExtension(CommentEditorSubmitExtension)
+      const extension = guarded
+      stopEnter = enterSubmits(props.editor, () => extension?.submit())
+      context.store.refreshEditorCallbacks()
+    }
+    const stop = props.editor.onChange(() => {
+      if (!active.current || !current.current.editable || suppress.current || submitting.current) return
+      ++input.current; setRecoveryFailure(false)
+      const version = context.store.version
+      if (!value.target || !drafts || !version) return
+      // Empty reply and native Cancel are not new unpublished content.
+      if (props.editor.isEmpty && !value.target.commentId) { if (record.current) { void drafts.clearOwn(record.current); record.current = undefined }; return }
+      const content = nativeRichTextToProduct(props.editor.document as DocumentEditorBlock[], rich.current)
+      record.current = drafts.write(record.current?.target ?? value.target, record.current?.version ?? version, content, composing.current, record.current) ?? record.current
+      setRevision(value => value + 1)
+    })
+    return () => {
+      active.current = false; ++input.current; stop(); stopEnter()
+      if (original && guarded && !props.editor.prosemirrorView.isDestroyed && props.editor.getExtension(CommentEditorSubmitExtension) === guarded) props.editor.replaceExtension(guarded, original)
+      value.close()
+    }
+  }, [context?.store, props.editor, threadId])
+  const editable = useRef(props.editable)
+  useLayoutEffect(() => {
+    handle?.setEditable(props.editable)
+    if (editable.current && !props.editable && record.current && drafts) { const value = record.current; record.current = undefined; void drafts.clearOwn(value) }
+    editable.current = props.editable
+  }, [handle, props.editable, drafts])
+  useLayoutEffect(() => { recoveryOwner.current++; setRecoveryFailure(false) }, [handle, props.editable])
+  const failure = useSyncExternalStore(handle?.subscribe ?? emptySubscribe, handle?.failure ?? (() => undefined))
+  const target = handle?.target, t = DOCUMENT_EDITOR_MESSAGES[context?.locale ?? 'en']
+  const candidates = target ? state.candidates.filter(value => sameCommentDraftTarget(value.target, target) && value.id !== record.current?.id) : []
+  const recover = async (candidate: CommentDraftCandidate, operation?: CommentDraftOperation): Promise<CommentDraftRecord | undefined> => {
+    if (!drafts || !target || !context?.store.version || !props.editable || composing.current || submitting.current || props.editor.prosemirrorView.composing) return
+    context.store.beforeAction?.()
+    const before = input.current, version = context.store.version, native = props.editor.prosemirrorState, position = context.getPositionToken?.()
+    const own = record.current
+    const owns = () => {
+      operation?.signal?.throwIfAborted(); operation?.guard?.()
+      context.store.beforeAction?.()
+      if (!active.current || input.current !== before || context.store.version !== version || composing.current || submitting.current || !current.current.editable
+        || props.editor.prosemirrorView.isDestroyed || props.editor.prosemirrorView.composing || props.editor.prosemirrorState.doc !== native.doc
+        || props.editor.prosemirrorState.selection !== native.selection || context.getPositionToken?.() !== position || record.current !== own
+        || context.store.draftTargetState(target) === 'unavailable') throw new Error('client-comment-composer-changed')
+    }
+    if (own && !await drafts.confirm(own)) return
+    owns()
+    const value = await drafts.recover(candidate, target, version, { signal: operation?.signal, guard: owns })
+    if (!value) return
+    owns()
+    suppress.current = true
+    try {
+      props.editor.replaceBlocks(props.editor.document, productRichTextToNative(value.content, rich.current))
+      const actual = nativeRichTextToProduct(props.editor.document as DocumentEditorBlock[], rich.current)
+      if (JSON.stringify(actual) !== JSON.stringify(value.content)) throw new Error('client-comment-native-unverified')
+      record.current = value; handle?.restoreBaseline(!isNewCommentDraft(candidate.target) ? candidate.target.baseline : undefined)
+      ++input.current; setRevision(value => value + 1)
+    } finally { suppress.current = false }
+    if (!operation) await drafts.discard(candidate)
+    return value
+  }
+  useLayoutEffect(() => {
+    if (!drafts || !target || !props.editable) return
+    return drafts.registerComposer({ id: composerId.current, target,
+      snapshot: () => { const available = active.current && current.current.editable && !submitting.current && !props.editor.prosemirrorView.isDestroyed; return { record: record.current, composing: composing.current || available && props.editor.prosemirrorView.composing, available } },
+      targetState: () => context?.store.draftTargetState(target) ?? 'unavailable', restore: recover })
+  }, [drafts, handle, props.editor, props.editable])
+  const composition = (value: boolean) => {
+    composing.current = value
+    if (record.current && target && drafts && context?.store.version) {
+      record.current = drafts.write(record.current.target, record.current.version, nativeRichTextToProduct(props.editor.document as DocumentEditorBlock[], rich.current), value, record.current) ?? record.current
+      setRevision(value => value + 1)
+    }
+  }
+  return <div data-comment-draft-editor={target ? JSON.stringify([target.threadId, target.commentId ?? null]) : undefined} aria-busy={state.pending || undefined}
+    onCompositionStart={() => composition(true)} onCompositionEnd={() => composition(false)}>
+    <MantineCommentEditor {...props} />
+    {recoveryFailure && <PmNotice tone="warn">{t.commentRecoveryChanged}</PmNotice>}
+    {failure && <PmNotice tone="danger">{failure === 'changed' ? t.commentChanged : t.commentUnavailable}</PmNotice>}
+    {drafts && props.editable && <DraftChoices candidates={candidates} disabled={composing.current || submitting.current} onRecover={async candidate => { const captured = handle, owner = recoveryOwner.current; setRecoveryFailure(false); try { await recover(candidate) } catch { if (active.current && current.current.editable && currentHandle.current === captured && recoveryOwner.current === owner) setRecoveryFailure(true) } }} onDiscard={async candidate => { await drafts.discard(candidate) }} />}
+    {drafts && props.editable && state.failed && !context?.sidebar && <PmNotice tone="warn">{t.commentBackupFailed}</PmNotice>}
+  </div>
+}