import { ViewUpdate } from "https://esm.sh/@codemirror/view";
import graymatter from "https://esm.sh/gray-matter";
import { useEffect, useMemo, useState } from "https://esm.sh/react";
import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts";
import { render } from "https://esm.town/v/jxnblk/resrvStreaming";
import { EditorView, Prec, useCodemirror } from "https://esm.town/v/jxnblk/useCodemirrorVimMD";
import { compressToEncodedURIComponent } from "https://esm.sh/lz-string";
import ReactMarkdown from "https://esm.sh/react-markdown@9";
import rehypeSanitize from "https://esm.sh/rehype-sanitize@6";
function useLocalStorage<T>(key: string, initialValue: T) {
const [val, setStored] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.log(error);
return initialValue;
}
});
function setVal(value: T): void {
try {
setStored(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.log(error);
}
}
return [val, setVal];
}
const iamono = `"iA Writer Mono", serif`;
const colors = [
{ color: "#000", background: "#fff" },
{ color: "#4d4019", background: "#faefd0" },
{ color: "#422c00", background: "#ecb545" },
{ color: "#32221b", background: "#ee976a" },
{ color: "#dab9a8", background: "#422d23" },
{ color: "#eee", background: "#222" },
{ color: "#fff", background: "#000" },
];
const theme = EditorView.theme({
"&": {
height: "100%",
lineHeight: "32px",
},
".cm-content": {
fontFamily: "inherit",
fontSize: "18px",
lineHeight: "32px",
paddingLeft: "32px",
paddingRight: "32px",
paddingTop: "64px",
paddingBottom: "128px",
maxWidth: "768px",
marginRight: "auto",
},
".cm-scroller": {
fontFamily: "inherit",
display: "flex",
},
".cm-gutters": {
textAlign: "right",
color: "inherit",
backgroundColor: "transparent",
borderRight: 0,
paddingRight: "16px",
flexShrink: 0,
marginLeft: "auto",
opacity: 0.3,
},
".cm-gutter.cm-lineNumbers": {
alignItems: "end",
},
".cm-gutterElement": {
display: "flex",
alignItems: "center",
},
".cm-cursor": {
background: "var(--highlight)",
},
".cm-fat-cursor": {
background: "var(--highlight)",
},
"&:not(.cm-focused) .cm-fat-cursor": {
outline: "solid 1px var(--highlight)",
},
"&.cm-focused .cm-selectionBackground": {
background: "var(--highlight) !important",
opacity: "0.2",
},
".tok-heading": {