@rapidmx/crm-plugin 0.1.0

package/dist/apps/shared/components/designer/TemplateDesigner.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { HiOutlineArrowUturnLeft, HiOutlineArrowUturnRight, HiOutlineEye, HiOutlinePaperAirplane, HiOutlineSwatch } from "react-icons/hi2";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import { createSavedBlock, deleteSavedBlock, errorMessage, getTemplate, listMergeTags, listSavedBlocks, listSenders, updateTemplate, } from "../../crmApi.js";
+import { INPUT_CLASS, useCrm } from "../CrmShell.js";
+import Canvas from "./Canvas.js";
+import { BlockInspector, SectionInspector, ThemeInspector } from "./Inspector.js";
+import MergeTagPicker from "./MergeTagPicker.js";
+import PreviewModal from "./PreviewModal.js";
+import TestSendModal from "./TestSendModal.js";
+import { BLOCK_TYPES, blockLabel, addSection, designProblems, findBlock, getBlock, insertBlocks, newBlock, newSection, record, redo, undo, updateBlock, updateSection, withNewIds, } from "./designModel.js";
+function detailsOf(template) {
+    return { name: template.name, subject: template.subject, preheader: template.preheader ?? "", category: template.category ?? "" };
+}
+/** Whether a key press is meant for a text field or the text editor, rather than the designer's shortcuts. */
+function typingIn(target) {
+    const element = target;
+    return !!element && (["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) || element.isContentEditable);
+}
+/**
+ * The email template designer: the template's name, subject and preview line; a palette of blocks, section layouts and saved blocks; the
+ * canvas; and the settings of what's selected. Edits can be undone (Ctrl+Z) and redone (Ctrl+Shift+Z or Ctrl+Y); saving checks the
+ * design here first, then on the server, and refuses to overwrite a newer version saved elsewhere. The preview renders the email as it's
+ * sent, and a saved template can be sent as a test.
+ */
+export default function TemplateDesigner({ uid }) {
+    const { workspace, canWrite, canManage, href } = useCrm();
+    const [template, setTemplate] = useState(null);
+    const [details, setDetails] = useState(null);
+    const [history, setHistory] = useState(null);
+    const [selection, setSelection] = useState({ kind: "theme" });
+    const [mergeTags, setMergeTags] = useState([]);
+    const [savedBlocks, setSavedBlocks] = useState([]);
+    const [senders, setSenders] = useState([]);
+    const [dirty, setDirty] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    const [previewing, setPreviewing] = useState(false);
+    const [testing, setTesting] = useState(false);
+    const lastMerge = useRef(undefined);
+    const readOnly = !canWrite;
+    useEffect(() => {
+        getTemplate(workspace.uid, uid).then((loaded) => {
+            setTemplate(loaded);
+            setDetails(detailsOf(loaded));
+            setHistory({ past: [], present: loaded.design, future: [] });
+        }, (err) => setError(errorMessage(err, "Could not load the template.")));
+        listMergeTags(workspace.uid).then(setMergeTags, () => setMergeTags([]));
+        listSavedBlocks(workspace.uid).then(setSavedBlocks, () => setSavedBlocks([]));
+        listSenders(workspace.uid).then(setSenders, () => setSenders([]));
+    }, [workspace.uid, uid]);
+    useEffect(() => {
+        if (!dirty) {
+            return;
+        }
+        const warn = (event) => event.preventDefault();
+        window.addEventListener("beforeunload", warn);
+        return () => window.removeEventListener("beforeunload", warn);
+    }, [dirty]);
+    useEffect(() => {
+        function onKey(event) {
+            if (!(event.ctrlKey || event.metaKey) || typingIn(event.target)) {
+                return;
+            }
+            const key = event.key.toLowerCase();
+            if (key === "z" || key === "y") {
+                event.preventDefault();
+                lastMerge.current = undefined;
+                setHistory((current) => current && (key === "y" || event.shiftKey ? redo(current) : undo(current)));
+                setDirty(true);
+            }
+        }
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, []);
+    if (!template || !details || !history) {
+        return error ? _jsx(Alert, { children: error }) : _jsx("p", { className: "text-sm text-text-muted", children: "Loading\u2026" });
+    }
+    const design = history.present;
+    const problems = designProblems(design);
+    /** Makes `next` the design; edits sharing a `mergeKey` in a row are undone as one. */
+    function change(next, mergeKey) {
+        const merge = mergeKey !== undefined && mergeKey === lastMerge.current;
+        lastMerge.current = mergeKey;
+        setHistory((current) => (merge ? { ...current, present: next } : record(current, next)));
+        setDirty(true);
+        setNotice(null);
+    }
+    function changeDetails(patch) {
+        setDetails({ ...details, ...patch });
+        setDirty(true);
+        setNotice(null);
+    }
+    /** Puts `blocks` after the selected block, else at the end of the selected section's first column, else of the last section. */
+    function place(blocks) {
+        let next = design;
+        let columnId;
+        let index;
+        const at = selection.kind === "block" ? findBlock(design, selection.id) : undefined;
+        if (at) {
+            columnId = design.sections[at.section].columns[at.column].id;
+            index = at.index + 1;
+        }
+        else {
+            let section = selection.kind === "section" ? design.sections.find((entry) => entry.id === selection.id) : design.sections[design.sections.length - 1];
+            if (!section) {
+                section = newSection(1);
+                next = addSection(next, next.sections.length, section);
+            }
+            columnId = section.columns[0].id;
+            index = section.columns[0].blocks.length;
+        }
+        change(insertBlocks(next, columnId, index, blocks));
+        setSelection({ kind: "block", id: blocks[0].id });
+    }
+    function addSectionOf(columns) {
+        const section = newSection(columns);
+        const selected = selection.kind === "section" ? design.sections.findIndex((entry) => entry.id === selection.id) : -1;
+        change(addSection(design, selected >= 0 ? selected + 1 : design.sections.length, section));
+        setSelection({ kind: "section", id: section.id });
+    }
+    async function save() {
+        if (problems.length > 0) {
+            setError(problems[0].message);
+            setSelection({ kind: "block", id: problems[0].blockId });
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            const saved = await updateTemplate(workspace.uid, template.uid, {
+                name: details.name,
+                subject: details.subject,
+                preheader: details.preheader || null,
+                category: details.category || null,
+                design,
+                version: template.version,
+            });
+            setTemplate(saved);
+            setHistory((current) => ({ ...current, present: saved.design }));
+            lastMerge.current = undefined;
+            setDirty(false);
+            setNotice(saved.hasUnsubscribeLink ? "Saved." : "Saved. Add a footer or an unsubscribe link before using this template in a campaign.");
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the template."));
+        }
+        setSaving(false);
+    }
+    async function saveForReuse(block) {
+        const name = window.prompt("Name this block, to find it in the palette:", blockLabel(block.type));
+        if (!name?.trim()) {
+            return;
+        }
+        try {
+            const saved = await createSavedBlock(workspace.uid, { name: name.trim(), blocks: [block] });
+            setSavedBlocks([saved, ...savedBlocks]);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not save the block."));
+        }
+    }
+    async function forgetSaved(saved) {
+        if (!window.confirm(`Delete the saved block "${saved.name}"? Templates using it keep their copy.`)) {
+            return;
+        }
+        try {
+            await deleteSavedBlock(workspace.uid, saved.uid);
+            setSavedBlocks(savedBlocks.filter((entry) => entry.uid !== saved.uid));
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not delete the saved block."));
+        }
+    }
+    const selectedBlock = selection.kind === "block" ? getBlock(design, selection.id) : undefined;
+    const selectedSection = selection.kind === "section" ? design.sections.find((entry) => entry.id === selection.id) : undefined;
+    const paletteButton = "text-left text-sm px-2 py-1.5 rounded-sm border border-border hover:border-primary hover:bg-surface-alt disabled:opacity-50";
+    return (_jsxs("div", { className: "flex flex-col h-full -m-6", children: [_jsxs("header", { className: "flex flex-wrap items-center gap-2 px-4 py-2 border-b border-border", children: [_jsx("a", { href: href("/crm/templates"), className: "text-sm text-primary-dark hover:underline", children: "\u2190 Templates" }), _jsx("input", { "aria-label": "Template name", className: `${INPUT_CLASS} !w-56 font-semibold`, value: details.name, readOnly: readOnly, onChange: (event) => changeDetails({ name: event.target.value }) }), _jsxs("div", { className: "flex items-center gap-0.5 ml-auto", children: [_jsx("button", { type: "button", title: "Undo (Ctrl+Z)", "aria-label": "Undo", disabled: history.past.length === 0, className: "p-1.5 rounded-sm hover:bg-surface-alt disabled:opacity-40", onClick: () => {
+                                    lastMerge.current = undefined;
+                                    setHistory(undo(history));
+                                    setDirty(true);
+                                }, children: _jsx(HiOutlineArrowUturnLeft, { "aria-hidden": true, className: "w-4 h-4" }) }), _jsx("button", { type: "button", title: "Redo (Ctrl+Shift+Z)", "aria-label": "Redo", disabled: history.future.length === 0, className: "p-1.5 rounded-sm hover:bg-surface-alt disabled:opacity-40", onClick: () => {
+                                    lastMerge.current = undefined;
+                                    setHistory(redo(history));
+                                    setDirty(true);
+                                }, children: _jsx(HiOutlineArrowUturnRight, { "aria-hidden": true, className: "w-4 h-4" }) }), _jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", onClick: () => setSelection({ kind: "theme" }), children: [_jsx(HiOutlineSwatch, { "aria-hidden": true }), " Theme"] }), _jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", onClick: () => setPreviewing(true), children: [_jsx(HiOutlineEye, { "aria-hidden": true }), " Preview"] }), !readOnly && (_jsxs(Button, { type: "button", variant: "secondary", className: "!w-auto !py-1.5", disabled: dirty, title: dirty ? "Save first: a test sends the saved template." : undefined, onClick: () => setTesting(true), children: [_jsx(HiOutlinePaperAirplane, { "aria-hidden": true }), " Send test"] })), !readOnly && (_jsx(Button, { type: "button", className: "!w-auto !py-1.5", loading: saving, disabled: saving || !dirty, onClick: () => void save(), children: dirty ? "Save" : "Saved" }))] })] }), _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 items-center px-4 py-2 border-b border-border text-sm", children: [_jsx("label", { htmlFor: "crm-template-subject", className: "text-text-muted", children: "Subject" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { id: "crm-template-subject", className: INPUT_CLASS, value: details.subject, readOnly: readOnly, onChange: (event) => changeDetails({ subject: event.target.value }) }), !readOnly && _jsx(MergeTagPicker, { tags: mergeTags, label: "Insert merge tag into subject", onPick: (tag) => changeDetails({ subject: `${details.subject}{{ ${tag} }}` }) })] }), _jsx("label", { htmlFor: "crm-template-preheader", className: "text-text-muted", children: "Preview text" }), _jsx("input", { id: "crm-template-preheader", className: INPUT_CLASS, placeholder: "The line inboxes show after the subject", value: details.preheader, readOnly: readOnly, onChange: (event) => changeDetails({ preheader: event.target.value }) }), _jsx("label", { htmlFor: "crm-template-category", className: "text-text-muted", children: "Category" }), _jsx("input", { id: "crm-template-category", className: `${INPUT_CLASS} !w-56`, value: details.category, readOnly: readOnly, onChange: (event) => changeDetails({ category: event.target.value }) })] }), (error || notice) && _jsx("div", { className: "px-4 pt-2", children: error ? _jsx(Alert, { children: error }) : _jsx("p", { role: "status", className: "text-sm text-success", children: notice }) }), _jsxs("div", { className: "flex flex-1 min-h-0", children: [!readOnly && (_jsxs("aside", { "aria-label": "Blocks", className: "w-52 shrink-0 border-r border-border p-3 overflow-y-auto", children: [_jsx("h2", { className: "text-xs uppercase tracking-wide text-text-muted mb-2", children: "Blocks" }), _jsx("div", { className: "grid grid-cols-2 gap-1 mb-4", children: BLOCK_TYPES.filter(({ type }) => type !== "html" || canManage).map(({ type, label }) => (_jsx("button", { type: "button", className: paletteButton, onClick: () => place([newBlock(type)]), children: label }, type))) }), _jsx("h2", { className: "text-xs uppercase tracking-wide text-text-muted mb-2", children: "Sections" }), _jsx("div", { className: "grid grid-cols-2 gap-1 mb-4", children: [1, 2, 3, 4].map((columns) => (_jsx("button", { type: "button", className: paletteButton, onClick: () => addSectionOf(columns), children: columns === 1 ? "1 column" : `${columns} columns` }, columns))) }), _jsx("h2", { className: "text-xs uppercase tracking-wide text-text-muted mb-2", children: "Saved blocks" }), savedBlocks.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "Select a block and choose \u201CSave for reuse\u201D to keep it here." })) : (_jsx("ul", { className: "flex flex-col gap-1", children: savedBlocks.map((saved) => (_jsxs("li", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: `${paletteButton} flex-1 min-w-0 truncate`, disabled: !canManage && saved.blocks.some((block) => block.type === "html"), onClick: () => place(withNewIds(saved.blocks)), children: saved.name }), _jsx("button", { type: "button", "aria-label": `Delete saved block ${saved.name}`, className: "px-1 text-text-muted hover:text-danger", onClick: () => void forgetSaved(saved), children: "\u00D7" })] }, saved.uid))) }))] })), _jsx("div", { className: "flex-1 min-w-0 overflow-auto", children: _jsx(Canvas, { design: design, selection: selection, onSelect: setSelection, onChange: change, mergeTags: mergeTags, problemIds: new Set(problems.map((problem) => problem.blockId)), onSaveBlock: (block) => void saveForReuse(block), readOnly: readOnly }) }), _jsx("aside", { "aria-label": "Settings", className: "w-72 shrink-0 border-l border-border p-3 overflow-y-auto", children: _jsx("fieldset", { disabled: readOnly, children: selectedBlock ? (_jsx(BlockInspector, { block: selectedBlock, theme: design.theme, mergeTags: mergeTags, canManage: canManage, onChange: (patch) => change(updateBlock(design, selectedBlock.id, patch), `block:${selectedBlock.id}:${Object.keys(patch).join(",")}`) }, selectedBlock.id)) : selectedSection ? (_jsx(SectionInspector, { section: selectedSection, theme: design.theme, onChange: (patch) => change(updateSection(design, selectedSection.id, patch), `section:${selectedSection.id}:${Object.keys(patch).join(",")}`) })) : (_jsx(ThemeInspector, { theme: design.theme, onChange: (patch) => change({ ...design, theme: { ...design.theme, ...patch } }, `theme:${Object.keys(patch).join(",")}`) })) }) })] }), _jsx(PreviewModal, { open: previewing, onClose: () => setPreviewing(false), workspaceUid: workspace.uid, design: design, subject: details.subject, preheader: details.preheader }), _jsx(TestSendModal, { open: testing, onClose: () => setTesting(false), workspaceUid: workspace.uid, templateUid: template.uid, senders: senders })] }));
+}

package/dist/apps/shared/components/designer/TestSendModal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { WorkspaceSender } from "../../crmApi.js";
+export interface TestSendModalProps {
+    open: boolean;
+    onClose: () => void;
+    workspaceUid: string;
+    templateUid: string;
+    senders: WorkspaceSender[];
+}
+/** Sends the saved template, filled in for a sample reader, to one of the caller's own addresses. */
+export default function TestSendModal({ open, onClose, workspaceUid, templateUid, senders }: TestSendModalProps): React.JSX.Element;

package/dist/apps/shared/components/designer/TestSendModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import Modal from "@rapidmx/web-client/lib/components/overlays/Modal.js";
+import { errorMessage, sendTestTemplate } from "../../crmApi.js";
+import { INPUT_CLASS } from "../CrmShell.js";
+/** Sends the saved template, filled in for a sample reader, to one of the caller's own addresses. */
+export default function TestSendModal({ open, onClose, workspaceUid, templateUid, senders }) {
+    const [to, setTo] = useState("");
+    const [senderUid, setSenderUid] = useState("");
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState(null);
+    const [sent, setSent] = useState(null);
+    const chosenSender = senderUid || senders[0]?.uid || "";
+    async function submit(event) {
+        event.preventDefault();
+        setSending(true);
+        setError(null);
+        setSent(null);
+        try {
+            setSent((await sendTestTemplate(workspaceUid, templateUid, { to: to.trim(), senderUid: chosenSender })).sent);
+        }
+        catch (err) {
+            setError(errorMessage(err, "Could not send the test."));
+        }
+        setSending(false);
+    }
+    return (_jsx(Modal, { open: open, onClose: onClose, title: "Send a test", children: senders.length === 0 ? (_jsx("p", { className: "text-sm text-text-muted", children: "Add a sender in the workspace settings first." })) : (_jsxs("form", { onSubmit: submit, className: "flex flex-col gap-3 min-w-[20rem]", children: [_jsx("p", { className: "text-sm text-text-muted", children: "A test goes to the address of a mailbox you can read, filled in for a sample reader." }), error && _jsx(Alert, { children: error }), sent && (_jsxs("p", { role: "status", className: "text-sm text-success", children: ["Sent to ", sent, "."] })), _jsx(FormField, { label: "To", htmlFor: "crm-test-to", children: _jsx("input", { id: "crm-test-to", type: "email", className: INPUT_CLASS, value: to, onChange: (event) => setTo(event.target.value), required: true }) }), _jsx(FormField, { label: "From", htmlFor: "crm-test-from", children: _jsx("select", { id: "crm-test-from", className: INPUT_CLASS, value: chosenSender, onChange: (event) => setSenderUid(event.target.value), children: senders.map((sender) => (_jsx("option", { value: sender.uid, children: sender.fromName ? `${sender.fromName} <${sender.fromAddress}>` : sender.fromAddress }, sender.uid))) }) }), _jsx(Button, { type: "submit", loading: sending, disabled: sending || to.trim() === "", className: "!w-auto self-start", children: "Send test" })] })) }));
+}

package/dist/apps/shared/components/designer/TextBlockEditor.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { MergeTag } from "../../crmApi.js";
+export interface TextBlockEditorProps {
+    /** The text to start with, as HTML. Read once: TipTap owns the document from then on. */
+    value: string;
+    /** Called with the text as HTML each time it changes. */
+    onChange: (html: string) => void;
+    /** The merge tags the picker offers. */
+    mergeTags: MergeTag[];
+}
+/**
+ * A text block's formatted text, edited where it sits on the canvas: bold, italic, underline, strike-through, lists, links (web, mail,
+ * phone or a merge tag such as `{{ links.preferences }}`) and merge tags. Its schema is what the server keeps of a text block, so what
+ * is typed here is what is sent.
+ */
+export default function TextBlockEditor({ value, onChange, mergeTags }: TextBlockEditorProps): React.JSX.Element | null;

package/dist/apps/shared/components/designer/TextBlockEditor.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef } from "react";
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { BsLink45Deg, BsListOl, BsListUl, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline } from "react-icons/bs";
+import { isLink } from "./designModel.js";
+import MergeTagPicker from "./MergeTagPicker.js";
+/**
+ * A text block's formatted text, edited where it sits on the canvas: bold, italic, underline, strike-through, lists, links (web, mail,
+ * phone or a merge tag such as `{{ links.preferences }}`) and merge tags. Its schema is what the server keeps of a text block, so what
+ * is typed here is what is sent.
+ */
+export default function TextBlockEditor({ value, onChange, mergeTags }) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: false,
+                code: false,
+                codeBlock: false,
+                horizontalRule: false,
+                trailingNode: false,
+                link: {
+                    openOnClick: false,
+                    autolink: false,
+                    isAllowedUri: (url) => isLink(url),
+                },
+            }),
+        ],
+        content: value,
+        immediatelyRender: false,
+        editorProps: { attributes: { role: "textbox", "aria-multiline": "true", "aria-label": "Text", class: "outline-none min-h-[2rem]" } },
+        onUpdate: ({ editor: updated }) => onChangeRef.current(updated.getHTML()),
+    });
+    const marks = useEditorState({
+        editor,
+        selector: ({ editor: current }) => ({
+            bold: current?.isActive("bold") ?? false,
+            italic: current?.isActive("italic") ?? false,
+            underline: current?.isActive("underline") ?? false,
+            strike: current?.isActive("strike") ?? false,
+            bulletList: current?.isActive("bulletList") ?? false,
+            orderedList: current?.isActive("orderedList") ?? false,
+            link: current?.isActive("link") ?? false,
+        }),
+    });
+    if (!editor) {
+        return null;
+    }
+    function setLink() {
+        const current = editor.getAttributes("link").href ?? "";
+        const input = window.prompt("Link address (https://..., mailto:..., or a merge tag such as {{ links.preferences }})", current);
+        if (input === null) {
+            return;
+        }
+        if (input.trim() === "") {
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        }
+        else if (isLink(input)) {
+            editor.chain().focus().extendMarkRange("link").setLink({ href: input.trim() }).run();
+        }
+        else {
+            window.alert("That isn't a link an email can use.");
+        }
+    }
+    const buttons = [
+        { label: "Bold", icon: BsTypeBold, pressed: marks.bold, onClick: () => editor.chain().focus().toggleBold().run() },
+        { label: "Italic", icon: BsTypeItalic, pressed: marks.italic, onClick: () => editor.chain().focus().toggleItalic().run() },
+        { label: "Underline", icon: BsTypeUnderline, pressed: marks.underline, onClick: () => editor.chain().focus().toggleUnderline().run() },
+        { label: "Strike-through", icon: BsTypeStrikethrough, pressed: marks.strike, onClick: () => editor.chain().focus().toggleStrike().run() },
+        { label: "Bulleted list", icon: BsListUl, pressed: marks.bulletList, onClick: () => editor.chain().focus().toggleBulletList().run() },
+        { label: "Numbered list", icon: BsListOl, pressed: marks.orderedList, onClick: () => editor.chain().focus().toggleOrderedList().run() },
+        { label: "Link", icon: BsLink45Deg, pressed: marks.link, onClick: setLink },
+    ];
+    return (_jsxs("div", { className: "rounded-sm border border-primary", children: [_jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "flex flex-wrap items-center gap-0.5 border-b border-border bg-surface-alt px-1 py-0.5", children: [buttons.map(({ label, icon: Icon, pressed, onClick }) => (_jsx("button", { type: "button", title: label, "aria-label": label, "aria-pressed": pressed, onMouseDown: (event) => event.preventDefault(), onClick: onClick, className: `p-1.5 rounded-sm ${pressed ? "bg-primary-lightest text-primary-dark" : "text-text hover:bg-surface"}`, children: _jsx(Icon, { "aria-hidden": true, className: "w-4 h-4" }) }, label))), _jsx(MergeTagPicker, { tags: mergeTags, onPick: (tag) => editor.chain().focus().insertContent(`{{ ${tag} }}`).run() })] }), _jsx(EditorContent, { editor: editor, className: "px-2 py-1 prose-sm" })] }));
+}

