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 ReactMarkdown from "https://esm.sh/react-markdown@9";
import rehypeSanitize from "https://esm.sh/rehype-sanitize@6";
import { render } from "https://esm.town/v/jxnblk/ReactStream";
import { EditorView, Prec, useCodemirror } from "https://esm.town/v/jxnblk/useCodemirrorVimMD";
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": {
fontWeight: "700",
},
".tok-meta, .tok-comment": {
color: "var(--color-25)",
},
".tok-heading.tok-meta": {
color: "var(--highlight-50)",
fontWeight: "normal",
},
".tok-strong": {
fontWeight: "bold",
},
".tok-emphasis": {
fontStyle: "italic",
},
".tok-propertyName": {},
".tok-definition": {
color: "var(--color-50)",
},
".tok-punctuation": {
color: "var(--color-50)",
},