vimarkdown

/** @jsxImportSource https://esm.sh/react */ 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"; // preview import ReactMarkdown from "https://esm.sh/react-markdown@9"; import rehypeSanitize from "https://esm.sh/rehype-sanitize@6"; // vals import { render } from "https://esm.town/v/jxnblk/ReactStream"; import { EditorView, Prec, useCodemirror } from "https://esm.town/v/jxnblk/useCodemirrorVimMD"; // fonts TODO 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)", }, ".tok-labelName, .tok-link": { color: "var(--highlight-dark)", }, ".cm-line:has(.tok-definition)": { backgroundColor: "var(--color-6)", }, }); function App({ cookie = "", ...props }) { const [doc, setDoc] = useLocalStorage("vimarkdown", initialDoc); const [font, setFont] = useLocalStorage("font", "iA Writer Mono"); const [preview, setPreview] = useState(false); const cookies: AppCookies = parseCookies(cookie || null); const initColorIndex = cookies.color || 0; const [colorIndex, setColorIndex] = useLocalStorage("color", initColorIndex); const [ref, view, { Vim }] = useCodemirror(doc, [ Prec.highest(theme), EditorView.updateListener.of((v: ViewUpdate) => { if (v.docChanged) { const next = v.state.doc.toString(); setDoc(next); } }), ], true); Vim.defineEx("write", "w", function() { // todo: make backend adapter console.log("TODO SAVE", doc.length); // todo: use string encoder api // const params = new URLSearchParams(); // params.set("d", comp); // history.pushState(null, "", "?" + params.toString()); }); const { data, content } = graymatter(doc); const cycleColor = () => { const next = (colorIndex + 1) % colors.length; setColorIndex(next); setCookie("color", next); }; const color = useMemo(() => colors[colorIndex], [colorIndex]); useEffect(() => { view?.on("vim-mode-change", (e: any) => { console.log("vim-mode-change", e); }); }, []); const handleKeyDown = (e: React.KeyboardEvent) => { // check for insert mode? console.log("view.cm.state.vim", view.cm.state.vim.mode); if (e.key === "Escape") { if (!view.cm.state.vim.insertMode) { setPreview(false); } } if (e.metaKey) { if (e.key === "p") { e.preventDefault(); setPreview(!preview); } } }; const time = new Date().toLocaleDateString().replace(/\//g, "-"); return ( vimarkdown {style}

Download:{" "} MD

Made by Jxnblk. Built with Val Town.

{preview && (

{Object.keys(data).length > 0 && (

                {JSON.stringify(data, null, 2).slice(2, -2)}

)}

)} ); } type AppCookies = { color?: number; font?: string; }; function parseCookies(cookies: string) { return (cookies || "").split(";").reduce((acc, n) => { const [key, value] = n.split("=").map(s => s.trim()); const num = parseFloat(value); acc[key] = isNaN(num) ? value : num; return acc; }, {}); } function setCookie(key: string, value: string) { document.cookie = `${key}=${value}`; } export default render(App, import.meta.url); const sanitizeSchema = { ...rehypeSanitize.defaultSchema, comments: true, // Allow comments }; const rehypePlugins = [ [rehypeSanitize, sanitizeSchema], ]; function getDownloadString(text) { return `data:text/json;charset=utf-8,${encodeURIComponent(text)}`; } export function useLocalStorage(key: string, initialValue: T) { const [val, setStored] = useState(() => { 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 css = ` * { box-sizing: border-box; } :root { --color: #000; --background: #fff; --shadow: rgba(0, 0, 0, 0.025); --highlight: #0cf; --highlight-50: color-mix(in srgb, var(--highlight) 50%, var(--background)); --highlight-25: color-mix(in srgb, var(--highlight) 25%, var(--background)); --highlight-dark: color-mix(in srgb, var(--highlight) 50%, var(--color)); --color-50: color-mix(in srgb,var(--color) 50%,transparent); --color-25: color-mix(in srgb,var(--color) 25%,transparent); --color-12: color-mix(in srgb,var(--color) 12%,transparent); --color-6: color-mix(in srgb,var(--color) 6%,transparent); --font: ${iamono}; --sans: "Lexend", sans-serif; } body { margin: 0; font-family: var(--font); font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1.75; color: var(--color, black); background-color: var(--background, white); transition-property: background-color, color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } h1 { font-size: 18px; margin-top: 0; margin-bottom: 32px; } .container { max-width: 768px; margin-left: auto; margin-right: auto; height: 100vh; } .editor { height: 100vh; transition: transform 0.2s ease-in-out; } .toolbar { position: fixed; top: 0; right: 0; left: 0; margin: 8px; display: flex; justify-content: flex-end; gap: 8px; } .button { appearance: none; border: 0; outline: 0; background-color: var(--color); color: var(--background); padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px; border-radius: 2px; font-family: var(--sans); font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; } .toolbar:hover .button { opacity: 0.2; } .button:hover { opacity: 0.8; } .footer { position: fixed; bottom: 0; right: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 16px; font-family: var(--sans); font-size: 12px; text-align: right; color: var(--color-25); background-image: linear-gradient(transparent, var(--background)); } .footer:hover { color: var(--color-50); } .footer a { color: inherit; } .footer a:hover { color: var(--highlight); } .spacer { margin: auto } .preview { position: fixed; top: 0; right: 0; bottom: 0; margin: 24px; width: 50%; min-width: 320px; max-width: 768px; overflow: scroll; background-color: var(--background); border-radius: 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } .close { position: absolute; top: 0; right: 0; appearance: none; border: 0; outline: 0; background-color: transparent; color: var(--color); display: inline; align-items: center; padding: 8px; height: 48px; width: 48px; border-radius: 9999px; font-family: inherit; font-size: 24px; cursor: pointer; opacity: 0.5; } .close:hover { opacity: 0.8; } .frontmatter { font-family: inherit; font-size: 12px; background-color: var(--shadow); padding: 8px; padding-top: 16px; margin: 0; } .markdown { padding: 32px; margin: 0; color: var(--color); background-color: var(--background); font-family: "Lexend", Georgia, serif; } .markdown pre { background-color: var(--shadow); font-family: var(--font); } .markdown hr { background-color: var(--shadow); } .markdown h1, .markdown h2 { border-color: var(--shadow); } `; const style =