wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/slash-commands.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import {
+	AlertTriangle,
+	CheckSquare,
+	Code,
+	File,
+	Heading1,
+	Heading2,
+	Heading3,
+	ImageIcon,
+	Info,
+	List,
+	ListOrdered,
+	Minus,
+	Quote,
+	Sigma,
+	Table,
+	Type,
+	Video,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { useEditorStore } from "@/stores/editor-store";
+import { type MediaKind, MediaPopover } from "./media-popover";
+
+type PopoverKind = null | { type: "media"; kind: MediaKind };
+
+interface SlashCommand {
+	label: string;
+	icon: React.ComponentType<{ className?: string }>;
+	description: string;
+	category: "basic" | "media" | "advanced";
+	action:
+		| { type: "direct"; run: (editor: Editor) => void }
+		| { type: "popover"; kind: Exclude<PopoverKind, null> };
+}
+
+const commands: SlashCommand[] = [
+	// Basic
+	{
+		label: "Text",
+		icon: Type,
+		description: "Start writing plain text",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().setParagraph().run(),
+		},
+	},
+	{
+		label: "Heading 1",
+		icon: Heading1,
+		description: "Large section heading",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+		},
+	},
+	{
+		label: "Heading 2",
+		icon: Heading2,
+		description: "Medium section heading",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+		},
+	},
+	{
+		label: "Heading 3",
+		icon: Heading3,
+		description: "Small section heading",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+		},
+	},
+	{
+		label: "Bullet List",
+		icon: List,
+		description: "Create a bullet list",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleBulletList().run(),
+		},
+	},
+	{
+		label: "Numbered List",
+		icon: ListOrdered,
+		description: "Create a numbered list",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleOrderedList().run(),
+		},
+	},
+	{
+		label: "Checklist",
+		icon: CheckSquare,
+		description: "Create a task checklist",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleTaskList().run(),
+		},
+	},
+	{
+		label: "Code Block",
+		icon: Code,
+		description: "Insert a code block",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+		},
+	},
+	{
+		label: "Blockquote",
+		icon: Quote,
+		description: "Insert a blockquote",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().toggleBlockquote().run(),
+		},
+	},
+	{
+		label: "Divider",
+		icon: Minus,
+		description: "Insert a horizontal rule",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().setHorizontalRule().run(),
+		},
+	},
+	{
+		label: "Table",
+		icon: Table,
+		description: "Insert a 3x3 table",
+		category: "basic",
+		action: {
+			type: "direct",
+			run: (editor) =>
+				editor
+					.chain()
+					.focus()
+					.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+					.run(),
+		},
+	},
+
+	// Media
+	{
+		label: "Image",
+		icon: ImageIcon,
+		description: "Upload, paste URL, or drop an image",
+		category: "media",
+		action: { type: "popover", kind: { type: "media", kind: "image" } },
+	},
+	{
+		label: "Video",
+		icon: Video,
+		description: "Upload or paste a video URL",
+		category: "media",
+		action: { type: "popover", kind: { type: "media", kind: "video" } },
+	},
+	{
+		label: "File",
+		icon: File,
+		description: "Attach any file to this page",
+		category: "media",
+		action: { type: "popover", kind: { type: "media", kind: "file" } },
+	},
+
+	// Advanced
+	{
+		label: "Callout",
+		icon: Info,
+		description: "Insert an info callout",
+		category: "advanced",
+		action: {
+			type: "direct",
+			run: (editor) =>
+				editor.chain().focus().wrapIn("callout", { type: "info" }).run(),
+		},
+	},
+	{
+		label: "Warning",
+		icon: AlertTriangle,
+		description: "Insert a warning callout",
+		category: "advanced",
+		action: {
+			type: "direct",
+			run: (editor) =>
+				editor.chain().focus().wrapIn("callout", { type: "warning" }).run(),
+		},
+	},
+	{
+		label: "Math",
+		icon: Sigma,
+		description: "Insert a LaTeX math expression",
+		category: "advanced",
+		action: {
+			type: "direct",
+			run: (editor) => editor.chain().focus().insertContent("$x=y$").run(),
+		},
+	},
+];
+
+interface SlashCommandsProps {
+	editor: Editor | null;
+}
+
+export function SlashCommands({ editor }: SlashCommandsProps) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [position, setPosition] = useState({ top: 0, left: 0 });
+	const [popover, setPopover] = useState<PopoverKind>(null);
+	const menuRef = useRef<HTMLDivElement>(null);
+	const pagePath = useEditorStore((s) => s.currentPath);
+
+	const filtered = commands.filter(
+		(cmd) =>
+			cmd.label.toLowerCase().includes(query.toLowerCase()) ||
+			cmd.description.toLowerCase().includes(query.toLowerCase()),
+	);
+
+	const handleClose = useCallback(() => {
+		setOpen(false);
+		setQuery("");
+		setSelectedIndex(0);
+	}, []);
+
+	const handleSelect = useCallback(
+		(command: SlashCommand) => {
+			if (!editor) return;
+			const { from } = editor.state.selection;
+			const slashStart = from - query.length - 1;
+			editor.chain().focus().deleteRange({ from: slashStart, to: from }).run();
+
+			if (command.action.type === "direct") {
+				command.action.run(editor);
+				handleClose();
+			} else {
+				setPopover(command.action.kind);
+				setOpen(false);
+				setQuery("");
+			}
+		},
+		[editor, query, handleClose],
+	);
+
+	useEffect(() => {
+		if (!editor) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (!open) {
+				if (event.key === "/") {
+					const { from } = editor.state.selection;
+					const textBefore = editor.state.doc.textBetween(
+						Math.max(0, from - 1),
+						from,
+					);
+					if (
+						from === 1 ||
+						textBefore === "" ||
+						textBefore === "\n" ||
+						textBefore === " "
+					) {
+						const coords = editor.view.coordsAtPos(from);
+						const editorRect = editor.view.dom.getBoundingClientRect();
+						setPosition({
+							top: coords.bottom - editorRect.top + 4,
+							left: coords.left - editorRect.left,
+						});
+						setOpen(true);
+						setQuery("");
+						setSelectedIndex(0);
+					}
+				}
+				return;
+			}
+
+			if (event.key === "Escape") {
+				event.preventDefault();
+				handleClose();
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				setSelectedIndex((i) => Math.min(i + 1, filtered.length - 1));
+			} else if (event.key === "ArrowUp") {
+				event.preventDefault();
+				setSelectedIndex((i) => Math.max(i - 1, 0));
+			} else if (event.key === "Enter") {
+				event.preventDefault();
+				if (filtered[selectedIndex]) handleSelect(filtered[selectedIndex]);
+			} else if (event.key === "Backspace") {
+				if (query.length === 0) handleClose();
+				else {
+					setQuery((q) => q.slice(0, -1));
+					setSelectedIndex(0);
+				}
+			} else if (event.key === " ") {
+				handleClose();
+			} else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey) {
+				setQuery((q) => q + event.key);
+				setSelectedIndex(0);
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
+	}, [editor, open, query, selectedIndex, filtered, handleClose, handleSelect]);
+
+	useEffect(() => {
+		if (!open) return;
+		const handleClick = (e: MouseEvent) => {
+			if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+				handleClose();
+			}
+		};
+		window.addEventListener("mousedown", handleClick);
+		return () => window.removeEventListener("mousedown", handleClick);
+	}, [open, handleClose]);
+
+	const insertMedia = (
+		kind: MediaKind,
+		payload: { url: string; alt?: string; mimeType?: string },
+	) => {
+		if (!editor) return;
+		const { url, alt, mimeType } = payload;
+		const type = mimeType ?? "";
+		const isImage =
+			kind === "image" ||
+			type.startsWith("image/") ||
+			/\.(png|jpe?g|gif|webp|svg|avif)(\?|$)/i.test(url);
+
+		if (isImage) {
+			editor
+				.chain()
+				.focus()
+				.setImage({ src: url, alt: alt ?? "" })
+				.run();
+		} else {
+			editor
+				.chain()
+				.focus()
+				.insertContent(`<a href="${url}">${alt ?? url}</a>`)
+				.run();
+		}
+		setPopover(null);
+	};
+
+	const _insertEmoji = (native: string) => {
+		if (!editor) return;
+		editor.chain().focus().insertContent(native).run();
+		setPopover(null);
+	};
+
+	const renderPopover = () => {
+		if (!popover || !editor) return null;
+		const anchor = position;
+		if (popover.type === "media") {
+			if (!pagePath) return null;
+			return (
+				<MediaPopover
+					kind={popover.kind}
+					pagePath={pagePath}
+					anchor={anchor}
+					onCancel={() => setPopover(null)}
+					onInsert={(payload) => insertMedia(popover.kind, payload)}
+				/>
+			);
+		}
+		return null;
+	};
+
+	if ((!open || filtered.length === 0) && !popover) return null;
+
+	const byCategory = new Map<string, SlashCommand[]>();
+	for (const cmd of filtered) {
+		const list = byCategory.get(cmd.category) ?? [];
+		list.push(cmd);
+		byCategory.set(cmd.category, list);
+	}
+	const order: { key: string; title: string }[] = [
+		{ key: "basic", title: "Basic" },
+		{ key: "media", title: "Media" },
+		{ key: "advanced", title: "Advanced" },
+	];
+
+	const flatCommands: SlashCommand[] = filtered;
+
+	return (
+		<>
+			{open && filtered.length > 0 && (
+				<div
+					ref={menuRef}
+					className="absolute z-50 w-[280px] bg-popover border border-border rounded-lg shadow-lg py-1 overflow-hidden max-h-[380px] overflow-y-auto"
+					style={{ top: position.top, left: position.left }}
+				>
+					{order.map((group) => {
+						const items = byCategory.get(group.key);
+						if (!items || items.length === 0) return null;
+						return (
+							<div key={group.key}>
+								<div className="text-[9px] uppercase tracking-wider text-muted-foreground px-3 pt-2 pb-1">
+									{group.title}
+								</div>
+								{items.map((cmd) => {
+									const flatIndex = flatCommands.indexOf(cmd);
+									const Icon = cmd.icon;
+									return (
+										<button
+											key={cmd.label}
+											onMouseDown={(e) => {
+												e.preventDefault();
+												handleSelect(cmd);
+											}}
+											onMouseEnter={() => setSelectedIndex(flatIndex)}
+											className={cn(
+												"flex items-center gap-3 w-full px-3 py-1.5 text-left transition-colors",
+												flatIndex === selectedIndex
+													? "bg-accent text-accent-foreground"
+													: "hover:bg-accent/50",
+											)}
+										>
+											<Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+											<div className="min-w-0">
+												<p className="text-[12px] font-medium truncate">
+													{cmd.label}
+												</p>
+												<p className="text-[10px] text-muted-foreground truncate">
+													{cmd.description}
+												</p>
+											</div>
+										</button>
+									);
+								})}
+							</div>
+						);
+					})}
+				</div>
+			)}
+			{renderPopover()}
+		</>
+	);
+}

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

