atmosphere explorer pds.ls
tool typescript atproto
Something went wrong. Try again.
2.3 kB · 76 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import { indentWithTab } from "@codemirror/commands";import { json, jsonParseLinter } from "@codemirror/lang-json";import { linter } from "@codemirror/lint";import type { LintSource } from "@codemirror/lint";import { Compartment } from "@codemirror/state";import { keymap } from "@codemirror/view";import type { KeyBinding } from "@codemirror/view";import { basicDark } from "@fsegurai/codemirror-theme-basic-dark";import { basicLight } from "@fsegurai/codemirror-theme-basic-light";import { basicSetup, EditorView } from "codemirror";import { onCleanup, onMount } from "solid-js";
const tabIndentKey = indentWithTab as unknown as KeyBinding;const jsonLinter = jsonParseLinter() as unknown as LintSource;
const Editor = (props: { content: string; onReady?: (view: EditorView | undefined) => void }) => { let editorDiv!: HTMLDivElement; let themeColor = new Compartment(); let view: EditorView;
const themeEvent = () => { view.dispatch({ effects: themeColor.reconfigure( window.matchMedia("(prefers-color-scheme: dark)").matches ? basicDark : basicLight, ), }); };
onMount(() => { const theme = EditorView.theme({ ".cm-content": { fontFamily: "'Roboto Mono', monospace", fontSize: "12px", }, ".cm-scroller": { overflow: "auto", }, "&": { height: "100%", }, });
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", themeEvent);
view = new EditorView({ doc: props.content, parent: editorDiv, extensions: [ basicSetup, theme, json(), keymap.of([tabIndentKey]), linter(jsonLinter), themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight), EditorView.lineWrapping, ], }); props.onReady?.(view); });
onCleanup(() => { window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeEvent); props.onReady?.(undefined); view?.destroy(); });
return ( <div ref={editorDiv} id="editor" class="h-full cursor-auto border-[0.5px] border-neutral-300 dark:border-neutral-700" ></div> );};
export { Editor };