windcraft-editor 0.0.0-stage → 0.1.0

package/design/classes-section.js

@@ -0,0 +1,103 @@
+// The Code tab below the element's own code, as components: the element's classes (one box: a chip per class, click one to edit
+// it, × to remove it, type at the end to add), its inline CSS (the style attribute, as property/value rows), and its attributes.
+// They act through `actions`, which the editor provides:
+//   setClassesText(text) · setStyle(css | null) · setAttribute(name, value | null)
+import { html, useState, useEffect, useRef } from "../vendor/preact-htm.js";
+import { parseToken } from "@windcraft/core/class-groups.js";
+import { TextInput } from "./controls.js";
+
+/** "color: red; margin: 0" -> [["color","red"],["margin","0"]] */
+const parseStyle = (style) => (style || "").split(";").map((d) => d.trim()).filter(Boolean).map((d) => { const i = d.indexOf(":"); return [d.slice(0, i).trim(), d.slice(i + 1).trim()]; });
+/** The style attribute for rows: only rows with both a property and a value count. null when there are none. */
+const cssOf = (rows) => rows.filter(([k, v]) => k.trim() && v.trim()).map(([k, v]) => `${k.trim()}: ${v.trim()}`).join("; ");
+
+/**
+ * A row of two inputs (a property and its value, an attribute and its value). Each commits on Enter or leaving, with the
+ * other as last committed; `onCommit({ k, v })`. A row only half filled stays as typed.
+ */
+function PairRow({ k, v, keyHolder, valueHolder, list, onCommit }) {
+    const [cells, setCells] = useState({ k, v });
+    const last = useRef({ k, v }); // what the row holds right now (two commits can come before a redraw)
+    useEffect(() => { last.current = { k, v }; setCells({ k, v }); }, [k, v]); // an edit landed, or another element: show what is there
+    const commit = (patch) => {
+        const before = last.current, next = { ...before, ...patch };
+        last.current = next;
+        setCells(next);
+        onCommit(next, before);
+    };
+    return html`<div class="kv">
+        <${TextInput} list=${list} value=${cells.k} placeholder=${keyHolder} onCommit=${(text) => commit({ k: text })} />
+        <${TextInput} value=${cells.v} placeholder=${valueHolder} onCommit=${(text) => commit({ v: text })} />
+    </div>`;
+}
+
+/** The element's style attribute as rows, and an empty row to add one. */
+function StyleRows({ style, actions }) {
+    const [rows, setRows] = useState(() => parseStyle(style));
+    const latest = useRef(rows); // the rows right now (two commits can come before a redraw)
+    const show = (next) => { latest.current = next; setRows(next); };
+    // the style changed from elsewhere (an undo, another element): show it; one we just saved keeps the rows as they are
+    useEffect(() => { const now = parseStyle(style); if (cssOf(latest.current) !== cssOf(now)) show(now); }, [style]);
+    const commit = (i, { k, v }) => {
+        const next = latest.current.map((row, j) => (j === i ? [k, v] : row));
+        if (i >= next.length) next.push([k, v]);
+        const kept = next.filter(([a, b]) => a || b);
+        show(kept);
+        const css = cssOf(kept);
+        actions.setStyle(css ? `${css};` : null);
+    };
+    return [...rows, ["", ""]].map(([k, v], i) => html`<${PairRow} key=${i} k=${k} v=${v} keyHolder="property" valueHolder="value" list="dl-cssprops" onCommit=${(next) => commit(i, next)} />`);
+}
+
+/** The element's attributes (class and style are above), and an empty row to add one. Renaming one removes the old name. */
+function AttrRows({ attrs, actions }) {
+    const entries = Object.entries(attrs || {});
+    return [...entries, ["", ""]].map(([k, v], i) => html`<${PairRow} key=${i} k=${k} v=${v} keyHolder="attribute" valueHolder="value"
+        onCommit=${(next, old) => {
+            if (old.k && old.k !== next.k.trim()) actions.setAttribute(old.k, null);
+            if (next.k.trim()) actions.setAttribute(next.k.trim(), next.v);
+        }} />`);
+}
+
+/**
+ * The element's classes in one box, like a tag input: each class a chip (a md: / hover: one tinted), × removes it, a click
+ * turns it into text to change (Enter or leaving saves; emptied, it goes), and typing at the end adds classes (Enter, space or
+ * a paste of several). Backspace in the empty end takes the last chip back into the text to change it. Every change saves
+ * the whole list at once (setClassesText), so the classes keep their order.
+ */
+function ClassBox({ classes, actions }) {
+    const toks = String(classes || "").split(/\s+/).filter(Boolean);
+    const [editing, setEditing] = useState(/** @type {number | null} */ (null));
+    const [draft, setDraft] = useState("");
+    const end = useRef(/** @type {HTMLInputElement | null} */ (null));
+    const save = (list) => actions.setClassesText([...new Set(list.filter(Boolean))].join(" "));
+    const add = (text) => { const more = text.split(/[\s,]+/).filter(Boolean); if (more.length) save([...toks, ...more]); setDraft(""); };
+    const replace = (i, text) => { setEditing(null); const parts = text.split(/\s+/).filter(Boolean); if (parts.join(" ") !== toks[i]) save([...toks.slice(0, i), ...parts, ...toks.slice(i + 1)]); };
+    const keyEnd = (e) => {
+        if (e.key === "Enter" || e.key === " " || e.key === ",") { if (draft.trim()) { e.preventDefault(); add(draft); } else if (e.key !== "Enter") e.preventDefault(); }
+        else if (e.key === "Backspace" && !draft && toks.length) { e.preventDefault(); setDraft(toks[toks.length - 1]); save(toks.slice(0, -1)); }
+        else if (e.key === "Escape") { setDraft(""); e.target.blur(); }
+    };
+    return html`<div class="cbox" onMouseDown=${(e) => { if (e.target === e.currentTarget) { e.preventDefault(); end.current && end.current.focus(); } }}>
+        ${toks.map((t, i) => (editing === i
+            ? html`<input class="cbedit" value=${t} size=${Math.max(4, t.length)} autofocus spellcheck=${false}
+                ref=${(el) => el && document.activeElement !== el && el.focus()}
+                onKeyDown=${(e) => { if (e.key === "Enter") { e.preventDefault(); replace(i, e.target.value); } else if (e.key === "Escape") setEditing(null); }}
+                onBlur=${(e) => replace(i, e.target.value)} />`
+            : html`<span class=${`chip ${parseToken(t).variant ? "var" : ""}`} title="Click to change it" onClick=${() => setEditing(i)}>${t}
+                <button type="button" title=${`Remove ${t}`} onMouseDown=${(e) => e.preventDefault()} onClick=${(e) => { e.stopPropagation(); save(toks.filter((_, j) => j !== i)); }}>×</button></span>`))}
+        <input ref=${end} class="cbin" value=${draft} spellcheck=${false} placeholder=${toks.length ? "Add a class…" : "Add classes (hover:bg-red-500)…"}
+            onInput=${(e) => setDraft(e.target.value)} onKeyDown=${keyEnd} onBlur=${() => draft.trim() && add(draft)}
+            onPaste=${(e) => { const t = e.clipboardData.getData("text"); if (/\s/.test(t.trim())) { e.preventDefault(); add(draft + " " + t); } }} />
+    </div>`;
+}
+
+export function ClassesSection({ s, actions }) {
+    const n = s.classes.split(/\s+/).filter(Boolean).length;
+    return html`
+        <div class="sec"><div class="secb nopad"><p class="sub first">Classes <span class="muted">${n}</span></p>
+            <${ClassBox} classes=${s.classes} actions=${actions} />
+        </div></div>
+        <div class="sec"><div class="secb nopad"><p class="sub first">Inline CSS <span class="muted">style attribute</span></p><${StyleRows} style=${s.style} actions=${actions} /></div></div>
+        <div class="sec"><div class="secb nopad"><p class="sub first">Attributes</p><${AttrRows} attrs=${s.attrs} actions=${actions} /></div></div>`;
+}

