wiki-viewer 1.0.0 → 1.0.1

package/.next/standalone/src/components/editor/editor.tsx

@@ -3,19 +3,27 @@
 import { cellAround, isInTable } from "@tiptap/pm/tables";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { Code2, FilePlus, Loader2, Sparkles } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { findNodeByPath } from "@/lib/cabinets/tree";
 import { markdownToHtml } from "@/lib/markdown/to-html";
 import { htmlToMarkdown } from "@/lib/markdown/to-markdown";
 import { useAIPanelStore } from "@/stores/ai-panel-store";
 import { useEditorStore } from "@/stores/editor-store";
 import { useTreeStore } from "@/stores/tree-store";
+import { useViewWidthStore, VIEW_WIDTH_CSS } from "@/stores/view-width-store";
 import { useWikiSlugsStore } from "@/stores/wiki-slugs-store";
 import type { TreeNode } from "@/types";
+import { useProofStore } from "@/stores/proof-store";
+import { captureSuggestion } from "@/lib/proof/suggest-capture";
 import { EditorBubbleMenu } from "./bubble-menu";
 import { EditorToolbar } from "./editor-toolbar";
 import { editorExtensions } from "./extensions";
 import { FolderIndex } from "./folder-index";
+import { CommentPip } from "./comment-pip";
+import { CommentThread } from "./comment-thread";
+import { ProofSpanPopover } from "./proof-span-popover";
+import { SuggestionCard } from "./suggestion-card";
+import { SuggestEditPopover } from "./suggest-edit-popover";
 import { SlashCommands } from "./slash-commands";
 import { TableMenu } from "./table-menu";
 import {
@@ -136,8 +144,11 @@ export function KBEditor() {
 		isLoading,
 		loadStatus,
 		createMissingPage,
+		editMode,
+		setEditMode,
 	} = useEditorStore();
 	const nodes = useTreeStore((s) => s.nodes);
+	const editorMaxW = useViewWidthStore((s) => VIEW_WIDTH_CSS[s.width]);
 	const isRtl = frontmatter?.dir === "rtl";
 	const { open: openAI, clearMessages } = useAIPanelStore();
 	const { open: openWikiCreate, Dialog: WikiCreateDialog } =
@@ -167,9 +178,323 @@ export function KBEditor() {
 		void useWikiSlugsStore.getState().load();
 	}, []);
 
