···

       
4
       
 
       
import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       
5
       
 
       
import { remove } from "@mary/exif-rm";

     

       
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";

     

       
9
       
 
       
import { agent } from "../components/login.jsx";

     

       
10
       
 
       
import { sessions } from "./account.jsx";

     

       
11
       
 
       
import { Button } from "./button.jsx";

     
···

       
14
       
 
       
import { TextInput } from "./text-input.jsx";

     

       
15
       
 
       
import Tooltip from "./tooltip.jsx";

     

       
16
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
17
       
 
       
export const [placeholder, setPlaceholder] = createSignal<any>();

     

       
18
       
 
       


     

       
19
       
 
       
export const RecordEditor = (props: { create: boolean; record?: any; refetch?: any }) => {

     
···

       
93
       
 
       
    const rkey = formData.get("rkey");

     

       
94
       
 
       
    let record: any;

     

       
95
       
 
       
    try {

     

       
96
       
-
       
      record = JSON.parse(editorView.state.doc.toString());

     

       
97
       
 
       
    } catch (e: any) {

     

       
98
       
 
       
      setNotice(e.message);

     

       
99
       
 
       
      return;

     
···

       
121
       
 
       
  };

     

       
122
       
 
       


     

       
123
       
 
       
  const editRecord = async (recreate?: boolean) => {

     

       
124
       
-
       
    const record = editorView.state.doc.toString();

     

       
125
       
 
       
    if (!record) return;

     

       
126
       
 
       
    const rpc = new Client({ handler: agent()! });

     

       
127
       
 
       
    try {

     
···

       
179
       
 
       


     

       
180
       
 
       
  const insertTimestamp = () => {

     

       
181
       
 
       
    const timestamp = new Date().toISOString();

     

       
182
       
-
       
    editorView.dispatch({

     

       
183
       
 
       
      changes: {

     

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

     

       
185
       
 
       
        insert: `"${timestamp}"`,

     

       
186
       
 
       
      },

     

       
187
       
 
       
    });

     
···

       
238
       
 
       
        setError(res.data.error);

     

       
239
       
 
       
        return;

     

       
240
       
 
       
      }

     

       
241
       
-
       
      editorView.dispatch({

     

       
242
       
 
       
        changes: {

     

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

     

       
244
       
 
       
          insert: JSON.stringify(res.data.blob, null, 2),

     

       
245
       
 
       
        },

     

       
246
       
 
       
      });

     
···

       
401
       
 
       
              </Show>

     

       
402
       
 
       
            </Show>

     

       
403
       
 
       
            <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
       
-
       
              />

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
413
       
 
       
            </div>

     

       
414
       
 
       
            <div class="flex flex-col gap-2">

     

       
415
       
 
       
              <Show when={notice()}>

     

···

       
4
       
 
       
import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       
5
       
 
       
import { remove } from "@mary/exif-rm";

     

       
6
       
 
       
import { useNavigate, useParams } from "@solidjs/router";

     

       
7
       
+
       
import { createEffect, createSignal, For, lazy, onCleanup, Show, Suspense } from "solid-js";

     

       
0
       
 
       

     

       
8
       
 
       
import { agent } from "../components/login.jsx";

     

       
9
       
 
       
import { sessions } from "./account.jsx";

     

       
10
       
 
       
import { Button } from "./button.jsx";

     
···

       
13
       
 
       
import { TextInput } from "./text-input.jsx";

     

       
14
       
 
       
import Tooltip from "./tooltip.jsx";

     

       
15
       
 
       


     

       
16
       
+
       
const Editor = lazy(() => import("../components/editor.jsx").then((m) => ({ default: m.Editor })));

     

       
17
       
+
       


     

       
18
       
+
       
export const editorInstance = { view: null as any };

     

       
19
       
 
       
export const [placeholder, setPlaceholder] = createSignal<any>();

     

       
20
       
 
       


     

       
21
       
 
       
export const RecordEditor = (props: { create: boolean; record?: any; refetch?: any }) => {

     
···

       
95
       
 
       
    const rkey = formData.get("rkey");

     

       
96
       
 
       
    let record: any;

     

       
97
       
 
       
    try {

     

       
98
       
+
       
      record = JSON.parse(editorInstance.view.state.doc.toString());

     

       
99
       
 
       
    } catch (e: any) {

     

       
100
       
 
       
      setNotice(e.message);

     

       
101
       
 
       
      return;

     
···

       
123
       
 
       
  };

     

       
124
       
 
       


     

       
125
       
 
       
  const editRecord = async (recreate?: boolean) => {

     

       
126
       
+
       
    const record = editorInstance.view.state.doc.toString();

     

       
127
       
 
       
    if (!record) return;

     

       
128
       
 
       
    const rpc = new Client({ handler: agent()! });

     

       
129
       
 
       
    try {

     
···

       
181
       
 
       


     

       
182
       
 
       
  const insertTimestamp = () => {

     

       
183
       
 
       
    const timestamp = new Date().toISOString();

     

       
184
       
+
       
    editorInstance.view.dispatch({

     

       
185
       
 
       
      changes: {

     

       
186
       
+
       
        from: editorInstance.view.state.selection.main.head,

     

       
187
       
 
       
        insert: `"${timestamp}"`,

     

       
188
       
 
       
      },

     

       
189
       
 
       
    });

     
···

       
240
       
 
       
        setError(res.data.error);

     

       
241
       
 
       
        return;

     

       
242
       
 
       
      }

     

       
243
       
+
       
      editorInstance.view.dispatch({

     

       
244
       
 
       
        changes: {

     

       
245
       
+
       
          from: editorInstance.view.state.selection.main.head,

     

       
246
       
 
       
          insert: JSON.stringify(res.data.blob, null, 2),

     

       
247
       
 
       
        },

     

       
248
       
 
       
      });

     
···

       
403
       
 
       
              </Show>

     

       
404
       
 
       
            </Show>

     

       
405
       
 
       
            <div class="min-h-0 flex-1">

     

       
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>

     

       
423
       
 
       
            </div>

     

       
424
       
 
       
            <div class="flex flex-col gap-2">

     

       
425
       
 
       
              <Show when={notice()}>

     

···

       
7
       
 
       
import { basicLight } from "@fsegurai/codemirror-theme-basic-light";

     

       
8
       
 
       
import { basicSetup, EditorView } from "codemirror";

     

       
9
       
 
       
import { onCleanup, onMount } from "solid-js";

     

       
10
       
-
       


     

       
11
       
-
       
export let editorView: EditorView;

     

       
12
       
 
       


     

       
13
       
 
       
const Editor = (props: { content: string }) => {

     

       
14
       
 
       
  let editorDiv!: HTMLDivElement;

     

       
15
       
 
       
  let themeColor = new Compartment();

     

       
0
       
 
       

     

       
16
       
 
       


     

       
17
       
 
       
  const themeEvent = () => {

     

       
18
       
-
       
    editorView.dispatch({

     

       
19
       
 
       
      effects: themeColor.reconfigure(

     

       
20
       
 
       
        window.matchMedia("(prefers-color-scheme: dark)").matches ? basicDark : basicLight,

     

       
21
       
 
       
      ),

     
···

       
38
       
 
       


     

       
39
       
 
       
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);

     

       
40
       
 
       


     

       
41
       
-
       
    editorView = new EditorView({

     

       
42
       
 
       
      doc: props.content,

     

       
43
       
 
       
      parent: editorDiv,

     

       
44
       
 
       
      extensions: [

     
···

       
50
       
 
       
        themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight),

     

       
51
       
 
       
      ],

     

       
52
       
 
       
    });

     

       
0
       
 
       

     

       
53
       
 
       
  });

     

       
54
       
 
       


     

       
55
       
 
       
  onCleanup(() =>

     

···

       
7
       
 
       
import { basicLight } from "@fsegurai/codemirror-theme-basic-light";

     

       
8
       
 
       
import { basicSetup, EditorView } from "codemirror";

     

       
9
       
 
       
import { onCleanup, onMount } from "solid-js";

     

       
10
       
+
       
import { editorInstance } from "./create";

     

       
0
       
 
       

     

       
11
       
 
       


     

       
12
       
 
       
const Editor = (props: { content: string }) => {

     

       
13
       
 
       
  let editorDiv!: HTMLDivElement;

     

       
14
       
 
       
  let themeColor = new Compartment();

     

       
15
       
+
       
  let view: EditorView;

     

       
16
       
 
       


     

       
17
       
 
       
  const themeEvent = () => {

     

       
18
       
+
       
    view.dispatch({

     

       
19
       
 
       
      effects: themeColor.reconfigure(

     

       
20
       
 
       
        window.matchMedia("(prefers-color-scheme: dark)").matches ? basicDark : basicLight,

     

       
21
       
 
       
      ),

     
···

       
38
       
 
       


     

       
39
       
 
       
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);

     

       
40
       
 
       


     

       
41
       
+
       
    view = new EditorView({

     

       
42
       
 
       
      doc: props.content,

     

       
43
       
 
       
      parent: editorDiv,

     

       
44
       
 
       
      extensions: [

     
···

       
50
       
 
       
        themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight),

     

       
51
       
 
       
      ],

     

       
52
       
 
       
    });

     

       
53
       
+
       
    editorInstance.view = view;

     

       
54
       
 
       
  });

     

       
55
       
 
       


     

       
56
       
 
       
  onCleanup(() =>