wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/table-menu.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import {
+	cellAround,
+	isInTable,
+	moveTableColumn,
+	moveTableRow,
+	selectedRect,
+} from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import {
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	Columns3,
+	PanelLeft,
+	PanelTop,
+	Rows3,
+	Table,
+	Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TableMenuProps {
+	editor: Editor | null;
+}
+
+interface TableButtonProps {
+	label: string;
+	icon: React.ComponentType<{ className?: string }>;
+	disabled?: boolean;
+	active?: boolean;
+	danger?: boolean;
+	onAction: () => void;
+}
+
+function TableButton({
+	label,
+	icon: Icon,
+	disabled,
+	active,
+	danger,
+	onAction,
+}: TableButtonProps) {
+	return (
+		<button
+			type="button"
+			aria-label={label}
+			title={label}
+			disabled={disabled}
+			onMouseDown={(event) => event.preventDefault()}
+			onClick={(event) => {
+				event.preventDefault();
+				onAction();
+			}}
+			className={cn(
+				"h-7 w-7 inline-flex items-center justify-center rounded text-foreground/80 hover:bg-accent transition-colors disabled:pointer-events-none disabled:opacity-35",
+				active && "bg-accent text-foreground",
+				danger && "text-destructive hover:bg-destructive/10",
+			)}
+		>
+			<Icon className="h-3.5 w-3.5" />
+		</button>
+	);
+}
+
+function Separator() {
+	return <div className="mx-1 h-5 w-px bg-border" />;
+}
+
+export function TableMenu({ editor }: TableMenuProps) {
+	if (!editor) return null;
+
+	const getRect = () => {
+		if (!isInTable(editor.state)) return null;
+		try {
+			return selectedRect(editor.state);
+		} catch {
+			return null;
+		}
+	};
+
+	const run = (action: () => boolean) => {
+		const ok = action();
+		if (ok) {
+			editor.commands.focus();
+			editor.commands.fixTables();
+		}
+	};
+
+	const moveRow = (direction: -1 | 1) => {
+		const rect = getRect();
+		if (!rect) return;
+		const from = rect.top;
+		const to = from + direction;
+		if (to < 0 || to >= rect.map.height) return;
+		moveTableRow({ from, to })(editor.state, editor.view.dispatch);
+		editor.commands.focus();
+	};
+
+	const moveColumn = (direction: -1 | 1) => {
+		const rect = getRect();
+		if (!rect) return;
+		const from = rect.left;
+		const to = from + direction;
+		if (to < 0 || to >= rect.map.width) return;
+		moveTableColumn({ from, to })(editor.state, editor.view.dispatch);
+		editor.commands.focus();
+	};
+
+	const selectCellText = () => {
+		const $cell = cellAround(editor.state.selection.$from);
+		const cell = $cell?.nodeAfter;
+		if (!$cell || !cell) return;
+		editor
+			.chain()
+			.focus()
+			.setTextSelection({
+				from: $cell.pos + 1,
+				to: $cell.pos + cell.nodeSize - 1,
+			})
+			.run();
+	};
+
+	const rect = getRect();
+	const canMoveRowUp = !!rect && rect.top > 0;
+	const canMoveRowDown = !!rect && rect.top < rect.map.height - 1;
+	const canMoveColumnLeft = !!rect && rect.left > 0;
+	const canMoveColumnRight = !!rect && rect.left < rect.map.width - 1;
+
+	return (
+		<BubbleMenu
+			editor={editor}
+			pluginKey="tableMenu"
+			options={{ placement: "top", offset: 10 }}
+			shouldShow={({ editor: activeEditor }) => activeEditor.isActive("table")}
+			className="flex items-center gap-0.5 rounded-md border border-border bg-popover px-1 py-1 shadow-lg"
+		>
+			<TableButton
+				label="Select cell text"
+				icon={Table}
+				onAction={selectCellText}
+			/>
+			<Separator />
+			<TableButton
+				label="Add row above"
+				icon={Rows3}
+				onAction={() => run(() => editor.chain().focus().addRowBefore().run())}
+			/>
+			<TableButton
+				label="Add row below"
+				icon={ArrowDown}
+				onAction={() => run(() => editor.chain().focus().addRowAfter().run())}
+			/>
+			<TableButton
+				label="Move row up"
+				icon={ArrowUp}
+				disabled={!canMoveRowUp}
+				onAction={() => moveRow(-1)}
+			/>
+			<TableButton
+				label="Move row down"
+				icon={ArrowDown}
+				disabled={!canMoveRowDown}
+				onAction={() => moveRow(1)}
+			/>
+			<TableButton
+				label="Delete row"
+				icon={Trash2}
+				danger
+				onAction={() => run(() => editor.chain().focus().deleteRow().run())}
+			/>
+			<Separator />
+			<TableButton
+				label="Add column before"
+				icon={Columns3}
+				onAction={() =>
+					run(() => editor.chain().focus().addColumnBefore().run())
+				}
+			/>
+			<TableButton
+				label="Add column after"
+				icon={ArrowRight}
+				onAction={() =>
+					run(() => editor.chain().focus().addColumnAfter().run())
+				}
+			/>
+			<TableButton
+				label="Move column left"
+				icon={ArrowLeft}
+				disabled={!canMoveColumnLeft}
+				onAction={() => moveColumn(-1)}
+			/>
+			<TableButton
+				label="Move column right"
+				icon={ArrowRight}
+				disabled={!canMoveColumnRight}
+				onAction={() => moveColumn(1)}
+			/>
+			<TableButton
+				label="Delete column"
+				icon={Trash2}
+				danger
+				onAction={() => run(() => editor.chain().focus().deleteColumn().run())}
+			/>
+			<Separator />
+			<TableButton
+				label="Toggle header row"
+				icon={PanelTop}
+				onAction={() =>
+					run(() => editor.chain().focus().toggleHeaderRow().run())
+				}
+			/>
+			<TableButton
+				label="Toggle header column"
+				icon={PanelLeft}
+				onAction={() =>
+					run(() => editor.chain().focus().toggleHeaderColumn().run())
+				}
+			/>
+			<Separator />
+			<TableButton
+				label="Delete table"
+				icon={Trash2}
+				danger
+				onAction={() => editor.chain().focus().deleteTable().run()}
+			/>
+		</BubbleMenu>
+	);
+}

package/.next/standalone/src/components/editor/website-viewer.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ArrowLeft, ExternalLink } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface WebsiteViewerProps {
+	path: string;
+	title: string;
+	/** Override iframe src. Defaults to `/api/assets/{path}/index.html`. */
+	src?: string;
+	fullscreen?: boolean;
+	onExit?: () => void;
+}
+
+export function WebsiteViewer({
+	path,
+	title,
+	src,
+	fullscreen,
+	onExit,
+}: WebsiteViewerProps) {
+	const iframeSrc = src ?? `/api/assets/${path}/index.html`;
+	const exitButton =
+		fullscreen && onExit ? (
+			<Button
+				variant="ghost"
+				size="sm"
+				className="h-7 gap-1.5 text-xs"
+				onClick={onExit}
+				title="Exit app"
+			>
+				<ArrowLeft className="h-3.5 w-3.5" />
+				Exit app
+			</Button>
+		) : null;
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar
+				path={path}
+				badge={fullscreen ? "App" : undefined}
+				showBreadcrumb={!fullscreen}
+				leading={
+					fullscreen ? (
+						<>
+							{exitButton}
+							<span className="truncate text-[13px] font-medium text-foreground">
+								{title}
+							</span>
+						</>
+					) : null
+				}
+			>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => window.open(iframeSrc, "_blank")}
+				>
+					<ExternalLink className="h-3.5 w-3.5" />
+					Open in new tab
+				</Button>
+			</ViewerToolbar>
+
+			<iframe
+				src={iframeSrc}
+				className="flex-1 w-full border-0 bg-card"
+				title={title}
+				sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation-by-user-activation"
+			/>
+		</div>
+	);
+}

