atmosphere explorer
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

dynamically import editor

Juliet 7950db0e a5fa2339

+32 -21
+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
··· 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(() =>