wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/media-popover.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { Clipboard, Link as LinkIcon, Upload } from "lucide-react";
+import { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+export type MediaKind = "image" | "video" | "file";
+
+interface Props {
+	kind: MediaKind;
+	pagePath: string;
+	onCancel: () => void;
+	onInsert: (payload: { url: string; alt?: string; mimeType?: string }) => void;
+	anchor: { top: number; left: number };
+}
+
+async function uploadFile(
+	pagePath: string,
+	file: File,
+): Promise<{ url: string; filename: string } | null> {
+	const formData = new FormData();
+	formData.append("file", file);
+	try {
+		const res = await fetch(`/api/upload/${pagePath}`, {
+			method: "POST",
+			body: formData,
+		});
+		if (!res.ok) return null;
+		const data = await res.json();
+		return { url: data.url, filename: data.filename };
+	} catch {
+		return null;
+	}
+}
+
+function mimeFor(kind: MediaKind) {
+	if (kind === "image") return "image/*";
+	if (kind === "video") return "video/*";
+	return "*/*";
+}
+
+function titleFor(kind: MediaKind) {
+	if (kind === "image") return "Insert image";
+	if (kind === "video") return "Insert video";
+	return "Attach file";
+}
+
+export function MediaPopover({
+	kind,
+	pagePath,
+	onCancel,
+	onInsert,
+	anchor,
+}: Props) {
+	const [tab, setTab] = useState<"upload" | "url">("upload");
+	const [url, setUrl] = useState("");
+	const [uploading, setUploading] = useState(false);
+	const [err, setErr] = useState<string | null>(null);
+	const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+	const handleFiles = async (files: FileList | null) => {
+		if (!files || files.length === 0) return;
+		setUploading(true);
+		setErr(null);
+		try {
+			const file = files[0];
+			const result = await uploadFile(pagePath, file);
+			if (!result) {
+				setErr("Upload failed.");
+				return;
+			}
+			onInsert({ url: result.url, alt: file.name, mimeType: file.type });
+		} finally {
+			setUploading(false);
+		}
+	};
+
+	const handleUrl = () => {
+		const trimmed = url.trim();
+		if (!trimmed) return;
+		onInsert({ url: trimmed });
+	};
+
+	return (
+		<div
+			className="absolute z-50 w-[360px] bg-popover border border-border rounded-xl shadow-e-4 overflow-hidden"
+			style={{ top: anchor.top, left: anchor.left }}
+			onMouseDown={(e) => e.stopPropagation()}
+		>
+			<div className="flex items-center justify-between px-3 py-2 border-b border-border">
+				<div className="text-[12px] font-medium">{titleFor(kind)}</div>
+				<button
+					type="button"
+					onClick={onCancel}
+					className="text-[11px] text-muted-foreground hover:text-foreground"
+				>
+					Cancel
+				</button>
+			</div>
+
+			<div className="flex border-b border-border bg-muted/30">
+				<button
+					type="button"
+					onClick={() => setTab("upload")}
+					className={cn(
+						"flex-1 py-1.5 text-[11px] flex items-center justify-center gap-1.5 transition-colors",
+						tab === "upload"
+							? "bg-background text-foreground border-b-2 border-primary"
+							: "text-muted-foreground hover:text-foreground",
+					)}
+				>
+					<Upload className="w-3 h-3" /> Upload
+				</button>
+				<button
+					type="button"
+					onClick={() => setTab("url")}
+					className={cn(
+						"flex-1 py-1.5 text-[11px] flex items-center justify-center gap-1.5 transition-colors",
+						tab === "url"
+							? "bg-background text-foreground border-b-2 border-primary"
+							: "text-muted-foreground hover:text-foreground",
+					)}
+				>
+					<LinkIcon className="w-3 h-3" /> From URL
+				</button>
+			</div>
+
+			{tab === "upload" ? (
+				<div
+					className="p-4"
+					onDragOver={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+					}}
+					onDrop={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						handleFiles(e.dataTransfer.files);
+					}}
+				>
+					<button
+						type="button"
+						onClick={() => fileInputRef.current?.click()}
+						disabled={uploading}
+						className="w-full border-2 border-dashed border-border rounded-sm py-6 flex flex-col items-center justify-center text-muted-foreground hover:bg-accent/30 transition-colors"
+					>
+						<Upload className="w-5 h-5 mb-1.5" />
+						<span className="text-[12px] font-medium">
+							{uploading ? "Uploading…" : `Click to upload ${kind}`}
+						</span>
+						<span className="text-[10px] mt-0.5">or drop a file here</span>
+					</button>
+					<input
+						ref={fileInputRef}
+						type="file"
+						accept={mimeFor(kind)}
+						className="hidden"
+						onChange={(e) => handleFiles(e.target.files)}
+					/>
+					{err && (
+						<div className="mt-2 text-[11px] text-destructive">{err}</div>
+					)}
+				</div>
+			) : (
+				<div className="p-3 space-y-2">
+					<input
+						type="url"
+						autoFocus
+						value={url}
+						placeholder={
+							kind === "image"
+								? "https://example.com/image.png"
+								: kind === "video"
+									? "https://example.com/video.mp4"
+									: "https://example.com/file"
+						}
+						onChange={(e) => setUrl(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								handleUrl();
+							} else if (e.key === "Escape") {
+								onCancel();
+							}
+						}}
+						className="w-full bg-background border border-border rounded-sm px-2.5 py-1.5 text-[12px] focus:outline-none focus:ring-2 focus:ring-primary/30"
+					/>
+					<button
+						type="button"
+						onClick={handleUrl}
+						disabled={!url.trim()}
+						className="w-full py-1.5 text-[12px] rounded-sm bg-primary text-primary-foreground disabled:opacity-50 hover:bg-primary/90"
+					>
+						Insert
+					</button>
+				</div>
+			)}
+
+			<div className="px-3 py-2 border-t border-border bg-muted/30 text-[10px] text-muted-foreground flex items-start gap-1.5">
+				<Clipboard className="w-3 h-3 shrink-0 mt-[1px]" />
+				<span>
+					Tip: you can also{" "}
+					<strong className="text-foreground/80">paste</strong> or{" "}
+					<strong className="text-foreground/80">drag &amp; drop</strong> files
+					directly into the page — they&apos;ll be saved alongside this page
+					automatically.
+				</span>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { Download, ExternalLink } from "lucide-react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface MediaViewerProps {
+	path: string;
+	title: string;
+	type: "video" | "audio";
+}
+
+export function MediaViewer({ path, type }: MediaViewerProps) {
+	const src = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+	const ext = filename.includes(".")
+		? filename.split(".").pop()?.toUpperCase()
+		: type.toUpperCase();
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge={ext}>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => {
+						const a = document.createElement("a");
+						a.href = src;
+						a.download = filename;
+						a.click();
+					}}
+				>
+					<Download className="h-3.5 w-3.5" />
+					Download
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => window.open(src, "_blank")}
+				>
+					<ExternalLink className="h-3.5 w-3.5" />
+					Open in new tab
+				</Button>
+			</ViewerToolbar>
+			<div className="flex-1 overflow-auto flex items-center justify-center bg-[#1a1a1a] p-8">
+				{type === "video" ? (
+					<video
+						src={src}
+						controls
+						className="max-w-full max-h-full rounded-md shadow-lg"
+					>
+						Your browser does not support the video element.
+					</video>
+				) : (
+					<div className="w-full max-w-lg space-y-4">
+						<div className="text-center text-muted-foreground text-sm">
+							{filename}
+						</div>
+						<audio src={src} controls className="w-full">
+							Your browser does not support the audio element.
+						</audio>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,285 @@
+"use client";
+
+import {
+	Check,
+	Code2,
+	Copy,
+	Download,
+	Eye,
+	Maximize,
+	ZoomIn,
+	ZoomOut,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface MermaidViewerProps {
+	path: string;
+	title: string;
+}
+
+export function MermaidViewer({ path, title }: MermaidViewerProps) {
+	const [source, setSource] = useState("");
+	const [svg, setSvg] = useState("");
+	const [error, setError] = useState("");
+	const [loading, setLoading] = useState(true);
+	const [showSource, setShowSource] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const [zoom, setZoom] = useState(1);
+	const [pan, setPan] = useState({ x: 0, y: 0 });
+	const [isPanning, setIsPanning] = useState(false);
+	const panStart = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+	const containerRef = useRef<HTMLDivElement>(null);
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const renderIdRef = useRef(0);
+
+	const ZOOM_STEP = 0.25;
+	const ZOOM_MIN = 0.25;
+	const ZOOM_MAX = 5;
+
+	const zoomIn = () => setZoom((z) => Math.min(z + ZOOM_STEP, ZOOM_MAX));
+	const zoomOut = () => setZoom((z) => Math.max(z - ZOOM_STEP, ZOOM_MIN));
+	const resetView = () => {
+		setZoom(1);
+		setPan({ x: 0, y: 0 });
+	};
+
+	// Mouse wheel zoom
+	const handleWheel = useCallback((e: React.WheelEvent) => {
+		if (e.ctrlKey || e.metaKey) {
+			e.preventDefault();
+			const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+			setZoom((z) => Math.min(Math.max(z + delta, ZOOM_MIN), ZOOM_MAX));
+		}
+	}, []);
+
+	// Pan via mouse drag
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			if (e.button !== 0) return;
+			setIsPanning(true);
+			panStart.current = {
+				x: e.clientX,
+				y: e.clientY,
+				panX: pan.x,
+				panY: pan.y,
+			};
+			(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		[pan],
+	);
+
+	const handlePointerMove = useCallback(
+		(e: React.PointerEvent) => {
+			if (!isPanning) return;
+			setPan({
+				x: panStart.current.panX + (e.clientX - panStart.current.x),
+				y: panStart.current.panY + (e.clientY - panStart.current.y),
+			});
+		},
+		[isPanning],
+	);
+
+	const handlePointerUp = useCallback(() => {
+		setIsPanning(false);
+	}, []);
+
+	const assetUrl = `/api/assets/${path}`;
+	const _filename = path.split("/").pop() || path;
+
+	const fetchAndRender = useCallback(async () => {
+		setLoading(true);
+		setError("");
+		try {
+			const res = await fetch(assetUrl);
+			if (!res.ok) throw new Error("Failed to fetch file");
+			const text = await res.text();
+			setSource(text);
+
+			const mermaid = (await import("mermaid")).default;
+			mermaid.initialize({
+				startOnLoad: false,
+				theme: document.documentElement.classList.contains("dark")
+					? "dark"
+					: "default",
+				securityLevel: "loose",
+				suppressErrorRendering: true,
+			});
+
+			// Validate syntax first to avoid mermaid injecting error SVGs into the DOM
+			await mermaid.parse(text.trim());
+
+			const id = `mermaid-${++renderIdRef.current}`;
+			const { svg: rendered } = await mermaid.render(id, text.trim());
+			setSvg(rendered);
+		} catch (err) {
+			// Clean up any error elements mermaid may have injected into the DOM
+			document
+				.querySelectorAll('[id^="dmermaid-"], [id^="d"]:has(> .error-icon)')
+				.forEach((el) => el.remove());
+			setError(err instanceof Error ? err.message : "Failed to render diagram");
+		} finally {
+			setLoading(false);
+		}
+	}, [assetUrl]);
+
+	useEffect(() => {
+		void fetchAndRender();
+	}, [fetchAndRender]);
+
+	const copySource = () => {
+		navigator.clipboard.writeText(source);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	const downloadSvg = () => {
+		if (!svg) return;
+		const blob = new Blob([svg], { type: "image/svg+xml" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = `${title}.svg`;
+		a.click();
+		URL.revokeObjectURL(url);
+	};
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar path={path} badge="MERMAID">
+				<Button
+					variant="ghost"
+					size="sm"
+					className={`h-7 gap-1.5 text-xs ${showSource ? "bg-muted" : ""}`}
+					onClick={() => setShowSource((v) => !v)}
+				>
+					{showSource ? (
+						<Eye className="h-3.5 w-3.5" />
+					) : (
+						<Code2 className="h-3.5 w-3.5" />
+					)}
+					{showSource ? "Diagram" : "Code"}
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={copySource}
+				>
+					{copied ? (
+						<Check className="h-3.5 w-3.5 text-green-500" />
+					) : (
+						<Copy className="h-3.5 w-3.5" />
+					)}
+					{copied ? "Copied" : "Copy"}
+				</Button>
+				{svg && !showSource && (
+					<>
+						<div className="h-4 w-px bg-border mx-0.5" />
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 w-7 p-0"
+							onClick={zoomOut}
+							title="Zoom out"
+						>
+							<ZoomOut className="h-3.5 w-3.5" />
+						</Button>
+						<span className="text-[11px] text-muted-foreground tabular-nums w-10 text-center select-none">
+							{Math.round(zoom * 100)}%
+						</span>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 w-7 p-0"
+							onClick={zoomIn}
+							title="Zoom in"
+						>
+							<ZoomIn className="h-3.5 w-3.5" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							className="h-7 w-7 p-0"
+							onClick={resetView}
+							title="Reset view"
+						>
+							<Maximize className="h-3.5 w-3.5" />
+						</Button>
+						<div className="h-4 w-px bg-border mx-0.5" />
+					</>
+				)}
+				{svg && (
+					<Button
+						variant="ghost"
+						size="sm"
+						className="h-7 gap-1.5 text-xs"
+						onClick={downloadSvg}
+					>
+						<Download className="h-3.5 w-3.5" />
+						SVG
+					</Button>
+				)}
+			</ViewerToolbar>
+			<div className="flex-1 overflow-auto">
+				{loading ? (
+					<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+						Rendering diagram...
+					</div>
+				) : showSource ? (
+					<pre className="p-4 text-[13px] leading-relaxed font-mono bg-[#1e1e1e]">
+						<code>
+							{source.split("\n").map((line, i) => (
+								<div key={i} className="flex">
+									<span className="inline-block w-12 pr-4 text-right text-[#858585] select-none shrink-0">
+										{i + 1}
+									</span>
+									<span className="text-[#d4d4d4] flex-1">{line || "\n"}</span>
+								</div>
+							))}
+						</code>
+					</pre>
+				) : error ? (
+					<div className="flex flex-col items-center justify-center h-full gap-4 text-sm p-8">
+						<div className="flex flex-col items-center gap-2">
+							<div className="h-10 w-10 rounded-full bg-red-500/10 flex items-center justify-center">
+								<Code2 className="h-5 w-5 text-red-500" />
+							</div>
+							<p className="text-red-500 font-medium">Diagram syntax error</p>
+						</div>
+						<pre className="text-muted-foreground text-xs max-w-lg text-left bg-muted rounded-md p-3 overflow-auto whitespace-pre-wrap">
+							{error}
+						</pre>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setShowSource(true)}
+						>
+							View source to fix
+						</Button>
+					</div>
+				) : (
+					<div
+						ref={viewportRef}
+						className="relative w-full h-full overflow-hidden"
+						style={{ cursor: isPanning ? "grabbing" : "grab" }}
+						onWheel={handleWheel}
+						onPointerDown={handlePointerDown}
+						onPointerMove={handlePointerMove}
+						onPointerUp={handlePointerUp}
+					>
+						<div
+							ref={containerRef}
+							className="flex items-center justify-center p-8 min-h-full [&_svg]:max-w-full origin-center select-none"
+							style={{
+								transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+							}}
+							dangerouslySetInnerHTML={{ __html: svg }}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}