wiki-viewer 1.0.0

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

@@ -0,0 +1,286 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import {
+	AlignCenter,
+	AlignJustify,
+	AlignLeft,
+	AlignRight,
+	Bold,
+	Code,
+	Italic,
+	Link as LinkIcon,
+	Strikethrough,
+	Subscript as SubIcon,
+	Superscript as SuperIcon,
+	Underline as UnderlineIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { LinkPopover } from "./link-popover";
+
+interface Props {
+	editor: Editor | null;
+}
+
+type OpenPopover =
+	| null
+	| { type: "align"; range: { from: number; to: number } }
+	| {
+			type: "link";
+			range: { from: number; to: number };
+			existing: string;
+			anchor: { top: number; left: number };
+	  };
+
+export function EditorBubbleMenu({ editor }: Props) {
+	const [popover, setPopover] = useState<OpenPopover>(null);
+
+	useEffect(() => {
+		if (!popover) return;
+		const handle = (e: MouseEvent) => {
+			const target = e.target as HTMLElement | null;
+			if (target?.closest("[data-bubble-popover='true']")) return;
+			setPopover(null);
+		};
+		const t = window.setTimeout(
+			() => window.addEventListener("mousedown", handle),
+			10,
+		);
+		return () => {
+			window.clearTimeout(t);
+			window.removeEventListener("mousedown", handle);
+		};
+	}, [popover]);
+
+	if (!editor) return null;
+
+	const btn = (active: boolean) =>
+		cn(
+			"h-7 w-7 flex items-center justify-center rounded hover:bg-accent text-foreground/80 transition-colors",
+			active && "bg-accent text-foreground",
+		);
+
+	const captureRange = () => {
+		const { from, to } = editor.state.selection;
+		return { from, to };
+	};
+
+	const restore = (range: { from: number; to: number }) =>
+		editor.chain().focus().setTextSelection(range).run();
+
+	const toggleMark =
+		(run: () => void) => (e: React.MouseEvent<HTMLButtonElement>) => {
+			e.preventDefault();
+			run();
+		};
+
+	const openAlign = (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.preventDefault();
+		setPopover({ type: "align", range: captureRange() });
+	};
+
+	const openLink = (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.preventDefault();
+		const existing = editor.getAttributes("link")?.href ?? "";
+		const btnRect = e.currentTarget.getBoundingClientRect();
+		setPopover({
+			type: "link",
+			range: captureRange(),
+			existing,
+			anchor: { top: btnRect.bottom + 6, left: btnRect.left },
+		});
+	};
+
+	const applyAlign = (align: "left" | "center" | "right" | "justify") => {
+		if (popover?.type !== "align") return;
+		restore(popover.range);
+		editor.chain().focus().setTextAlign(align).run();
+		setPopover(null);
+	};
+
+	const applyLink = (url: string) => {
+		if (popover?.type !== "link") return;
+		restore(popover.range);
+		editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		setPopover(null);
+	};
+
+	const removeLink = () => {
+		if (popover?.type !== "link") return;
+		restore(popover.range);
+		editor.chain().focus().unsetLink().run();
+		setPopover(null);
+	};
+
+	return (
+		<>
+			<BubbleMenu
+				editor={editor}
+				options={{ placement: "top", offset: 8 }}
+				className="flex items-center gap-0.5 px-1 py-1 bg-popover border border-border rounded-sm shadow-lg"
+			>
+				<button
+					type="button"
+					className={btn(editor.isActive("bold"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() => editor.chain().focus().toggleBold().run())}
+					aria-label="Bold"
+				>
+					<Bold className="w-3.5 h-3.5" />
+				</button>
+				<button
+					type="button"
+					className={btn(editor.isActive("italic"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() =>
+						editor.chain().focus().toggleItalic().run(),
+					)}
+					aria-label="Italic"
+				>
+					<Italic className="w-3.5 h-3.5" />
+				</button>
+				<button
+					type="button"
+					className={btn(editor.isActive("underline"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() =>
+						editor.chain().focus().toggleUnderline().run(),
+					)}
+					aria-label="Underline"
+				>
+					<UnderlineIcon className="w-3.5 h-3.5" />
+				</button>
+				<button
+					type="button"
+					className={btn(editor.isActive("strike"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() =>
+						editor.chain().focus().toggleStrike().run(),
+					)}
+					aria-label="Strikethrough"
+				>
+					<Strikethrough className="w-3.5 h-3.5" />
+				</button>
+				<button
+					type="button"
+					className={btn(editor.isActive("code"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() => editor.chain().focus().toggleCode().run())}
+					aria-label="Inline code"
+				>
+					<Code className="w-3.5 h-3.5" />
+				</button>
+				<div className="w-px h-5 bg-border mx-1" />
+				<button
+					type="button"
+					className={btn(editor.isActive("superscript"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() =>
+						editor.chain().focus().toggleSuperscript().run(),
+					)}
+					aria-label="Superscript"
+				>
+					<SuperIcon className="w-3.5 h-3.5" />
+				</button>
+				<button
+					type="button"
+					className={btn(editor.isActive("subscript"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={toggleMark(() =>
+						editor.chain().focus().toggleSubscript().run(),
+					)}
+					aria-label="Subscript"
+				>
+					<SubIcon className="w-3.5 h-3.5" />
+				</button>
+				<div className="w-px h-5 bg-border mx-1" />
+				<button
+					type="button"
+					className={btn(editor.isActive("link"))}
+					onMouseDown={(e) => e.preventDefault()}
+					onClick={openLink}
+					aria-label="Link"
+				>
+					<LinkIcon className="w-3.5 h-3.5" />
+				</button>
+				<div className="w-px h-5 bg-border mx-1" />
+				<div className="relative">
+					<button
+						type="button"
+						className={btn(false)}
+						onMouseDown={(e) => e.preventDefault()}
+						onClick={openAlign}
+						aria-label="Align"
+					>
+						<AlignLeft className="w-3.5 h-3.5" />
+					</button>
+					{popover?.type === "align" && (
+						<div
+							data-bubble-popover="true"
+							className="absolute top-full left-0 mt-1 z-50 bg-popover border border-border rounded-sm shadow-lg p-1 flex gap-0.5"
+						>
+							<button
+								type="button"
+								className={btn(editor.isActive({ textAlign: "left" }))}
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={() => applyAlign("left")}
+								aria-label="Align left"
+							>
+								<AlignLeft className="w-3.5 h-3.5" />
+							</button>
+							<button
+								type="button"
+								className={btn(editor.isActive({ textAlign: "center" }))}
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={() => applyAlign("center")}
+								aria-label="Align center"
+							>
+								<AlignCenter className="w-3.5 h-3.5" />
+							</button>
+							<button
+								type="button"
+								className={btn(editor.isActive({ textAlign: "right" }))}
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={() => applyAlign("right")}
+								aria-label="Align right"
+							>
+								<AlignRight className="w-3.5 h-3.5" />
+							</button>
+							<button
+								type="button"
+								className={btn(editor.isActive({ textAlign: "justify" }))}
+								onMouseDown={(e) => e.preventDefault()}
+								onClick={() => applyAlign("justify")}
+								aria-label="Justify"
+							>
+								<AlignJustify className="w-3.5 h-3.5" />
+							</button>
+						</div>
+					)}
+				</div>
+			</BubbleMenu>
+
+			{popover?.type === "link" && (
+				<div
+					data-bubble-popover="true"
+					style={{
+						position: "fixed",
+						top: popover.anchor.top,
+						left: popover.anchor.left,
+						zIndex: 60,
+					}}
+				>
+					<LinkPopover
+						anchor={{ top: 0, left: 0 }}
+						initialUrl={popover.existing}
+						onCancel={() => setPopover(null)}
+						onApply={applyLink}
+						onRemove={popover.existing ? removeLink : undefined}
+					/>
+				</div>
+			)}
+		</>
+	);
+}

package/.next/standalone/src/components/editor/callout-extension.ts

@@ -0,0 +1,36 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export const CalloutExtension = Node.create({
+	name: "callout",
+	group: "block",
+	content: "block+",
+	defining: true,
+
+	addAttributes() {
+		return {
+			type: {
+				default: "info",
+				parseHTML: (element: HTMLElement) =>
+					element.getAttribute("data-callout-type") || "info",
+				renderHTML: (attributes: Record<string, unknown>) => ({
+					"data-callout-type": attributes.type,
+				}),
+			},
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'div[data-callout="true"]' }];
+	},
+
+	renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+		return [
+			"div",
+			mergeAttributes(HTMLAttributes, {
+				"data-callout": "true",
+				class: `callout callout-${HTMLAttributes["data-callout-type"] || "info"}`,
+			}),
+			0,
+		];
+	},
+});

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

@@ -0,0 +1,335 @@
+"use client";
+
+import { Code2, Download, Save } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { ViewerToolbar } from "@/components/layout/viewer-toolbar";
+import { Button } from "@/components/ui/button";
+
+interface CsvViewerProps {
+	path: string;
+	title: string;
+}
+
+function parseCsv(text: string): string[][] {
+	const rows: string[][] = [];
+	let current = "";
+	let inQuotes = false;
+	let row: string[] = [];
+
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i];
+		const next = text[i + 1];
+
+		if (inQuotes) {
+			if (ch === '"' && next === '"') {
+				current += '"';
+				i++;
+			} else if (ch === '"') {
+				inQuotes = false;
+			} else {
+				current += ch;
+			}
+		} else {
+			if (ch === '"') {
+				inQuotes = true;
+			} else if (ch === ",") {
+				row.push(current);
+				current = "";
+			} else if (ch === "\n" || (ch === "\r" && next === "\n")) {
+				row.push(current);
+				current = "";
+				if (row.length > 0) rows.push(row);
+				row = [];
+				if (ch === "\r") i++;
+			} else {
+				current += ch;
+			}
+		}
+	}
+	row.push(current);
+	if (row.some((c) => c !== "")) rows.push(row);
+
+	return rows;
+}
+
+function rowsToCsv(rows: string[][]): string {
+	return rows
+		.map((row) =>
+			row
+				.map((cell) => {
+					if (cell.includes(",") || cell.includes('"') || cell.includes("\n")) {
+						return `"${cell.replace(/"/g, '""')}"`;
+					}
+					return cell;
+				})
+				.join(","),
+		)
+		.join("\n");
+}
+
+export function CsvViewer({ path }: CsvViewerProps) {
+	const [rows, setRows] = useState<string[][]>([]);
+	const [rawText, setRawText] = useState("");
+	const [sourceMode, setSourceMode] = useState(false);
+	const [dirty, setDirty] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [editCell, setEditCell] = useState<{ r: number; c: number } | null>(
+		null,
+	);
+
+	const csvUrl = `/api/assets/${path}`;
+
+	useEffect(() => {
+		fetch(csvUrl)
+			.then((r) => r.text())
+			.then((text) => {
+				setRawText(text);
+				setRows(parseCsv(text));
+				setDirty(false);
+			});
+	}, [csvUrl]);
+
+	const updateCell = useCallback((r: number, c: number, value: string) => {
+		setRows((prev) => {
+			const next = prev.map((row) => [...row]);
+			// Ensure row and column exist
+			while (next.length <= r) next.push([]);
+			while (next[r].length <= c) next[r].push("");
+			next[r][c] = value;
+			return next;
+		});
+		setDirty(true);
+	}, []);
+
+	const addRow = () => {
+		const cols = rows[0]?.length || 1;
+		setRows((prev) => [...prev, new Array(cols).fill("")]);
+		setDirty(true);
+	};
+
+	const addColumn = () => {
+		setRows((prev) => prev.map((row) => [...row, ""]));
+		setDirty(true);
+	};
+
+	const deleteRow = (r: number) => {
+		setRows((prev) => prev.filter((_, i) => i !== r));
+		setDirty(true);
+	};
+
+	const handleSave = async () => {
+		setSaving(true);
+		const csv = sourceMode ? rawText : rowsToCsv(rows);
+		try {
+			await fetch(`/api/assets/${path}`, {
+				method: "PUT",
+				headers: { "Content-Type": "text/plain" },
+				body: csv,
+			});
+			if (!sourceMode) {
+				setRawText(csv);
+			} else {
+				setRows(parseCsv(rawText));
+			}
+			setDirty(false);
+		} catch (e) {
+			console.error("Failed to save CSV:", e);
+		}
+		setSaving(false);
+	};
+
+	const toggleSource = () => {
+		if (sourceMode) {
+			// Switching back to table — parse the raw text
+			setRows(parseCsv(rawText));
+		} else {
+			// Switching to source — serialize current table
+			setRawText(rowsToCsv(rows));
+		}
+		setSourceMode(!sourceMode);
+	};
+
+	const headers = rows[0] || [];
+	const dataRows = rows.slice(1);
+
+	return (
+		<div className="flex-1 flex flex-col overflow-hidden">
+			<ViewerToolbar
+				path={path}
+				badge={`CSV${rows.length > 0 ? ` (${rows.length - 1} rows)` : ""}`}
+			>
+				{dirty && (
+					<Button
+						variant="ghost"
+						size="sm"
+						className="h-7 gap-1.5 text-xs"
+						onClick={handleSave}
+						disabled={saving}
+					>
+						<Save className="h-3.5 w-3.5" />
+						{saving ? "Saving..." : "Save"}
+					</Button>
+				)}
+				<button
+					onClick={toggleSource}
+					className={`flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded-md transition-colors border border-border ${
+						sourceMode
+							? "bg-primary text-primary-foreground"
+							: "text-muted-foreground hover:bg-accent"
+					}`}
+				>
+					<Code2 className="h-3 w-3" />
+					{sourceMode ? "Table" : "Source"}
+				</button>
+				<button
+					onClick={() => window.open(csvUrl, "_blank")}
+					className="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
+					title="Download CSV"
+				>
+					<Download className="h-4 w-4" />
+				</button>
+			</ViewerToolbar>
+
+			{sourceMode ? (
+				<div className="flex-1 overflow-y-auto p-4">
+					<textarea
+						value={rawText}
+						onChange={(e) => {
+							setRawText(e.target.value);
+							setDirty(true);
+						}}
+						className="w-full h-full min-h-[calc(100vh-12rem)] bg-transparent font-mono text-[13px] leading-relaxed resize-none focus:outline-none"
+						spellCheck={false}
+					/>
+				</div>
+			) : (
+				<div className="flex-1 overflow-auto">
+					<table className="w-full border-collapse text-[13px]">
+						<thead className="sticky top-0 z-10">
+							<tr className="bg-muted/80 backdrop-blur-sm">
+								<th className="border border-border px-1 py-1 text-center text-[10px] text-muted-foreground w-8">
+									#
+								</th>
+								{headers.map((header, c) => (
+									<th
+										key={c}
+										className="border border-border px-3 py-1.5 text-left font-medium text-foreground min-w-[100px]"
+									>
+										{editCell?.r === 0 && editCell?.c === c ? (
+											<input
+												autoFocus
+												className="w-full bg-transparent outline-none"
+												value={header}
+												onChange={(e) => updateCell(0, c, e.target.value)}
+												onBlur={() => setEditCell(null)}
+												onKeyDown={(e) => {
+													if (e.key === "Enter" || e.key === "Escape")
+														setEditCell(null);
+													if (e.key === "Tab") {
+														e.preventDefault();
+														setEditCell({
+															r: 0,
+															c: c + 1 < headers.length ? c + 1 : 0,
+														});
+													}
+												}}
+											/>
+										) : (
+											<span
+												className="cursor-text"
+												onDoubleClick={() => setEditCell({ r: 0, c })}
+											>
+												{header || "\u00A0"}
+											</span>
+										)}
+									</th>
+								))}
+							</tr>
+						</thead>
+						<tbody>
+							{dataRows.map((row, ri) => {
+								const r = ri + 1; // actual row index (0 is header)
+								return (
+									<tr
+										key={ri}
+										className="hover:bg-accent/30 transition-colors group"
+									>
+										<td className="border border-border px-1 py-1 text-center text-[10px] text-muted-foreground/50">
+											<span className="group-hover:hidden">{ri + 1}</span>
+											<button
+												className="hidden group-hover:inline text-red-400 hover:text-red-300 text-[10px]"
+												onClick={() => deleteRow(r)}
+												title="Delete row"
+											>
+												×
+											</button>
+										</td>
+										{headers.map((_, c) => {
+											const value = row[c] ?? "";
+											const isEditing = editCell?.r === r && editCell?.c === c;
+											return (
+												<td
+													key={c}
+													className="border border-border px-3 py-1.5"
+												>
+													{isEditing ? (
+														<input
+															autoFocus
+															className="w-full bg-transparent outline-none"
+															value={value}
+															onChange={(e) => updateCell(r, c, e.target.value)}
+															onBlur={() => setEditCell(null)}
+															onKeyDown={(e) => {
+																if (e.key === "Escape") setEditCell(null);
+																if (e.key === "Enter")
+																	setEditCell({ r: r + 1, c });
+																if (e.key === "Tab") {
+																	e.preventDefault();
+																	if (e.shiftKey) {
+																		setEditCell({ r, c: Math.max(0, c - 1) });
+																	} else {
+																		setEditCell({
+																			r: c + 1 >= headers.length ? r + 1 : r,
+																			c: c + 1 >= headers.length ? 0 : c + 1,
+																		});
+																	}
+																}
+															}}
+														/>
+													) : (
+														<span
+															className="cursor-text"
+															onDoubleClick={() => setEditCell({ r, c })}
+														>
+															{value || "\u00A0"}
+														</span>
+													)}
+												</td>
+											);
+										})}
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+
+					{/* Add row/column buttons */}
+					<div className="flex items-center gap-2 px-4 py-2 border-t border-border">
+						<button
+							onClick={addRow}
+							className="text-[11px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-accent"
+						>
+							+ Add row
+						</button>
+						<button
+							onClick={addColumn}
+							className="text-[11px] text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-accent"
+						>
+							+ Add column
+						</button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}