@charcuterie/ui 3.3.0 → 3.4.0

package/dist/markdownEditorCodeMirror/livePreview.js

@@ -0,0 +1,428 @@
+/**
+ * The CodeMirror half of live preview: descriptors → decorations,
+ * two widgets, and a theme that reads Charcuterie tokens.
+ *
+ * `livePreviewRanges.ts` decided *what* to decorate and is pure.
+ * This file owns everything that needs `@codemirror/view`, which is
+ * also everything that cannot be tested in this package's Node-only
+ * Vitest project — so it is kept deliberately thin and mechanical.
+ *
+ * ### Why the theme uses `var(--color-…)` and not Tailwind classes
+ *
+ * Every other visual in this package is a Tailwind utility reading
+ * a token. CodeMirror is the exception, and for a structural
+ * reason: it generates its own scoped class names and injects its
+ * own stylesheet, so the DOM these decorations land on is not DOM
+ * Tailwind ever scans. Referencing the custom properties directly
+ * keeps a scheme flip a repaint — the same behaviour, one layer
+ * lower — and avoids a `safelist` that would rot the first time a
+ * class here changed.
+ *
+ * The properties below are the generated token names, not invented
+ * ones. That distinction has already cost this fleet a release:
+ * Docket shipped invisible priority bars from `--color-danger-9`, a
+ * scale that does not exist, and nothing errored. A custom property
+ * that resolves to nothing paints nothing, silently.
+ */
+import { syntaxTree } from "@codemirror/language";
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType, } from "@codemirror/view";
+import { toLivePreviewRanges } from "./livePreviewRanges.js";
+/** Marks a rendered link so the click handler can find its target. */
+const URL_ATTRIBUTE = "data-charcuterie-url";
+/** Toggle the "edit Markdown" mode. */
+export const setLivePreviewRawMode = StateEffect.define();
+/**
+ * Raw mode as editor state rather than a React prop threaded down.
+ *
+ * It has to live here because the decoration plugin reads it on
+ * every update, and because a keybinding should be able to flip it
+ * without a round trip through React.
+ */
+export const livePreviewRawModeField = StateField.define({
+    create: () => false,
+    update: (isRawMode, transaction) => {
+        let isNextRawMode = isRawMode;
+        for (const effect of transaction.effects) {
+            if (effect.is(setLivePreviewRawMode)) {
+                isNextRawMode = effect.value;
+            }
+        }
+        return isNextRawMode;
+    },
+});
+const LINE_CLASSES = {
+    blockquote: "cm-md-blockquote",
+    code: "cm-md-codeblock",
+    heading1: "cm-md-heading1",
+    heading2: "cm-md-heading2",
+    heading3: "cm-md-heading3",
+    heading4: "cm-md-heading4",
+    heading5: "cm-md-heading5",
+    heading6: "cm-md-heading6",
+    table: "cm-md-table",
+};
+const MARK_CLASSES = {
+    autolink: "cm-md-link",
+    code: "cm-md-code",
+    emphasis: "cm-md-emphasis",
+    linkText: "cm-md-link",
+    strikethrough: "cm-md-strikethrough",
+    strong: "cm-md-strong",
+    url: "cm-md-url",
+};
+/**
+ * An image, standing in for its own markup.
+ *
+ * `eq` compares by URL *and* alt so scrolling past an image reuses
+ * the same `<img>` instead of refetching it, while an edit to
+ * either still rebuilds. Without it every keystroke elsewhere in
+ * the document flashes every image on screen.
+ */
+class ImageWidget extends WidgetType {
+    url;
+    alt;
+    constructor(url, alt) {
+        super();
+        this.url = url;
+        this.alt = alt;
+    }
+    eq(other) {
+        return other.url === this.url && other.alt === this.alt;
+    }
+    toDOM(view) {
+        const image = document.createElement("img");
+        image.setAttribute("src", this.url);
+        image.setAttribute("alt", this.alt);
+        image.className = "cm-md-image";
+        // The document's height is unknown until the image decodes, and
+        // CodeMirror caches line heights. Without a remeasure the lines
+        // after a tall image overlap it until something else forces a
+        // layout.
+        image.addEventListener("load", () => {
+            view.requestMeasure();
+        });
+        return image;
+    }
+}
+/**
+ * A task checkbox, standing in for `[ ]` / `[x]`.
+ *
+ * The position is read back from the DOM with `posAtDOM` rather
+ * than captured in the constructor: a widget outlives the document
+ * offsets it was built at, and a stale `from` writes the checkbox
+ * into whatever moved into that slot.
+ */
+class TaskWidget extends WidgetType {
+    isChecked;
+    label;
+    constructor(isChecked, label) {
+        super();
+        this.isChecked = isChecked;
+        this.label = label;
+    }
+    eq(other) {
+        return (other.isChecked === this.isChecked &&
+            other.label === this.label);
+    }
+    toDOM(view) {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.checked = this.isChecked;
+        checkbox.className = "cm-md-task";
+        /**
+         * The item's own text, as the checkbox's name.
+         *
+         * A bare `<input type="checkbox">` inside a `contenteditable`
+         * has no wrapping `<label>` to inherit from and no `for`
+         * pointing at it, so without this it announces as an unlabelled
+         * checkbox — and a task list is exactly where "checkbox,
+         * checked" with no name is useless. The text is right there on
+         * the line; using it means the widget says what the sighted
+         * reader sees.
+         */
+        checkbox.setAttribute("aria-label", this.label === "" ? "Task" : this.label);
+        checkbox.addEventListener("mousedown", (event) => {
+            // The checkbox owns the click; without this CodeMirror also
+            // moves the caret into the widget's slot on the way past.
+            event.stopPropagation();
+        });
+        checkbox.addEventListener("change", () => {
+            const from = view.posAtDOM(checkbox);
+            view.dispatch({
+                changes: {
+                    from,
+                    insert: this.isChecked ? "[ ]" : "[x]",
+                    to: from + 3,
+                },
+            });
+        });
+        return checkbox;
+    }
+    ignoreEvent() {
+        return false;
+    }
+}
+const toDecorations = (view) => {
+    const isRawMode = view.state.field(livePreviewRawModeField, false);
+    const text = view.state.doc.toString();
+    /**
+     * An unfocused editor reveals nothing.
+     *
+     * Without this the caret's default resting place — offset 0 —
+     * counts as "inside" whatever construct starts the document, so a
+     * task whose description opens with a heading rendered its `#` on
+     * load and no other heading's. It looked like a concealment bug
+     * and was really a focus bug: there is no caret in the document
+     * until someone puts one there.
+     */
+    const selections = view.hasFocus
+        ? view.state.selection.ranges.map((range) => ({
+            from: range.from,
+            to: range.to,
+        }))
+        : [];
+    const decorations = [];
+    for (const visible of view.visibleRanges) {
+        for (const range of toLivePreviewRanges({
+            from: visible.from,
+            isRawMode: isRawMode ?? false,
+            selections,
+            text,
+            to: visible.to,
+            tree: syntaxTree(view.state),
+        })) {
+            switch (range.type) {
+                case "image": {
+                    decorations.push(Decoration.replace({
+                        widget: new ImageWidget(range.url, range.alt),
+                    }).range(range.from, range.to));
+                    break;
+                }
+                case "line": {
+                    decorations.push(Decoration.line({
+                        class: LINE_CLASSES[range.lineKind],
+                    }).range(range.from));
+                    break;
+                }
+                case "mark": {
+                    decorations.push(Decoration.mark({
+                        attributes: range.url
+                            ? { [URL_ATTRIBUTE]: range.url }
+                            : undefined,
+                        class: MARK_CLASSES[range.markKind],
+                    }).range(range.from, range.to));
+                    break;
+                }
+                case "marker": {
+                    decorations.push(range.isConcealed
+                        ? Decoration.replace({}).range(range.from, range.to)
+                        : Decoration.mark({
+                            class: "cm-md-marker",
+                        }).range(range.from, range.to));
+                    break;
+                }
+                case "task": {
+                    decorations.push(Decoration.replace({
+                        widget: new TaskWidget(range.isChecked, range.label),
+                    }).range(range.from, range.to));
+                    break;
+                }
+            }
+        }
+    }
+    // `true` sorts. The tree walk emits in tree order, which is not
+    // the same as decoration order once line decorations and inline
+    // replacements interleave, and an unsorted set throws.
+    return Decoration.set(decorations, true);
+};
+const livePreviewPlugin = ViewPlugin.fromClass(class {
+    decorations;
+    constructor(view) {
+        this.decorations = toDecorations(view);
+    }
+    update(update) {
+        // Selection is in the list because concealment depends on the
+        // caret: moving it with an arrow key changes what is painted
+        // even though the document did not change.
+        if (update.docChanged ||
+            update.selectionSet ||
+            update.viewportChanged ||
+            // Focus is a decoration input now — see `toDecorations`.
+            update.focusChanged ||
+            update.transactions.some((transaction) => transaction.effects.some((effect) => effect.is(setLivePreviewRawMode)))) {
+            this.decorations = toDecorations(update.view);
+        }
+    }
+}, {
+    decorations: (plugin) => plugin.decorations,
+});
+/**
+ * Open the link under the pointer.
+ *
+ * Plain click, not Ctrl+click, and that is Obsidian's behaviour
+ * rather than VS Code's — in a surface where the markup is hidden,
+ * a link that looks like a link should act like one. The cost is
+ * that clicking link *text* cannot place the caret there; arrow
+ * into it from the edge, or use the raw-markdown toggle. That is
+ * the same trade Obsidian makes and it is documented in the mdx.
+ *
+ * `noopener` is not optional: `target="_blank"` without it hands
+ * the opened page a live `window.opener` back into this one.
+ */
+const openLinkOnClick = EditorView.domEventHandlers({
+    mousedown: (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLElement)) {
+            return false;
+        }
+        const url = target
+            .closest(`[${URL_ATTRIBUTE}]`)
+            ?.getAttribute(URL_ATTRIBUTE);
+        if (!url) {
+            return false;
+        }
+        event.preventDefault();
+        window.open(url, "_blank", "noopener,noreferrer");
+        return true;
+    },
+});
+/**
+ * The paint.
+ *
+ * Headings scale here — which is the one thing the textarea
+ * version could never do, because a `<textarea>` and a layer behind
+ * it only stay registered while every glyph keeps its advance
+ * width. CodeMirror owns the caret, so size is free.
+ */
+const livePreviewTheme = EditorView.theme({
+    /**
+     * Prose is proportional, and only code is monospaced.
+     *
+     * The textarea sibling has no choice here — its painted layer only
+     * stays registered with the caret while every glyph keeps its
+     * advance width, which in practice means one monospaced family for
+     * the whole document. This surface has no such constraint, and a
+     * description full of prose set in a code font is the single
+     * biggest thing that makes an editor *feel* like a code editor
+     * rather than like a document.
+     *
+     * It has to be `.cm-scroller`, not `&`. CodeMirror's own base
+     * theme sets `font-family: monospace` there, and a rule on the
+     * wrapper loses to it — silently, and it looks like the token
+     * failed to resolve rather than like a specificity problem.
+     */
+    ".cm-scroller": {
+        fontFamily: "var(--font-sans)",
+    },
+    /**
+     * …except in raw mode, where monospace is the honest choice:
+     * "Markdown source" is a *source* view, and source is code.
+     */
+    "&.cm-md-raw .cm-scroller": {
+        fontFamily: "var(--font-mono)",
+    },
+    ".cm-md-blockquote": {
+        borderInlineStart: "3px solid var(--color-intent-accent-border)",
+        color: "var(--color-content-secondary)",
+        paddingInlineStart: "0.75em",
+    },
+    ".cm-md-code": {
+        color: "var(--color-intent-info-content)",
+        fontFamily: "var(--font-mono)",
+    },
+    ".cm-md-codeblock": {
+        backgroundColor: "var(--color-surface-sunken)",
+        fontFamily: "var(--font-mono)",
+    },
+    ".cm-md-emphasis": {
+        fontStyle: "italic",
+    },
+    ".cm-md-heading1": {
+        fontSize: "1.75em",
+        fontWeight: "700",
+        lineHeight: "1.25",
+    },
+    ".cm-md-heading2": {
+        fontSize: "1.5em",
+        fontWeight: "700",
+        lineHeight: "1.3",
+    },
+    ".cm-md-heading3": {
+        fontSize: "1.25em",
+        fontWeight: "600",
+        lineHeight: "1.35",
+    },
+    ".cm-md-heading4": {
+        fontSize: "1.1em",
+        fontWeight: "600",
+    },
+    ".cm-md-heading5": {
+        fontWeight: "600",
+    },
+    ".cm-md-heading6": {
+        color: "var(--color-content-secondary)",
+        fontWeight: "600",
+    },
+    ".cm-md-image": {
+        borderRadius: "var(--radius-md)",
+        display: "inline-block",
+        maxWidth: "100%",
+        verticalAlign: "top",
+    },
+    ".cm-md-link": {
+        color: "var(--color-intent-accent-content)",
+        cursor: "pointer",
+        textDecoration: "underline",
+    },
+    /**
+     * The dimmed marker.
+     *
+     * A token role, never `opacity`. Fading text over a themed
+     * background composites to a colour nobody audited, and axe
+     * measures the composited value — `content-secondary` at 60% came
+     * out at 3.77:1 in the sibling component and failed AA.
+     */
+    ".cm-md-marker": {
+        color: "var(--color-content-muted)",
+    },
+    ".cm-md-strikethrough": {
+        color: "var(--color-content-secondary)",
+        textDecoration: "line-through",
+    },
+    ".cm-md-strong": {
+        fontWeight: "700",
+    },
+    ".cm-md-table": {
+        fontFamily: "var(--font-mono)",
+    },
+    ".cm-md-task": {
+        accentColor: "var(--color-intent-accent-solid)",
+        marginInlineEnd: "0.35em",
+        verticalAlign: "middle",
+    },
+    ".cm-md-url": {
+        color: "var(--color-content-muted)",
+    },
+});
+/**
+ * Everything the live-preview surface needs, as one extension.
+ *
+ * Order matters only in that the theme must be present for the
+ * decoration classes to mean anything; CodeMirror resolves the rest.
+ */
+/**
+ * Raw mode, as a class on the editor, so the theme above can react
+ * to it in CSS instead of every rule becoming a decoration.
+ */
+const rawModeClass = EditorView.editorAttributes.of((view) => view.state.field(livePreviewRawModeField, false)
+    ? { class: "cm-md-raw" }
+    : null);
+export const livePreview = () => [
+    livePreviewRawModeField,
+    livePreviewPlugin,
+    livePreviewTheme,
+    openLinkOnClick,
+    rawModeClass,
+];
+//# sourceMappingURL=livePreview.js.map