+	// Load sidecar when the current path changes.
+	useEffect(() => {
+		if (!currentPath) return;
+		void useProofStore.getState().loadSidecar(currentPath);
+	}, [currentPath]);
+
+	// Subscribe to chokidar SSE: when current file changes on disk, reload sidecar.
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const es = new EventSource("/api/wiki/watch");
+		es.onmessage = (evt: MessageEvent<string>) => {
+			try {
+				const data = JSON.parse(evt.data) as { type: string; path: string };
+				const activePath = useEditorStore.getState().currentPath;
+				if (
+					(data.type === "change" || data.type === "add") &&
+					activePath &&
+					data.path === activePath
+				) {
+					// loadSnapshot first so server-side readSnapshot detects
+					// fingerprint mismatch, emits file.externallyEdited, and persists
+					// the sidecar. Then loadSidecar to refresh comments/suggestions.
+					void useProofStore
+						.getState()
+						.loadSnapshot(activePath)
+						.then(() => useProofStore.getState().loadSidecar(activePath));
+				}
+			} catch {
+				// ignore malformed events
+			}
+		};
+		return () => {
+			es.close();
+		};
+	}, []);
+
+	// Proof-span popover state.
+	const [proofTarget, setProofTarget] = useState<HTMLElement | null>(null);
+
+	/**
+	 * Ref to the editor scroll container. Used to compute block positions
+	 * relative to the scrollable area for suggestion cards and comment pips.
+	 *
+	 * Phase D coordination: comment-pip positioning uses this same ref and the
+	 * same blockRefPositions map computed below.
+	 */
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+	/** Map of block ref → position relative to scroll container */
+	const [blockRefPositions, setBlockRefPositions] = useState<
+		Map<string, { top: number; left: number; width: number; bottom: number }>
+	>(new Map());
+
+	// Subscribe to snapshot data for suggestion cards.
+	// NOTE: select the RAW stored references here — returning a freshly built
+	// array (e.g. `?? []` or `.filter(...)`) on every call makes
+	// useSyncExternalStore think the snapshot changed each render, which spins
+	// into a "Maximum update depth exceeded" loop. Derive defaults/filters below.
+	const snapshotBlocksRaw = useProofStore((s) =>
+		currentPath ? s.byPath[currentPath]?.snapshotBlocks : undefined
+	);
+	const suggestionsRaw = useProofStore((s) =>
+		currentPath ? s.byPath[currentPath]?.sidecar?.suggestions : undefined
+	);
+	const snapshotRevision = useProofStore((s) =>
+		currentPath ? (s.byPath[currentPath]?.snapshotRevision ?? 0) : 0
+	);
+	const commentsRaw = useProofStore((s) =>
+		currentPath ? s.byPath[currentPath]?.sidecar?.comments : undefined
+	);
+
+	const snapshotBlocks = useMemo(() => snapshotBlocksRaw ?? [], [snapshotBlocksRaw]);
+	const comments = useMemo(() => commentsRaw ?? [], [commentsRaw]);
+	const pendingSuggestions = useMemo(
+		() => suggestionsRaw?.filter((sg) => sg.status === "pending") ?? [],
+		[suggestionsRaw],
+	);
+
+	/** Group comments by block ref for pip rendering. */
+	const commentsByRef = useMemo(() => {
+		const map: Record<string, typeof comments> = {};
+		for (const c of comments) {
+			(map[c.ref] ??= []).push(c);
+		}
+		return map;
+	}, [comments]);
+
+	/** Tracks which block's comment thread is open and its anchor element. */
+	const [threadTarget, setThreadTarget] = useState<{ blockRef: string; el: HTMLElement } | null>(null);
+
+	/** Tracks the open human "suggest edit" popover (block + anchor + content). */
+	const [suggestTarget, setSuggestTarget] = useState<
+		{ blockRef: string; markdown: string; anchor: { top: number; left: number } } | null
+	>(null);
+
+	/**
+	 * Resolve the current editor selection to a top-level block.
+	 *
+	 * Primary strategy: map the selection to its top-level ProseMirror child
+	 * INDEX, then look up snapshotBlocks[index] — the same index-based mapping
+	 * used by the position-tracker effect. This is robust even when the DOM
+	 * `data-block-ref` annotation has not been applied yet (e.g. snapshot still
+	 * loading), which previously made the suggest/comment buttons silently
+	 * no-op. Falls back to walking the DOM for an existing [data-block-ref].
+	 */
+	const resolveSelectionBlock = useCallback((): {
+		blockRef: string;
+		blockEl: HTMLElement;
+		markdown: string;
+	} | null => {
+		if (!editorRef.current) return null;
+		const view = editorRef.current.view;
+		const { from } = view.state.selection;
+		const path = useEditorStore.getState().currentPath ?? "";
+		const blocks = useProofStore.getState().byPath[path]?.snapshotBlocks ?? [];
+
+		// Find the top-level child index containing the selection head.
+		const $pos = view.state.doc.resolve(from);
+		const topIndex = $pos.depth > 0 ? $pos.index(0) : 0;
+
+		const proseMirror = scrollContainerRef.current?.querySelector(".ProseMirror");
+		const children = proseMirror
+			? (Array.from(proseMirror.children) as HTMLElement[])
+			: [];
+		const blockEl = children[topIndex] ?? null;
+
+		// Prefer the index-aligned snapshot block; fall back to the DOM attr.
+		const block = blocks[topIndex];
+		let blockRef: string | null =
+			block?.ref ?? blockEl?.getAttribute("data-block-ref") ?? null;
+		const markdown = block?.markdown ?? "";
+
+		if (!blockRef && blockEl) {
+			// Last-resort: DOM walk from selection anchor.
+			const domAt = view.domAtPos(from);
+			const node: HTMLElement | null =
+				domAt.node.nodeType === Node.ELEMENT_NODE
+					? (domAt.node as HTMLElement)
+					: domAt.node.parentElement;
+			const found = node?.closest<HTMLElement>("[data-block-ref]") ?? null;
+			blockRef = found?.getAttribute("data-block-ref") ?? null;
+		}
+
+		if (!blockRef || !blockEl) return null;
+		return { blockRef, blockEl, markdown };
+	}, []);
+
+	const openSuggestForSelection = useCallback(() => {
+		const resolved = resolveSelectionBlock();
+		if (!resolved) return;
+		const rect = resolved.blockEl.getBoundingClientRect();
+		setSuggestTarget({
+			blockRef: resolved.blockRef,
+			markdown: resolved.markdown,
+			anchor: { top: rect.bottom + 4, left: rect.left },
+		});
+	}, [resolveSelectionBlock]);
+
+	const openCommentForSelection = useCallback(() => {
+		const resolved = resolveSelectionBlock();
+		if (!resolved) return;
+		setThreadTarget({ blockRef: resolved.blockRef, el: resolved.blockEl });
+	}, [resolveSelectionBlock]);
+
+	// ── Suggesting mode: capture human block edits as suggestions ──────────────
+	//
+	// In suggesting mode the editor stays editable but edits never touch the
+	// file. On flush (leaving a block or blurring the editor) we diff each
+	// top-level block against the snapshot, emit a human `suggestion.add` for
+	// every changed/added/removed block, then revert the editor to the snapshot
+	// so the pending suggestion cards render over the original content.
+
+	/** Set true whenever the user edits while in suggesting mode. */
+	const suggestDirtyRef = useRef(false);
+	/** Guards against re-entrant flushes (capture is async). */
+	const flushingRef = useRef(false);
+	/** Top-level block index that currently holds the selection. */
+	const activeBlockIndexRef = useRef<number | null>(null);
+
+	const normalizeMd = (s: string): string => s.replace(/\s+$/g, "").trimStart();
+
+	const flushSuggestions = useCallback(async () => {
+		if (flushingRef.current) return;
+		if (useEditorStore.getState().editMode !== "suggesting") return;
+		if (!suggestDirtyRef.current) return;
+		const ed = editorRef.current;
+		const path = useEditorStore.getState().currentPath;
+		if (!ed || !path) return;
+
+		const proseMirror = scrollContainerRef.current?.querySelector(".ProseMirror");
+		if (!proseMirror) return;
+		const children = Array.from(proseMirror.children) as HTMLElement[];
+		const snapBlocks =
+			useProofStore.getState().byPath[path]?.snapshotBlocks ?? [];
+		if (snapBlocks.length === 0) return;
+
+		flushingRef.current = true;
+		suggestDirtyRef.current = false;
+		try {
+			const getRevision = () =>
+				useProofStore.getState().byPath[path]?.snapshotRevision ?? 0;
+			const refresh = async () => {
+				await useProofStore.getState().loadSnapshot(path);
+				await useProofStore.getState().loadSidecar(path);
+			};
+
+			const count = Math.max(children.length, snapBlocks.length);
+			let captured = false;
+			for (let i = 0; i < count; i++) {
+				const el = children[i];
+				const snap = snapBlocks[i];
+				const curMd = el ? htmlToMarkdown(el.outerHTML).trim() : null;
+
+				if (snap && curMd !== null) {
+					if (normalizeMd(curMd) !== normalizeMd(snap.markdown)) {
+						const ok = await captureSuggestion({
+							path,
+							ref: snap.ref,
+							kind: "replace",
+							markdown: curMd,
+							getRevision,
+							refresh,
+						});
+						captured = captured || ok;
+					}
+				} else if (snap && curMd === null) {
+					const ok = await captureSuggestion({
+						path,
+						ref: snap.ref,
+						kind: "delete",
+						getRevision,
+						refresh,
+					});
+					captured = captured || ok;
+				} else if (!snap && curMd !== null && curMd.length > 0) {
+					// New trailing block: suggest inserting after the last known block.
+					const lastRef = snapBlocks[snapBlocks.length - 1]?.ref;
+					if (lastRef) {
+						const ok = await captureSuggestion({
+							path,
+							ref: lastRef,
+							kind: "insertAfter",
+							markdown: curMd,
+							getRevision,
+							refresh,
+						});
+						captured = captured || ok;
+					}
+				}
+			}
+
+			if (captured) {
+				// Reload sidecar so the new pending suggestion cards appear, then
+				// revert the editor to the snapshot (file unchanged).
+				await refresh();
+				const freshSnap =
+					useProofStore.getState().byPath[path]?.snapshotBlocks ?? snapBlocks;
+				const snapshotMarkdown = freshSnap.map((b) => b.markdown).join("\n\n");
+				isLoadingRef.current = true;
+				const html = await markdownToHtml(snapshotMarkdown, path);
+				ed.commands.setContent(html);
+				setTimeout(() => {
+					isLoadingRef.current = false;
+				}, 50);
+			}
+		} finally {
+			flushingRef.current = false;
+		}
+	}, []);
+
+	// Load snapshot (ordered block list) when path changes so suggestion cards
+	// can look up block content by ref.
+	useEffect(() => {
+		if (!currentPath) return;
+		void useProofStore.getState().loadSnapshot(currentPath);
+	}, [currentPath]);
+
+	/**
+	 * After content renders, walk `.ProseMirror > *` to build ref→position map.
+	 * Matches by index: the i-th ProseMirror child = snapshotBlocks[i].
+	 *
+	 * Phase D coordination: this effect also annotates each child element with
+	 * data-block-ref for any consumer that needs CSS/query-based lookup.
+	 */
+	useEffect(() => {
+		if (!currentPath || snapshotBlocks.length === 0 || !scrollContainerRef.current) return;
+		const container = scrollContainerRef.current;
+		const proseMirror = container.querySelector(".ProseMirror");
+		if (!proseMirror) return;
+		const children = Array.from(proseMirror.children) as HTMLElement[];
+		const containerRect = container.getBoundingClientRect();
+		const next = new Map<string, { top: number; left: number; width: number; bottom: number }>();
+		for (let i = 0; i < Math.min(children.length, snapshotBlocks.length); i++) {
+			const el = children[i];
+			const block = snapshotBlocks[i];
+			// Annotate DOM element — Phase D comment-pip and other consumers read this
+			el.setAttribute("data-block-ref", block.ref);
+			const rect = el.getBoundingClientRect();
+			next.set(block.ref, {
+				top: rect.top - containerRect.top + container.scrollTop,
+				left: rect.left - containerRect.left,
+				width: rect.width,
+				bottom: rect.bottom - containerRect.top + container.scrollTop,
+			});
+		}
+		setBlockRefPositions(next);
+	}, [currentPath, snapshotBlocks]);
+
 	const handleUpdate = useCallback(
 		({ editor }: { editor: ReturnType<typeof useEditor> }) => {
 			if (isLoadingRef.current || !editor) return;
+			// In suggesting mode, mark the edit dirty so the next block-change or
+			// blur flushes it into suggestions. Still push content to the store so
+			// the store guard (no autosave in suggesting mode) keeps it in sync.
+			if (useEditorStore.getState().editMode === "suggesting") {
+				suggestDirtyRef.current = true;
+			}
 			const html = editor.getHTML();
 			const md = htmlToMarkdown(html);
 			useEditorStore.getState().updateContent(md);
@@ -181,10 +506,25 @@ export function KBEditor() {
 		extensions: editorExtensions,
 		content: "",
 		onUpdate: handleUpdate,
+		onBlur: () => {
+			void flushSuggestions();
+		},
+		onSelectionUpdate: ({ editor: ed }) => {
+			if (useEditorStore.getState().editMode !== "suggesting") return;
+			const { from } = ed.state.selection;
+			const $pos = ed.state.doc.resolve(from);
+			const idx = $pos.depth > 0 ? $pos.index(0) : 0;
+			const prev = activeBlockIndexRef.current;
+			activeBlockIndexRef.current = idx;
+			// Moved to a different top-level block — flush edits to the prior one.
+			if (prev !== null && prev !== idx && suggestDirtyRef.current) {
+				void flushSuggestions();
+			}
+		},
 		editorProps: {
 			attributes: {
 				class:
-					"focus:outline-none min-h-[calc(100vh-12rem)] px-4 sm:px-8 py-6 max-w-3xl mx-auto",
+					"focus:outline-none min-h-[calc(100vh-12rem)] px-4 sm:px-8 py-6 max-w-[var(--editor-max-w,48rem)] mx-auto",
 			},
 			handleKeyDown: (view, event) => {
 				if (
@@ -348,6 +688,10 @@ export function KBEditor() {
 		immediatelyRender: false,
 	});
 
+	// Stable ref to the editor so callbacks with empty deps reach the live instance.
+	const editorRef = useRef<typeof editor>(editor);
+	editorRef.current = editor;
+
 	// When content updates from store (after loadPage), set it in editor
 	const prevPathRef = useRef<string | null>(null);
 	const renderedKeyRef = useRef<string | null>(null);
@@ -563,12 +907,136 @@ export function KBEditor() {
 							</div>
 						) : (
 							<div className="flex-1 relative" dir={isRtl ? "rtl" : undefined}>
+								{editMode === "suggesting" && (
+									<div className="absolute top-0 inset-x-0 z-20 flex items-center justify-center gap-2 px-3 py-1 bg-primary/10 border-b border-primary/20 text-[11px] text-primary pointer-events-none">
+										Suggesting mode · your edits become suggestions for review
+									</div>
+								)}
 								<div
-									className="absolute inset-0 overflow-y-auto"
+									ref={scrollContainerRef}
+									className={`absolute inset-0 overflow-y-auto ${
+										editMode === "suggesting" ? "pt-7" : ""
+								}`}
+									style={{ ["--editor-max-w" as string]: editorMaxW }}
 									data-editor-scroll
 								>
+									{/* Absolutely-positioned overlay for comment pips and suggestion cards.
+									     height:0 so it doesn't push content; children overflow freely.
+									     Positions from blockRefPositions are relative to scroll container top. */}
+									<div
+										aria-hidden="true"
+										className="relative pointer-events-none"
+										style={{ height: 0 }}
+									>
+										{/* Comment pips — one per block with at least one comment */}
+										{Object.entries(commentsByRef).map(([blockRef, blockComments]) => {
+											const pos = blockRefPositions.get(blockRef);
+											if (!pos) return null;
+											return (
+												<div key={`pip-${blockRef}`} style={{ pointerEvents: "auto" }}>
+													<CommentPip
+														blockRef={blockRef}
+														comments={blockComments}
+														top={pos.top + 4}
+														left={Math.max(0, pos.left - 20)}
+														onClick={() => {
+															const el = scrollContainerRef.current?.querySelector(
+																`[data-block-ref="${blockRef}"]`,
+															) as HTMLElement | null;
+															if (el) setThreadTarget({ blockRef, el });
+														}}
+													/>
+												</div>
+											);
+										})}
+
+										{/* Suggestion cards — one per pending suggestion */}
+										{currentPath && pendingSuggestions.map((sg) => {
+											const pos = blockRefPositions.get(sg.ref);
+											const currentBlock = snapshotBlocks.find((b) => b.ref === sg.ref);
+											if (!pos || !currentBlock) return null;
+											const cardTop =
+												sg.kind === "insertAfter" ? pos.bottom + 4 :
+												sg.kind === "insertBefore" ? Math.max(0, pos.top - 80) :
+												pos.top;
+											return (
+												<div key={`sug-${sg.id}`} style={{ pointerEvents: "auto" }}>
+													<SuggestionCard
+														path={currentPath}
+														suggestion={sg}
+														currentMarkdown={currentBlock.markdown}
+														baseRevision={snapshotRevision}
+														getLatestRevision={() =>
+															useProofStore.getState().byPath[currentPath]?.snapshotRevision ?? 0
+														}
+														top={cardTop}
+														left={pos.left}
+														width={pos.width}
+														onSettled={() => {
+															void useProofStore.getState().loadSidecar(currentPath);
+															void useProofStore.getState().loadSnapshot(currentPath);
+														}}
+													/>
+												</div>
+											);
+										})}
+									</div>
+
+									{/* Comment thread — Portal-rendered, driven by threadTarget */}
+									{threadTarget && currentPath && (
+										<CommentThread
+											path={currentPath}
+											blockRef={threadTarget.blockRef}
+											comments={commentsByRef[threadTarget.blockRef] ?? []}
+											anchorEl={threadTarget.el}
+											onClose={() => setThreadTarget(null)}
+										/>
+									)}
+
+									{/* Human suggest-edit popover — driven by suggestTarget */}
+									{suggestTarget && currentPath && (
+										<SuggestEditPopover
+											path={currentPath}
+											blockRef={suggestTarget.blockRef}
+											currentMarkdown={suggestTarget.markdown}
+											anchor={suggestTarget.anchor}
+											onClose={() => setSuggestTarget(null)}
+										/>
+									)}
+
 									<EditorContent editor={editor} />
-									<EditorBubbleMenu editor={editor} />
+									{/* Proof-span hover delegation */}
+									<div
+										aria-hidden="true"
+										className="contents"
+										onMouseOver={(e) => {
+											const span = (e.target as HTMLElement).closest<HTMLElement>(".proof-span");
+											if (span && span !== proofTarget) setProofTarget(span);
+										}}
+										onMouseOut={(e) => {
+											const related = e.relatedTarget as HTMLElement | null;
+											if (!related?.closest(".proof-span")) setProofTarget(null);
+										}}
+									/>
+									{currentPath && (
+										<ProofSpanPopover
+											targetEl={proofTarget}
+											path={currentPath}
+											onClose={() => setProofTarget(null)}
+											onComment={() => {
+												if (!proofTarget) return;
+												const blockEl = proofTarget.closest<HTMLElement>("[data-block-ref]");
+												if (!blockEl) return;
+												const blockRef = blockEl.getAttribute("data-block-ref");
+												if (blockRef) setThreadTarget({ blockRef, el: blockEl });
+											}}
+										/>
+									)}
+									<EditorBubbleMenu
+										editor={editor}
+										onSuggestEdit={openSuggestForSelection}
+										onComment={openCommentForSelection}
+									/>
 									<TableMenu editor={editor} />
 									<SlashCommands editor={editor} />
 									<WikiLinkPicker
@@ -577,7 +1045,7 @@ export function KBEditor() {
 									/>
 
 									{/* AI Edit Prompt + slash hint */}
-									<div className="max-w-3xl mx-auto px-8 pb-8 flex items-center gap-4">
+									<div className="max-w-[var(--editor-max-w,48rem)] mx-auto px-8 pb-8 flex items-center gap-4">
 										<button
 											onClick={handleOpenAI}
 											className="group flex items-center gap-2 text-[13px] text-muted-foreground/50 hover:text-muted-foreground transition-colors cursor-pointer"
@@ -618,11 +1086,46 @@ export function KBEditor() {
 								</kbd>{" "}
 								commands
 							</span>
-							<span>
-								{saveStatus === "saving" && "Saving..."}
-								{saveStatus === "saved" && "Saved"}
-								{saveStatus === "error" && "Save failed"}
-							</span>
+							<div className="flex items-center gap-3">
+								{/* Mode toggle */}
+								<div
+									className="flex items-center rounded-md border border-border overflow-hidden text-[10.5px]"
+									role="radiogroup"
+									aria-label="Edit mode"
+								>
+									<button
+										type="button"
+										role="radio"
+										aria-checked={editMode === "editing"}
+										onClick={() => setEditMode("editing")}
+										className={`px-2 py-0.5 transition-colors ${
+											editMode === "editing"
+												? "bg-primary text-primary-foreground"
+												: "text-muted-foreground hover:bg-accent"
+										}`}
+									>
+										Editing
+									</button>
+									<button
+										type="button"
+										role="radio"
+										aria-checked={editMode === "suggesting"}
+										onClick={() => setEditMode("suggesting")}
+										className={`px-2 py-0.5 transition-colors ${
+											editMode === "suggesting"
+												? "bg-primary text-primary-foreground"
+												: "text-muted-foreground hover:bg-accent"
+										}`}
+									>
+										Suggesting
+									</button>
+								</div>
+								<span>
+									{saveStatus === "saving" && "Saving..."}
+									{saveStatus === "saved" && "Saved"}
+									{saveStatus === "error" && "Save failed"}
+								</span>
+							</div>
 						</div>
 					</>
 				)}

package/.next/standalone/src/components/editor/extensions/proof-span.ts

@@ -0,0 +1,60 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+export const ProofSpan = Mark.create({
+	name: "proofSpan",
+	priority: 900,
+	inclusive: false,
+	keepOnSplit: false,
+
+	addAttributes() {
+		return {
+			spanId: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("id"),
+				renderHTML: (a) => ({ id: a.spanId }),
+			},
+			origin: {
+				default: "ai",
+				parseHTML: (el) => el.getAttribute("origin"),
+				renderHTML: (a) => ({ origin: a.origin }),
+			},
+			basis: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("basis"),
+				renderHTML: (a) => ({ basis: a.basis }),
+			},
+			basisDetail: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("basis-detail"),
+				renderHTML: (a) => ({ "basis-detail": a.basisDetail }),
+			},
+			by: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("by"),
+				renderHTML: (a) => ({ by: a.by }),
+			},
+			at: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("at"),
+				renderHTML: (a) => ({ at: a.at }),
+			},
+			inResponseTo: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("in-response-to"),
+				renderHTML: (a) => ({ "in-response-to": a.inResponseTo }),
+			},
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: "proof-span" }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"proof-span",
+			mergeAttributes(HTMLAttributes, { class: "proof-span" }),
+			0,
+		];
+	},
+});

package/.next/standalone/src/components/editor/extensions.ts

@@ -28,6 +28,7 @@ import { createLowlight } from "lowlight";
 import { CalloutExtension } from "./callout-extension";
 import { DragHandle } from "./extensions/drag-handle";
 import { HeadingAnchors } from "./extensions/heading-anchors";
+import { ProofSpan } from "./extensions/proof-span";
 import { ResizableImage } from "./extensions/resizable-image";
 import { WikiLink } from "./wiki-link-extension";
 
@@ -139,6 +140,7 @@ export const editorExtensions = [
 		},
 	}),
 	CalloutExtension,
+	ProofSpan,
 	TextAlign.configure({ types: ["heading", "paragraph"] }),
 	Subscript,
 	Superscript,