| title | draft |
|---|---|
Demo Starter |
true |
view(html`
<article>
<h1>ready.</h1>
</article>
<style>
${style}
</style>
`);import { Editor } from "./editor.js";const demo = `article {
min-block-size: max(50vmin, 400px);
min-inline-size: 100%;
background: white;
margin: 0;
box-sizing: border-box;
border: 1px solid hsl(0 0% 80%);
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
}`;
const style = view(Editor({ value: demo }));| import { javascript } from "npm:@codemirror/lang-javascript"; | |
| import { css } from "npm:@codemirror/lang-css"; | |
| import { html } from "npm:@codemirror/lang-html"; | |
| import { EditorView, keymap } from "npm:@codemirror/view"; | |
| import { button } from "npm:@observablehq/inputs"; | |
| import { basicSetup } from "npm:@uiw/codemirror-extensions-basic-setup"; | |
| import { tokyoNight } from "npm:@uiw/codemirror-theme-tokyo-night"; | |
| export function Editor({ | |
| value = "", | |
| style = "", | |
| } = {}) { | |
| const parent = document.createElement("div"); | |
| parent.style = style; | |
| parent.value = value; | |
| const run = () => { | |
| parent.value = String(editor.state.doc); | |
| parent.dispatchEvent(new InputEvent("input", { bubbles: true })); | |
| }; | |
| const editor = new EditorView({ | |
| parent, | |
| doc: value, | |
| extensions: [ | |
| basicSetup({ | |
| lineNumbers: false | |
| }), | |
| javascript(), | |
| css(), | |
| html(), | |
| tokyoNight, | |
| keymap.of([ | |
| { key: "Mod-s", preventDefault: true, run }, | |
| ]), | |
| ], | |
| }); | |
| parent.addEventListener( | |
| "keyup", | |
| (event) => event.isTrusted && run(), | |
| ); | |
| return parent; | |
| } |