wiki-viewer 1.14.1 → 2.0.0

package/.next/standalone/src/components/editor/extensions/drag-handle.ts

@@ -1,325 +0,0 @@
-import { Extension } from "@tiptap/core";
-import {
-	NodeSelection,
-	Plugin,
-	PluginKey,
-	TextSelection,
-	type Transaction,
-} from "@tiptap/pm/state";
-import type { EditorView } from "@tiptap/pm/view";
-
-/**
- * Move the top-level block containing the current selection up or down
- * by one sibling. Returns true if the doc was mutated. Used for keyboard
- * reorder (Alt+Shift+Up/Down) so non-mouse users get parity with the
- * drag handle (audit #102).
- */
-function moveCurrentBlock(
-	state: EditorView["state"],
-	dispatch: ((tr: Transaction) => void) | undefined,
-	direction: "up" | "down",
-): boolean {
-	const { selection, doc } = state;
-	// Resolve the top-level block that holds the current selection. We walk
-	// up to depth 1 because doc → top-level-block → … is the layout we care
-	// about; nested list items still move as siblings of their parent block.
-	let $pos = doc.resolve(selection.from);
-	while ($pos.depth > 1) {
-		$pos = doc.resolve($pos.before($pos.depth));
-	}
-	if ($pos.depth === 0) return false;
-
-	const blockPos = $pos.before(1);
-	const block = doc.nodeAt(blockPos);
-	if (!block) return false;
-
-	const parent = doc;
-	const indexInParent = $pos.index(0);
-	const siblingIndex =
-		direction === "up" ? indexInParent - 1 : indexInParent + 1;
-	if (siblingIndex < 0 || siblingIndex >= parent.childCount) return false;
-
-	const sibling = parent.child(siblingIndex);
-	let tr = state.tr;
-
-	// Remove the block, then re-insert it on the other side of the sibling.
-	// Computing the insertion target *before* the cut keeps positions stable.
-	const blockEnd = blockPos + block.nodeSize;
-	const siblingStart =
-		direction === "up" ? blockPos - sibling.nodeSize : blockEnd;
-	const siblingEnd =
-		direction === "up" ? blockPos : blockEnd + sibling.nodeSize;
-
-	if (direction === "up") {
-		tr = tr.delete(blockPos, blockEnd);
-		tr = tr.insert(siblingStart, block);
-		// After re-insert the block lives at siblingStart; restore selection on it.
-		tr = tr.setSelection(NodeSelection.create(tr.doc, siblingStart));
-	} else {
-		tr = tr.delete(blockPos, blockEnd);
-		// After deletion the sibling shifts left by block.nodeSize, so the
-		// insertion target is siblingEnd - block.nodeSize.
-		const insertAt = siblingEnd - block.nodeSize;
-		tr = tr.insert(insertAt, block);
-		tr = tr.setSelection(NodeSelection.create(tr.doc, insertAt));
-	}
-
-	if (dispatch) dispatch(tr.scrollIntoView());
-	return true;
-}
-
-const HANDLE_ID = "cabinet-drag-handle";
-const ADD_BTN_ID = "cabinet-gutter-add";
-
-function getOrCreateAddButton(): HTMLButtonElement {
-	let el = document.getElementById(ADD_BTN_ID) as HTMLButtonElement | null;
-	if (!el) {
-		el = document.createElement("button");
-		el.id = ADD_BTN_ID;
-		el.type = "button";
-		el.setAttribute("aria-label", "Add block");
-		el.title = "Add block";
-		el.innerHTML = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 1V9M1 5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
-		Object.assign(el.style, {
-			position: "absolute",
-			display: "none",
-			alignItems: "center",
-			justifyContent: "center",
-			width: "18px",
-			height: "18px",
-			cursor: "pointer",
-			borderRadius: "4px",
-			color: "var(--muted-foreground)",
-			opacity: "0.55",
-			zIndex: "40",
-			transition: "opacity 120ms ease, background 120ms ease",
-			background: "transparent",
-			border: "none",
-			padding: "0",
-		} as Partial<CSSStyleDeclaration>);
-		el.addEventListener("mouseenter", () => {
-			if (!el) return;
-			el.style.opacity = "1";
-			el.style.background = "var(--muted)";
-		});
-		el.addEventListener("mouseleave", () => {
-			if (!el) return;
-			el.style.opacity = "0.55";
-			el.style.background = "transparent";
-		});
-		document.body.appendChild(el);
-	}
-	return el;
-}
-
-function findBlockAt(view: EditorView, coords: { left: number; top: number }) {
-	const pos = view.posAtCoords(coords);
-	if (!pos) return null;
-	let $pos = view.state.doc.resolve(pos.inside >= 0 ? pos.inside : pos.pos);
-	while ($pos.depth > 0 && !$pos.parent.type.isBlock) {
-		$pos = view.state.doc.resolve($pos.before());
-	}
-	// Walk up until we find a top-level child of the doc
-	let depth = $pos.depth;
-	while (depth > 1) {
-		const parent = view.state.doc.resolve($pos.before(depth)).parent;
-		if (parent.type.name === "doc") break;
-		depth -= 1;
-	}
-	const nodePos = depth === 0 ? 0 : $pos.before(Math.max(depth, 1));
-	const node = view.state.doc.nodeAt(nodePos);
-	if (!node) return null;
-	const dom = view.nodeDOM(nodePos) as HTMLElement | null;
-	return { pos: nodePos, node, dom };
-}
-
-function getOrCreateHandle(): HTMLDivElement {
-	let el = document.getElementById(HANDLE_ID) as HTMLDivElement | null;
-	if (!el) {
-		el = document.createElement("div");
-		el.id = HANDLE_ID;
-		el.setAttribute("data-drag-handle", "true");
-		el.draggable = true;
-		el.innerHTML = `<svg width="10" height="16" viewBox="0 0 10 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="3" r="1.2"/><circle cx="2.5" cy="8" r="1.2"/><circle cx="2.5" cy="13" r="1.2"/><circle cx="7.5" cy="3" r="1.2"/><circle cx="7.5" cy="8" r="1.2"/><circle cx="7.5" cy="13" r="1.2"/></svg>`;
-		Object.assign(el.style, {
-			position: "absolute",
-			display: "none",
-			cursor: "grab",
-			padding: "2px 4px",
-			borderRadius: "4px",
-			color: "var(--muted-foreground)",
-			opacity: "0.55",
-			zIndex: "40",
-			userSelect: "none",
-			transition: "opacity 120ms ease",
-		} as CSSStyleDeclaration);
-		el.addEventListener("mouseenter", () => {
-			if (el) el.style.opacity = "1";
-		});
-		el.addEventListener("mouseleave", () => {
-			if (el) el.style.opacity = "0.55";
-		});
-		document.body.appendChild(el);
-	}
-	return el;
-}
-
-export const DragHandle = Extension.create({
-	name: "dragHandle",
-
-	addKeyboardShortcuts() {
-		// Audit #102: drag handle is mouse-only. Add Alt+Shift+ArrowUp /
-		// Alt+Shift+ArrowDown so keyboard users can reorder blocks too.
-		return {
-			"Mod-Alt-ArrowUp": ({ editor }) =>
-				moveCurrentBlock(editor.state, editor.view.dispatch, "up"),
-			"Mod-Alt-ArrowDown": ({ editor }) =>
-				moveCurrentBlock(editor.state, editor.view.dispatch, "down"),
-			"Alt-Shift-ArrowUp": ({ editor }) =>
-				moveCurrentBlock(editor.state, editor.view.dispatch, "up"),
-			"Alt-Shift-ArrowDown": ({ editor }) =>
-				moveCurrentBlock(editor.state, editor.view.dispatch, "down"),
-		};
-	},
-
-	addProseMirrorPlugins() {
-		let currentBlock: {
-			pos: number;
-			node: { nodeSize: number };
-			dom: HTMLElement;
-		} | null = null;
-
-		const handle = typeof document !== "undefined" ? getOrCreateHandle() : null;
-		const addBtn =
-			typeof document !== "undefined" ? getOrCreateAddButton() : null;
-
-		const hide = () => {
-			if (handle) handle.style.display = "none";
-			if (addBtn) addBtn.style.display = "none";
-			currentBlock = null;
-		};
-
-		return [
-			new Plugin({
-				key: new PluginKey("cabinetDragHandle"),
-				view: (view) => {
-					if (!handle) return { destroy: () => {} };
-
-					const onMouseMove = (event: MouseEvent) => {
-						if (!view.editable) return;
-						const rect = view.dom.getBoundingClientRect();
-						if (
-							event.clientX < rect.left - 60 ||
-							event.clientX > rect.right + 60 ||
-							event.clientY < rect.top ||
-							event.clientY > rect.bottom
-						) {
-							hide();
-							return;
-						}
-						// Probe inside the editor with clientX clamped to content
-						const probeX = Math.max(
-							rect.left + 20,
-							Math.min(rect.right - 20, event.clientX),
-						);
-						const block = findBlockAt(view, {
-							left: probeX,
-							top: event.clientY,
-						});
-						if (!block?.dom || !(block.dom instanceof HTMLElement)) {
-							hide();
-							return;
-						}
-						currentBlock = block as typeof currentBlock;
-						const domRect = block.dom.getBoundingClientRect();
-						handle.style.display = "flex";
-						handle.style.top = `${window.scrollY + domRect.top + 4}px`;
-						handle.style.left = `${window.scrollX + domRect.left - 22}px`;
-						if (addBtn) {
-							addBtn.style.display = "flex";
-							addBtn.style.top = `${window.scrollY + domRect.top + 4}px`;
-							addBtn.style.left = `${window.scrollX + domRect.left - 44}px`;
-						}
-					};
-
-					const onMouseLeave = () => hide();
-
-					const onAddClick = () => {
-						if (!currentBlock) return;
-						// Insert a new empty paragraph after the current block, then open slash menu
-						const afterPos = currentBlock.pos + currentBlock.node.nodeSize;
-						const insertable = afterPos <= view.state.doc.content.size;
-						const tr = view.state.tr;
-						if (insertable) {
-							// Place cursor at end of current block content (before node closing mark)
-							const endContent = afterPos - 1;
-							const sel = TextSelection.create(
-								view.state.doc,
-								Math.min(endContent, view.state.doc.content.size),
-							);
-							view.dispatch(tr.setSelection(sel));
-						}
-						view.focus();
-						// Split the block to create a new paragraph, then trigger slash menu
-						const splitTr = view.state.tr.split(view.state.selection.from);
-						view.dispatch(splitTr);
-						// Dispatch on view.dom so event.target is the ProseMirror element;
-						// this lets the global "/" hotkey guard (isEditableTarget) skip it
-						// while the slash-commands capture listener on window still fires.
-						view.dom.dispatchEvent(
-							new KeyboardEvent("keydown", {
-								key: "/",
-								bubbles: true,
-								cancelable: true,
-							}),
-						);
-					};
-
-					const onDragStart = (event: DragEvent) => {
-						if (!currentBlock || !event.dataTransfer) return;
-						const { pos, dom } = currentBlock;
-
-						// Select the block so PM treats it as the drag source
-						const tr = view.state.tr.setSelection(
-							NodeSelection.create(view.state.doc, pos),
-						);
-						view.dispatch(tr);
-
-						const slice = view.state.selection.content();
-						// Serialize slice content to HTML for external drop targets
-						const tmp = document.createElement("div");
-						tmp.appendChild(
-							view
-								.someProp("clipboardSerializer")
-								?.serializeFragment(slice.content) ??
-								document.createElement("div"),
-						);
-						event.dataTransfer.clearData();
-						event.dataTransfer.setData("text/html", tmp.innerHTML);
-						event.dataTransfer.setData("text/plain", dom.textContent ?? "");
-						event.dataTransfer.effectAllowed = "copyMove";
-						event.dataTransfer.setDragImage(dom, 0, 0);
-
-						// Hand PM the slice so its built-in drop handler performs the move
-						view.dragging = { slice, move: true };
-					};
-
-					window.addEventListener("mousemove", onMouseMove);
-					view.dom.addEventListener("mouseleave", onMouseLeave);
-					handle.addEventListener("dragstart", onDragStart);
-					if (addBtn) addBtn.addEventListener("click", onAddClick);
-
-					return {
-						destroy() {
-							window.removeEventListener("mousemove", onMouseMove);
-							view.dom.removeEventListener("mouseleave", onMouseLeave);
-							handle.removeEventListener("dragstart", onDragStart);
-							if (addBtn) addBtn.removeEventListener("click", onAddClick);
-							hide();
-						},
-					};
-				},
-			}),
-		];
-	},
-});