package/design/code-editor.js

@@ -0,0 +1,293 @@
+// The code editor: CodeMirror 6 set up for HTML with Tailwind. Line numbers, undo/redo, auto-closing tags and brackets, auto-indent,
+// Tab / Shift+Tab to indent a block, Cmd/Ctrl+/ to comment, find and replace (Cmd/Ctrl+F), code folding, highlighting for HTML, CSS and
+// JavaScript, tag/attribute completion, Tailwind class completion inside class="…", and squiggles under what doesn't parse.
+// CodeMirror itself is loaded the first time an editor is made (vendor/codemirror.js).
+//
+//   const ed = await createCodeEditor(el, { value, onChange(text), problems(text) -> [{ from, to, message }], onSave(), wrap, placeholderText });
+//   ed.getValue()  ed.setValue(text)  ed.focus()  ed.hasFocus()  ed.setMarks([[from, to, "sel"]])  ed.reveal(index)  ed.select(from, to)
+//   ed.format() -> { ok, changed, message }   (Prettier: HTML with its <style> and <script>; also Shift+Alt+F, and with formatOnPaste the first paste into an empty editor)
+//   ed.lineCount()  ed.openSearch()  ed.setProblems(list)  ed.destroy()
+import { tailwindClasses } from "./tailwind-classes.js";
+import { checkTags } from "./code-view.js";
+
+let cmPromise = null;
+const load = () => (cmPromise ||= import("../vendor/codemirror.js"));
+
+/** Completion for class names: while the cursor is inside class="…", offers Tailwind's (with variants such as md:hover:). */
+function classCompletion(context) {
+    const { state, pos } = context;
+    const from = Math.max(0, pos - 1500);
+    const before = state.doc.sliceString(from, pos);
+    const lt = before.lastIndexOf("<");
+    const tag = before.slice(lt < 0 ? 0 : lt);
+    const m = /\sclass\s*=\s*(["'])([^"']*)$/.exec(tag);
+    if (!m) return null;
+    const token = /[^\s"']*$/.exec(m[2])[0];
+    if (!token && !context.explicit) return null;
+    const start = pos - token.length;
+    const colon = token.lastIndexOf(":");
+    const prefix = colon >= 0 ? token.slice(0, colon + 1) : "";
+    const rest = token.slice(prefix.length);
+    const all = tailwindClasses();
+    const options = prefix
+        ? all.filter((c) => !c.endsWith(":")).map((c) => ({ label: prefix + c, type: "class" }))
+        : all.map((c) => ({ label: c, type: c.endsWith(":") ? "keyword" : "class", boost: c.endsWith(":") ? -1 : 0 }));
+    if (!rest && !prefix && !context.explicit) return null;
+    return { from: start, options, validFor: /^[\w:\-/.\[\]%#!]*$/ };
+}
+
+const ICONS = {
+    down: '<path d="M8 3v9.5M4 8.5l4 4 4-4"/>', up: '<path d="M8 13V3.5M4 7.5l4-4 4 4"/>', lines: '<path d="M3 4h10M3 8h10M3 12h10"/>',
+    close: '<path d="M4 4l8 8M12 4l-8 8"/>', right: '<path d="M6 3.5l4.5 4.5L6 12.5"/>', openDown: '<path d="M3.5 6l4.5 4.5L12.5 6"/>',
+    replace: '<path d="M2.5 4.5h7M2.5 8h4M9 6.5l2.5 1.5L9 9.5M2.5 11.5h7"/>', replaceAll: '<path d="M2.5 3.5h6M2.5 6.5h4M2.5 9.5h6M2.5 12.5h4M9.5 8l2.5 1.5L9.5 11"/>',
+};
+const icon = (name) => `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[name]}</svg>`;
+/** The fold gutter's markers: a chevron pointing down for an open block, right for a folded one (VS Code's). */
+function foldMarker(open) {
+    const el = document.createElement("span");
+    el.className = `wc-fold${open ? "" : " shut"}`;
+    el.innerHTML = icon(open ? "openDown" : "right");
+    el.title = open ? "Fold" : "Unfold";
+    return el;
+}
+
+/** Find and replace as VS Code lays it out: Find with its Aa / .* / ab toggles inside the field and "n of N" beside it, previous / next /
+ *  select all, close; the chevron on the left opens the Replace row. */
+function searchPanel(view, cm) {
+    const { SearchQuery, setSearchQuery, getSearchQuery } = cm;
+    const dom = document.createElement("div");
+    dom.className = "wcs";
+    dom.innerHTML = `<button type="button" class="wcs-toggle" title="Toggle replace" aria-label="Toggle replace">${icon("right")}</button>
+        <div class="wcs-rows">
+            <div class="wcs-row">
+                <div class="wcs-field find"><input name="search" placeholder="Find" aria-label="Find" main-field="true" autocomplete="off" spellcheck="false">
+                    <span class="wcs-opts"><button type="button" class="wcs-btn" data-opt="caseSensitive" title="Match case">Aa</button><button type="button" class="wcs-btn" data-opt="wholeWord" title="Match whole word"><u>ab</u></button><button type="button" class="wcs-btn" data-opt="regexp" title="Use regular expression">.*</button></span></div>
+                <span class="wcs-count"></span>
+                <button type="button" class="wcs-btn" data-act="prev" title="Previous match (Shift+Enter)">${icon("up")}</button>
+                <button type="button" class="wcs-btn" data-act="next" title="Next match (Enter)">${icon("down")}</button>
+                <button type="button" class="wcs-btn" data-act="all" title="Select all matches">${icon("lines")}</button>
+                <button type="button" class="wcs-btn" data-act="close" title="Close (Escape)">${icon("close")}</button>
+            </div>
+            <div class="wcs-row" data-replace hidden>
+                <div class="wcs-field"><input name="replace" placeholder="Replace" aria-label="Replace" autocomplete="off" spellcheck="false"></div>
+                <button type="button" class="wcs-btn" data-act="replace" title="Replace (Enter)">${icon("replace")}</button>
+                <button type="button" class="wcs-btn" data-act="replaceAll" title="Replace all">${icon("replaceAll")}</button>
+            </div>
+        </div>`;
+    const $ = (sel) => dom.querySelector(sel);
+    const find = $("input[name=search]"), rep = $("input[name=replace]"), count = $(".wcs-count"), toggle = $(".wcs-toggle"), repRow = $("[data-replace]");
+    const opts = { caseSensitive: false, wholeWord: false, regexp: false };
+    const queryOf = () => new SearchQuery({ search: find.value, replace: rep.value, ...opts });
+    const commit = () => { const q = queryOf(); if (!q.eq(getSearchQuery(view.state))) view.dispatch({ effects: setSearchQuery.of(q) }); };
+    const paint = () => {
+        const q = getSearchQuery(view.state);
+        dom.querySelectorAll("[data-opt]").forEach((b) => b.classList.toggle("on", q[b.dataset.opt]));
+        let n = 0, at = 0;
+        if (q.search && q.valid) {
+            const sel = view.state.selection.main.from;
+            for (const cur = q.getCursor(view.state); n < 5000; ) { const m = cur.next(); if (m.done) break; n++; if (!at && m.value.from >= sel) at = n; }
+            if (!at && n) at = 1;
+        }
+        count.textContent = n ? `${at} of ${n}${n >= 5000 ? "+" : ""}` : "No results"; // (as in VS Code, also while the field is empty)
+        count.classList.toggle("bad", Boolean(q.search) && !n);
+        $(".wcs-field.find").classList.toggle("bad", Boolean(q.search) && !n);
+    };
+    const showReplace = (on) => { repRow.hidden = !on; toggle.innerHTML = icon(on ? "openDown" : "right"); };
+    find.addEventListener("input", () => { commit(); });
+    rep.addEventListener("input", commit);
+    find.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") { e.preventDefault(); (e.shiftKey ? cm.findPrevious : cm.findNext)(view); }
+        else if (e.key === "Escape") { e.preventDefault(); cm.closeSearchPanel(view); view.focus(); }
+    });
+    rep.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") { e.preventDefault(); (e.ctrlKey || e.metaKey ? cm.replaceAll : cm.replaceNext)(view); }
+        else if (e.key === "Escape") { e.preventDefault(); cm.closeSearchPanel(view); view.focus(); }
+    });
+    toggle.addEventListener("click", () => showReplace(repRow.hidden));
+    dom.addEventListener("click", (e) => {
+        const o = e.target.closest("[data-opt]"), a = e.target.closest("[data-act]");
+        if (o) { opts[o.dataset.opt] = !opts[o.dataset.opt]; commit(); find.focus(); return; }
+        if (!a) return;
+        const run = { next: cm.findNext, prev: cm.findPrevious, all: cm.selectMatches, replace: cm.replaceNext, replaceAll: cm.replaceAll, close: cm.closeSearchPanel }[a.dataset.act];
+        run(view);
+        if (a.dataset.act === "close") view.focus();
+    });
+    const sync = () => {
+        const q = getSearchQuery(view.state);
+        if (q.search !== find.value) find.value = q.search;
+        if (q.replace !== rep.value) rep.value = q.replace;
+        Object.assign(opts, { caseSensitive: q.caseSensitive, wholeWord: q.wholeWord, regexp: q.regexp });
+        paint();
+    };
+    sync();
+    return {
+        dom, top: true,
+        mount() { find.select(); },
+        update(u) { if (u.docChanged || u.selectionSet || u.transactions.some((t) => t.effects.some((e) => e.is(setSearchQuery)))) sync(); },
+    };
+}
+
+/** Where the tags first stop matching up, as a range in the code (for the squiggle), or none. */
+export function tagProblems(text) {
+    const bad = checkTags(text);
+    if (!bad) return [];
+    const lines = text.split("\n");
+    const from = lines.slice(0, bad.line - 1).reduce((s, l) => s + l.length + 1, 0);
+    const line = lines[bad.line - 1] || "";
+    const lead = line.length - line.trimStart().length;
+    return [{ from: from + lead, to: from + Math.max(line.length, lead + 1), message: bad.message }];
+}
+
+export async function createCodeEditor(parent, { value = "", onChange, problems, onSave, placeholderText, wrap = false, formatOnPaste = false } = {}) {
+    const cm = await load();
+    const { EditorState, EditorView, Decoration, StateEffect, StateField, keymap } = cm;
+    let quiet = 0;
+
+    const setMarksEffect = StateEffect.define();
+    // the selected element's source, shaded (its opening tag darker): set from outside with setMarks()
+    const marksField = StateField.define({
+        create: () => Decoration.none,
+        update(deco, tr) {
+            deco = deco.map(tr.changes);
+            for (const e of tr.effects) if (e.is(setMarksEffect)) {
+                const len = tr.newDoc.length;
+                deco = Decoration.set(e.value.filter(([a, b]) => a < b && b <= len).map(([a, b, cls]) => Decoration.mark({ class: `cm-${cls}` }).range(a, b)), true);
+            }
+            return deco;
+        },
+        provide: (f) => EditorView.decorations.from(f),
+    });
+
+    const { tags: t } = cm;
+    const style = cm.HighlightStyle.define([
+        { tag: t.tagName, color: "#116329" }, { tag: t.angleBracket, color: "#6e7781" }, { tag: t.attributeName, color: "#8250df" },
+        { tag: [t.attributeValue, t.string], color: "#0a3069" }, { tag: [t.comment, t.blockComment, t.lineComment], color: "#6e7781", fontStyle: "italic" },
+        { tag: [t.keyword, t.controlKeyword, t.definitionKeyword, t.moduleKeyword], color: "#cf222e" }, { tag: [t.number, t.bool, t.null], color: "#0550ae" },
+        { tag: [t.propertyName, t.className], color: "#0550ae" }, { tag: [t.function(t.variableName), t.function(t.propertyName)], color: "#8250df" },
+        { tag: t.regexp, color: "#116329" }, { tag: t.invalid, color: "#cf222e" },
+    ]);
+    const theme = EditorView.theme({
+        "&": { height: "100%", fontSize: "12px", backgroundColor: "#fff", color: "#24292f" },
+        "&.cm-focused": { outline: "none" },
+        ".cm-scroller": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", lineHeight: "20px", overflow: "auto" },
+        ".cm-content": { padding: "12px 0", caretColor: "#111" },
+        ".cm-gutters": { backgroundColor: "#fff", color: "#9a9a9a", border: "none" },
+        ".cm-activeLineGutter": { backgroundColor: "transparent", color: "#222" },
+        ".cm-activeLine": { backgroundColor: "rgba(0,0,0,.025)" },
+        ".cm-lineNumbers .cm-gutterElement": { padding: "0 6px 0 14px", minWidth: "34px", fontSize: "12.5px" },
+        ".cm-foldGutter .cm-gutterElement": { cursor: "pointer", padding: "0 2px", display: "flex", alignItems: "center" },
+        ".wc-fold": { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "20px", color: "#8a8a8a", opacity: 0, transition: "opacity .12s" },
+        ".wc-fold.shut": { opacity: 1 },
+        ".wc-fold svg": { width: "15px", height: "15px" },
+        ".cm-gutters:hover .wc-fold": { opacity: 1 },
+        ".cm-foldGutter .cm-gutterElement:hover .wc-fold": { color: "#111" },
+        ".cm-foldPlaceholder": { backgroundColor: "#eee", border: "1px solid #ddd", color: "#666", borderRadius: "3px", padding: "0 5px", margin: "0 2px" },
+        ".cm-selectionBackground, &.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": { backgroundColor: "rgba(10,132,224,.22) !important" },
+        ".cm-sel": { backgroundColor: "rgba(10,132,224,.07)" },
+        ".cm-selt": { backgroundColor: "rgba(10,132,224,.16)" },
+        ".cm-matchingBracket": { backgroundColor: "rgba(10,132,224,.18)", outline: "none" },
+        ".cm-tooltip": { border: "1px solid #e5e5e5", borderRadius: "8px", backgroundColor: "#fff", boxShadow: "0 6px 20px rgba(0,0,0,.12)", overflow: "hidden" },
+        ".cm-tooltip-autocomplete > ul": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: "12px", maxHeight: "220px" },
+        ".cm-tooltip-autocomplete ul li[aria-selected]": { backgroundColor: "#111", color: "#fff" },
+        // find and replace, laid out like VS Code's: a small widget in the corner of the editor
+        ".cm-panels": { position: "absolute", top: 0, right: 0, left: "auto", background: "transparent", border: "none", zIndex: 10, pointerEvents: "none", fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" },
+        ".cm-panels-top": { borderBottom: "none" },
+        ".wcs": { pointerEvents: "auto", display: "flex", alignItems: "flex-start", gap: "2px", margin: "0 14px 0 0", padding: "4px 6px 4px 2px", background: "#fff", border: "1px solid #e6e6e6", borderTop: "none", borderRadius: "0 0 8px 8px", boxShadow: "0 4px 14px rgba(0,0,0,.08)", fontSize: "13px", color: "#3b3b3b" },
+        ".wcs-toggle": { alignSelf: "stretch", width: "16px", display: "flex", alignItems: "center", justifyContent: "center", border: "none", background: "transparent", color: "#9a9a9a", borderRadius: "3px", cursor: "pointer", padding: 0, outline: "none" },
+        ".wcs-toggle svg": { width: "12px", height: "12px" },
+        ".wcs-toggle:focus-visible": { boxShadow: "inset 0 0 0 1px #0090f1" },
+        ".wcs-toggle:hover": { background: "#f0f0f0", color: "#555" },
+        ".wcs-row[hidden]": { display: "none" },
+        ".wcs-rows": { display: "flex", flexDirection: "column", gap: "4px" },
+        ".wcs-row": { display: "flex", alignItems: "center", gap: "2px", height: "24px" },
+        ".wcs-field": { position: "relative", width: "216px", height: "24px", display: "flex", alignItems: "center" },
+        ".wcs-field input": { width: "100%", height: "24px", boxSizing: "border-box", border: "1px solid transparent", borderRadius: "2px", background: "#fff", color: "#222", fontSize: "13px", padding: "0 6px", outline: "1px solid #dcdcdc", outlineOffset: "-1px", fontFamily: "inherit" },
+        ".wcs-field.find input": { paddingRight: "76px" },
+        ".wcs-field input:focus": { outline: "1px solid #0090f1" },
+        ".wcs-field.bad input": { outline: "1px solid #d1242f" },
+        ".wcs-opts": { position: "absolute", right: "2px", top: "1px", display: "flex", gap: "1px" },
+        ".wcs-btn": { width: "22px", height: "22px", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", borderRadius: "3px", background: "transparent", color: "#8a8a8a", cursor: "pointer", padding: 0, fontSize: "11.5px", fontWeight: 600, outline: "none", fontFamily: "inherit" },
+        ".wcs-btn:hover": { background: "#f0f0f0", color: "#444" },
+        ".wcs-btn:focus-visible": { boxShadow: "inset 0 0 0 1px #0090f1" },
+        ".wcs-btn.on": { background: "#bfdcf7", boxShadow: "inset 0 0 0 1px #0090f1", color: "#0b4f8a" },
+        ".wcs-btn svg": { width: "14px", height: "14px" },
+        ".wcs-count": { minWidth: "70px", padding: "0 6px", textAlign: "center", fontSize: "12px", color: "#616161", whiteSpace: "nowrap" },
+        ".wcs-count.bad": { color: "#d1242f" },
+        ".wcs-sep": { width: "1px", height: "16px", background: "#d4d4d4", margin: "0 3px" },
+        ".cm-diagnostic": { fontFamily: "system-ui, sans-serif", fontSize: "12px", padding: "4px 8px" },
+        ".cm-lintRange-error": { backgroundImage: "none", textDecoration: "underline wavy #d1242f", textUnderlineOffset: "3px" },
+    }, { dark: false });
+
+    const htmlSupport = cm.html({ matchClosingTags: true, autoCloseTags: true, selfClosingTags: true });
+    const extensions = [
+        cm.lineNumbers(), cm.highlightActiveLineGutter(), cm.foldGutter({ markerDOM: foldMarker }), cm.history(), cm.drawSelection(), cm.dropCursor(),
+        EditorState.allowMultipleSelections.of(true), cm.indentOnInput(), cm.indentUnit.of("  "), EditorState.tabSize.of(2),
+        cm.bracketMatching(), cm.closeBrackets(), cm.rectangularSelection(), cm.crosshairCursor(), cm.highlightActiveLine(), cm.highlightSelectionMatches(),
+        cm.search({ top: true, createPanel: (view) => searchPanel(view, cm) }), cm.syntaxHighlighting(style), htmlSupport, htmlSupport.language.data.of({ autocomplete: classCompletion }),
+        cm.autocompletion({ activateOnTyping: true, icons: false, maxRenderedOptions: 60 }),
+        keymap.of([
+            ...(onSave ? [{ key: "Mod-s", preventDefault: true, run: () => { onSave(); return true; } }] : []),
+            { key: "Mod-/", run: cm.toggleComment }, ...cm.closeBracketsKeymap, ...cm.defaultKeymap, ...cm.searchKeymap, ...cm.historyKeymap,
+            ...cm.foldKeymap, ...cm.completionKeymap, ...cm.lintKeymap, cm.indentWithTab,
+        ]),
+        ...(problems ? [cm.linter((view) => problems(view.state.doc.toString()).map((p) => ({ from: p.from, to: p.to, severity: "error", message: p.message })), { delay: 350 })] : []),
+        ...(wrap ? [EditorView.lineWrapping] : []),
+        ...(placeholderText ? [cm.placeholder(placeholderText)] : []),
+        marksField, theme,
+        EditorView.updateListener.of((u) => { if (u.docChanged && !quiet && onChange) onChange(u.state.doc.toString()); }),
+    ];
+    let view = null;
+    /** Tidies the whole text with Prettier, as one undo step; the cursor stays about where it was. */
+    async function format() {
+        const text = view.state.doc.toString();
+        if (!text.trim()) return { ok: true, changed: false };
+        let out;
+        try {
+            const { formatSource } = await import("../vendor/prettier.js");
+            out = await formatSource(text);
+        } catch (err) {
+            return { ok: false, changed: false, message: String(err && err.message ? err.message : err).split("\n")[0] };
+        }
+        if (view.state.doc.toString() !== text) return { ok: false, changed: false, message: "The code changed while formatting" };
+        if (out === text) return { ok: true, changed: false };
+        let a = 0;
+        while (a < text.length && a < out.length && text[a] === out[a]) a++;
+        let b = 0;
+        while (b < text.length - a && b < out.length - a && text[text.length - 1 - b] === out[out.length - 1 - b]) b++;
+        view.dispatch({ changes: { from: a, to: text.length - b, insert: out.slice(a, out.length - b) }, userEvent: "input.format" });
+        return { ok: true, changed: true };
+    }
+    extensions.push(
+        keymap.of([{ key: "Shift-Alt-f", preventDefault: true, run: () => { format(); return true; } }]),
+        ...(formatOnPaste ? [EditorView.domEventHandlers({ paste(_e, v) { if (v.state.doc.length === 0) setTimeout(() => format(), 0); return false; } })] : []),
+    );
+    view = new EditorView({ state: EditorState.create({ doc: value, extensions }), parent });
+
+    return {
+        view,
+        getValue: () => view.state.doc.toString(),
+        /** Replaces the text (not reported through onChange), keeping the scroll position and the cursor where it can. */
+        setValue(text) {
+            const cur = view.state.doc.toString();
+            if (text === cur) return;
+            let a = 0;
+            while (a < cur.length && a < text.length && cur[a] === text[a]) a++;
+            let b = 0;
+            while (b < cur.length - a && b < text.length - a && cur[cur.length - 1 - b] === text[text.length - 1 - b]) b++;
+            quiet++;
+            try { view.dispatch({ changes: { from: a, to: cur.length - b, insert: text.slice(a, text.length - b) } }); } finally { quiet--; }
+        },
+        format,
+        focus: () => view.focus(),
+        hasFocus: () => view.hasFocus,
+        lineCount: () => view.state.doc.lines,
+        setMarks: (marks) => view.dispatch({ effects: setMarksEffect.of(marks) }),
+        /** Scrolls so the character at `index` is in view (centred when it was out of sight). */
+        reveal: (index) => view.dispatch({ effects: EditorView.scrollIntoView(Math.min(index, view.state.doc.length), { y: "center" }) }),
+        select(from, to) { view.dispatch({ selection: { anchor: from, head: to }, effects: EditorView.scrollIntoView(from, { y: "center" }) }); view.focus(); },
+        lineRange(line) { const l = view.state.doc.line(Math.min(Math.max(1, line), view.state.doc.lines)); return [l.from, l.to]; },
+        openSearch: () => { view.focus(); cm.openSearchPanel(view); },
+        setProblems: (list) => view.dispatch(cm.setDiagnostics(view.state, list.map((p) => ({ from: p.from, to: p.to, severity: "error", message: p.message })))),
+        destroy: () => view.destroy(),
+    };
+}

package/design/code-view.js

@@ -0,0 +1,158 @@
+// @ts-check
+// What the editor's code boxes need beyond a textarea: syntax colours (painted on a layer behind the see-through
+// textarea), a check for tags that don't match up, and tidy indentation on request. Used by the code panel and by the
+// Code tab's element code (editor.js).
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+/** Tags whose closing tag HTML lets you leave out (the browser closes them itself). */
+const OPTIONAL_CLOSE = new Set(["p", "li", "dt", "dd", "option", "optgroup", "tr", "td", "th", "thead", "tbody", "tfoot", "colgroup", "rt", "rp", "html", "head", "body"]);
+/** Tags whose content is text, not markup. */
+const RAW = new Set(["script", "style", "textarea", "title"]);
+
+const esc = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const TAG_RE = /<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)(>?)/y;
+const ATTR_RE = /([^\s=/>]+)(\s*=\s*)?("[^"]*"|'[^']*'|[^\s>]+)?/g;
+
+/** The text cut into coloured pieces: [start, end, class] for every non-plain run (tags, attributes, strings, comments). */
+function tokens(text) {
+    const out = [];
+    let i = 0;
+    while (i < text.length) {
+        const lt = text.indexOf("<", i);
+        if (lt === -1) break;
+        if (text.startsWith("<!--", lt)) {
+            const end = text.indexOf("-->", lt + 4);
+            const e = end === -1 ? text.length : end + 3;
+            out.push([lt, e, "ck-com"]);
+            i = e;
+            continue;
+        }
+        if (text[lt + 1] === "!") { // <!doctype html>
+            const e = text.indexOf(">", lt);
+            out.push([lt, e === -1 ? text.length : e + 1, "ck-doc"]);
+            i = e === -1 ? text.length : e + 1;
+            continue;
+        }
+        TAG_RE.lastIndex = lt;
+        const m = TAG_RE.exec(text);
+        if (!m) { i = lt + 1; continue; }
+        const nameEnd = lt + 1 + m[1].length + m[2].length;
+        out.push([lt, nameEnd, "ck-tag"]);
+        const attrs = m[3], base = nameEnd;
+        let a;
+        ATTR_RE.lastIndex = 0;
+        while ((a = ATTR_RE.exec(attrs))) {
+            if (!a[0]) { ATTR_RE.lastIndex++; continue; }
+            const s = base + a.index;
+            out.push([s, s + a[1].length, "ck-attr"]);
+            if (a[3]) { const vs = s + a[1].length + (a[2] || "").length; out.push([vs, vs + a[3].length, "ck-str"]); }
+        }
+        const end = lt + m[0].length;
+        if (m[4]) out.push([end - 1 - (attrs.endsWith("/") ? 1 : 0), end, "ck-tag"]);
+        i = end;
+        // the inside of <style> and <script> is not markup: skip to its closing tag
+        const tag = m[2].toLowerCase();
+        if (!m[1] && RAW.has(tag)) {
+            const close = text.toLowerCase().indexOf(`</${tag}`, i);
+            i = close === -1 ? text.length : close;
+        }
+    }
+    return out;
+}
+
+/**
+ * The text as coloured HTML for the layer behind a code textarea. `marks` ([start, end, class]) shade ranges on top of
+ * the colours, such as the selected element's source.
+ */
+export function highlight(text, marks = []) {
+    const toks = tokens(text);
+    const cuts = new Set([0, text.length]);
+    for (const [s, e] of [...toks, ...marks]) { cuts.add(s); cuts.add(e); }
+    const points = [...cuts].filter((p) => p >= 0 && p <= text.length).sort((a, b) => a - b);
+    let out = "", ti = 0, cur = null, buf = "";
+    const flush = () => { if (buf) out += cur ? `<span class="${cur}">${esc(buf)}</span>` : esc(buf); buf = ""; };
+    for (let k = 0; k < points.length - 1; k++) {
+        const s = points[k], e = points[k + 1];
+        while (ti < toks.length && toks[ti][1] <= s) ti++;
+        const tk = toks[ti] && toks[ti][0] <= s && toks[ti][1] >= e ? toks[ti][2] : "";
+        const cls = [tk, ...marks.filter((m) => m[0] <= s && m[1] >= e).map((m) => m[2])].filter(Boolean).join(" ") || null;
+        if (cls !== cur) { flush(); cur = cls; }
+        buf += text.slice(s, e);
+    }
+    flush();
+    return out + "\n";
+}
+
+const lineAt = (text, index) => text.slice(0, index).split("\n").length;
+
+/**
+ * The first place the tags don't match up, or null: { line, message }. A tag left open, a closing tag with nothing to
+ * close, or a tag that never ends. Closing tags HTML lets you leave out (</p>, </li>, </td>...) are not required.
+ */
+export function checkTags(text) {
+    const stack = [];
+    let i = 0;
+    while (i < text.length) {
+        const lt = text.indexOf("<", i);
+        if (lt === -1) break;
+        if (text.startsWith("<!--", lt)) { const e = text.indexOf("-->", lt + 4); if (e === -1) return { line: lineAt(text, lt), message: "A comment (<!--) is never closed" }; i = e + 3; continue; }
+        if (text[lt + 1] === "!") { const e = text.indexOf(">", lt); i = e === -1 ? text.length : e + 1; continue; }
+        TAG_RE.lastIndex = lt;
+        const m = TAG_RE.exec(text);
+        if (!m) { i = lt + 1; continue; }
+        const tag = m[2].toLowerCase();
+        if (!m[4]) return { line: lineAt(text, lt), message: `<${m[1]}${tag}> never ends: it is missing its ">"` };
+        i = lt + m[0].length;
+        if (m[1]) {
+            const at = stack.map((s) => s.tag).lastIndexOf(tag);
+            if (at === -1) { if (!VOID.has(tag)) return { line: lineAt(text, lt), message: `</${tag}> closes nothing: there is no open <${tag}> here` }; continue; }
+            const open = stack.slice(at + 1).find((s) => !OPTIONAL_CLOSE.has(s.tag));
+            if (open) return { line: open.line, message: `<${open.tag}> is never closed (</${tag}> on line ${lineAt(text, lt)} comes first)` };
+            stack.length = at;
+            continue;
+        }
+        if (VOID.has(tag) || m[3].trim().endsWith("/")) continue;
+        stack.push({ tag, line: lineAt(text, lt) });
+        if (RAW.has(tag)) {
+            const close = text.toLowerCase().indexOf(`</${tag}`, i);
+            if (close === -1) return { line: lineAt(text, lt), message: `<${tag}> is never closed` };
+            i = close;
+        }
+    }
+    const open = [...stack].reverse().find((s) => !OPTIONAL_CLOSE.has(s.tag)); // the innermost: usually the one just typed
+    return open ? { line: open.line, message: `<${open.tag}> is never closed` } : null;
+}
+
+// ── Format ───────────────────────────────────────────────────────────────────
+const INLINE = new Set(["a", "abbr", "b", "bdi", "bdo", "br", "button", "cite", "code", "data", "dfn", "em", "i", "img", "input", "kbd", "label", "mark", "q", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "time", "u", "var", "wbr", "textarea"]);
+const KEEP = new Set(["pre", "textarea", "script", "style", "svg"]); // written exactly as they are
+const openTag = (el) => { const c = el.cloneNode(false); c.innerHTML = ""; const h = c.outerHTML; return VOID.has(el.localName) ? h : h.slice(0, h.lastIndexOf("</")); };
+const isInlineOnly = (el) => Array.from(el.childNodes).every((n) => n.nodeType === 3 || n.nodeType === 8 || (n.nodeType === 1 && INLINE.has(n.localName)));
+
+/** Markup (a fragment, no <html>) with tidy indentation: block elements on their own lines, text and inline elements kept on theirs. */
+export function formatHtml(markup, indent = "  ") {
+    const tpl = document.createElement("template");
+    tpl.innerHTML = markup;
+    const lines = [];
+    const walk = (node, depth) => {
+        const pad = indent.repeat(depth);
+        if (node.nodeType === 3) { const t = node.textContent.replace(/\s+/g, " ").trim(); if (t) lines.push(pad + esc(t)); return; }
+        if (node.nodeType === 8) { lines.push(`${pad}<!--${node.data}-->`); return; }
+        if (node.nodeType !== 1) return;
+        const name = node.localName;
+        if (KEEP.has(name) || VOID.has(name) || isInlineOnly(node)) {
+            // short enough, or not to be touched: one line (inline content keeps its own spacing, squeezed)
+            const html = KEEP.has(name) ? node.outerHTML : node.outerHTML.replace(/\s*\n\s*/g, " ");
+            lines.push(pad + html);
+            return;
+        }
+        lines.push(pad + openTag(node));
+        Array.from(node.childNodes).forEach((k) => walk(k, depth + 1));
+        lines.push(`${pad}</${name}>`);
+    };
+    Array.from(tpl.content.childNodes).forEach((n) => walk(n, 0));
+    return lines.join("\n");
+}
+
+/** Line numbers for a gutter: "1\n2\n3..." */
+export const lineNumbers = (text) => Array.from({ length: text.split("\n").length }, (_, i) => i + 1).join("\n");