atmosphere explorer forked from pds.ls/pdsls
Something went wrong. Try again.
2.0 kB · 70 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import { indentWithTab } from "@codemirror/commands";import { json, jsonParseLinter } from "@codemirror/lang-json";import { linter } from "@codemirror/lint";import { Compartment } from "@codemirror/state";import { keymap } 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";import { editorInstance } from "./create/state";
const Editor = (props: { content: string }) => { 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([indentWithTab]), linter(jsonParseLinter()), themeColor.of(document.documentElement.classList.contains("dark") ? basicDark : basicLight), EditorView.lineWrapping, ], }); editorInstance.view = view; });
onCleanup(() => window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", themeEvent), );
return ( <div ref={editorDiv} id="editor" class="h-full cursor-auto border-[0.5px] border-neutral-300 dark:border-neutral-700" ></div> );};
export { Editor };