@standhigher/react-email-editor 0.4.3 → 0.5.1

package/dist/index.js

@@ -142,7 +142,7 @@ var DEFAULT_EMAIL_BODY = {
   textColor: "#000000",
   backgroundColor: "#ffffff",
   contentWidth: CANVAS_DEVICE_WIDTH.desktop,
-  fontFamily: "Arial, Helvetica, sans-serif",
+  fontFamily: "",
   fontWeight: FONT_WEIGHTS.normal,
   linkColor: "#005bd3",
   linkDecoration: LINK_DECORATIONS.underline,
@@ -379,7 +379,7 @@ var DEFAULT_TYPOGRAPHY = Object.freeze({
 function typographyWithBody(body) {
   return __spreadValues(__spreadValues({}, DEFAULT_TYPOGRAPHY), body ? {
     color: body.textColor,
-    fontFamily: body.fontFamily,
+    fontFamily: cssFont(body.fontFamily, DEFAULT_TYPOGRAPHY.fontFamily),
     fontWeight: body.fontWeight,
     linkColor: body.linkColor,
     linkDecoration: body.linkDecoration
@@ -2661,9 +2661,34 @@ function createEmailDocument(blocks = []) {
 function createEmptyDocument() {
   return { version: DOCUMENT_VERSION, subject: "", body: resolveEmailBody(), blocks: [] };
 }
+function isRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
 function ensureEmailDocument(document) {
-  if (document.version !== DOCUMENT_VERSION) {
-    throw new Error(`Unsupported email document version: ${document.version}. Expected ${DOCUMENT_VERSION}.`);
+  if (!isRecord(document)) {
+    throw new TypeError("Invalid email document: expected an object.");
+  }
+  if (!Array.isArray(document.blocks)) {
+    throw new TypeError("Invalid email document: blocks must be an array.");
+  }
+  if (document.body != null && !isRecord(document.body)) {
+    throw new TypeError("Invalid email document: body must be an object when provided.");
+  }
+  if (document.subject !== void 0 && typeof document.subject !== "string") {
+    throw new TypeError("Invalid email document: subject must be a string when provided.");
+  }
+  for (const [index, block] of document.blocks.entries()) {
+    const path = `Invalid email document: blocks[${index}]`;
+    if (!isRecord(block)) throw new TypeError(`${path} must be an object.`);
+    if (typeof block.id !== "string" || !block.id.trim()) {
+      throw new TypeError(`${path}.id must be a non-empty string.`);
+    }
+    if (typeof block.type !== "string" || !block.type.trim()) {
+      throw new TypeError(`${path}.type must be a non-empty string.`);
+    }
+    if (!isRecord(block.controls)) {
+      throw new TypeError(`${path}.controls must be an object.`);
+    }
   }
   return __spreadProps(__spreadValues({}, document), { body: resolveEmailBody(document.body) });
 }
@@ -2807,7 +2832,7 @@ var EmailControls = {
 
 // src/plugins/define-block.ts
 function defineBlock(input) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const options = snapshotValue(input);
   if (!options.type.trim() || !options.title.trim()) throw new Error("Block type and title are required.");
   const schema = (_a = options.controls) != null ? _a : {};
@@ -2825,7 +2850,7 @@ function defineBlock(input) {
     type: options.type,
     title: options.title,
     description: options.description,
-    icon: options.icon,
+    icon: (_c = options.icon) != null ? _c : esc(Array.from(options.title.trim())[0]),
     override: options.override,
     schema,
     controls: Object.entries(schema).map(([name, spec]) => __spreadProps(__spreadValues({}, spec), { name })),
@@ -2834,7 +2859,7 @@ function defineBlock(input) {
     inspectorSections: options.inspectorSections,
     defaultStyle: options.defaultStyle,
     defaultData: options.defaultData,
-    inlineControl: options.Canvas ? void 0 : (_c = inline[0]) == null ? void 0 : _c[0],
+    inlineControl: options.Canvas ? void 0 : (_d = inline[0]) == null ? void 0 : _d[0],
     canvas: bindPluginComponent(options.Canvas),
     inspector: bindPluginComponent(options.Inspector),
     renderEmail: (ctx) => {
@@ -3471,7 +3496,7 @@ var BODY_CONTROL_SECTIONS = [
   { title: "General", controls: [
     { id: "textColor", group: "typography", label: "Text color", control: "color" },
     { id: "linkColor", group: "typography", label: "Link color", control: "color" },
-    { id: "fontFamily", group: "typography", label: "Font family", control: "select", options: copyFontFamilies() },
+    { id: "fontFamily", group: "typography", label: "Font family", control: "select", options: [{ label: "Default", value: "" }, ...copyFontFamilies()] },
     __spreadProps(__spreadValues({}, FONT_WEIGHT), { id: "fontWeight", label: "Font weight" })
   ] },
   { title: "Content", controls: [
@@ -4589,6 +4614,9 @@ function Inspector({
   ] });
 }
 
+// src/stage/Stage.tsx
+import { useMemo as useMemo5 } from "react";
+
 // src/stage/canvas/Canvas.tsx
 import { useDroppable } from "@dnd-kit/core";
 import {
@@ -4619,19 +4647,88 @@ import { CSS } from "@dnd-kit/utilities";
 // src/stage/canvas/components/PluginCanvasContent.tsx
 import { useMemo as useMemo2 } from "react";
 
-// src/render/template-preview.ts
-var TOKEN_PATTERN = /\{\{-?([\s\S]*?)-?\}\}/g;
+// src/render/default-template-engine.ts
+var TOKEN_PATTERN = /\{\{(-[ \t\r\n])?([\s\S]*?)([ \t\r\n]-)?\}\}/g;
+var UNSUPPORTED_IDENTIFIERS = /* @__PURE__ */ new Set([
+  "and",
+  "or",
+  "not",
+  "len",
+  "index",
+  "slice",
+  "call",
+  "print",
+  "printf",
+  "println",
+  "html",
+  "js",
+  "urlquery",
+  "eq",
+  "ne",
+  "lt",
+  "le",
+  "gt",
+  "ge",
+  "break",
+  "continue",
+  "else",
+  "end"
+]);
+var PATH_PATTERN = /^(?:\.|\$|(?:\$\.|\.)?[\p{L}_][\p{L}\p{Nd}_]*(?:\.[\p{L}_][\p{L}\p{Nd}_]*)*)$/u;
+function supportsExpression(expression) {
+  if (PATH_PATTERN.test(expression) && !UNSUPPORTED_IDENTIFIERS.has(expression)) return true;
+  if (/^-?\d+(?:\.\d+)?$/.test(expression)) return true;
+  if (/^"(?:[^"\\]|\\.)*"$/.test(expression)) {
+    try {
+      JSON.parse(expression);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+}
+function supportsTokens(tokens) {
+  var _a;
+  const branches = [];
+  for (const token of tokens) {
+    if (token.text !== void 0) {
+      if (token.text.includes("{{")) return false;
+      continue;
+    }
+    const tag = (_a = token.tag) != null ? _a : "";
+    const branch = /^(if|range|with)\s+([\s\S]+)$/.exec(tag);
+    if (branch) {
+      if (!supportsExpression(branch[2].trim())) return false;
+      branches.push({ kind: branch[1], hasElse: false });
+    } else if (tag === "end") {
+      if (!branches.pop()) return false;
+    } else if (tag === "else" || /^else\s+if\s+/.test(tag)) {
+      const current = branches.at(-1);
+      if (!current || current.hasElse) return false;
+      if (tag === "else") current.hasElse = true;
+      else if (current.kind !== "if" || !supportsExpression(tag.replace(/^else\s+if\s+/, ""))) return false;
+    } else if (!supportsExpression(tag)) return false;
+  }
+  return branches.length === 0;
+}
 function tokenize(template) {
   var _a;
   const tokens = [];
   let lastIndex = 0;
+  let trimNext = false;
   for (const match of template.matchAll(TOKEN_PATTERN)) {
     const index = (_a = match.index) != null ? _a : 0;
-    if (index > lastIndex) tokens.push({ text: template.slice(lastIndex, index) });
-    tokens.push({ tag: match[1].trim() });
+    let text = template.slice(lastIndex, index);
+    if (trimNext) text = text.replace(/^[ \t\r\n]+/, "");
+    if (match[1]) text = text.replace(/[ \t\r\n]+$/, "");
+    if (text) tokens.push({ text });
+    tokens.push({ tag: match[2].trim() });
+    trimNext = Boolean(match[3]);
     lastIndex = index + match[0].length;
   }
-  if (lastIndex < template.length) tokens.push({ text: template.slice(lastIndex) });
+  const tail = template.slice(lastIndex);
+  if (tail) tokens.push({ text: trimNext ? tail.replace(/^[ \t\r\n]+/, "") : tail });
   return tokens;
 }
 function parseNodes(tokens, startIndex) {
@@ -4646,11 +4743,11 @@ function parseNodes(tokens, startIndex) {
       continue;
     }
     const tag = (_a = token.tag) != null ? _a : "";
-    if (tag === "else" || tag.startsWith("else if ")) {
+    if (tag === "else" || /^else\s+if\s+/.test(tag)) {
       return { nodes, nextIndex: index, stopTag: "else" };
     }
     if (tag === "end") return { nodes, nextIndex: index, stopTag: "end" };
-    const branchMatch = /^(if|range|with)\s+(.+)$/.exec(tag);
+    const branchMatch = /^(if|range|with)\s+([\s\S]+)$/.exec(tag);
     if (branchMatch) {
       const branch = parseBranch(
         tokens,
@@ -4674,7 +4771,7 @@ function parseBranch(tokens, startIndex, kind, expression) {
   let nextIndex = body.nextIndex;
   if (body.stopTag === "else") {
     const elseTag = (_b = (_a = tokens[body.nextIndex]) == null ? void 0 : _a.tag) != null ? _b : "";
-    const elseIfMatch = /^else\s+if\s+(.+)$/.exec(elseTag);
+    const elseIfMatch = /^else\s+if\s+([\s\S]+)$/.exec(elseTag);
     if (elseIfMatch) {
       const nested = parseBranch(
         tokens,
@@ -4698,42 +4795,44 @@ function parseBranch(tokens, startIndex, kind, expression) {
 function readPath(value, path) {
   if (path === "") return value;
   return path.split(".").reduce((current, key) => {
-    if (current && typeof current === "object") return current[key];
+    if (current && typeof current === "object" && Object.hasOwn(current, key)) return current[key];
     return void 0;
   }, value);
 }
 function resolveExpression(expression, root, current) {
   const trimmed = expression.trim();
   if (trimmed === ".") return current;
+  if (trimmed === "$") return root;
   if (trimmed === "true") return true;
   if (trimmed === "false") return false;
   if (trimmed === "nil") return null;
-  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return Number(trimmed);
-  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
-    return trimmed.slice(1, -1);
-  }
+  if (/^-?\d+(?:\.\d+)?$/.test(trimmed)) return Number(trimmed);
+  if (trimmed.startsWith('"')) return JSON.parse(trimmed);
   if (trimmed.startsWith("$.")) return readPath(root, trimmed.slice(2));
   if (trimmed.startsWith(".")) return readPath(current, trimmed.slice(1));
   return readPath(current, trimmed);
 }
 function isTruthy(value) {
   if (value == null || value === false || value === "" || value === 0) return false;
-  return !Array.isArray(value) || value.length > 0;
-}
-function escapeHtml(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+  if (Array.isArray(value)) return value.length > 0;
+  if (value instanceof Map || value instanceof Set) return value.size > 0;
+  if (typeof value === "object") {
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype === Object.prototype || prototype === null) return Object.keys(value).length > 0;
+  }
+  return true;
 }
 function renderNodes(nodes, root, current) {
   return nodes.map((node) => {
     if (node.kind === "text") return node.value;
     if (node.kind === "expression") {
       const value2 = resolveExpression(node.expression, root, current);
-      return value2 == null ? "" : escapeHtml(String(value2));
+      return value2 == null ? "" : esc(String(value2)).replaceAll("'", "&#39;");
     }
     const value = resolveExpression(node.expression, root, current);
     if (node.kind === "range") {
-      const items = Array.isArray(value) ? value : value && typeof value === "object" ? Object.values(value) : [];
-      return items.map((item) => renderNodes(node.children, root, item)).join("");
+      const items = Array.isArray(value) ? value : value && typeof value === "object" ? Object.keys(value).sort().map((key) => value[key]) : [];
+      return items.length > 0 ? items.map((item) => renderNodes(node.children, root, item)).join("") : renderNodes(node.alternate, root, current);
     }
     if (!isTruthy(value)) {
       return renderNodes(node.alternate, root, current);
@@ -4742,9 +4841,40 @@ function renderNodes(nodes, root, current) {
     return renderNodes(node.children, root, childContext);
   }).join("");
 }
-function renderTemplatePreview(html, defaultData) {
-  if (defaultData === void 0) return html;
-  return renderNodes(parseNodes(tokenize(html), 0).nodes, defaultData, defaultData);
+var defaultTemplateEngine = Object.freeze({
+  render(template, data) {
+    const tokens = tokenize(template);
+    if (!supportsTokens(tokens)) return template;
+    return renderNodes(parseNodes(tokens, 0).nodes, data, data);
+  }
+});
+
+// src/render/template-preview.ts
+function normalizeEngineError(error) {
+  return error instanceof Error ? error : new Error(String(error) || "Template engine failed.", { cause: error });
+}
+function renderTemplatePreview(template, data, options = {}) {
+  var _a;
+  const engine = (_a = options.templateEngine) != null ? _a : defaultTemplateEngine;
+  if (data === void 0 && engine === defaultTemplateEngine) return template;
+  try {
+    const html = engine.render(template, structuredClone(data != null ? data : {}));
+    if (typeof html !== "string") throw new TypeError("TemplateEngine.render must return a string synchronously.");
+    return html;
+  } catch (error) {
+    throw normalizeEngineError(error);
+  }
+}
+function validateTemplate(template, options = {}) {
+  var _a, _b;
+  const engine = (_a = options.templateEngine) != null ? _a : defaultTemplateEngine;
+  try {
+    const issues = (_b = engine.validate) == null ? void 0 : _b.call(engine, template);
+    if (issues !== void 0 && !Array.isArray(issues)) throw new TypeError("TemplateEngine.validate must return an array synchronously.");
+    return issues;
+  } catch (error) {
+    throw normalizeEngineError(error);
+  }
 }
 
 // src/render/block-html.ts
@@ -4769,7 +4899,7 @@ function variableControlName(name) {
   const token = /^\{\{-?\s*([\s\S]*?)\s*-?\}\}$/.exec(name.trim());
   const inner = (token ? token[1] : name).trim();
   const control = inner.startsWith(".") ? inner.slice(1) : inner;
-  if (!control || !/^[A-Za-z_][\w.]*$/.test(control)) return null;
+  if (!control || !/^[\p{L}_][\p{L}\p{Nd}_]*(?:\.[\p{L}_][\p{L}\p{Nd}_]*)*$/u.test(control)) return null;
   return control;
 }
 function dottedListedToken(name) {
@@ -4835,12 +4965,12 @@ function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email",
 }
 function resolveBlockContent(rendered, node, options) {
   var _a, _b;
-  if (!options.resolveHtmlTemplate) {
-    return applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
-  }
+  const normalized = applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
+  if (!options.resolveHtmlTemplate) return normalized;
   return renderTemplatePreview(
-    rendered,
-    (_b = options.templateData) != null ? _b : node.defaultData
+    normalized,
+    (_b = options.templateData) != null ? _b : node.defaultData,
+    options
   );
 }
 function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body = DEFAULT_EMAIL_BODY) {
@@ -4982,15 +5112,17 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
 
 // src/stage/canvas/components/PluginCanvasContent.tsx
 import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
-function PluginCanvasContent({ block, body, definition, variables, selected, toolbarId, toolbarCollapsed, select, onCommitControl, onCommitControls, onCommitStyle }) {
+function PluginCanvasContent({ block, body, definition, variables, templateEngine, selected, toolbarId, toolbarCollapsed, select, onCommitControl, onCommitControls, onCommitStyle }) {
   var _a, _b;
   const variableSnapshot = useMemo2(() => structuredClone(variables), [variables]);
   const context = useMemo2(() => definition ? buildRenderContext(block, "canvas", body, definition) : null, [block, body, definition]);
   const renderedHtml = useMemo2(() => definition && context ? renderBlockContentFromContext(context, definition, {
     resolveHtmlTemplate: true,
+    templateEngine,
+    variables,
     templateData: mergeTemplateData(variables, block.defaultData),
     body
-  }) : "", [block.defaultData, body, context, definition, variables]);
+  }) : "", [block.defaultData, body, context, definition, variables, templateEngine]);
   if (!definition || !context) return /* @__PURE__ */ jsxs38("div", { className: "ree-plugin-error", role: "alert", children: [
     "Missing block plugin: ",
     block.type,
@@ -5107,6 +5239,7 @@ function CanvasBlock({
   selected,
   dropEdge,
   variables,
+  templateEngine,
   onSelect,
   onCommitControl,
   onCommitControls,
@@ -5116,6 +5249,7 @@ function CanvasBlock({
 }) {
   var _a, _b, _c;
   const block = useMemo3(() => __spreadProps(__spreadValues({}, sourceBlock), { style: resolveBlockStyle(sourceBlock.style, definition) }), [sourceBlock, definition]);
+  const renderKey = useMemo3(() => ({ definition, templateEngine, variables }), [definition, templateEngine, variables]);
   const toolbarId = useId13();
   const [toolbarCollapsed, setToolbarCollapsed] = useState16(false);
   const dragData = { kind: "canvas" };
@@ -5177,7 +5311,7 @@ function CanvasBlock({
           {
             className: `ree-block-content${(definition == null ? void 0 : definition.inlineControl) ? " is-inline" : ""}`,
             style: canvasBlockStyle(block, body),
-            children: /* @__PURE__ */ jsx51(BlockErrorBoundary, { identity: sourceBlock, resetKey: definition, children: /* @__PURE__ */ jsx51(PluginCanvasContent, { block, body, definition, variables, selected, toolbarId, toolbarCollapsed, select: onSelect, onCommitControl, onCommitControls, onCommitStyle }) })
+            children: /* @__PURE__ */ jsx51(BlockErrorBoundary, { identity: sourceBlock, resetKey: renderKey, children: /* @__PURE__ */ jsx51(PluginCanvasContent, { block, body, definition, variables, templateEngine, selected, toolbarId, toolbarCollapsed, select: onSelect, onCommitControl, onCommitControls, onCommitStyle }) })
           }
         ),
         definition ? /* @__PURE__ */ jsx51("span", { className: "ree-block-badge", children: definition.title }) : null
@@ -5196,6 +5330,7 @@ function Canvas({
   dropTargetId,
   dropEdge,
   variables,
+  templateEngine,
   device,
   onSelect,
   onCommitControl,
@@ -5262,6 +5397,7 @@ function Canvas({
                           selected: block.id === selectedId,
                           dropEdge: dropTargetId === block.id ? dropEdge : null,
                           variables,
+                          templateEngine,
                           onSelect: () => onSelect(block.id),
                           onCommitControl,
                           onCommitControls,
@@ -5285,67 +5421,16 @@ function Canvas({
 
 // src/stage/preview/Preview.tsx
 import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef14 } from "react";
-
-// src/render/document-html.ts
-function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
-  const source = ensureEmailDocument(document);
-  const body = source.body;
-  const baseCss = emailBaseCss(body);
-  const rendered = source.blocks.map((node, index) => {
-    var _a;
-    const blockData = __spreadValues(__spreadValues({}, options.templateData), node.defaultData);
-    const block = blockToHtml(node, definitions, "email", {
-      resolveHtmlTemplate: options.resolveHtmlTemplates,
-      body,
-      variables: options.variables,
-      templateData: mergeTemplateData(
-        (_a = options.variables) != null ? _a : [],
-        Object.keys(blockData).length > 0 ? blockData : void 0
-      )
-    });
-    const gap = index < source.blocks.length - 1 ? spacerHtml(body.blockGap) : "";
-    return block + gap;
-  }).join("\n");
-  const { html: content, styles } = extractHeadStyles(rendered);
-  return [
-    "<!DOCTYPE html>",
-    '<html lang="en">',
-    "<head>",
-    '<meta charset="utf-8" />',
-    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
-    "<title>Email</title>",
-    styles,
-    "</head>",
-    `<body style="margin:0;padding:0;${baseCss};background-color:#ffffff;word-spacing:normal;">`,
-    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${baseCss};background-color:#ffffff;table-layout:fixed;">`,
-    "<tr>",
-    `<td align="center" style="padding:0;${baseCss};">`,
-    `<table role="presentation" align="center" width="${body.contentWidth}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${body.contentWidth}px;margin-left:auto;margin-right:auto;table-layout:fixed;">`,
-    "<tr>",
-    `<td style="box-sizing:border-box;${styleToCss(surfaceStyle(body))};">`,
-    content,
-    "</td>",
-    "</tr>",
-    "</table>",
-    "</td>",
-    "</tr>",
-    "</table>",
-    "</body>",
-    "</html>"
-  ].join("\n");
-}
-
-// src/stage/preview/Preview.tsx
 import { jsx as jsx53 } from "react/jsx-runtime";
-function Preview({ document, definitions, variables, device }) {
+function Preview({ document, config, variables, device }) {
   const frameRef = useRef14(null);
   const cleanupRef = useRef14();
   const html = useMemo4(
-    () => documentToHtml(document, definitions, {
+    () => config.toHtml(document, {
       resolveHtmlTemplates: true,
       variables
     }),
-    [document, definitions, variables]
+    [document, config, variables]
   );
   const observeContent = useCallback2(() => {
     var _a;
@@ -5491,6 +5576,7 @@ function Stage({
   onDeviceChange,
   onSelectBlock
 }) {
+  const previewKey = useMemo5(() => ({ config: session.config, variables: session.variables }), [session.config, session.variables]);
   const { targetId, dropEdge } = useEditorDragState();
   return /* @__PURE__ */ jsxs42("div", { className: "ree-col ree-col-center", children: [
     /* @__PURE__ */ jsx55(
@@ -5512,6 +5598,7 @@ function Stage({
         dropTargetId: targetId,
         dropEdge,
         variables: session.variables,
+        templateEngine: session.config.templateEngine,
         device,
         onSelect: onSelectBlock,
         onCommitControl: session.updateControl,
@@ -5520,11 +5607,11 @@ function Stage({
         onDuplicate: session.duplicateBlock,
         onRemove: session.removeBlock
       }
-    ) }) : /* @__PURE__ */ jsx55("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx55(BlockErrorBoundary, { identity: session.document, resetKey: session.definitions, children: /* @__PURE__ */ jsx55(
+    ) }) : /* @__PURE__ */ jsx55("div", { className: "ree-stage-view", children: /* @__PURE__ */ jsx55(BlockErrorBoundary, { identity: session.document, resetKey: previewKey, children: /* @__PURE__ */ jsx55(
       Preview,
       {
         document: session.document,
-        definitions: session.definitions,
+        config: session.config,
         variables: session.variables,
         device
       }
@@ -5694,9 +5781,59 @@ function createBlockNode(type, definitions) {
   };
 }
 
+// src/render/document-html.ts
+function documentToHtml(document, definitions = DEFAULT_BLOCKS, options = {}) {
+  const source = ensureEmailDocument(document);
+  const body = source.body;
+  const baseCss = emailBaseCss(body);
+  const rendered = source.blocks.map((node, index) => {
+    var _a;
+    const blockData = __spreadValues(__spreadValues({}, options.templateData), node.defaultData);
+    const block = blockToHtml(node, definitions, "email", {
+      resolveHtmlTemplate: options.resolveHtmlTemplates,
+      templateEngine: options.templateEngine,
+      body,
+      variables: options.variables,
+      templateData: mergeTemplateData(
+        (_a = options.variables) != null ? _a : [],
+        Object.keys(blockData).length > 0 ? blockData : void 0
+      )
+    });
+    const gap = index < source.blocks.length - 1 ? spacerHtml(body.blockGap) : "";
+    return block + gap;
+  }).join("\n");
+  const { html: content, styles } = extractHeadStyles(rendered);
+  return [
+    "<!DOCTYPE html>",
+    '<html lang="en">',
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    "<title>Email</title>",
+    styles,
+    "</head>",
+    `<body style="margin:0;padding:0;${baseCss};background-color:#ffffff;word-spacing:normal;">`,
+    `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="${baseCss};background-color:#ffffff;table-layout:fixed;">`,
+    "<tr>",
+    `<td align="center" style="padding:0;${baseCss};">`,
+    `<table role="presentation" align="center" width="${body.contentWidth}" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:${body.contentWidth}px;margin-left:auto;margin-right:auto;table-layout:fixed;">`,
+    "<tr>",
+    `<td style="box-sizing:border-box;${styleToCss(surfaceStyle(body))};">`,
+    content,
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</td>",
+    "</tr>",
+    "</table>",
+    "</body>",
+    "</html>"
+  ].join("\n");
+}
+
 // src/plugins/config.ts
 function buildEmailEditorConfig(options = {}) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const definitions = new Map(DEFAULT_BLOCKS.map((block) => [block.type, block]));
   const customTypes = /* @__PURE__ */ new Set();
   for (const plugin of (_a = options.plugins) != null ? _a : []) {
@@ -5711,16 +5848,21 @@ function buildEmailEditorConfig(options = {}) {
   for (const type of visibleBuiltins) if (!builtinTypes.has(type)) throw new Error(`Unknown builtin block: ${type}`);
   const all = Object.freeze([...definitions.values()].map((plugin) => snapshotValue(plugin)));
   const registered = new Map(all.map((plugin) => [plugin.type, plugin]));
+  const templateEngine = (_c = options.templateEngine) != null ? _c : defaultTemplateEngine;
   return Object.freeze({
+    templateEngine,
     definitions: all,
-    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_c = options.plugins) != null ? _c : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
+    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_d = options.plugins) != null ? _d : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
     pickImage: options.pickImage,
     createBlock: (type) => {
       const block = createBlockNode(type, all);
       if (!block) throw new Error(`Unknown block plugin: ${type}`);
       return block;
     },
-    toHtml: (document, htmlOptions) => documentToHtml(document, all, htmlOptions),
+    toHtml: (document, htmlOptions) => {
+      var _a2;
+      return documentToHtml(document, all, __spreadProps(__spreadValues({}, htmlOptions), { templateEngine: (_a2 = htmlOptions == null ? void 0 : htmlOptions.templateEngine) != null ? _a2 : templateEngine }));
+    },
     validate: (document) => validateDocument(document, all)
   });
 }
@@ -6067,10 +6209,10 @@ function EmailEditor(props) {
 }
 
 // src/plugins/useEmailEditorConfig.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function useEmailEditorConfig(options = {}) {
-  const { plugins, builtins, pickImage } = options;
-  return useMemo5(() => buildEmailEditorConfig({ plugins, builtins, pickImage }), [plugins, builtins, pickImage]);
+  const { plugins, builtins, pickImage, templateEngine } = options;
+  return useMemo6(() => buildEmailEditorConfig({ plugins, builtins, pickImage, templateEngine }), [plugins, builtins, pickImage, templateEngine]);
 }
 
 // src/shell/useEmailEditor.ts
@@ -6130,6 +6272,7 @@ export {
   createDimensionControls,
   createEmailDocument,
   createTypographyControls,
+  defaultTemplateEngine,
   defineBlock,
   documentToHtml,
   generateId,
@@ -6142,5 +6285,6 @@ export {
   useEmailEditor,
   useEmailEditorConfig,
   useEmailEditorState,
+  validateTemplate,
   variablesToTemplateData
 };

package/docs/advanced-examples.md

@@ -262,4 +262,8 @@ export const fragment = blockToHtml(block, undefined, "email", {
 });
 ```
 
-Complete documents shallow-merge variables → templateData → block.defaultData, with later data winning. Single-block rendering does not merge variables automatically; this example merges explicitly and uses the singular resolveHtmlTemplate option. Your application chooses the actual sending engine; preview only supports a subset of Go templates.
+Complete documents shallow-merge variables → templateData → block.defaultData, with later data winning. Preview and sending apply listed-variable dot normalization while preserving the stored template source. Single-block rendering does not merge variables automatically; this example merges explicitly and uses the singular resolveHtmlTemplate option. Your application chooses the actual sending engine. The default preview supports basic syntax; inject templateEngine for complete Go semantics.
+
+## Custom template engine and standalone preview
+
+See [Template preview and custom engines](https://github.com/standhigher/react-email-editor/blob/main/docs/template-engines.md) for supported syntax, adapter behavior and integration examples.

package/docs/advanced-examples.zh-CN.md

@@ -262,4 +262,8 @@ export const fragment = blockToHtml(block, undefined, "email", {
 });
 ```
 
-完整文档自动按顶层浅合并 `variables → templateData → block.defaultData`，后者优先。单区块不会自动合并变量；示例显式合并，并使用单数 `resolveHtmlTemplate`。真实发送端的模板引擎由应用决定，预览仅支持部分 Go template 语法。
+完整文档自动按顶层浅合并 `variables → templateData → block.defaultData`，后者优先。预览和发送会先按变量清单补点，存储中的模板原文保持不变；单区块不会自动合并变量，示例显式合并，并使用单数 `resolveHtmlTemplate`。真实发送端的模板引擎由应用决定；默认预览仅支持基础语法，完整 Go 语义通过 `templateEngine` 注入。
+
+## 自定义模板引擎与独立预览
+
+完整说明与接入示例见 [模板预览与自定义引擎](https://github.com/standhigher/react-email-editor/blob/main/docs/template-engines.zh-CN.md)。