package/.next/standalone/src/components/editor/wiki-link-create-dialog.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import type React from "react";
+import { useCallback, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	Dialog as DialogRoot,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { showError } from "@/lib/toast";
+import { useWikiSlugsStore } from "@/stores/wiki-slugs-store";
+
+type Dir = "entities" | "concepts" | "comparisons";
+
+export interface WikiCreateResult {
+	ok: boolean;
+	slug: string;
+	dir?: Dir;
+}
+
+interface DialogState {
+	slug: string;
+	dir: Dir;
+	title: string;
+}
+
+function humanizeSlug(slug: string): string {
+	return slug
+		.split("-")
+		.filter(Boolean)
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(" ");
+}
+
+const DIRS: Dir[] = ["entities", "concepts", "comparisons"];
+
+export function useWikiLinkCreate(): {
+	open: (slug: string) => Promise<WikiCreateResult>;
+	Dialog: React.ReactNode;
+} {
+	const [isOpen, setIsOpen] = useState(false);
+	const [dialogState, setDialogState] = useState<DialogState>({
+		slug: "",
+		dir: "entities",
+		title: "",
+	});
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const resolveRef = useRef<((result: WikiCreateResult) => void) | null>(null);
+
+	const open = useCallback((slug: string): Promise<WikiCreateResult> => {
+		setDialogState({
+			slug,
+			dir: "entities",
+			title: humanizeSlug(slug),
+		});
+		setIsOpen(true);
+		return new Promise<WikiCreateResult>((resolve) => {
+			resolveRef.current = resolve;
+		});
+	}, []);
+
+	const handleCancel = useCallback(() => {
+		setIsOpen(false);
+		resolveRef.current?.({ ok: false, slug: dialogState.slug });
+		resolveRef.current = null;
+	}, [dialogState.slug]);
+
+	const handleCreate = useCallback(async () => {
+		const { slug, dir, title } = dialogState;
+		setIsSubmitting(true);
+		try {
+			const res = await fetch("/api/wiki/page", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					slug,
+					dir,
+					title: title.trim() || undefined,
+				}),
+			});
+
+			if (res.ok || res.status === 409) {
+				// 409 means the page already exists — still a success from our POV
+				const store = useWikiSlugsStore.getState();
+				store.invalidate();
+				void store.load();
+				setIsOpen(false);
+				resolveRef.current?.({ ok: true, slug, dir });
+				resolveRef.current = null;
+			} else {
+				const data: unknown = await res.json().catch(() => ({}));
+				const msg =
+					data !== null &&
+					typeof data === "object" &&
+					"error" in data &&
+					typeof (data as { error: unknown }).error === "string"
+						? (data as { error: string }).error
+						: "Failed to create page";
+				showError(msg);
+			}
+		} catch {
+			showError("Failed to create page");
+		} finally {
+			setIsSubmitting(false);
+		}
+	}, [dialogState]);
+
+	const dialogNode = (
+		<DialogRoot
+			open={isOpen}
+			onOpenChange={(v) => {
+				if (!v) handleCancel();
+			}}
+		>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Create wiki page</DialogTitle>
+				</DialogHeader>
+
+				<div className="space-y-4 py-2">
+					<div className="space-y-1.5">
+						<Label htmlFor="wiki-create-slug">Slug</Label>
+						<Input
+							id="wiki-create-slug"
+							value={dialogState.slug}
+							readOnly
+							className="bg-muted cursor-default select-all"
+						/>
+					</div>
+
+					<div className="space-y-1.5">
+						<Label>Directory</Label>
+						<div className="flex gap-4">
+							{DIRS.map((d) => (
+								<label
+									key={d}
+									className="flex items-center gap-1.5 text-sm cursor-pointer"
+								>
+									<input
+										type="radio"
+										name="wiki-create-dir"
+										value={d}
+										checked={dialogState.dir === d}
+										onChange={() => setDialogState((s) => ({ ...s, dir: d }))}
+										className="accent-primary"
+									/>
+									{d}
+								</label>
+							))}
+						</div>
+					</div>
+
+					<div className="space-y-1.5">
+						<Label htmlFor="wiki-create-title">Title (optional)</Label>
+						<Input
+							id="wiki-create-title"
+							value={dialogState.title}
+							onChange={(e) =>
+								setDialogState((s) => ({ ...s, title: e.target.value }))
+							}
+							placeholder="Humanized title..."
+						/>
+					</div>
+				</div>
+
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={handleCancel}
+						disabled={isSubmitting}
+					>
+						Cancel
+					</Button>
+					<Button onClick={() => void handleCreate()} disabled={isSubmitting}>
+						{isSubmitting ? "Creating..." : "Create"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</DialogRoot>
+	);
+
+	return { open, Dialog: dialogNode };
+}

