Observable Framework - CSS demo starter

css-demo.md

title	draft
Demo Starter	true

CSS Demo Starter

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 }));

editor.js

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;
}