package/.next/standalone/src/components/editor/extensions/heading-anchors.ts

@@ -1,55 +0,0 @@
-import { Extension } from "@tiptap/core";
-import type { Node } from "@tiptap/pm/model";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
-
-function slugify(text: string): string {
-	return text
-		.toLowerCase()
-		.replace(/[^\w\s-]/g, "")
-		.trim()
-		.replace(/\s+/g, "-")
-		.replace(/-+/g, "-");
-}
-
-const HEADING_ANCHOR_KEY = new PluginKey("headingAnchors");
-
-function buildDecorations(doc: Node): DecorationSet {
-	const decos: Decoration[] = [];
-	const seen = new Map<string, number>();
-	doc.descendants((node, pos) => {
-		if (node.type.name !== "heading") return;
-		const base = slugify(node.textContent);
-		if (!base) return;
-		const count = seen.get(base) ?? 0;
-		seen.set(base, count + 1);
-		const id = count === 0 ? base : `${base}-${count}`;
-		decos.push(Decoration.node(pos, pos + node.nodeSize, { id }));
-	});
-	return DecorationSet.create(doc, decos);
-}
-
-export const HeadingAnchors = Extension.create({
-	name: "headingAnchors",
-
-	addProseMirrorPlugins() {
-		return [
-			new Plugin({
-				key: HEADING_ANCHOR_KEY,
-				state: {
-					init(_, { doc }) {
-						return buildDecorations(doc);
-					},
-					apply(tr, old) {
-						return tr.docChanged ? buildDecorations(tr.doc) : old;
-					},
-				},
-				props: {
-					decorations(state) {
-						return HEADING_ANCHOR_KEY.getState(state) as DecorationSet;
-					},
-				},
-			}),
-		];
-	},
-});

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