package/.next/standalone/src/components/editor/wiki-link-decorator.ts

@@ -0,0 +1,79 @@
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { useWikiSlugsStore } from "@/stores/wiki-slugs-store";
+
+const WIKI_LINK_DECORATOR_KEY = new PluginKey<DecorationSet>(
+	"wikiLinkDecorator",
+);
+
+const REFRESH_META = "wikiLinkDecorator:refresh";
+
+/**
+ * Walk the doc, find every wikiLink mark, and emit an inline decoration
+ * carrying data-broken="true" for any slug not in the slug index store.
+ *
+ * Decorations apply attributes during ProseMirror's own DOM render pass,
+ * so they don't trigger the MutationObserver feedback loop that direct
+ * setAttribute would.
+ */
+function buildDecorations(state: EditorState): DecorationSet {
+	const { has } = useWikiSlugsStore.getState();
+	const markType = state.schema.marks.wikiLink;
+	if (!markType) return DecorationSet.empty;
+
+	const decorations: Decoration[] = [];
+	state.doc.descendants((node, pos) => {
+		if (!node.isText) return;
+		const mark = node.marks.find((m) => m.type === markType);
+		if (!mark) return;
+		const slug = mark.attrs.slug as string | undefined;
+		if (!slug || has(slug)) return;
+		decorations.push(
+			Decoration.inline(pos, pos + node.nodeSize, {
+				"data-broken": "true",
+			}),
+		);
+	});
+
+	return DecorationSet.create(state.doc, decorations);
+}
+
+/**
+ * Plugin that marks wiki-links as broken when their slug is absent from
+ * the slug index. Recomputes on doc changes and when the slug store
+ * signals a refresh via a meta-only transaction.
+ */
+export function wikiLinkDecoratorPlugin(): Plugin {
+	return new Plugin<DecorationSet>({
+		key: WIKI_LINK_DECORATOR_KEY,
+		state: {
+			init: (_config, state) => buildDecorations(state),
+			apply(tr: Transaction, old: DecorationSet, _oldState, newState) {
+				if (tr.getMeta(REFRESH_META)) return buildDecorations(newState);
+				if (!tr.docChanged) return old.map(tr.mapping, tr.doc);
+				return buildDecorations(newState);
+			},
+		},
+		props: {
+			decorations(state) {
+				return WIKI_LINK_DECORATOR_KEY.getState(state) ?? DecorationSet.empty;
+			},
+		},
+		view(editorView) {
+			// Subscribe to slug-store changes. When the index loads or
+			// invalidates, dispatch a meta-only transaction so the plugin
+			// state recomputes against the latest snapshot.
+			const unsubscribe = useWikiSlugsStore.subscribe(() => {
+				const tr = editorView.state.tr.setMeta(REFRESH_META, true);
+				editorView.dispatch(tr);
+			});
+
+			return {
+				destroy() {
+					unsubscribe();
+				},
+			};
+		},
+	});
+}

