forked from
pds.ls/pdsls
atmosphere explorer
dynamically import editor
+32
-21
+27
-17
src/components/create.tsx
+27
-17
src/components/create.tsx
···
4
4
import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
5
5
import { remove } from "@mary/exif-rm";
6
6
import { useNavigate, useParams } from "@solidjs/router";
7
-
import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
8
-
import { Editor, editorView } from "../components/editor.jsx";
7
+
import { createEffect, createSignal, For, lazy, onCleanup, Show, Suspense } from "solid-js";
9
8
import { agent } from "../components/login.jsx";
10
9
import { sessions } from "./account.jsx";
11
10
import { Button } from "./button.jsx";
···
14
13
import { TextInput } from "./text-input.jsx";
15
14
import Tooltip from "./tooltip.jsx";
16
15
16
+
const Editor = lazy(() => import("../components/editor.jsx").then((m) => ({ default: m.Editor })));
17
+
18
+
export const editorInstance = { view: null as any };
17
19
export const [placeholder, setPlaceholder] = createSignal<any>();
18
20
19
21
export const RecordEditor = (props: { create: boolean; record?: any; refetch?: any }) => {
···
93
95
const rkey = formData.get("rkey");
94
96
let record: any;
95
97
try {
96
-
record = JSON.parse(editorView.state.doc.toString());
98
+
record = JSON.parse(editorInstance.view.state.doc.toString());
97
99
} catch (e: any) {
98
100
setNotice(e.message);
99
101
return;
···
121
123
};
122
124
123
125
const editRecord = async (recreate?: boolean) => {
124
-
const record = editorView.state.doc.toString();
126
+
const record = editorInstance.view.state.doc.toString();
125
127
if (!record) return;
126
128
const rpc = new Client({ handler: agent()! });
127
129
try {
···
179
181
180
182
const insertTimestamp = () => {
181
183
const timestamp = new Date().toISOString();
182
-
editorView.dispatch({
184
+
editorInstance.view.dispatch({
183
185
changes: {
184
-
from: editorView.state.selection.main.head,
186
+
from: editorInstance.view.state.selection.main.head,
185
187
insert: `"${timestamp}"`,
186
188
},
187
189
});
···
238
240
setError(res.data.error);
239
241
return;
240
242
}
241
-
editorView.dispatch({
243
+
editorInstance.view.dispatch({
242
244
changes: {
243
-
from: editorView.state.selection.main.head,
245
+
from: editorInstance.view.state.selection.main.head,
244
246
insert: JSON.stringify(res.data.blob, null, 2),
245
247
},
246
248
});
···
401
403
</Show>
402
404
</Show>
403
405
<div class="min-h-0 flex-1">
404
-
<Editor
405
-
content={JSON.stringify(
406
-
!props.create ? props.record
407
-
: params.rkey ? placeholder()
408
-
: defaultPlaceholder(),
409
-
null,
410
-
2,
411
-
)}
412
-
/>
406
+
<Suspense
407
+
fallback={
408
+
<div class="flex h-full items-center justify-center">
409
+
<span class="iconify lucide--loader-circle animate-spin text-xl"></span>
410
+
</div>
411
+
}
412
+
>
413
+
<Editor
414
+
content={JSON.stringify(
415
+
!props.create ? props.record
416
+
: params.rkey ? placeholder()
417
+
: defaultPlaceholder(),
418
+
null,
419
+
2,
420
+
)}
421
+
/>
422
+
</Suspense>
413
423
</div>
414
424
<div class="flex flex-col gap-2">
415
425
<Show when={notice()}>
+5
-4
src/components/editor.tsx
+5
-4
src/components/editor.tsx
···
7
7
import { basicLight } from "@fsegurai/codemirror-theme-basic-light";
8
8
import { basicSetup, EditorView } from "codemirror";
9
9
import { onCleanup, onMount } from "solid-js";
10
-
11
-
export let editorView: EditorView;
10
+
import { editorInstance } from "./create";
12
11
13
12
const Editor = (props: { content: string }) => {
14
13
let editorDiv!: HTMLDivElement;
15
14
let themeColor = new Compartment();
15
+
let view: EditorView;
16
16
17
17
const themeEvent = () => {
18
-
editorView.dispatch({
18
+
view.dispatch({
19
19
effects: themeColor.reconfigure(
20
20
window.matchMedia("(prefers-color-scheme: dark)").matches ? basicDark : basicLight,
21
21
),
···
38
38
39
39
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);
40
40
41
-
editorView = new EditorView({
41
+
view = new EditorView({
42
42
doc: props.content,
43
43
parent: editorDiv,
44
44
extensions: [
···
50
50
themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight),
51
51
],
52
52
});
53
+
editorInstance.view = view;
53
54
});
54
55
55
56
onCleanup(() =>