vestrycms 0.0.0-stage → 0.2.0

package/dist/ui/components/editor/NodeViews.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
+import { ChevronDown, ChevronRight, Code2, Settings2, Trash2, } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isRawExpression } from "../../../mdx/types.js";
+import { cx, fieldLabel, summarize } from "../../lib/utils.js";
+import { Icon } from "../Icon.js";
+import { Button, Modal } from "../ui.js";
+import { CodeInput } from "../fields/CodeInput.js";
+import { FieldRenderer } from "../fields/FieldRenderer.js";
+import { useEditorEnv } from "./EditorContext.js";
+import { assetToRepoPath } from "../../../core/values.js";
+/** Repo path of an image prop value (values are already repo paths in the editor; tolerate stored forms too). */
+function assetPath(field, value) {
+    return assetToRepoPath(field, value, "");
+}
+/**
+ * Keeps a value in local state while also pushing it to the document.
+ *
+ * Node-view edits reach the document through a ProseMirror transaction, and
+ * the re-render with the new attrs arrives a tick later. A plain controlled
+ * input therefore sees its old value restored and then replaced, which
+ * throws the caret to the end on every keystroke. Local state re-renders
+ * synchronously; external changes (undo, a reload) still flow in because
+ * the document value is re-adopted whenever it differs from what we sent.
+ */
+function useDocumentValue(value, commit) {
+    const [local, setLocal] = useState(value);
+    const sent = useRef(value);
+    useEffect(() => {
+        if (value !== sent.current && !deepEqual(value, sent.current)) {
+            sent.current = value;
+            setLocal(value);
+        }
+    }, [value]);
+    const update = useCallback((next) => {
+        sent.current = next;
+        setLocal(next);
+        commit(next);
+    }, [commit]);
+    return [local, update];
+}
+function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch {
+        return false;
+    }
+}
+function PropsForm({ schema, props: docProps, onChange, }) {
+    const [props, setProps] = useDocumentValue(docProps, onChange);
+    const keys = new Set([...Object.keys(schema), ...Object.keys(props)]);
+    return (_jsx("div", { className: "v-fields", children: [...keys].map((key) => {
+            const field = schema[key];
+            const value = props[key];
+            const raw = isRawExpression(value);
+            if (!field || raw) {
+                // Unknown prop or non-literal expression: edit as code.
+                return (_jsxs("div", { className: "v-field", children: [_jsxs("label", { className: "v-field__label", children: [field ? fieldLabel(key, field) : key, _jsx("span", { className: "v-field__key", children: raw ? "expression" : "unknown prop" })] }), _jsx(CodeInput, { value: raw ? value.$raw : JSON.stringify(value, null, 2), language: "javascript", rows: 3, onChange: (v) => setProps({ ...props, [key]: { $raw: v } }) })] }, key));
+            }
+            if (field.hidden)
+                return null;
+            return (_jsx("div", { className: cx("v-field", field.width === "half" && "v-field--half", field.width === "third" && "v-field--third"), children: _jsx(FieldRenderer, { fieldKey: key, path: key, field: field, value: value, onChange: (v) => setProps({ ...props, [key]: v }) }) }, key));
+        }) }));
+}
+function summaryOf(props) {
+    const parts = [];
+    for (const [k, v] of Object.entries(props)) {
+        if (v === undefined || v === null || v === "")
+            continue;
+        if (isRawExpression(v))
+            parts.push(`${k}={…}`);
+        else if (typeof v === "string")
+            parts.push(`${k}="${v.length > 40 ? `${v.slice(0, 40)}…` : v}"`);
+        else if (Array.isArray(v))
+            parts.push(`${k}: ${v.length} item${v.length === 1 ? "" : "s"}`);
+        else if (typeof v === "object")
+            parts.push(`${k}: ${summarize(v) || "{…}"}`);
+        else
+            parts.push(`${k}=${String(v)}`);
+    }
+    return parts.join(" · ");
+}
+export function ComponentNodeView({ node, updateAttributes, deleteNode, selected, }) {
+    const env = useEditorEnv();
+    const commitProps = useCallback((p) => updateAttributes({ props: p }), [updateAttributes]);
+    const name = String(node.attrs.name);
+    const config = env.components[name];
+    const props = (node.attrs.props ?? {});
+    const schema = config?.props ?? {};
+    const [open, setOpen] = useState(() => Object.keys(schema).length > 0 &&
+        Object.values(schema).every((f) => f.type !== "array" && f.type !== "object"));
+    const thumbnail = Object.entries(schema).find(([k, f]) => f.type === "image" && typeof props[k] === "string" && props[k]);
+    const acceptsChildren = config
+        ? Boolean(config.children)
+        : node.childCount > 0 || Boolean(node.attrs.hasChildren);
+    const hasProps = Object.keys(schema).length > 0 || Object.keys(props).length > 0;
+    return (_jsxs(NodeViewWrapper, { className: cx("v-block", selected && "is-selected", !open && !acceptsChildren && "is-collapsed"), children: [_jsxs("div", { className: "v-block__header", contentEditable: false, "data-drag-handle": "", children: [_jsx("span", { className: "v-block__icon", children: _jsx(Icon, { name: config?.icon ?? "box" }) }), _jsx("span", { className: "v-block__name", children: config?.label ?? name }), thumbnail && (_jsx("img", { className: "v-thumb", style: { width: 36, height: 26 }, src: env.resolveImage?.(env.toDocPath(assetPath(schema[thumbnail[0]], String(props[thumbnail[0]])))) ?? "", alt: "" })), _jsx("span", { className: "v-block__summary", children: !open ? summaryOf(props) : config?.description }), _jsxs("div", { className: "v-block__actions", children: [hasProps && (_jsx(Button, { variant: "ghost", size: "xs", icon: true, title: open ? "Hide settings" : "Edit settings", onClick: () => setOpen((o) => !o), children: open ? _jsx(ChevronDown, {}) : _jsx(Settings2, {}) })), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Remove block", onClick: deleteNode, children: _jsx(Trash2, {}) })] })] }), open && hasProps && (_jsx("div", { className: "v-block__props", contentEditable: false, children: _jsx(PropsForm, { schema: schema, props: props, onChange: commitProps }) })), acceptsChildren && (_jsx("div", { className: "v-block__children", children: _jsx(NodeViewContent, { className: "v-prose v-prose-nested" }) })), !config && !acceptsChildren && !hasProps && (_jsx("div", { className: "v-block__empty", children: "Unknown component with no props." }))] }));
+}
+export function InlineComponentNodeView({ node, updateAttributes, deleteNode, }) {
+    const env = useEditorEnv();
+    const commitProps = useCallback((p) => updateAttributes({ props: p }), [updateAttributes]);
+    const name = String(node.attrs.name);
+    const config = env.components[name];
+    const [editing, setEditing] = useState(false);
+    const props = (node.attrs.props ?? {});
+    return (_jsxs(NodeViewWrapper, { as: "span", className: "v-inline-component", "data-name": name, onDoubleClick: () => setEditing(true), children: [_jsx(NodeViewContent, { as: "span" }), editing && (_jsx(Modal, { title: `${config?.label ?? name} settings`, onClose: () => setEditing(false), footer: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "danger", onClick: deleteNode, children: [_jsx(Trash2, {}), " Remove"] }), _jsx(Button, { variant: "primary", onClick: () => setEditing(false), children: "Done" })] }), children: _jsx(PropsForm, { schema: config?.props ?? {}, props: props, onChange: commitProps }) }))] }));
+}
+const RAW_LABELS = {
+    expression: {
+        label: "Expression",
+        hint: "JavaScript expression rendered by MDX",
+    },
+    esm: { label: "Module code", hint: "Imports and exports kept verbatim" },
+    html: { label: "Raw HTML", hint: "Passed through as-is" },
+};
+export function RawBlockNodeView({ node, updateAttributes, deleteNode, selected, }) {
+    const kind = String(node.attrs.kind ?? "expression");
+    const [open, setOpen] = useState(false);
+    const meta = RAW_LABELS[kind] ?? RAW_LABELS.expression;
+    const commitValue = useCallback((v) => updateAttributes({ value: v }), [updateAttributes]);
+    const [value, setValue] = useDocumentValue(String(node.attrs.value ?? ""), commitValue);
+    return (_jsxs(NodeViewWrapper, { className: cx("v-block v-block--raw", selected && "is-selected"), children: [_jsxs("div", { className: "v-block__header", contentEditable: false, "data-drag-handle": "", children: [_jsx("span", { className: "v-block__icon", children: _jsx(Code2, {}) }), _jsx("span", { className: "v-block__name", children: meta.label }), _jsx("span", { className: "v-block__summary", children: meta.hint }), _jsxs("div", { className: "v-block__actions", children: [_jsx(Button, { variant: "ghost", size: "xs", icon: true, title: open ? "Collapse" : "Edit", onClick: () => setOpen((o) => !o), children: open ? _jsx(ChevronDown, {}) : _jsx(ChevronRight, {}) }), _jsx(Button, { variant: "ghost", size: "xs", icon: true, title: "Remove", onClick: deleteNode, children: _jsx(Trash2, {}) })] })] }), _jsx("div", { contentEditable: false, children: open ? (_jsx("div", { className: "v-block__code", children: _jsx("textarea", { value: value, onChange: (e) => setValue(e.target.value), spellCheck: false }) })) : (_jsx("pre", { className: "v-block__code", children: kind === "expression" ? `{${value}}` : value })) })] }));
+}

package/dist/ui/components/editor/RichTextEditor.d.ts

@@ -0,0 +1,24 @@
+import { type EditorEnv } from "./EditorContext.js";
+export interface RichTextEditorProps {
+    value: string;
+    onChange: (mdx: string) => void;
+    /** Component names allowed in this document. */
+    components?: string[];
+    env: EditorEnv;
+    format?: "md" | "mdx";
+    placeholder?: string;
+    compact?: boolean;
+    /** Render without its own border, to sit flush inside a card. */
+    flush?: boolean;
+    onUpload?: (upload: {
+        path: string;
+        base64: string;
+        previewUrl: string;
+    }) => void;
+}
+/**
+ * Tiptap editor that reads and writes MDX. The document is parsed once on
+ * load; edits are serialized back (debounced) and reported through `onChange`.
+ * A source mode exposes the raw MDX in CodeMirror; switching back re-parses.
+ */
+export declare function RichTextEditor(props: RichTextEditorProps): import("react").JSX.Element;

package/dist/ui/components/editor/RichTextEditor.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EditorContent, useEditor, useEditorState, } from "@tiptap/react";
+import { Bold, Code, Code2, Eye, Heading1, Heading2, Heading3, Image as ImageIcon, Italic, Link as LinkIcon, List, ListOrdered, Minus, Plus, Quote, Redo2, Strikethrough, Subscript as SubIcon, Superscript as SupIcon, Table as TableIcon, Undo2, Unlink, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { parseMdx, serializeMdx } from "../../../mdx/index.js";
+import { cx, defaultValues } from "../../lib/utils.js";
+import { AssetPicker } from "../AssetPicker.js";
+import { Icon } from "../Icon.js";
+import { CodeInput } from "../fields/CodeInput.js";
+import { Button, Menu, Modal } from "../ui.js";
+import { EditorEnvContext, useEditorEnv, } from "./EditorContext.js";
+import { editorExtensions } from "./schema.js";
+/**
+ * Tiptap editor that reads and writes MDX. The document is parsed once on
+ * load; edits are serialized back (debounced) and reported through `onChange`.
+ * A source mode exposes the raw MDX in CodeMirror; switching back re-parses.
+ */
+export function RichTextEditor(props) {
+    return (_jsx(EditorEnvContext.Provider, { value: props.env, children: _jsx(EditorInner, { ...props }) }));
+}
+function EditorInner({ value, onChange, components, env, format = "mdx", placeholder, compact, flush, onUpload, }) {
+    const [mode, setMode] = useState("visual");
+    const [parseError, setParseError] = useState(null);
+    const importsRef = useRef({});
+    const lastEmitted = useRef(value);
+    const registry = useMemo(() => {
+        const out = {};
+        for (const [name, c] of Object.entries(env.components)) {
+            out[name] = {
+                import: c.import,
+                namedImport: c.namedImport,
+                inline: c.inline,
+                children: c.children,
+            };
+        }
+        return out;
+    }, [env.components]);
+    const parse = useCallback((mdx) => {
+        try {
+            const parsed = parseMdx(mdx, { format });
+            importsRef.current = parsed.imports;
+            setParseError(null);
+            return parsed.doc;
+        }
+        catch (e) {
+            setParseError(e.message);
+            return null;
+        }
+    }, [format]);
+    const serialize = useCallback((doc) => serializeMdx(doc, {
+        format,
+        components: registry,
+        existingImports: importsRef.current,
+    }), [format, registry]);
+    const initialDoc = useMemo(() => parse(value), []); // eslint-disable-line react-hooks/exhaustive-deps
+    const extensions = useMemo(() => editorExtensions({
+        resolveSrc: (src) => env.resolveImage?.(src) ?? src,
+        placeholder,
+    }), [env, placeholder]);
+    const timer = useRef(null);
+    const editor = useEditor({
+        extensions,
+        content: initialDoc ?? { type: "doc", content: [{ type: "paragraph" }] },
+        editorProps: { attributes: { class: "v-prose", spellcheck: "true" } },
+        onUpdate: ({ editor }) => {
+            if (timer.current)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => {
+                const mdx = serialize(editor.getJSON());
+                lastEmitted.current = mdx;
+                onChange(mdx);
+            }, 250);
+        },
+    });
+    // External value changes (e.g. after a reload) → re-parse.
+    useEffect(() => {
+        if (!editor || mode !== "visual")
+            return;
+        if (value === lastEmitted.current)
+            return;
+        const doc = parse(value);
+        if (doc) {
+            lastEmitted.current = value;
+            editor.commands.setContent(doc, { emitUpdate: false });
+        }
+    }, [value, editor, mode, parse]);
+    useEffect(() => () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+    }, []);
+    const switchMode = (next) => {
+        if (next === mode || !editor)
+            return;
+        if (next === "source") {
+            if (timer.current) {
+                clearTimeout(timer.current);
+                timer.current = null;
+                const mdx = serialize(editor.getJSON());
+                lastEmitted.current = mdx;
+                onChange(mdx);
+            }
+            setMode("source");
+        }
+        else {
+            const doc = parse(value);
+            if (!doc)
+                return;
+            lastEmitted.current = value;
+            editor.commands.setContent(doc, { emitUpdate: false });
+            setMode("visual");
+        }
+    };
+    return (_jsxs("div", { className: cx("v-rte", compact && "v-rte--compact", flush && "v-rte--flush"), children: [editor && (_jsx(Toolbar, { editor: editor, mode: mode, onMode: switchMode, components: components ?? Object.keys(env.components), onUpload: onUpload, format: format })), mode === "visual" ? (_jsx(EditorContent, { editor: editor })) : (_jsxs("div", { className: "v-source-editor", children: [parseError && (_jsxs("div", { className: "v-alert v-alert--error", style: { margin: 10 }, children: ["Could not parse MDX: ", parseError] })), _jsx(CodeInput, { value: value, language: "markdown", minHeight: "320px", onChange: (v) => {
+                            lastEmitted.current = v;
+                            onChange(v);
+                        } })] }))] }));
+}
+function Toolbar({ editor, mode, onMode, components, onUpload, format, }) {
+    const env = useEditorEnv();
+    const [linkOpen, setLinkOpen] = useState(false);
+    const [imageOpen, setImageOpen] = useState(false);
+    const state = useEditorState({
+        editor,
+        selector: ({ editor }) => ({
+            bold: editor.isActive("bold"),
+            italic: editor.isActive("italic"),
+            strike: editor.isActive("strike"),
+            code: editor.isActive("code"),
+            sup: editor.isActive("superscript"),
+            sub: editor.isActive("subscript"),
+            link: editor.isActive("link"),
+            h1: editor.isActive("heading", { level: 1 }),
+            h2: editor.isActive("heading", { level: 2 }),
+            h3: editor.isActive("heading", { level: 3 }),
+            bullet: editor.isActive("bulletList"),
+            ordered: editor.isActive("orderedList"),
+            quote: editor.isActive("blockquote"),
+            codeBlock: editor.isActive("codeBlock"),
+            table: editor.isActive("table"),
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo(),
+        }),
+    });
+    const disabled = mode === "source";
+    const tool = (label, active, icon, run, isDisabled = false) => (_jsx("button", { type: "button", className: cx("v-rte__tool", active && "is-active"), title: label, "aria-label": label, disabled: disabled || isDisabled, onMouseDown: (e) => e.preventDefault(), onClick: run, children: icon }));
+    const insertComponent = (name) => {
+        const cfg = env.components[name];
+        const props = defaultValues(cfg?.props ?? {});
+        if (cfg?.inline) {
+            editor
+                .chain()
+                .focus()
+                .insertContent({
+                type: "mdxInlineComponent",
+                attrs: { name, props, hasChildren: Boolean(cfg.children) },
+                content: cfg.children ? [{ type: "text", text: "text" }] : [],
+            })
+                .run();
+            return;
+        }
+        const node = {
+            type: "mdxComponent",
+            attrs: { name, props, hasChildren: Boolean(cfg?.children) },
+            content: cfg?.children ? [{ type: "paragraph" }] : [],
+        };
+        editor.chain().focus().insertContent(node).run();
+    };
+    return (_jsxs("div", { className: "v-rte__toolbar", children: [tool("Undo", false, _jsx(Undo2, {}), () => editor.chain().focus().undo().run(), !state.canUndo), tool("Redo", false, _jsx(Redo2, {}), () => editor.chain().focus().redo().run(), !state.canRedo), _jsx("span", { className: "v-rte__sep" }), tool("Heading 1", state.h1, _jsx(Heading1, {}), () => editor.chain().focus().toggleHeading({ level: 1 }).run()), tool("Heading 2", state.h2, _jsx(Heading2, {}), () => editor.chain().focus().toggleHeading({ level: 2 }).run()), tool("Heading 3", state.h3, _jsx(Heading3, {}), () => editor.chain().focus().toggleHeading({ level: 3 }).run()), _jsx("span", { className: "v-rte__sep" }), tool("Bold", state.bold, _jsx(Bold, {}), () => editor.chain().focus().toggleBold().run()), tool("Italic", state.italic, _jsx(Italic, {}), () => editor.chain().focus().toggleItalic().run()), tool("Strikethrough", state.strike, _jsx(Strikethrough, {}), () => editor.chain().focus().toggleStrike().run()), tool("Inline code", state.code, _jsx(Code, {}), () => editor.chain().focus().toggleCode().run()), format === "mdx" &&
+                tool("Superscript", state.sup, _jsx(SupIcon, {}), () => editor.chain().focus().toggleSuperscript().run()), format === "mdx" &&
+                tool("Subscript", state.sub, _jsx(SubIcon, {}), () => editor.chain().focus().toggleSubscript().run()), state.link
+                ? tool("Remove link", true, _jsx(Unlink, {}), () => editor.chain().focus().unsetLink().run())
+                : tool("Link", false, _jsx(LinkIcon, {}), () => setLinkOpen(true)), _jsx("span", { className: "v-rte__sep" }), tool("Bullet list", state.bullet, _jsx(List, {}), () => editor.chain().focus().toggleBulletList().run()), tool("Numbered list", state.ordered, _jsx(ListOrdered, {}), () => editor.chain().focus().toggleOrderedList().run()), tool("Quote", state.quote, _jsx(Quote, {}), () => editor.chain().focus().toggleBlockquote().run()), tool("Code block", state.codeBlock, _jsx(Code2, {}), () => editor.chain().focus().toggleCodeBlock().run()), tool("Divider", false, _jsx(Minus, {}), () => editor.chain().focus().setHorizontalRule().run()), tool("Image", false, _jsx(ImageIcon, {}), () => setImageOpen(true), !env.imageDirectory), _jsx(Menu, { trigger: ({ toggle }) => (_jsx("button", { type: "button", className: cx("v-rte__tool", state.table && "is-active"), title: "Table", disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: toggle, children: _jsx(TableIcon, {}) })), children: (close) => (_jsxs(_Fragment, { children: [_jsx("button", { className: "v-menu__item", onClick: () => {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+                                    .run();
+                                close();
+                            }, children: "Insert table" }), state.table && (_jsxs(_Fragment, { children: [_jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().addRowAfter().run();
+                                        close();
+                                    }, children: "Add row below" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().addColumnAfter().run();
+                                        close();
+                                    }, children: "Add column after" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().deleteRow().run();
+                                        close();
+                                    }, children: "Delete row" }), _jsx("button", { className: "v-menu__item", onClick: () => {
+                                        editor.chain().focus().deleteColumn().run();
+                                        close();
+                                    }, children: "Delete column" }), _jsx("button", { className: "v-menu__item is-danger", onClick: () => {
+                                        editor.chain().focus().deleteTable().run();
+                                        close();
+                                    }, children: "Delete table" })] }))] })) }), format === "mdx" && components.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "v-rte__sep" }), _jsx(Menu, { trigger: ({ toggle }) => (_jsxs("button", { type: "button", className: "v-rte__insert", disabled: disabled, onMouseDown: (e) => e.preventDefault(), onClick: toggle, children: [_jsx(Plus, {}), " Insert"] })), children: (close) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "v-menu__heading", children: "Components" }), components.map((name) => {
+                                    const c = env.components[name];
+                                    return (_jsxs("button", { className: "v-menu__item", onClick: () => {
+                                            insertComponent(name);
+                                            close();
+                                        }, children: [_jsx(Icon, { name: c?.icon ?? "box" }), _jsxs("span", { children: [c?.label ?? name, c?.description && _jsx("small", { children: c.description })] })] }, name));
+                                })] })) })] })), _jsx("span", { className: "v-rte__spacer" }), _jsxs("div", { className: "v-segment", style: { height: 30 }, children: [_jsxs("button", { type: "button", className: cx(mode === "visual" && "is-active"), style: { height: 28 }, onClick: () => onMode("visual"), title: "Visual editor", children: [_jsx(Eye, { size: 14, style: { marginRight: 4, verticalAlign: -2 } }), " Visual"] }), _jsxs("button", { type: "button", className: cx(mode === "source" && "is-active"), style: { height: 28 }, onClick: () => onMode("source"), title: "Edit MDX source", children: [_jsx(Code2, { size: 14, style: { marginRight: 4, verticalAlign: -2 } }), " ", "Source"] })] }), linkOpen && (_jsx(LinkDialog, { editor: editor, onClose: () => setLinkOpen(false) })), imageOpen && env.imageDirectory && (_jsx(AssetPicker, { directory: env.imageDirectory, accept: ["jpg", "jpeg", "png", "gif", "webp", "avif", "svg"], title: "Insert image", deferUploads: Boolean(onUpload), onClose: () => setImageOpen(false), onPick: (path, upload) => {
+                    if (upload)
+                        onUpload?.(upload);
+                    editor
+                        .chain()
+                        .focus()
+                        .setImage({ src: env.toDocPath(path), alt: "" })
+                        .run();
+                    setImageOpen(false);
+                } }))] }));
+}
+function LinkDialog({ editor, onClose, }) {
+    const [href, setHref] = useState(() => editor.getAttributes("link").href ?? "");
+    const apply = () => {
+        const url = href.trim();
+        if (!url)
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        else
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url })
+                .run();
+        onClose();
+    };
+    return (_jsxs(Modal, { title: "Link", onClose: onClose, footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: apply, children: "Apply" })] }), children: [_jsx("label", { className: "v-field__label", htmlFor: "v-link-url", children: "URL" }), _jsx("input", { id: "v-link-url", className: "v-input", autoFocus: true, value: href, placeholder: "https://example.com or /visit", onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        apply();
+                } })] }));
+}

