1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Loader2 } from "lucide-react";
import { EditorCore } from "@/core";
import { useEditor } from "@/hooks/use-editor";
import { useKeybindingsListener } from "@/hooks/use-keybindings";
import { useKeybindingsStore } from "@/stores/keybindings-store";
import { useEditorActions } from "@/hooks/actions/use-editor-actions";
import { loadFontAtlas } from "@/lib/fonts/google-fonts";
interface EditorProviderProps {
projectId: string;
children: React.ReactNode;
}
export function EditorProvider({ projectId, children }: EditorProviderProps) {
const activeProject = useEditor((e) => e.project.getActiveOrNull());
const router = useRouter();
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { setLoadingProject } = useKeybindingsStore();
useEffect(() => {
setLoadingProject(isLoading);
}, [isLoading, setLoadingProject]);
useEffect(() => {
let cancelled = false;
const editor = EditorCore.getInstance();
const loadProject = async () => {
try {
setIsLoading(true);
await editor.project.loadProject({ id: projectId });
if (cancelled) return;
setIsLoading(false);
loadFontAtlas();
} catch (err) {
if (cancelled) return;
const isNotFound =
err instanceof Error &&
(err.message.includes("not found") ||
err.message.includes("does not exist"));
if (isNotFound) {
try {
const newProjectId = await editor.project.createNewProject({
name: "Untitled Project",
});
router.replace(`/editor/${newProjectId}`);
} catch (_createErr) {
setError("Failed to create project");
setIsLoading(false);
}
} else {
setError(
err instanceof Error ? err.message : "Failed to load project",
);
setIsLoading(false);
}
}
};
loadProject();
return () => {
cancelled = true;
};
}, [projectId, router]);
if (error) {
return (
<div className="bg-background flex h-screen w-screen items-center justify-center">
<div className="flex flex-col items-center gap-4">
<p className="text-destructive text-sm">{error}</p>
</div>
</div>
);
}
if (isLoading) {
return (
<div className="bg-background flex h-screen w-screen items-center justify-center">
<div className="flex flex-col items-center gap-4">
<Loader2 className="text-muted-foreground size-8 animate-spin" />
<p className="text-muted-foreground text-sm">Loading project...</p>
</div>
</div>
);
}
if (!activeProject) {
return (
<div className="bg-background flex h-screen w-screen items-center justify-center">
<div className="flex flex-col items-center gap-4">
<Loader2 className="text-muted-foreground size-8 animate-spin" />
<p className="text-muted-foreground text-sm">Exiting project...</p>
</div>
</div>
);
}
return (
<>
<EditorRuntimeBindings />
{children}
</>
);
}
function EditorRuntimeBindings() {
const editor = useEditor();
useEffect(() => {
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
if (!editor.save.getIsDirty()) return;
event.preventDefault();
(event as unknown as { returnValue: string }).returnValue = "";
};
window.addEventListener("beforeunload", handleBeforeUnload);
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
}, [editor]);
useEditorActions();
useKeybindingsListener();
return null;
}
|