package/.next/standalone/src/components/editor/wiki-link-extension.ts

@@ -0,0 +1,120 @@
+import { InputRule, Mark, mergeAttributes } from "@tiptap/core";
+import { wikiLinkDecoratorPlugin } from "./wiki-link-decorator";
+
+// Matches: [[slug]]  [[slug|alias]]  [[slug#anchor]]
+// Groups:  1=slug    2=alias         3=anchor
+const INPUT_RULE_REGEX = /\[\[([a-z0-9-]+)(?:\|([^\]#|]+)|#([a-z0-9-]+))?\]\]$/;
+
+declare module "@tiptap/core" {
+	interface Commands<ReturnType> {
+		wikiLink: {
+			/** Apply a wiki-link mark to the current selection. */
+			setWikiLink: (attrs: {
+				slug: string;
+				alias?: string | null;
+				anchor?: string | null;
+			}) => ReturnType;
+			/** Remove the wiki-link mark from the current selection. */
+			unsetWikiLink: () => ReturnType;
+		};
+	}
+}
+
+export const WikiLink = Mark.create({
+	name: "wikiLink",
+	priority: 1000,
+	keepOnSplit: false,
+	inclusive: false,
+
+	addAttributes() {
+		return {
+			slug: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-slug"),
+				renderHTML: (attributes) => ({
+					"data-slug": attributes.slug,
+				}),
+			},
+			alias: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-alias"),
+				renderHTML: (attributes) =>
+					attributes.alias != null ? { "data-alias": attributes.alias } : {},
+			},
+			anchor: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-anchor"),
+				renderHTML: (attributes) =>
+					attributes.anchor != null ? { "data-anchor": attributes.anchor } : {},
+			},
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'a[data-wiki-link="true"]' }];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		const slug = String(HTMLAttributes["data-slug"] ?? "");
+		const anchor =
+			HTMLAttributes["data-anchor"] != null
+				? String(HTMLAttributes["data-anchor"])
+				: null;
+		const href = anchor ? `#wiki:${slug}#${anchor}` : `#wiki:${slug}`;
+		return [
+			"a",
+			mergeAttributes(HTMLAttributes, {
+				"data-wiki-link": "true",
+				href,
+				class: "wiki-link",
+			}),
+			0,
+		];
+	},
+
+	addInputRules() {
+		// markInputRule always uses the last capture group as visible text and
+		// cannot produce variable text per form ([[slug]] vs [[slug|alias]] vs
+		// [[slug#anchor]]). A raw InputRule is required here.
+		return [
+			new InputRule({
+				find: INPUT_RULE_REGEX,
+				handler: ({ state, range, match }) => {
+					const slug: string = match[1] ?? "";
+					const alias: string | null = match[2] ?? null;
+					const anchor: string | null = match[3] ?? null;
+					const visibleText = alias ?? (anchor ? `${slug}#${anchor}` : slug);
+					const { tr } = state;
+					tr.replaceWith(
+						range.from,
+						range.to,
+						state.schema.text(visibleText, [
+							this.type.create({ slug, alias, anchor }),
+						]),
+					);
+				},
+			}),
+		];
+	},
+
+	addProseMirrorPlugins() {
+		return [wikiLinkDecoratorPlugin()];
+	},
+
+	addCommands() {
+		return {
+			setWikiLink:
+				(attrs) =>
+				({ commands }) =>
+					commands.setMark(this.name, {
+						slug: attrs.slug,
+						alias: attrs.alias ?? null,
+						anchor: attrs.anchor ?? null,
+					}),
+			unsetWikiLink:
+				() =>
+				({ commands }) =>
+					commands.unsetMark(this.name),
+		};
+	},
+});