feat(email): WYSIWYG template editor with variable substitution
- Add emailSubject{De,En} + emailBodyHtml{De,En} to ShopSettings
- New RichTextEditor component (TipTap) with toolbar + variable insert
- Settings UI: Email templates section per language
- email.server.ts: substitute {{var}} placeholders, fall back to defaults
- Default vars: invoiceNumber, customerName, customerFirstName, orderName,
totalGross, dueDate, companyName, ownerName
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,253 @@
|
||||
import { useEditor, EditorContent } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Link from "@tiptap/extension-link";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface RichTextEditorProps {
|
||||
/** Hidden form field name; the rendered HTML is mirrored into it. */
|
||||
name: string;
|
||||
/** Visible label rendered above the editor. */
|
||||
label: string;
|
||||
/** Initial HTML loaded into the editor. */
|
||||
defaultValue?: string;
|
||||
/** Optional helper text shown below the editor. */
|
||||
helpText?: string;
|
||||
/** Insertable variable tokens shown as quick-insert buttons. */
|
||||
variables?: { token: string; label?: string }[];
|
||||
/** Min editor height in px. */
|
||||
minHeight?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* TipTap-based WYSIWYG editor that mirrors its HTML content into a hidden
|
||||
* input so the parent <Form> can submit it like any other field.
|
||||
*
|
||||
* Variables like {{invoiceNumber}} are inserted as plain text — the email
|
||||
* renderer is responsible for substituting them at send time.
|
||||
*/
|
||||
export function RichTextEditor({
|
||||
name,
|
||||
label,
|
||||
defaultValue = "",
|
||||
helpText,
|
||||
variables = [],
|
||||
minHeight = 200,
|
||||
}: RichTextEditorProps) {
|
||||
// TipTap calls into the DOM on init; defer mounting until after hydration
|
||||
// so SSR markup matches the initial client render.
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
const editor = useEditor({
|
||||
immediatelyRender: false,
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
// Drop heading levels we don't need to keep the toolbar focused.
|
||||
heading: { levels: [2, 3] },
|
||||
}),
|
||||
Link.configure({ openOnClick: false }),
|
||||
],
|
||||
content: defaultValue || "<p></p>",
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: "wysiwyg-editor",
|
||||
style: `min-height:${minHeight}px;padding:8px 12px;border:1px solid #c9cccf;border-top:0;border-radius:0 0 6px 6px;background:#fff;outline:none;`,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Keep editor disposed cleanly on unmount.
|
||||
useEffect(() => () => editor?.destroy(), [editor]);
|
||||
|
||||
const html = editor?.getHTML() ?? defaultValue;
|
||||
|
||||
if (!mounted) {
|
||||
// Server / pre-hydration fallback: a textarea so the value is still
|
||||
// submittable if JS fails or before TipTap mounts.
|
||||
return (
|
||||
<div>
|
||||
{label ? (
|
||||
<label style={{ display: "block", fontSize: 14, fontWeight: 500, marginBottom: 6 }}>
|
||||
{label}
|
||||
</label>
|
||||
) : null}
|
||||
<textarea
|
||||
name={name}
|
||||
defaultValue={defaultValue}
|
||||
style={{ width: "100%", minHeight, padding: 8, border: "1px solid #c9cccf", borderRadius: 6 }}
|
||||
/>
|
||||
{helpText ? (
|
||||
<div style={{ fontSize: 12, color: "#6d7175", marginTop: 4 }}>{helpText}</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{label ? (
|
||||
<label style={{ display: "block", fontSize: 14, fontWeight: 500, marginBottom: 6 }}>
|
||||
{label}
|
||||
</label>
|
||||
) : null}
|
||||
<div
|
||||
role="toolbar"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 4,
|
||||
padding: 6,
|
||||
border: "1px solid #c9cccf",
|
||||
borderRadius: "6px 6px 0 0",
|
||||
background: "#f6f6f7",
|
||||
}}
|
||||
>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleBold().run()}
|
||||
active={editor?.isActive("bold") ?? false}
|
||||
label="B"
|
||||
title="Bold"
|
||||
bold
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleItalic().run()}
|
||||
active={editor?.isActive("italic") ?? false}
|
||||
label="I"
|
||||
title="Italic"
|
||||
italic
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleStrike().run()}
|
||||
active={editor?.isActive("strike") ?? false}
|
||||
label="S"
|
||||
title="Strikethrough"
|
||||
/>
|
||||
<Sep />
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().setParagraph().run()}
|
||||
active={editor?.isActive("paragraph") ?? false}
|
||||
label="¶"
|
||||
title="Paragraph"
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
active={editor?.isActive("heading", { level: 2 }) ?? false}
|
||||
label="H2"
|
||||
title="Heading 2"
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
active={editor?.isActive("heading", { level: 3 }) ?? false}
|
||||
label="H3"
|
||||
title="Heading 3"
|
||||
/>
|
||||
<Sep />
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleBulletList().run()}
|
||||
active={editor?.isActive("bulletList") ?? false}
|
||||
label="• List"
|
||||
title="Bullet list"
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().toggleOrderedList().run()}
|
||||
active={editor?.isActive("orderedList") ?? false}
|
||||
label="1. List"
|
||||
title="Numbered list"
|
||||
/>
|
||||
<Sep />
|
||||
<ToolbarButton
|
||||
onClick={() => {
|
||||
const url = window.prompt("URL");
|
||||
if (url) editor?.chain().focus().setLink({ href: url }).run();
|
||||
else editor?.chain().focus().unsetLink().run();
|
||||
}}
|
||||
active={editor?.isActive("link") ?? false}
|
||||
label="Link"
|
||||
title="Insert/remove link"
|
||||
/>
|
||||
<Sep />
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().undo().run()}
|
||||
active={false}
|
||||
label="↺"
|
||||
title="Undo"
|
||||
/>
|
||||
<ToolbarButton
|
||||
onClick={() => editor?.chain().focus().redo().run()}
|
||||
active={false}
|
||||
label="↻"
|
||||
title="Redo"
|
||||
/>
|
||||
</div>
|
||||
<EditorContent editor={editor} />
|
||||
<input type="hidden" name={name} value={html} />
|
||||
{variables.length > 0 ? (
|
||||
<div style={{ marginTop: 6, display: "flex", flexWrap: "wrap", gap: 4, alignItems: "center" }}>
|
||||
<span style={{ fontSize: 12, color: "#6d7175", marginRight: 4 }}>Insert variable:</span>
|
||||
{variables.map((v) => (
|
||||
<button
|
||||
key={v.token}
|
||||
type="button"
|
||||
onClick={() => editor?.chain().focus().insertContent(v.token).run()}
|
||||
style={{
|
||||
fontSize: 12,
|
||||
padding: "2px 8px",
|
||||
border: "1px solid #c9cccf",
|
||||
borderRadius: 12,
|
||||
background: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
title={`Inserts ${v.token}`}
|
||||
>
|
||||
{v.label ?? v.token}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{helpText ? (
|
||||
<div style={{ fontSize: 12, color: "#6d7175", marginTop: 4 }}>{helpText}</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ToolbarButton({
|
||||
onClick,
|
||||
active,
|
||||
label,
|
||||
title,
|
||||
bold,
|
||||
italic,
|
||||
}: {
|
||||
onClick: () => void;
|
||||
active: boolean;
|
||||
label: string;
|
||||
title: string;
|
||||
bold?: boolean;
|
||||
italic?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
style={{
|
||||
padding: "4px 10px",
|
||||
background: active ? "#e3e5e7" : "#fff",
|
||||
border: "1px solid #c9cccf",
|
||||
borderRadius: 4,
|
||||
fontWeight: bold ? 700 : 500,
|
||||
fontStyle: italic ? "italic" : "normal",
|
||||
cursor: "pointer",
|
||||
fontSize: 13,
|
||||
minWidth: 28,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Sep() {
|
||||
return <span aria-hidden style={{ width: 1, background: "#c9cccf", margin: "2px 4px" }} />;
|
||||
}
|
||||
Reference in New Issue
Block a user