@cosmicdrift/kumiko-bundled-features 0.362.0 → 0.363.0

package/dist/template-resolver/web/document-tiptap-editor.js

@@ -0,0 +1,376 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @runtime client
+//
+// tiptap-backed implementation behind DocumentContentEditor's lazy() boundary —
+// never import this file statically, tiptap must only load when a "document"
+// collection is rendered. Variables are inserted as `variable` nodes only,
+// never as `{{name}}` text, so the sanitizer's schema keeps them.
+import { TextareaContentEditor, usePrimitives, useTranslation, VariableChips, } from "@cosmicdrift/kumiko-renderer";
+import { cn } from "@cosmicdrift/kumiko-renderer-web";
+import { isOneOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold as BoldIcon, Braces, Image as ImageIcon, Italic as ItalicIcon, Link as LinkIcon, List, ListOrdered, Minus, MousePointerClick, Repeat, Scissors, Table as TableIcon, Underline as UnderlineIcon, } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { DOCUMENT_TEXT_ALIGNMENTS, isAllowedDocumentLinkHref, isDocumentPlaceholderHref, isDocumentReferenceName, isDocumentResourceKey, } from "../document-schema.js";
+import { createDocumentEditorExtensions } from "./document-editor-extensions.js";
+import { MAIL_DOCUMENT_BLOCKS, } from "./document-toolbar-blocks.js";
+import { createEditorHandle } from "./editor-handle.js";
+import { useStableByKey } from "./use-stable-by-key.js";
+const NO_LABELS = {};
+const NO_NAMES = [];
+const NO_PREVIEWS = {};
+function previewsKey(previews) {
+    return Object.entries(previews)
+        .map(([key, { src, caption }]) => `${key}|${src.length}|${src.slice(-24)}|${caption ?? ""}`)
+        .join("\n");
+}
+const BLOCK_PANEL = {
+    image: "image",
+    button: "button",
+    repeat: "repeat",
+    align: "align",
+};
+const ALIGNMENT_ICONS = {
+    left: _jsx(AlignLeft, { size: 16 }),
+    center: _jsx(AlignCenter, { size: 16 }),
+    right: _jsx(AlignRight, { size: 16 }),
+    justify: _jsx(AlignJustify, { size: 16 }),
+};
+const ALIGNMENT_LABEL_KEYS = {
+    left: "template-resolver.documentEditor.alignLeft",
+    center: "template-resolver.documentEditor.alignCenter",
+    right: "template-resolver.documentEditor.alignRight",
+    justify: "template-resolver.documentEditor.alignJustify",
+};
+// print-document moves the leading rows flagged repeatHeader into thead, so the
+// toggle reads and writes the table's first row.
+function findRepeatTable(editor) {
+    const { $from } = editor.state.selection;
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (node.type.name !== "table")
+            continue;
+        const lists = [];
+        node.forEach((row) => {
+            const each = row.attrs["each"];
+            if (typeof each === "string" && each !== "" && !lists.includes(each))
+                lists.push(each);
+        });
+        if (lists.length === 0)
+            return null;
+        return {
+            lists,
+            headerRepeats: node.firstChild?.attrs["repeatHeader"] === true,
+            firstRowPos: $from.start(depth),
+        };
+    }
+    return null;
+}
+function toggleRepeatHeader(editor) {
+    const found = findRepeatTable(editor);
+    if (found === null)
+        return;
+    editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+        const row = tr.doc.nodeAt(found.firstRowPos);
+        if (row === null)
+            return false;
+        tr.setNodeMarkup(found.firstRowPos, undefined, {
+            ...row.attrs,
+            repeatHeader: !found.headerRepeats,
+        });
+        return true;
+    })
+        .run();
+}
+const PARAGRAPH_STYLES = ["paragraph", "1", "2", "3"];
+const HEADING_LEVELS = { "1": 1, "2": 2, "3": 3 };
+function isParagraphStyle(value) {
+    return isOneOf(PARAGRAPH_STYLES, value);
+}
+function emptyParagraph() {
+    return { type: "paragraph" };
+}
+function repeatTableContent(listName) {
+    const headerRow = {
+        type: "tableRow",
+        content: [
+            { type: "tableHeader", content: [emptyParagraph()] },
+            { type: "tableHeader", content: [emptyParagraph()] },
+        ],
+    };
+    const repeatRow = {
+        type: "tableRow",
+        attrs: { each: listName },
+        content: [
+            { type: "tableCell", content: [emptyParagraph()] },
+            { type: "tableCell", content: [emptyParagraph()] },
+        ],
+    };
+    return { type: "table", content: [headerRow, repeatRow] };
+}
+function Separator({ compact = false }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cn("h-5 w-px bg-border", compact ? "mx-0.5" : "mx-2") }));
+}
+function PanelActions({ onInsert, onRemoveLink, onCancel, }) {
+    const { Button } = usePrimitives();
+    const t = useTranslation();
+    return (_jsxs("div", { className: "flex gap-2", children: [onInsert && (_jsx(Button, { type: "button", size: "sm", onClick: onInsert, children: t("template-resolver.documentEditor.insert") })), onRemoveLink && (_jsx(Button, { type: "button", size: "sm", variant: "danger-ghost", onClick: onRemoveLink, children: t("template-resolver.documentEditor.removeLink") })), _jsx(Button, { type: "button", size: "sm", variant: "secondary", onClick: onCancel, children: t("template-resolver.documentEditor.cancel") })] }));
+}
+function NameSelect({ id, label, names, value, onChange }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, children: _jsx(Input, { kind: "select", id: id, name: id, value: value, onChange: onChange, display: "dropdown", options: names.map((name) => ({ value: name, label: name })) }) }));
+}
+function InsertPanel({ editor, editorId, kind, variables, onClose }) {
+    const { Button, Field, Input } = usePrimitives();
+    const t = useTranslation();
+    const [href, setHref] = useState(() => {
+        const current = editor.getAttributes("link")["href"];
+        return typeof current === "string" ? current : "";
+    });
+    const [resource, setResource] = useState("");
+    const [alt, setAlt] = useState("");
+    const [buttonText, setButtonText] = useState(() => t("template-resolver.documentEditor.buttonDefaultText"));
+    const [chosenName, setChosenName] = useState("");
+    const [error, setError] = useState(null);
+    const referenceNames = variables.filter(isDocumentReferenceName);
+    const buttonTargets = referenceNames.filter((name) => isDocumentPlaceholderHref(`{{${name}}}`));
+    const selectable = kind === "button" ? buttonTargets : referenceNames;
+    const selectedName = selectable.includes(chosenName) ? chosenName : (selectable[0] ?? "");
+    const insertAndClose = (content) => {
+        editor.chain().focus().insertContent(content).run();
+        onClose();
+    };
+    const submitLink = () => {
+        if (!isAllowedDocumentLinkHref(href)) {
+            setError(t("template-resolver.documentEditor.invalidLink"));
+            return;
+        }
+        const chain = editor.chain().focus();
+        if (!editor.state.selection.empty)
+            chain.setLink({ href }).run();
+        else if (editor.isActive("link"))
+            chain.extendMarkRange("link").setLink({ href }).run();
+        else
+            chain
+                .insertContent({ type: "text", text: href, marks: [{ type: "link", attrs: { href } }] })
+                .run();
+        onClose();
+    };
+    const submitImage = () => {
+        if (!isDocumentResourceKey(resource)) {
+            setError(t("template-resolver.documentEditor.invalidResourceKey"));
+            return;
+        }
+        if (/[<>]/.test(alt)) {
+            setError(t("template-resolver.documentEditor.invalidImageAlt"));
+            return;
+        }
+        insertAndClose({ type: "resource", attrs: { resource, alt: alt || null } });
+    };
+    const needsVariables = kind === "button" || kind === "repeat" || kind === "placeholder";
+    const noVariables = needsVariables && selectable.length === 0;
+    const idPrefix = `${editorId}-panel`;
+    return (_jsxs("div", { className: "flex flex-col gap-2 border-b border-input bg-muted/40 p-2", children: [noVariables && (_jsx("p", { className: "text-sm text-muted-foreground", children: t("template-resolver.documentEditor.noVariables") })), kind === "link" && (_jsx(Field, { id: `${idPrefix}-href`, label: t("template-resolver.documentEditor.linkHref"), children: _jsx(Input, { kind: "text", id: `${idPrefix}-href`, name: "href", value: href, onChange: setHref, placeholder: t("template-resolver.documentEditor.linkHrefPlaceholder") }) })), kind === "placeholder" && !noVariables && (_jsx("div", { className: "flex flex-wrap gap-1", children: _jsx(VariableChips, { variables: selectable, onInsert: (name) => insertAndClose({ type: "variable", attrs: { name } }) }) })), kind === "align" && (_jsx("div", { className: "flex flex-wrap gap-1", children: DOCUMENT_TEXT_ALIGNMENTS.map((alignment) => (_jsxs(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => {
+                        editor
+                            .chain()
+                            .focus()
+                            .updateAttributes("paragraph", { textAlign: alignment })
+                            .updateAttributes("heading", { textAlign: alignment })
+                            .run();
+                        onClose();
+                    }, children: [ALIGNMENT_ICONS[alignment], t(ALIGNMENT_LABEL_KEYS[alignment])] }, alignment))) })), kind === "image" && (_jsxs(_Fragment, { children: [_jsx(Field, { id: `${idPrefix}-resource`, label: t("template-resolver.documentEditor.resourceKey"), children: _jsx(Input, { kind: "text", id: `${idPrefix}-resource`, name: "resource", value: resource, onChange: setResource }) }), _jsx(Field, { id: `${idPrefix}-alt`, label: t("template-resolver.documentEditor.imageAlt"), children: _jsx(Input, { kind: "text", id: `${idPrefix}-alt`, name: "alt", value: alt, onChange: setAlt }) })] })), kind === "button" && !noVariables && (_jsxs(_Fragment, { children: [_jsx(NameSelect, { id: `${idPrefix}-target`, label: t("template-resolver.documentEditor.buttonTarget"), names: selectable, value: selectedName, onChange: setChosenName }), _jsx(Field, { id: `${idPrefix}-text`, label: t("template-resolver.documentEditor.buttonText"), children: _jsx(Input, { kind: "text", id: `${idPrefix}-text`, name: "text", value: buttonText, onChange: setButtonText }) })] })), kind === "repeat" && !noVariables && (_jsx(NameSelect, { id: `${idPrefix}-list`, label: t("template-resolver.documentEditor.repeatList"), names: selectable, value: selectedName, onChange: setChosenName })), error !== null && (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: error })), _jsx("div", { className: "flex flex-wrap gap-2", children: _jsx(PanelActions, { onCancel: onClose, ...(kind === "link" && { onInsert: submitLink }), ...(kind === "link" &&
+                        editor.isActive("link") && {
+                        onRemoveLink: () => {
+                            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+                            onClose();
+                        },
+                    }), ...(kind === "image" && { onInsert: submitImage }), ...(kind === "button" &&
+                        !noVariables && {
+                        onInsert: () => insertAndClose({
+                            type: "button",
+                            attrs: { href: `{{${selectedName}}}` },
+                            content: buttonText ? [{ type: "text", text: buttonText }] : [],
+                        }),
+                    }), ...(kind === "repeat" &&
+                        !noVariables && { onInsert: () => insertAndClose(repeatTableContent(selectedName)) }) }) })] }));
+}
+export default function DocumentTiptapEditor({ id, value, onChange, variables, readOnly, blocks = MAIL_DOCUMENT_BLOCKS, variableLabels = NO_LABELS, systemVariables = NO_NAMES, resourcePreviews = NO_PREVIEWS, chrome = "default", toolbar = "full", onEditorReady, }) {
+    const t = useTranslation();
+    const { Button, Field, Input } = usePrimitives();
+    const [openPanel, setOpenPanel] = useState(null);
+    const [showHtml, setShowHtml] = useState(false);
+    const canvas = chrome === "canvas";
+    const compact = toolbar === "compact" && !canvas;
+    const placeholderLabel = t("template-resolver.documentEditor.placeholder");
+    const imageLabel = t("template-resolver.documentEditor.image");
+    const pageBreakLabel = t("template-resolver.documentEditor.pageBreak");
+    const buttonLabel = t("template-resolver.documentEditor.button");
+    const stableLabels = useStableByKey(variableLabels, JSON.stringify(variableLabels));
+    const stableSystem = useStableByKey(systemVariables, systemVariables.join("\n"));
+    const stablePreviews = useStableByKey(resourcePreviews, previewsKey(resourcePreviews));
+    const extensions = useMemo(() => createDocumentEditorExtensions({
+        placeholder: placeholderLabel,
+        image: imageLabel,
+        pageBreak: pageBreakLabel,
+        button: buttonLabel,
+        variableLabels: stableLabels,
+        systemVariables: stableSystem,
+        resourcePreviews: stablePreviews,
+        blockLabels: canvas,
+    }), [
+        placeholderLabel,
+        imageLabel,
+        pageBreakLabel,
+        buttonLabel,
+        stableLabels,
+        stableSystem,
+        stablePreviews,
+        canvas,
+    ]);
+    // The node views are built from labels and previews, so a changed set
+    // rebuilds the editor; its content is re-read from `value`.
+    const editor = useEditor({
+        extensions,
+        content: value,
+        editable: !readOnly,
+        // Suspense (DocumentContentEditor's lazy boundary) speculatively mounts
+        // this component before committing it; immediate render would create an
+        // editor instance during that throwaway pass.
+        immediatelyRender: false,
+        editorProps: { attributes: { id } },
+        onCreate: ({ editor: created }) => onEditorReady?.(createEditorHandle(created)),
+        onUpdate: ({ editor: e }) => onChange(e.getHTML()),
+    }, [extensions]);
+    // @tiptap/react v3 does not re-render on selection-only transactions, so
+    // active states must come from a subscription.
+    const activeState = useEditorState({
+        editor,
+        selector: ({ editor: e }) => e === null
+            ? null
+            : {
+                blockStyle: e.isActive("heading", { level: 1 })
+                    ? "1"
+                    : e.isActive("heading", { level: 2 })
+                        ? "2"
+                        : e.isActive("heading", { level: 3 })
+                            ? "3"
+                            : "paragraph",
+                bold: e.isActive("bold"),
+                italic: e.isActive("italic"),
+                underline: e.isActive("underline"),
+                selectedBlock: e.isActive("resource")
+                    ? {
+                        type: "resource",
+                        detail: String(e.getAttributes("resource")["resource"]),
+                    }
+                    : e.isActive("button")
+                        ? { type: "button", detail: String(e.getAttributes("button")["href"]) }
+                        : null,
+                html: showHtml ? e.getHTML() : "",
+                bulletList: e.isActive("bulletList"),
+                orderedList: e.isActive("orderedList"),
+                link: e.isActive("link"),
+                repeatTable: findRepeatTable(e),
+            },
+    });
+    // The entry loads asynchronously, so `value` arrives after useEditor read
+    // its initial content; the guard keeps in-flight typing from being clobbered.
+    // kumiko-lint-ignore no-raw-hooks DOM integration: syncs the controlled value into the imperative tiptap editor
+    useEffect(() => {
+        if (editor && value !== editor.getHTML()) {
+            editor.commands.setContent(value, { emitUpdate: false });
+        }
+    }, [value, editor]);
+    // kumiko-lint-ignore no-raw-hooks DOM integration: tiptap exposes editability only imperatively via setEditable
+    useEffect(() => {
+        editor?.setEditable(!readOnly);
+    }, [readOnly, editor]);
+    if (!editor)
+        return (_jsx(TextareaContentEditor, { id: id, value: value, onChange: onChange, variables: variables, readOnly: readOnly }));
+    const togglePanel = (kind) => setOpenPanel((current) => (current === kind ? null : kind));
+    const setBlockStyle = (style) => {
+        if (!isParagraphStyle(style))
+            return;
+        const chain = editor.chain().focus();
+        if (style === "paragraph")
+            chain.setParagraph().run();
+        else
+            chain.setHeading({ level: HEADING_LEVELS[style] }).run();
+    };
+    const runBlock = (block) => {
+        const panel = BLOCK_PANEL[block];
+        if (panel) {
+            togglePanel(panel);
+            return;
+        }
+        const chain = editor.chain().focus();
+        if (block === "table")
+            chain.insertTable({ rows: 3, cols: 2, withHeaderRow: true }).run();
+        else if (block === "divider")
+            chain.insertContent({ type: "divider" }).run();
+        else if (block === "pageBreak")
+            chain.insertContent({ type: "pageBreak" }).run();
+    };
+    const blockButtons = {
+        image: { label: imageLabel, icon: _jsx(ImageIcon, { size: 16 }) },
+        table: { label: t("template-resolver.documentEditor.table"), icon: _jsx(TableIcon, { size: 16 }) },
+        button: {
+            label: t("template-resolver.documentEditor.button"),
+            icon: _jsx(MousePointerClick, { size: 16 }),
+        },
+        divider: { label: t("template-resolver.documentEditor.divider"), icon: _jsx(Minus, { size: 16 }) },
+        repeat: { label: t("template-resolver.documentEditor.repeat"), icon: _jsx(Repeat, { size: 16 }) },
+        pageBreak: { label: pageBreakLabel, icon: _jsx(Scissors, { size: 16 }) },
+        align: { label: t("template-resolver.documentEditor.align"), icon: _jsx(AlignLeft, { size: 16 }) },
+    };
+    const repeatTable = activeState?.repeatTable ?? null;
+    const repeatListLabel = repeatTable !== null && repeatTable.lists.length === 1
+        ? (variableLabels[repeatTable.lists[0] ?? ""] ?? repeatTable.lists[0])
+        : undefined;
+    const paragraphStyleLabel = t("template-resolver.documentEditor.paragraphStyle");
+    const styleOptions = [
+        { value: "paragraph", label: t("template-resolver.documentEditor.paragraph") },
+        { value: "1", label: t("kumiko.contentEditor.heading1") },
+        { value: "2", label: t("kumiko.contentEditor.heading2") },
+        { value: "3", label: t("template-resolver.documentEditor.heading3") },
+    ];
+    // Canvas chrome shows plain text buttons instead of icons.
+    const iconButton = (label, icon, isActive, onClick) => canvas ? (_jsx(Button, { type: "button", variant: isActive ? "secondary" : "ghost", size: "sm", pressed: isActive, disabled: readOnly, onClick: onClick, ariaLabel: label, title: label, children: icon })) : (_jsx(Button, { type: "button", variant: isActive ? "primary" : "secondary", size: "icon", pressed: isActive, disabled: readOnly, onClick: onClick, ariaLabel: label, title: label, children: icon }));
+    const markContent = (letter, icon, className) => canvas ? _jsx("span", { className: className, children: letter }) : icon;
+    const selectedBlock = activeState?.selectedBlock ?? null;
+    const flatVariant = canvas ? "ghost" : "secondary";
+    const labelledButton = (spec) => {
+        const shared = {
+            type: "button",
+            variant: flatVariant,
+            disabled: readOnly,
+            onClick: spec.onClick,
+            ...(spec.expanded !== undefined && { expanded: spec.expanded }),
+        };
+        return compact ? (_jsx(Button, { ...shared, size: "icon", ariaLabel: spec.label, title: spec.label, children: spec.icon }, spec.key)) : (_jsxs(Button, { ...shared, size: "sm", children: [spec.showIcon && spec.icon, spec.label] }, spec.key));
+    };
+    return (_jsxs("div", { className: cn("rounded-md border border-input", canvas ? "bg-background" : "bg-transparent"), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1 border-b border-input p-1", children: [_jsx("div", { className: compact ? "w-24" : "w-40", children: _jsx(Field, { id: `${id}-paragraph-style`, label: paragraphStyleLabel, hideLabel: true, children: _jsx(Input, { kind: "select", id: `${id}-paragraph-style`, name: "paragraph-style", value: activeState?.blockStyle ?? "paragraph", onChange: setBlockStyle, options: styleOptions, display: "dropdown", disabled: readOnly }) }) }), _jsx(Separator, { compact: compact }), iconButton(t("kumiko.contentEditor.bold"), markContent("B", _jsx(BoldIcon, { size: 16 }), "font-bold"), activeState?.bold ?? false, () => editor.chain().focus().toggleBold().run()), iconButton(t("kumiko.contentEditor.italic"), markContent("I", _jsx(ItalicIcon, { size: 16 }), "italic"), activeState?.italic ?? false, () => editor.chain().focus().toggleItalic().run()), iconButton(t("template-resolver.documentEditor.underline"), markContent("U", _jsx(UnderlineIcon, { size: 16 }), "underline"), activeState?.underline ?? false, () => editor.chain().focus().toggleUnderline().run()), _jsx(Separator, { compact: compact }), iconButton(t("kumiko.contentEditor.bulletList"), _jsx(List, { size: 16 }), activeState?.bulletList ?? false, () => editor.chain().focus().toggleBulletList().run()), iconButton(t("kumiko.contentEditor.orderedList"), _jsx(ListOrdered, { size: 16 }), activeState?.orderedList ?? false, () => editor.chain().focus().toggleOrderedList().run()), iconButton(t("template-resolver.documentEditor.link"), _jsx(LinkIcon, { size: 16 }), activeState?.link ?? false, () => togglePanel("link")), _jsx(Separator, { compact: compact }), labelledButton({
+                        label: t("template-resolver.documentEditor.insertPlaceholder"),
+                        icon: _jsx(Braces, { size: 16 }),
+                        showIcon: true,
+                        expanded: openPanel === "placeholder",
+                        onClick: () => togglePanel("placeholder"),
+                    }), blocks.length > 0 && _jsx(Separator, { compact: compact }), blocks.map((block) => labelledButton({
+                        key: block,
+                        label: blockButtons[block].label,
+                        icon: blockButtons[block].icon,
+                        showIcon: !canvas,
+                        onClick: () => runBlock(block),
+                    })), canvas && (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1" }), _jsx(Button, { type: "button", variant: flatVariant, size: "sm", expanded: showHtml, onClick: () => {
+                                    setShowHtml((current) => !current);
+                                }, children: t("template-resolver.documentEditor.showHtml") })] }))] }), canvas && selectedBlock !== null && !readOnly && (_jsxs("div", { className: "flex items-center gap-2 border-b border-input bg-muted/40 px-2 py-1 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: t("template-resolver.documentEditor.selectedBlock") }), _jsx("span", { className: "font-medium", children: selectedBlock.type === "resource" ? imageLabel : buttonLabel }), _jsx("code", { className: "text-xs text-muted-foreground", children: selectedBlock.detail }), _jsx("span", { className: "flex-1" }), _jsx(Button, { type: "button", size: "sm", variant: "danger-ghost", onClick: () => {
+                            editor.chain().focus().deleteNode(selectedBlock.type).run();
+                        }, children: t("template-resolver.documentEditor.removeBlock") })] })), canvas && showHtml && (_jsx("section", { "aria-label": t("template-resolver.documentEditor.htmlSource"), children: _jsx("pre", { className: "h-40 overflow-auto whitespace-pre-wrap break-all border-b border-input bg-muted p-2 font-mono text-xs", children: activeState?.html ?? "" }) })), openPanel !== null && !readOnly && (_jsx(InsertPanel, { editor: editor, editorId: id, kind: openPanel, variables: variables, onClose: () => setOpenPanel(null) }, openPanel)), repeatTable !== null && !readOnly && (_jsxs("div", { "data-testid": "document-repeat-bar", className: "flex flex-wrap items-center gap-3 border-b border-input bg-muted/40 px-2 py-1 text-xs", children: [_jsx("span", { className: "font-medium", children: repeatListLabel === undefined
+                            ? t("template-resolver.documentEditor.repeat")
+                            : t("template-resolver.documentEditor.repeatBarList", { list: repeatListLabel }) }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", pressed: repeatTable.headerRepeats, onClick: () => toggleRepeatHeader(editor), children: t("template-resolver.documentEditor.repeatHeader") }), _jsx("span", { className: "text-muted-foreground", children: t("template-resolver.documentEditor.keepRowsTogether") })] })), _jsx("div", { className: cn(canvas && "flex justify-center bg-muted p-6"), children: _jsx(EditorContent, { editor: editor, className: cn(canvas
+                        ? "w-[600px] max-w-full bg-background px-10 py-7 text-sm border border-input"
+                        : "min-h-40 px-3 py-2 text-base outline-none md:text-sm", "[&_.ProseMirror-selectednode]:ring-2 [&_.ProseMirror-selectednode]:ring-primary", "[&_.ProseMirror]:min-h-40 [&_.ProseMirror]:outline-none", "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-6 [&_ol]:pl-6", "[&_h1]:text-xl [&_h1]:font-bold [&_h2]:text-lg [&_h2]:font-bold [&_h3]:text-base [&_h3]:font-bold", "[&_a]:underline [&_a]:text-primary", "[&_strong]:font-bold [&_em]:italic [&_u]:underline", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-input [&_td]:p-1 [&_th]:border [&_th]:border-input [&_th]:bg-muted [&_th]:p-1 [&_th]:text-left", "[&_tr[data-each]]:bg-muted", "[&_a[data-button]]:inline-block [&_a[data-button]]:rounded-full [&_a[data-button]]:bg-primary [&_a[data-button]]:px-4 [&_a[data-button]]:py-1.5 [&_a[data-button]]:text-primary-foreground [&_a[data-button]]:no-underline", "[&_hr]:my-3 [&_hr]:border-input", "[&_.is-editor-empty]:before:pointer-events-none [&_.is-editor-empty]:before:float-left [&_.is-editor-empty]:before:h-0 [&_.is-editor-empty]:before:text-muted-foreground [&_.is-editor-empty]:before:content-[attr(data-placeholder)]") }) })] }));
+}

package/dist/template-resolver/web/document-toolbar-blocks.d.ts

@@ -0,0 +1,33 @@
+import type { ContentEditorProps } from "@cosmicdrift/kumiko-renderer";
+export type DocumentToolbarBlock = "image" | "table" | "button" | "divider" | "repeat" | "pageBreak" | "align";
+/** Imperative access for an outside panel (placeholder list, resource list). */
+export type DocumentEditorHandle = {
+    readonly insertPlaceholder: (name: string) => void;
+    readonly insertResource: (key: string, alt?: string) => void;
+    readonly focus: () => void;
+};
+export type DocumentResourcePreview = {
+    /** Shown as the image source in the editor only; never written to the document. */
+    readonly src: string;
+    readonly caption?: string;
+};
+/** "default" keeps the compact bordered editor; "canvas" renders a flat text
+ *  toolbar and a paper-like page with block labels. */
+export type DocumentEditorChrome = "default" | "canvas";
+export type DocumentEditorProps = ContentEditorProps & {
+    readonly blocks?: readonly DocumentToolbarBlock[];
+    /** Display label per variable name, as inserted (list item fields use the
+     *  dotted form, e.g. "lines.description"). A chip shows label and name. */
+    readonly variableLabels?: Readonly<Record<string, string>>;
+    /** Variable names rendered as system chips (a different tint). */
+    readonly systemVariables?: readonly string[];
+    /** Image previews by resource key; resources without one show a key placeholder. */
+    readonly resourcePreviews?: Readonly<Record<string, DocumentResourcePreview>>;
+    readonly chrome?: DocumentEditorChrome;
+    /** "compact" renders the placeholder and block buttons icon-only with a tooltip, for narrow columns. Default "full". */
+    readonly toolbar?: "full" | "compact";
+    /** Called with the handle once the editor exists and with null when it is destroyed. */
+    readonly onEditorReady?: (handle: DocumentEditorHandle) => void;
+};
+export declare const MAIL_DOCUMENT_BLOCKS: readonly ["image", "table", "button", "divider", "repeat"];
+export declare const PDF_DOCUMENT_BLOCKS: readonly ["align", "image", "table", "divider", "repeat", "pageBreak"];

package/dist/template-resolver/web/document-toolbar-blocks.js

@@ -0,0 +1,15 @@
+export const MAIL_DOCUMENT_BLOCKS = [
+    "image",
+    "table",
+    "button",
+    "divider",
+    "repeat",
+];
+export const PDF_DOCUMENT_BLOCKS = [
+    "align",
+    "image",
+    "table",
+    "divider",
+    "repeat",
+    "pageBreak",
+];

package/dist/template-resolver/web/editor-handle.d.ts

@@ -0,0 +1,3 @@
+import type { Editor } from "@tiptap/core";
+import type { DocumentEditorHandle } from "./document-toolbar-blocks.js";
+export declare function createEditorHandle(editor: Editor): DocumentEditorHandle;

package/dist/template-resolver/web/editor-handle.js

@@ -0,0 +1,24 @@
+import { isDocumentReferenceName, isDocumentResourceKey } from "../document-schema.js";
+export function createEditorHandle(editor) {
+    return {
+        insertPlaceholder: (name) => {
+            // skip: an invalid variable name is not insertable
+            if (!isDocumentReferenceName(name))
+                return;
+            editor.chain().focus().insertContent({ type: "variable", attrs: { name } }).run();
+        },
+        insertResource: (key, alt) => {
+            // skip: an invalid resource key is not insertable
+            if (!isDocumentResourceKey(key))
+                return;
+            editor
+                .chain()
+                .focus()
+                .insertContent({ type: "resource", attrs: { resource: key, alt: alt ?? null } })
+                .run();
+        },
+        focus: () => {
+            editor.commands.focus();
+        },
+    };
+}

package/dist/template-resolver/web/i18n.js

@@ -6,12 +6,88 @@
 // Keys follow `template-resolver.editor.<slug>`.
 export const defaultTranslations = {
     en: {
+        "template-resolver.documentEditor.button": "Button",
+        "template-resolver.documentEditor.buttonDefaultText": "Confirm",
+        "template-resolver.documentEditor.buttonTarget": "Button target",
+        "template-resolver.documentEditor.buttonText": "Button text",
+        "template-resolver.documentEditor.cancel": "Cancel",
+        "template-resolver.documentEditor.divider": "Divider",
+        "template-resolver.documentEditor.heading3": "Heading 3",
+        "template-resolver.documentEditor.image": "Image",
+        "template-resolver.documentEditor.imageAlt": "Alt text (optional)",
+        "template-resolver.documentEditor.insert": "Insert",
+        "template-resolver.documentEditor.insertPlaceholder": "Placeholder",
+        "template-resolver.documentEditor.invalidImageAlt": "The alt text must not contain < or >.",
+        "template-resolver.documentEditor.invalidLink": "This link target is not allowed. Use https, http, mailto, tel or a placeholder.",
+        "template-resolver.documentEditor.invalidResourceKey": "This resource key is not valid.",
+        "template-resolver.documentEditor.link": "Link",
+        "template-resolver.documentEditor.linkHref": "Link target",
+        "template-resolver.documentEditor.linkHrefPlaceholder": "https://",
+        "template-resolver.documentEditor.noVariables": "No matching variables are available here.",
+        "template-resolver.documentEditor.pageBreak": "Page break",
+        "template-resolver.documentEditor.align": "Align",
+        "template-resolver.documentEditor.alignLeft": "Left",
+        "template-resolver.documentEditor.alignCenter": "Centered",
+        "template-resolver.documentEditor.alignRight": "Right",
+        "template-resolver.documentEditor.alignJustify": "Justified",
+        "template-resolver.documentEditor.repeatBarList": "Repeat · {list}",
+        "template-resolver.documentEditor.repeatHeader": "Repeat header row",
+        "template-resolver.documentEditor.keepRowsTogether": "Keep rows together",
+        "template-resolver.documentEditor.paragraph": "Paragraph",
+        "template-resolver.documentEditor.paragraphStyle": "Paragraph style",
+        "template-resolver.documentEditor.placeholder": "Write your text…",
+        "template-resolver.documentEditor.removeLink": "Remove link",
+        "template-resolver.documentEditor.repeat": "Repeat",
+        "template-resolver.documentEditor.repeatList": "List to repeat",
+        "template-resolver.documentEditor.resourceKey": "Resource key",
+        "template-resolver.documentEditor.table": "Table",
         "template-resolver.editor.titleLabel": "Title",
         "template-resolver.editor.contentLabel": "Content",
         "template-resolver.editor.save": "Save",
         "template-resolver.editor.saving": "Saving…",
         "template-resolver.editor.created": "Created.",
         "template-resolver.editor.saved": "Saved.",
+        "templateResolver.errors.document.buttonHrefNotPlaceholder": "The button target “{detail}” must be a placeholder.",
+        "templateResolver.errors.document.disallowedLinkHref": "Link target “{detail}” is not allowed; use https, http, mailto, tel or a placeholder.",
+        "templateResolver.errors.document.documentRequiresHtmlFormat": "This template kind requires the html format, got “{detail}”.",
+        "templateResolver.errors.document.layoutRequiresMjmlFormat": "Mail layouts require the mjml format, got “{detail}”.",
+        "templateResolver.errors.document.layoutInvalidStructure": "The layout may only contain the header, content, signature and footer regions: {detail}.",
+        "templateResolver.errors.document.layoutMissingContentSlot": "The layout needs its content slot: {detail}.",
+        "templateResolver.errors.document.layoutSourceSystemOnly": "Only system layouts may use {detail} source; use the structured html layout.",
+        "templateResolver.errors.template.targetExists": "A template for locale “{detail}” already exists; overwrite it explicitly to replace it.",
+        "templateResolver.warnings.resourceNotUploaded": "Image not uploaded: {detail}",
+        "templateResolver.checks.resourcesResolved": "All images are available",
+        "templateResolver.checks.textPresent": "A plain-text version is present",
+        "templateResolver.checks.sizeUnderCap": "The mail is within the 10 MiB size limit",
+        "templateResolver.checks.requiredPlaceholders": "All required placeholders are used",
+        "templateResolver.errors.preview.renderFailed": "The preview could not be rendered.",
+        "templateResolver.errors.testMail.noChannel": "No email channel is set up, so no test mail can be sent.",
+        "templateResolver.errors.testMail.noAddress": "Your account has no email address to send the test mail to.",
+        "templateResolver.errors.testMail.failed": "The test mail could not be sent.",
+        "templateResolver.errors.resource.tooLarge": "The image is too large.",
+        "templateResolver.errors.resource.unsupportedImage": "This file is not a supported image. Use PNG, JPEG, WebP or GIF.",
+        "templateResolver.errors.template.systemResourcesNeedSystemTenant": "Resource files can only be imported as system templates by a user of the system tenant.",
+        "templateResolver.errors.collection.kindNotAllowed": "“{detail}” templates are written through their own editor, not through a collection.",
+        "templateResolver.errors.noSystemTemplate": "There is no active system template to reset to.",
+        "templateResolver.errors.template.invalidMeta": "Invalid template settings: {detail}",
+        "templateResolver.errors.template.unknownPlaceholders": "Unknown placeholders: {detail}",
+        "templateResolver.errors.template.missingRequiredPlaceholders": "Required placeholders are not used: {detail}",
+        "templateResolver.errors.document.embeddedContent": "<{detail}> elements are not allowed in template bodies.",
+        "templateResolver.errors.document.unsafeAttributeValue": "The attribute value “{detail}” must not contain < or >.",
+        "templateResolver.errors.document.eventHandlerAttribute": "Inline event handler “{detail}” is not allowed.",
+        "templateResolver.errors.document.externalImageSource": "Images must reference an uploaded resource; image source “{detail}” is not allowed.",
+        "templateResolver.errors.document.imageWithoutResource": "Images must reference an uploaded resource.",
+        "templateResolver.errors.document.invalidReferenceName": "“{detail}” is not a valid name.",
+        "templateResolver.errors.document.scriptElement": "<script> elements are not allowed in template bodies.",
+        "templateResolver.errors.attachment.unsupportedType": "Attachments must be a PDF, PNG or JPEG file.",
+        "templateResolver.errors.attachment.limit": "A template can have at most {max} attachments.",
+        "templateResolver.errors.attachment.invalid": "The attachment needs a template, a key and a valid file name.",
+        "templateResolver.errors.attachment.pdfTemplateMissing": "There is no PDF template “{slug}” for this tenant or the system.",
+        "template-resolver.documentEditor.htmlSource": "HTML source",
+        "template-resolver.documentEditor.removeBlock": "Remove block",
+        "template-resolver.documentEditor.selectedBlock": "Selected block",
+        "template-resolver.documentEditor.showHtml": "HTML",
+        "template-resolver.documentEditor.underline": "Underline",
         "template-resolver.editor.saveFailed": "Save failed.",
         "template-resolver.editor.networkError": "Network error while saving.",
         "template-resolver.editor.loading": "Loading current version…",

package/dist/template-resolver/web/index.d.ts

@@ -1 +1,5 @@
+export { TemplateResolverErrors, TemplateResolverHandlers, TemplateResolverQueries, } from "../qualified-names.js";
 export { textBlocksClient } from "./client-plugin.js";
+export { DocumentContentEditor } from "./document-editor.js";
+export { type DocumentEditorChrome, type DocumentEditorHandle, type DocumentEditorProps, type DocumentResourcePreview, type DocumentToolbarBlock, MAIL_DOCUMENT_BLOCKS, PDF_DOCUMENT_BLOCKS, } from "./document-toolbar-blocks.js";
+export { PlaceholderLineEditor, type PlaceholderLineEditorProps, } from "./placeholder-line-editor-lazy.js";

package/dist/template-resolver/web/index.js

@@ -4,4 +4,8 @@
 // — the server side (defineFeature) lives in
 // `@cosmicdrift/kumiko-bundled-features/template-resolver` and has no React or
 // DOM deps.
+export { TemplateResolverErrors, TemplateResolverHandlers, TemplateResolverQueries, } from "../qualified-names.js";
 export { textBlocksClient } from "./client-plugin.js";
+export { DocumentContentEditor } from "./document-editor.js";
+export { MAIL_DOCUMENT_BLOCKS, PDF_DOCUMENT_BLOCKS, } from "./document-toolbar-blocks.js";
+export { PlaceholderLineEditor, } from "./placeholder-line-editor-lazy.js";

package/dist/template-resolver/web/placeholder-line-editor-lazy.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { PlaceholderLineEditorProps } from "./placeholder-line-editor.js";
+export type { PlaceholderLineEditorProps } from "./placeholder-line-editor.js";
+export declare function PlaceholderLineEditor(props: PlaceholderLineEditorProps): ReactNode;

package/dist/template-resolver/web/placeholder-line-editor-lazy.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @runtime client
+//
+// Lazy boundary for the placeholder line editor: tiptap loads with the chunk,
+// the fallback is a plain text input holding the same `{{name}}` text.
+// Never import placeholder-line-editor statically here.
+import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
+import { lazy, Suspense } from "react";
+const LazyPlaceholderLineEditor = lazy(() => import("./placeholder-line-editor.js"));
+function PlainLineFallback({ id, value, onChange, readOnly = false, "aria-label": ariaLabel, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: ariaLabel, hideLabel: true, children: _jsx(Input, { kind: "text", id: id, name: id, value: value, onChange: onChange, disabled: readOnly }) }));
+}
+export function PlaceholderLineEditor(props) {
+    return (_jsx(Suspense, { fallback: _jsx(PlainLineFallback, { ...props }), children: _jsx(LazyPlaceholderLineEditor, { ...props }) }));
+}

package/dist/template-resolver/web/placeholder-line-editor.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { DocumentEditorHandle } from "./document-toolbar-blocks.js";
+export type PlaceholderLineEditorProps = {
+    readonly id: string;
+    /** Plain text with `{{name}}` placeholders. */
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    readonly variableLabels?: Readonly<Record<string, string>>;
+    /** Placeholders shown as system chips (a different tint). */
+    readonly systemVariables?: readonly string[];
+    readonly readOnly?: boolean;
+    readonly onEditorReady?: (handle: DocumentEditorHandle) => void;
+    readonly "aria-label": string;
+};
+export default function PlaceholderLineEditor({ id, value, onChange, variableLabels, systemVariables, readOnly, onEditorReady, "aria-label": ariaLabel, }: PlaceholderLineEditorProps): ReactNode;