commit 7950db0e24a35c55670bd9b473a8e21e927cd3d7 · pdsls.dev/pdsls

+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
       7
       -
       import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";

     

       8
       8
       -
       import { Editor, editorView } from "../components/editor.jsx";

     

       7
       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
       16
       +
       const Editor = lazy(() => import("../components/editor.jsx").then((m) => ({ default: m.Editor })));

     

       17
       17
       +
       

     

       18
       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
       96
       -
             record = JSON.parse(editorView.state.doc.toString());

     

       98
       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
       124
       -
           const record = editorView.state.doc.toString();

     

       126
       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
       182
       -
           editorView.dispatch({

     

       184
       184
       +
           editorInstance.view.dispatch({

     

       183
       185
        
             changes: {

     

       184
       184
       -
               from: editorView.state.selection.main.head,

     

       186
       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
       241
       -
             editorView.dispatch({

     

       243
       243
       +
             editorInstance.view.dispatch({

     

       242
       244
        
               changes: {

     

       243
       243
       -
                 from: editorView.state.selection.main.head,

     

       245
       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
       404
       -
                     <Editor

     

       405
       405
       -
                       content={JSON.stringify(

     

       406
       406
       -
                         !props.create ? props.record

     

       407
       407
       -
                         : params.rkey ? placeholder()

     

       408
       408
       -
                         : defaultPlaceholder(),

     

       409
       409
       -
                         null,

     

       410
       410
       -
                         2,

     

       411
       411
       -
                       )}

     

       412
       412
       -
                     />

     

       406
       406
       +
                     <Suspense

     

       407
       407
       +
                       fallback={

     

       408
       408
       +
                         <div class="flex h-full items-center justify-center">

     

       409
       409
       +
                           <span class="iconify lucide--loader-circle animate-spin text-xl"></span>

     

       410
       410
       +
                         </div>

     

       411
       411
       +
                       }

     

       412
       412
       +
                     >

     

       413
       413
       +
                       <Editor

     

       414
       414
       +
                         content={JSON.stringify(

     

       415
       415
       +
                           !props.create ? props.record

     

       416
       416
       +
                           : params.rkey ? placeholder()

     

       417
       417
       +
                           : defaultPlaceholder(),

     

       418
       418
       +
                           null,

     

       419
       419
       +
                           2,

     

       420
       420
       +
                         )}

     

       421
       421
       +
                       />

     

       422
       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
       10
       -
       

     

       11
       11
       -
       export let editorView: EditorView;

     

       10
       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
       15
       +
         let view: EditorView;

     

       16
       16
        
       

     

       17
       17
        
         const themeEvent = () => {

     

       18
       18
       -
           editorView.dispatch({

     

       18
       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
       41
       -
           editorView = new EditorView({

     

       41
       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
       53
       +
           editorInstance.view = view;

     

       53
       54
        
         });

     

       54
       55
        
       

     

       55
       56
        
         onCleanup(() =>