package/dist/markdownEditorCodeMirror/livePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"livePreview.js","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/livePreview.ts"],"names":[],"mappings":"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"}

package/dist/markdownEditorCodeMirror/livePreviewRanges.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Markdown → the ranges a live-preview surface decorates, as pure
+ * tree-in / descriptors-out.
+ *
+ * This is the half of the CodeMirror editor that decides what a
+ * document *looks* like, and it is deliberately the half with no
+ * `@codemirror/view` import in it. Descriptors are plain
+ * `{ from, to, type }` objects; turning them into `Decoration`s is
+ * `livePreview.ts`'s job. The split buys two things:
+ *
+ *  - **These tests run in Node.** `packages/ui`'s Vitest project is
+ *    `.ts`-only and has no DOM, on purpose. A test here parses real
+ *    markdown with the real GFM parser and asserts real offsets —
+ *    no jsdom, no mount, no story.
+ *  - **The runtime stays incremental.** Tests hand in
+ *    `markdownLanguage.parser.parse(text)`; the view hands in
+ *    `syntaxTree(state)`, which CodeMirror has already reparsed
+ *    incrementally. Same function, same offsets, and the expensive
+ *    path is never the one under test.
+ *
+ * ### What separates this from `markdownSpans.ts`
+ *
+ * The sibling `MarkdownEditor` paints *behind* a `<textarea>`, so
+ * every span it emits has to be metric-neutral — same glyph
+ * advances, or the caret shears away from the letters. That is the
+ * constraint this module does **not** have. CodeMirror owns the
+ * caret and reflows around decorations, so a heading can genuinely
+ * be larger, `**` can genuinely be hidden, and an image can
+ * genuinely replace its own markup.
+ *
+ * That is the entire reason this subpath exists, and it is also why
+ * it is a subpath: the capability costs ~176 KB gz of optional peer
+ * and only a consumer that opts in should pay it.
+ *
+ * ### The one invariant
+ *
+ * **Concealment never touches the document.** Every descriptor here
+ * describes a *view* over an unmodified markdown string. Hiding
+ * `**` does not delete it; replacing `![alt](url)` with an image
+ * does not rewrite it. The stored value stays byte-for-byte what
+ * the user typed, which is the same no-HTML-in-the-data guarantee
+ * the textarea version gets structurally — kept here by never
+ * having a serialiser at all.
+ */
+import type { Tree } from "@lezer/common";
+/**
+ * A block-level treatment applied to a whole line.
+ *
+ * Headings carry their level because size is the point: this is the
+ * "block-level type scaling" the textarea version had to give up.
+ */
+export type LivePreviewLineKind = "blockquote" | "code" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "table";
+/** An inline treatment applied to a character range. */
+export type LivePreviewMarkKind = "autolink" | "code" | "emphasis" | "linkText" | "strikethrough" | "strong" | "url";
+export type LivePreviewRange = {
+    from: number;
+    to: number;
+} & ({
+    /** A rendered image, standing in for its own `![alt](url)`. */
+    alt: string;
+    type: "image";
+    url: string;
+} | {
+    /** A rendered task checkbox, standing in for `[ ]` / `[x]`. */
+    isChecked: boolean;
+    /**
+     * The item's own text, which becomes the checkbox's
+     * accessible name — a checkbox inside a `contenteditable` has
+     * no `<label>` to inherit one from.
+     */
+    label: string;
+    type: "task";
+} | {
+    /**
+     * Syntax the reader does not need: `**`, `#`, `[`, `](…)`.
+     *
+     * `isConcealed` is the caret's answer, not the parser's. When
+     * the selection is inside the construct — or the whole
+     * surface is in raw mode — the marker stays in the flow and
+     * is merely dimmed, which is what makes the syntax editable
+     * at all.
+     */
+    isConcealed: boolean;
+    type: "marker";
+} | {
+    lineKind: LivePreviewLineKind;
+    type: "line";
+} | {
+    markKind: LivePreviewMarkKind;
+    type: "mark";
+    /** Present on `linkText` and `autolink`; the click target. */
+    url?: string;
+});
+/** A selection range, in the two fields this module needs. */
+export type LivePreviewSelection = {
+    from: number;
+    to: number;
+};
+export type ToLivePreviewRangesOptions = {
+    /**
+     * Limit the walk to a slice of the document — the view passes its
+     * visible ranges, so a long description costs what is on screen
+     * rather than what is stored. Omit both and the whole tree is
+     * walked, which is what the tests do.
+     */
+    from?: number;
+    /**
+     * Raw mode — the "edit Markdown" toggle.
+     *
+     * Nothing is concealed, nothing is replaced by a widget, and no
+     * line is rescaled. Syntax colouring stays, because the point of
+     * the toggle is to see the markup, not to lose the highlighting.
+     */
+    isRawMode?: boolean;
+    selections: readonly LivePreviewSelection[];
+    text: string;
+    to?: number;
+    tree: Tree;
+};
+/**
+ * Every decoration the document wants, in tree order.
+ *
+ * Order is not sorted here on purpose — `Decoration.set(ranges,
+ * true)` sorts, and doing it twice is the sort of thing that looks
+ * free until a document is long.
+ */
+export declare const toLivePreviewRanges: ({ from, isRawMode, selections, text, to, tree, }: ToLivePreviewRangesOptions) => LivePreviewRange[];
+//# sourceMappingURL=livePreviewRanges.d.ts.map

package/dist/markdownEditorCodeMirror/livePreviewRanges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"livePreviewRanges.d.ts","sourceRoot":"","sources":["../../src/markdownEditorCodeMirror/livePreviewRanges.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,OAAO,KAAK,EAAc,IAAI,EAAE,MAAM,eAAe,CAAA;AAErD;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAC3B,YAAY,GACZ,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,OAAO,CAAA;AAEX,wDAAwD;AACxD,MAAM,MAAM,mBAAmB,GAC3B,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,eAAe,GACf,QAAQ,GACR,KAAK,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX,GAAG,CACA;IACE,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ,GACD;IACE,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,GACD;IACE;;;;;;;;OAQG;IACH,WAAW,EAAE,OAAO,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAA;CACf,GACD;IACE,QAAQ,EAAE,mBAAmB,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;CACb,GACD;IACE,QAAQ,EAAE,mBAAmB,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CACJ,CAAA;AAED,8DAA8D;AAC9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,SAAS,oBAAoB,EAAE,CAAA;IAC3C,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,IAAI,CAAA;CACX,CAAA;AAgID;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,kDAOjC,0BAA0B,KAAG,gBAAgB,EAoS/C,CAAA"}