wiki-viewer 1.14.1 → 2.0.0

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

@@ -1,111 +0,0 @@
-"use client";
-
-import { ExternalLink, Link as LinkIcon, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
-
-interface Props {
-	anchor: { top: number; left: number };
-	initialUrl?: string;
-	onCancel: () => void;
-	onApply: (url: string) => void;
-	onRemove?: () => void;
-}
-
-export function LinkPopover({
-	anchor,
-	initialUrl = "",
-	onCancel,
-	onApply,
-	onRemove,
-}: Props) {
-	const [url, setUrl] = useState(initialUrl);
-
-	useEffect(() => {
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === "Escape") onCancel();
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [onCancel]);
-
-	const apply = () => {
-		const trimmed = url.trim();
-		if (!trimmed) {
-			onCancel();
-			return;
-		}
-		onApply(trimmed);
-	};
-
-	return (
-		<div
-			className="absolute z-50 w-[340px] bg-popover border border-border rounded-lg shadow-xl 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="flex items-center gap-1.5 text-[12px] font-medium">
-					<LinkIcon className="w-3.5 h-3.5" />
-					{initialUrl ? "Edit link" : "Add link"}
-				</div>
-				<button
-					type="button"
-					onClick={onCancel}
-					className="text-[11px] text-muted-foreground hover:text-foreground"
-				>
-					Cancel
-				</button>
-			</div>
-
-			<div className="p-3 space-y-2">
-				<input
-					type="url"
-					autoFocus
-					value={url}
-					placeholder="https://example.com"
-					onChange={(e) => setUrl(e.target.value)}
-					onKeyDown={(e) => {
-						if (e.key === "Enter") {
-							e.preventDefault();
-							apply();
-						}
-					}}
-					className="w-full bg-background border border-border rounded-md px-2.5 py-1.5 text-[12px] focus:outline-none focus:ring-2 focus:ring-primary/30"
-				/>
-				<div className="flex items-center gap-2">
-					<button
-						type="button"
-						onClick={apply}
-						disabled={!url.trim()}
-						className="flex-1 py-1.5 text-[12px] rounded-md bg-primary text-primary-foreground disabled:opacity-50 hover:bg-primary/90"
-					>
-						{initialUrl ? "Update" : "Add link"}
-					</button>
-					{initialUrl && (
-						<>
-							<a
-								href={initialUrl}
-								target="_blank"
-								rel="noreferrer noopener"
-								className="p-1.5 rounded-md border border-border hover:bg-accent text-muted-foreground hover:text-foreground"
-								title="Open link"
-							>
-								<ExternalLink className="w-3.5 h-3.5" />
-							</a>
-							{onRemove && (
-								<button
-									type="button"
-									onClick={onRemove}
-									className="p-1.5 rounded-md border border-border hover:bg-accent text-destructive"
-									title="Remove link"
-								>
-									<Trash2 className="w-3.5 h-3.5" />
-								</button>
-							)}
-						</>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-}

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

@@ -1,212 +0,0 @@
-"use client";
-
-import { Clipboard, Link as LinkIcon, Upload } from "lucide-react";
-import { useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { wsFetch } from "@/lib/workspace-client";
-
-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 wsFetch(`/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

@@ -1,70 +0,0 @@
-"use client";
-
-import { Download, ExternalLink } from "lucide-react";
-import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
-import { Button } from "@/components/ui/button";
-import { withWs } from "@/lib/workspace-client";
-
-interface MediaViewerProps {
-	path: string;
-	title: string;
-	type: "video" | "audio";
-}
-
-export function MediaViewer({ path, type }: MediaViewerProps) {
-	const src = withWs(`/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

@@ -1,286 +0,0 @@
-"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";
-import { withWs, wsFetch } from "@/lib/workspace-client";
-
-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 = withWs(`/api/assets/${path}`);
-	const _filename = path.split("/").pop() || path;
-
-	const fetchAndRender = useCallback(async () => {
-		setLoading(true);
-		setError("");
-		try {
-			const res = await wsFetch(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>
-	);
-}