package/dist/ui/components/editor/extensions.d.ts

@@ -0,0 +1,30 @@
+import { Extension, Node } from "@tiptap/core";
+/** A block-level MDX component, e.g. `<Highlights items={[...]} />`. */
+export declare const MdxComponent: Node<any, any>;
+/** An inline MDX component, e.g. `<Abbr title="...">WELS</Abbr>`. */
+export declare const MdxInlineComponent: Node<any, any>;
+/** `{expression}` at block level. */
+export declare const MdxExpression: Node<any, any>;
+/** `export const x = ...` and other ESM that isn't a known import. */
+export declare const MdxEsm: Node<any, any>;
+/** Raw HTML blocks (plain Markdown files). */
+export declare const RawHtml: Node<any, any>;
+export declare const MdxInlineExpression: Node<any, any>;
+export declare const RawInlineHtml: Node<any, any>;
+/**
+ * Markdown images are inline. `resolveSrc` maps the stored path (relative to
+ * the entry file, or a public URL) to something the browser can load.
+ */
+export declare const MdxImage: Node<{
+    resolveSrc: (src: string) => string;
+} & Record<string, unknown>, any>;
+/**
+ * List attributes from Markdown that StarterKit's lists lack: whether a list
+ * is loose (blank lines between items; tightening it changes the rendered
+ * HTML) and a task item's checkbox (`- [ ]` / `- [x]`).
+ */
+export declare const ListAttributes: Extension<any, any>;
+/** A GFM footnote definition, `[^label]: ...`. */
+export declare const FootnoteDefinition: Node<any, any>;
+/** A GFM footnote reference, `[^label]`. */
+export declare const FootnoteReference: Node<any, any>;