@@ -1,60 +0,0 @@
-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/resizable-image.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import Image from "@tiptap/extension-image";
-import {
-	type NodeViewProps,
-	NodeViewWrapper,
-	ReactNodeViewRenderer,
-} from "@tiptap/react";
-import { useCallback, useRef, useState } from "react";
-
-interface ImageAttrs {
-	src: string;
-	alt?: string | null;
-	title?: string | null;
-	width?: string | number | null;
-	align?: "left" | "center" | "right" | null;
-}
-
-function ResizableImageComponent(props: NodeViewProps) {
-	const { node, updateAttributes, selected, editor } = props;
-	const attrs = node.attrs as ImageAttrs;
-	const imgRef = useRef<HTMLImageElement | null>(null);
-	const wrapperRef = useRef<HTMLDivElement | null>(null);
-	const [liveWidth, setLiveWidth] = useState<number | null>(null);
-
-	const align = attrs.align ?? "center";
-
-	const beginResize = useCallback(
-		(e: React.PointerEvent<HTMLDivElement>, anchor: "left" | "right") => {
-			if (!editor.isEditable) return;
-			e.preventDefault();
-			e.stopPropagation();
-			const img = imgRef.current;
-			const wrap = wrapperRef.current;
-			if (!img || !wrap) return;
-
-			const startX = e.clientX;
-			const startWidth = img.getBoundingClientRect().width;
-			const containerWidth =
-				wrap.parentElement?.getBoundingClientRect().width ?? 800;
-
-			const onMove = (ev: PointerEvent) => {
-				const delta =
-					anchor === "right" ? ev.clientX - startX : startX - ev.clientX;
-				const next = Math.max(80, Math.min(containerWidth, startWidth + delta));
-				setLiveWidth(next);
-			};
-			const onUp = () => {
-				window.removeEventListener("pointermove", onMove);
-				window.removeEventListener("pointerup", onUp);
-				setLiveWidth((curr) => {
-					if (curr != null) {
-						updateAttributes({ width: Math.round(curr) });
-					}
-					return null;
-				});
-			};
-			window.addEventListener("pointermove", onMove);
-			window.addEventListener("pointerup", onUp);
-		},
-		[editor.isEditable, updateAttributes],
-	);
-
-	const widthStyle = (() => {
-		if (liveWidth != null) return `${Math.round(liveWidth)}px`;
-		if (typeof attrs.width === "number") return `${attrs.width}px`;
-		if (typeof attrs.width === "string" && attrs.width) return attrs.width;
-		return undefined;
-	})();
-
-	const alignClass =
-		align === "left" ? "mr-auto" : align === "right" ? "ml-auto" : "mx-auto";
-
-	return (
-		<NodeViewWrapper
-			as="div"
-			className={`resizable-image my-3 ${alignClass}`}
-			data-align={align}
-			style={{ width: widthStyle ?? "fit-content", maxWidth: "100%" }}
-		>
-			<div
-				ref={wrapperRef}
-				className={`relative group inline-block max-w-full ${selected ? "ring-2 ring-primary rounded-md" : ""}`}
-				contentEditable={false}
-			>
-				<img
-					ref={imgRef}
-					src={attrs.src}
-					alt={attrs.alt ?? ""}
-					title={attrs.title ?? undefined}
-					className="block rounded-md max-w-full h-auto"
-					style={{ width: widthStyle }}
-					draggable={false}
-				/>
-				{editor.isEditable && (
-					<>
-						<div
-							aria-label="Resize from left"
-							onPointerDown={(e) => beginResize(e, "left")}
-							className="hover-reveal resize-hit absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-						>
-							<div className="w-1 h-8 bg-card border border-border rounded-full shadow" />
-						</div>
-						<div
-							aria-label="Resize from right"
-							onPointerDown={(e) => beginResize(e, "right")}
-							className="hover-reveal resize-hit absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
-						>
-							<div className="w-1 h-8 bg-card border border-border rounded-full shadow" />
-						</div>
-						{liveWidth != null && (
-							<div className="absolute top-1 right-1 text-[10px] px-1.5 py-0.5 rounded bg-primary/80 text-primary-foreground font-mono">
-								{Math.round(liveWidth)}px
-							</div>
-						)}
-					</>
-				)}
-			</div>
-		</NodeViewWrapper>
-	);
-}
-
-export const ResizableImage = Image.extend({
-	name: "image",
-	draggable: true,
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			width: {
-				default: null,
-				parseHTML: (element) => {
-					const w = element.getAttribute("width") ?? element.style.width;
-					if (!w) return null;
-					const match = /^(\d+)(px)?$/.exec(w);
-					return match ? Number(match[1]) : w;
-				},
-				renderHTML: (attributes: ImageAttrs) => {
-					if (!attributes.width) return {};
-					const w =
-						typeof attributes.width === "number"
-							? `${attributes.width}px`
-							: attributes.width;
-					return { style: `width: ${w}` };
-				},
-			},
-			align: {
-				default: null,
-				parseHTML: (element) => element.getAttribute("data-align"),
-				renderHTML: (attributes: ImageAttrs) => {
-					if (!attributes.align) return {};
-					return { "data-align": attributes.align };
-				},
-			},
-		};
-	},
-	addNodeView() {
-		return ReactNodeViewRenderer(ResizableImageComponent);
-	},
-});