@@ -0,0 +1,212 @@
+"use client";
+
+import { toHtml } from "hast-util-to-html";
+import { common, createLowlight } from "lowlight";
+import { Check, Copy, Download, ExternalLink, WrapText } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface SourceViewerProps {
+	path: string;
+	title: string;
+}
+
+const lowlight = createLowlight(common);
+
+const EXT_TO_LANG: Record<string, string> = {
+	".js": "javascript",
+	".cjs": "javascript",
+	".mjs": "javascript",
+	".ts": "typescript",
+	".tsx": "typescript",
+	".jsx": "javascript",
+	".py": "python",
+	".rb": "ruby",
+	".php": "php",
+	".sh": "bash",
+	".bash": "bash",
+	".zsh": "bash",
+	".ps1": "powershell",
+	".css": "css",
+	".scss": "scss",
+	".html": "xml",
+	".json": "json",
+	".jsonc": "json",
+	".yaml": "yaml",
+	".yml": "yaml",
+	".toml": "ini",
+	".ini": "ini",
+	".xml": "xml",
+	".sql": "sql",
+	".graphql": "graphql",
+	".gql": "graphql",
+	".go": "go",
+	".rs": "rust",
+	".swift": "swift",
+	".java": "java",
+	".kt": "kotlin",
+	".kts": "kotlin",
+	".c": "c",
+	".cpp": "cpp",
+	".h": "c",
+	".env": "bash",
+	".txt": "",
+	".text": "",
+	".log": "",
+	".rst": "",
+	".mdx": "markdown",
+};
+
+function detectLanguage(filename: string): string {
+	const ext = filename.includes(".")
+		? `.${filename.split(".").pop()?.toLowerCase()}`
+		: "";
+	return EXT_TO_LANG[ext] ?? "";
+}
+
+function formatBadge(filename: string): string {
+	if (!filename.includes(".")) return "TEXT";
+	return filename.split(".").pop()?.toUpperCase() ?? "TEXT";
+}
+
+export function SourceViewer({ path }: SourceViewerProps) {
+	const [content, setContent] = useState<string | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [wrap, setWrap] = useState(false);
+	const [copied, setCopied] = useState(false);
+
+	const assetUrl = `/api/assets/${path}`;
+	const filename = path.split("/").pop() || path;
+	const language = detectLanguage(filename);
+
+	const fetchContent = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await fetch(assetUrl);
+			if (res.ok) {
+				const text = await res.text();
+				setContent(text);
+			}
+		} catch {
+			/* ignore */
+		} finally {
+			setLoading(false);
+		}
+	}, [assetUrl]);
+
+	useEffect(() => {
+		void fetchContent();
+	}, [fetchContent]);
+
+	const highlightedLines = useMemo(() => {
+		if (!content) return [];
+		try {
+			const tree = language
+				? lowlight.highlight(language, content)
+				: lowlight.highlightAuto(content);
+			const html = toHtml(tree);
+			// Split by newlines while preserving HTML tags that span lines
+			return html.split("\n");
+		} catch {
+			// Fallback: no highlighting
+			return content
+				.split("\n")
+				.map((line) =>
+					line
+						.replace(/&/g, "&amp;")
+						.replace(/</g, "&lt;")
+						.replace(/>/g, "&gt;"),
+				);
+		}
+	}, [content, language]);
+
+	const copyToClipboard = () => {
+		if (!content) return;
+		navigator.clipboard.writeText(content);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar
+				path={path}
+				badge={formatBadge(filename)}
+				sublabel={language || undefined}
+			>
+				<Button
+					variant="ghost"
+					size="sm"
+					className={`h-7 gap-1.5 text-xs ${wrap ? "bg-muted" : ""}`}
+					onClick={() => setWrap((v) => !v)}
+					title={wrap ? "Disable line wrap" : "Enable line wrap"}
+				>
+					<WrapText className="h-3.5 w-3.5" />
+					Wrap
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={copyToClipboard}
+					title="Copy file contents"
+				>
+					{copied ? (
+						<Check className="h-3.5 w-3.5 text-green-500" />
+					) : (
+						<Copy className="h-3.5 w-3.5" />
+					)}
+					{copied ? "Copied" : "Copy"}
+				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="h-7 gap-1.5 text-xs"
+					onClick={() => {
+						const a = document.createElement("a");
+						a.href = assetUrl;
+						a.download = filename;
+						a.click();
+					}}
+					title="Download file"
+				>
+					<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(assetUrl, "_blank")}
+				>
+					<ExternalLink className="h-3.5 w-3.5" />
+					Raw
+				</Button>
+			</ViewerToolbar>
+			<div className="flex-1 overflow-auto source-viewer-code bg-[#1e1e1e]">
+				{loading ? (
+					<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+						Loading...
+					</div>
+				) : (
+					<table className="w-full border-collapse text-[13px] leading-relaxed font-mono">
+						<tbody>
+							{highlightedLines.map((lineHtml, i) => (
+								<tr key={i} className="hover:bg-white/5">
+									<td className="w-12 pr-4 text-right text-[#858585] select-none align-top sticky left-0 bg-[#1e1e1e]">
+										{i + 1}
+									</td>
+									<td
+										className={`text-[#d4d4d4] pl-2 ${wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"}`}
+										dangerouslySetInnerHTML={{ __html: lineHtml || " " }}
+									/>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				)}
+			</div>
+		</div>
+	);
+}