package/dist/ui/components/editor/extensions.js

@@ -0,0 +1,248 @@
+import { Extension, Node, mergeAttributes } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ComponentNodeView, InlineComponentNodeView, RawBlockNodeView, } from "./NodeViews.js";
+/** A block-level MDX component, e.g. `<Highlights items={[...]} />`. */
+export const MdxComponent = Node.create({
+    name: "mdxComponent",
+    group: "block",
+    content: "block*",
+    defining: true,
+    isolating: true,
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            name: { default: "" },
+            props: { default: {} },
+            spreads: { default: [] },
+            hasChildren: { default: false },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "div[data-mdx-component]" }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, {
+                "data-mdx-component": node.attrs.name,
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(ComponentNodeView, {
+            contentDOMElementTag: "div",
+        });
+    },
+});
+/** An inline MDX component, e.g. `<Abbr title="...">WELS</Abbr>`. */
+export const MdxInlineComponent = Node.create({
+    name: "mdxInlineComponent",
+    group: "inline",
+    inline: true,
+    content: "inline*",
+    selectable: true,
+    addAttributes() {
+        return {
+            name: { default: "" },
+            props: { default: {} },
+            spreads: { default: [] },
+            hasChildren: { default: false },
+        };
+    },
+    parseHTML() {
+        return [{ tag: "span[data-mdx-inline-component]" }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                "data-mdx-inline-component": node.attrs.name,
+                class: "v-inline-component",
+                "data-name": node.attrs.name,
+            }),
+            0,
+        ];
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(InlineComponentNodeView, {
+            contentDOMElementTag: "span",
+        });
+    },
+});
+function rawBlock(name, kind) {
+    return Node.create({
+        name,
+        group: "block",
+        atom: true,
+        draggable: true,
+        selectable: true,
+        addAttributes() {
+            return { value: { default: "" }, kind: { default: kind } };
+        },
+        parseHTML() {
+            return [{ tag: `div[data-${name}]` }];
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            return [
+                "div",
+                mergeAttributes(HTMLAttributes, { [`data-${name}`]: "" }),
+                node.attrs.value,
+            ];
+        },
+        addNodeView() {
+            return ReactNodeViewRenderer(RawBlockNodeView);
+        },
+    });
+}
+/** `{expression}` at block level. */
+export const MdxExpression = rawBlock("mdxExpression", "expression");
+/** `export const x = ...` and other ESM that isn't a known import. */
+export const MdxEsm = rawBlock("mdxEsm", "esm");
+/** Raw HTML blocks (plain Markdown files). */
+export const RawHtml = rawBlock("rawHtml", "html");
+function rawInline(name) {
+    return Node.create({
+        name,
+        group: "inline",
+        inline: true,
+        atom: true,
+        selectable: true,
+        addAttributes() {
+            return { value: { default: "" } };
+        },
+        parseHTML() {
+            return [{ tag: `span[data-${name}]` }];
+        },
+        renderHTML({ HTMLAttributes, node }) {
+            return [
+                "span",
+                mergeAttributes(HTMLAttributes, {
+                    [`data-${name}`]: "",
+                    class: "v-inline-expression",
+                    title: "Click to edit",
+                }),
+                name === "mdxInlineExpression"
+                    ? `{${node.attrs.value}}`
+                    : node.attrs.value,
+            ];
+        },
+    });
+}
+export const MdxInlineExpression = rawInline("mdxInlineExpression");
+export const RawInlineHtml = rawInline("rawInlineHtml");
+/**
+ * Markdown images are inline. `resolveSrc` maps the stored path (relative to
+ * the entry file, or a public URL) to something the browser can load.
+ */
+export const MdxImage = Image.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            inline: true,
+            allowBase64: false,
+            resolveSrc: (src) => src,
+        };
+    },
+    renderHTML({ HTMLAttributes }) {
+        const src = String(HTMLAttributes.src ?? "");
+        return [
+            "img",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { src: this.options.resolveSrc(src), "data-src": src }),
+        ];
+    },
+});
+/**
+ * List attributes from Markdown that StarterKit's lists lack: whether a list
+ * is loose (blank lines between items; tightening it changes the rendered
+ * HTML) and a task item's checkbox (`- [ ]` / `- [x]`).
+ */
+export const ListAttributes = Extension.create({
+    name: "listAttributes",
+    addGlobalAttributes() {
+        return [
+            {
+                types: ["bulletList", "orderedList"],
+                attributes: {
+                    spread: {
+                        default: false,
+                        parseHTML: (el) => el.hasAttribute("data-spread"),
+                        renderHTML: (attrs) => (attrs.spread ? { "data-spread": "" } : {}),
+                    },
+                },
+            },
+            {
+                types: ["listItem"],
+                attributes: {
+                    checked: {
+                        default: null,
+                        parseHTML: (el) => {
+                            const v = el.getAttribute("data-checked");
+                            return v === null ? null : v === "true";
+                        },
+                        renderHTML: (attrs) => typeof attrs.checked === "boolean"
+                            ? { "data-checked": String(attrs.checked) }
+                            : {},
+                    },
+                },
+            },
+        ];
+    },
+});
+const footnoteAttributes = {
+    identifier: { default: "" },
+    label: { default: "" },
+};
+/** A GFM footnote definition, `[^label]: ...`. */
+export const FootnoteDefinition = Node.create({
+    name: "footnoteDefinition",
+    group: "block",
+    content: "block+",
+    defining: true,
+    isolating: true,
+    addAttributes() {
+        return footnoteAttributes;
+    },
+    parseHTML() {
+        return [{ tag: "div[data-footnote-definition]" }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, {
+                "data-footnote-definition": "",
+                "data-label": `[^${node.attrs.label}]`,
+                class: "v-footnote-definition",
+            }),
+            0,
+        ];
+    },
+});
+/** A GFM footnote reference, `[^label]`. */
+export const FootnoteReference = Node.create({
+    name: "footnoteReference",
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: true,
+    addAttributes() {
+        return footnoteAttributes;
+    },
+    parseHTML() {
+        // Ahead of Superscript's `sup` rule, or a pasted reference turns into
+        // superscript text.
+        return [{ tag: "sup[data-footnote-reference]", priority: 60 }];
+    },
+    renderHTML({ HTMLAttributes, node }) {
+        return [
+            "sup",
+            mergeAttributes(HTMLAttributes, {
+                "data-footnote-reference": "",
+                class: "v-footnote-reference",
+            }),
+            `[^${node.attrs.label}]`,
+        ];
+    },
+});