package/dist/apps/shared/components/designer/designModel.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The template designer's edits, as pure functions over a `TemplateDesign`: each returns a new design and leaves the one it was given
+ * alone, so the designer can keep every earlier design for undo.
+ */
+import type { BlockType, DesignBlock, DesignSection, TemplateDesign } from "../../crmApi.js";
+/** A fresh id for a section, column or block. */
+export declare function newId(): string;
+/** The block types the palette offers, in its order, with what each is called. */
+export declare const BLOCK_TYPES: {
+    type: BlockType;
+    label: string;
+}[];
+/** What a block type is called. */
+export declare function blockLabel(type: BlockType): string;
+/** A new block of `type`, with the content a new one starts with. */
+export declare function newBlock(type: BlockType): DesignBlock;
+/** A new section with `columns` empty columns (1 to 4). */
+export declare function newSection(columns: number): DesignSection;
+/** `blocks` with fresh ids, for pasting a saved block or duplicating one. */
+export declare function withNewIds(blocks: DesignBlock[]): DesignBlock[];
+/** Where a block is. */
+export interface BlockLocation {
+    section: number;
+    column: number;
+    index: number;
+}
+/** Where block `id` is, or `undefined`. */
+export declare function findBlock(design: TemplateDesign, id: string): BlockLocation | undefined;
+/** The block `id`, or `undefined`. */
+export declare function getBlock(design: TemplateDesign, id: string): DesignBlock | undefined;
+/** `design` with block `id` changed by `patch`. */
+export declare function updateBlock(design: TemplateDesign, id: string, patch: Partial<DesignBlock>): TemplateDesign;
+/** `design` without block `id`. */
+export declare function removeBlock(design: TemplateDesign, id: string): TemplateDesign;
+/** `design` with `blocks` put into column `columnId` at `index` (its end when past it). */
+export declare function insertBlocks(design: TemplateDesign, columnId: string, index: number, blocks: DesignBlock[]): TemplateDesign;
+/** `design` with a copy of block `id` right after it; the copy's id is returned too. */
+export declare function duplicateBlock(design: TemplateDesign, id: string): {
+    design: TemplateDesign;
+    id: string;
+};
+/** `design` with block `id` moved to column `columnId` at `index` (counted without the block). */
+export declare function moveBlock(design: TemplateDesign, id: string, columnId: string, index: number): TemplateDesign;
+/** `design` with block `id` one place up (`delta` -1) or down (1) its column; unchanged at the column's end. */
+export declare function nudgeBlock(design: TemplateDesign, id: string, delta: -1 | 1): TemplateDesign;
+/**
+ * `design` after dragging block `activeId` over `overId` - another block (it takes that block's place) or a column (it goes to the column's
+ * end, which is how an empty column is dropped into). Unchanged when either is unknown.
+ */
+export declare function dropBlock(design: TemplateDesign, activeId: string, overId: string): TemplateDesign;
+/** `design` with `section` put at `index`. */
+export declare function addSection(design: TemplateDesign, index: number, section: DesignSection): TemplateDesign;
+/** `design` without section `id`. */
+export declare function removeSection(design: TemplateDesign, id: string): TemplateDesign;
+/** `design` with section `id` one place up (-1) or down (1); unchanged at either end. */
+export declare function nudgeSection(design: TemplateDesign, id: string, delta: -1 | 1): TemplateDesign;
+/**
+ * `design` with section `id` changed by `patch`; a `columns` count (1 to 4) adds empty columns or folds the blocks of removed ones into
+ * the last one kept, so no block is lost.
+ */
+export declare function updateSection(design: TemplateDesign, id: string, patch: {
+    backgroundColor?: string;
+    padding?: number;
+    columns?: number;
+}): TemplateDesign;
+/** What stops a design being saved, block by block - fields the server would refuse. */
+export declare function designProblems(design: TemplateDesign): {
+    blockId: string;
+    message: string;
+}[];
+/** Whether `href` is a link the server takes: web, mail or phone, or starting with a merge tag. */
+export declare function isLink(href: string): boolean;
+/** Undo history: the designs before the current one, the current one, and those undone. */
+export interface History {
+    past: TemplateDesign[];
+    present: TemplateDesign;
+    future: TemplateDesign[];
+}
+/** How many designs back undo reaches. */
+export declare const HISTORY_LIMIT = 100;
+/** `history` with `design` as the current design (dropping what was undone). */
+export declare function record(history: History, design: TemplateDesign): History;
+/** `history` one step back; unchanged when there's nothing to undo. */
+export declare function undo(history: History): History;
+/** `history` one step forward again; unchanged when nothing was undone. */
+export declare function redo(history: History): History;