335 lines
13 KiB
TypeScript
335 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
CommandIcon,
|
|
EyeIcon,
|
|
MonitorIcon,
|
|
PanelRightIcon,
|
|
Redo2Icon,
|
|
SmartphoneIcon,
|
|
TabletIcon,
|
|
Undo2Icon,
|
|
} from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
import {
|
|
saveEditorDataSource,
|
|
saveEditorPage,
|
|
type EditorSaveInput,
|
|
} from "@/app/admin/actions";
|
|
import { AdminCommandDialog } from "@/components/admin/admin-command";
|
|
import {
|
|
AdminSidebar,
|
|
type AdminNavigation,
|
|
} from "@/components/admin/admin-sidebar";
|
|
import { BlockCanvas } from "@/components/admin/block-canvas";
|
|
import { EditorInspector } from "@/components/admin/editor-inspector";
|
|
import type { UploadedMedia } from "@/components/admin/media-uploader";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer";
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable";
|
|
import {
|
|
SidebarInset,
|
|
SidebarProvider,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
import type { SerializedBlock } from "@/lib/blocks";
|
|
import type { DataSourceSnapshot, PageSnapshot } from "@/lib/content/types";
|
|
import {
|
|
AutosaveCoordinator,
|
|
type AutosaveStatus,
|
|
} from "@/lib/editor/autosave";
|
|
import {
|
|
draftFromSnapshot,
|
|
normalizeBlockOrder,
|
|
type EditorDraft,
|
|
} from "@/lib/editor/draft";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Viewport = "mobile" | "tablet" | "desktop";
|
|
|
|
interface HistoryState {
|
|
items: EditorDraft[];
|
|
index: number;
|
|
}
|
|
|
|
export function EditorWorkspace({
|
|
snapshot,
|
|
navigation,
|
|
}: {
|
|
snapshot: PageSnapshot;
|
|
navigation: AdminNavigation;
|
|
}) {
|
|
const router = useRouter();
|
|
const initialDraft = draftFromSnapshot(snapshot);
|
|
const [history, setHistory] = useState<HistoryState>({ items: [initialDraft], index: 0 });
|
|
const draft = history.items[history.index];
|
|
const [selectedId, setSelectedId] = useState<string | null>(draft.blocks[0]?.id ?? null);
|
|
const [commandOpen, setCommandOpen] = useState(false);
|
|
const [viewport, setViewport] = useState<Viewport>("desktop");
|
|
const [autosaveStatus, setAutosaveStatus] = useState<AutosaveStatus>({ state: "idle" });
|
|
const [dataSources, setDataSources] = useState(snapshot.dataSources);
|
|
const [sourceSaving, setSourceSaving] = useState(false);
|
|
const coordinatorRef = useRef<AutosaveCoordinator<EditorDraft, EditorSaveInput, PageSnapshot> | null>(null);
|
|
|
|
useEffect(() => {
|
|
const coordinator = new AutosaveCoordinator<EditorDraft, EditorSaveInput, PageSnapshot>({
|
|
initialVersion: snapshot.page.version,
|
|
createPayload: (next, expectedVersion) => ({ ...next, expectedVersion }),
|
|
save: saveEditorPage,
|
|
onStatus: setAutosaveStatus,
|
|
onSaved: (savedSnapshot) => {
|
|
if (savedSnapshot) setDataSources(savedSnapshot.dataSources);
|
|
},
|
|
});
|
|
coordinatorRef.current = coordinator;
|
|
return () => {
|
|
coordinator.dispose();
|
|
coordinatorRef.current = null;
|
|
};
|
|
}, [snapshot.page.id, snapshot.page.version]);
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
|
|
event.preventDefault();
|
|
setCommandOpen(true);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, []);
|
|
|
|
function commit(next: EditorDraft) {
|
|
setHistory((current) => ({
|
|
items: [...current.items.slice(0, current.index + 1), structuredClone(next)].slice(-80),
|
|
index: Math.min(current.index + 1, 79),
|
|
}));
|
|
coordinatorRef.current?.schedule(next);
|
|
}
|
|
|
|
function travel(direction: -1 | 1) {
|
|
setHistory((current) => {
|
|
const index = current.index + direction;
|
|
if (index < 0 || index >= current.items.length) return current;
|
|
coordinatorRef.current?.schedule(current.items[index]);
|
|
return { ...current, index };
|
|
});
|
|
}
|
|
|
|
function insert(block: SerializedBlock) {
|
|
const blocks = normalizeBlockOrder([...draft.blocks, block]);
|
|
commit({ ...draft, blocks });
|
|
setSelectedId(block.id);
|
|
}
|
|
|
|
async function saveSource(source: DataSourceSnapshot) {
|
|
setSourceSaving(true);
|
|
const result = await saveEditorDataSource(source);
|
|
setSourceSaving(false);
|
|
if (result.status === "saved") {
|
|
if (result.snapshot) {
|
|
setDataSources((current) => ({ ...current, [source.id]: result.snapshot! }));
|
|
}
|
|
toast.success("บันทึกแหล่งข้อมูลแล้ว");
|
|
} else if (result.status === "conflict") {
|
|
toast.error("แหล่งข้อมูลมีการแก้ไขจากที่อื่น กรุณาโหลดหน้าใหม่");
|
|
} else {
|
|
toast.error("บันทึกแหล่งข้อมูลไม่สำเร็จ");
|
|
}
|
|
}
|
|
|
|
function addUploadedMedia(media: UploadedMedia) {
|
|
const block: SerializedBlock = {
|
|
id: crypto.randomUUID(),
|
|
type: "image",
|
|
schemaVersion: 1,
|
|
config: {
|
|
mediaId: media.id,
|
|
alt: media.fileName.replace(/\.[^.]+$/u, ""),
|
|
fit: "cover",
|
|
},
|
|
responsiveLayout: {
|
|
width: "wide",
|
|
mobileSpan: 4,
|
|
tabletSpan: 8,
|
|
desktopSpan: 12,
|
|
hideOnMobile: false,
|
|
},
|
|
sortOrder: draft.blocks.length,
|
|
};
|
|
insert(block);
|
|
}
|
|
|
|
const inspector = (
|
|
<EditorInspector
|
|
snapshot={snapshot}
|
|
draft={draft}
|
|
selectedId={selectedId}
|
|
dataSources={dataSources}
|
|
onDraftChange={commit}
|
|
onDataSourceChange={(source) => setDataSources((current) => ({ ...current, [source.id]: source }))}
|
|
onSaveDataSource={saveSource}
|
|
sourceSaving={sourceSaving}
|
|
onMediaReady={addUploadedMedia}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<SidebarProvider>
|
|
<AdminSidebar
|
|
navigation={navigation}
|
|
currentCharacter={snapshot.character.slug}
|
|
currentPage={snapshot.page.slug}
|
|
/>
|
|
<SidebarInset className="h-svh min-h-0 overflow-hidden">
|
|
<header className="z-20 flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b bg-background/95 px-3 py-2 supports-backdrop-filter:backdrop-blur">
|
|
<SidebarTrigger />
|
|
<Breadcrumb className="min-w-0 flex-1">
|
|
<BreadcrumbList className="flex-nowrap">
|
|
<BreadcrumbItem className="truncate">{snapshot.character.nameTh}</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem className="min-w-0"><BreadcrumbPage className="truncate">{draft.title}</BreadcrumbPage></BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
<Button variant="ghost" size="icon-sm" onClick={() => travel(-1)} disabled={history.index === 0} aria-label="ย้อนกลับ"><Undo2Icon /></Button>
|
|
<Button variant="ghost" size="icon-sm" onClick={() => travel(1)} disabled={history.index === history.items.length - 1} aria-label="ทำซ้ำ"><Redo2Icon /></Button>
|
|
<SaveStatus status={autosaveStatus} />
|
|
<label className="hidden min-h-8 items-center gap-2 text-sm sm:flex">
|
|
<Switch
|
|
size="sm"
|
|
checked={draft.visible}
|
|
onCheckedChange={(visible) => commit({ ...draft, visible })}
|
|
/>
|
|
{draft.visible ? "เผยแพร่" : "ซ่อน"}
|
|
</label>
|
|
<ToggleGroup
|
|
value={[viewport]}
|
|
onValueChange={(values) => {
|
|
const next = values.at(-1) as Viewport | undefined;
|
|
if (next) setViewport(next);
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
spacing={0}
|
|
className="hidden lg:flex"
|
|
>
|
|
<ToggleGroupItem value="mobile" aria-label="ตัวอย่างมือถือ"><SmartphoneIcon /></ToggleGroupItem>
|
|
<ToggleGroupItem value="tablet" aria-label="ตัวอย่างแท็บเล็ต"><TabletIcon /></ToggleGroupItem>
|
|
<ToggleGroupItem value="desktop" aria-label="ตัวอย่างเดสก์ท็อป"><MonitorIcon /></ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<Button variant="outline" size="sm" onClick={() => setCommandOpen(true)}>
|
|
<CommandIcon />
|
|
<span className="hidden xl:inline">คำสั่ง</span>
|
|
</Button>
|
|
<Button variant="ghost" size="icon-sm" render={<Link href={`/${snapshot.character.slug}/${draft.slug}`} target="_blank" />} aria-label="เปิดหน้าสาธารณะ"><EyeIcon /></Button>
|
|
<Drawer swipeDirection="right">
|
|
<DrawerTrigger render={<Button variant="outline" size="icon-sm" className="lg:hidden" aria-label="เปิด Inspector" />}><PanelRightIcon /></DrawerTrigger>
|
|
<DrawerContent className="[--drawer-content-width:min(92vw,28rem)]">
|
|
<DrawerHeader className="sr-only">
|
|
<DrawerTitle>Inspector และ Live Preview</DrawerTitle>
|
|
<DrawerDescription>แก้ไขคุณสมบัติบล็อกและดูตัวอย่าง</DrawerDescription>
|
|
</DrawerHeader>
|
|
{inspector}
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</header>
|
|
|
|
<div className="min-h-0 flex-1">
|
|
<ResizablePanelGroup orientation="horizontal" className="h-full">
|
|
<ResizablePanel defaultSize="70%" minSize="45%">
|
|
<div className="h-full overflow-y-auto bg-muted/25">
|
|
<div className={cn(
|
|
"mx-auto min-h-full transition-[max-width]",
|
|
viewport === "mobile" && "max-w-[390px] border-x",
|
|
viewport === "tablet" && "max-w-[768px] border-x",
|
|
viewport === "desktop" && "max-w-none",
|
|
)}>
|
|
<BlockCanvas
|
|
draft={draft}
|
|
selectedId={selectedId}
|
|
onSelect={(id) => setSelectedId(id || null)}
|
|
onChange={commit}
|
|
onOpenInsert={() => setCommandOpen(true)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableHandle withHandle className="hidden lg:flex" />
|
|
<ResizablePanel defaultSize="30%" minSize="22%" maxSize="48%" className="hidden lg:block">
|
|
{inspector}
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
</SidebarInset>
|
|
|
|
<AdminCommandDialog
|
|
open={commandOpen}
|
|
onOpenChange={setCommandOpen}
|
|
navigation={navigation}
|
|
dataSources={dataSources}
|
|
onInsert={insert}
|
|
/>
|
|
|
|
<AlertDialog open={autosaveStatus.state === "conflict"}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>พบการแก้ไขที่ใหม่กว่า</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
เวอร์ชันบนเซิร์ฟเวอร์เปลี่ยนไประหว่างที่คุณกำลังทำงาน ฉบับในเครื่องยังไม่ถูกเขียนทับ คุณสามารถกลับไปตรวจเทียบหรือโหลดฉบับล่าสุด
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>กลับไปตรวจเทียบ</AlertDialogCancel>
|
|
<AlertDialogAction onClick={() => router.refresh()}>โหลดเวอร์ชันล่าสุด</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</SidebarProvider>
|
|
);
|
|
}
|
|
|
|
function SaveStatus({ status }: { status: AutosaveStatus }) {
|
|
if (status.state === "saving") return <Badge variant="secondary"><Spinner />กำลังบันทึก</Badge>;
|
|
if (status.state === "dirty") return <Badge variant="outline">รอบันทึก</Badge>;
|
|
if (status.state === "saved") return <Badge variant="outline" className="text-success">บันทึกแล้ว · v{status.version}</Badge>;
|
|
if (status.state === "conflict") return <Badge variant="destructive">ข้อมูลชนกัน</Badge>;
|
|
if (status.state === "error") return <Badge variant="destructive">บันทึกไม่สำเร็จ</Badge>;
|
|
return <Badge variant="outline">พร้อมแก้ไข</Badge>;
|
|
}
|