Hi
" } }, + { + blockType: "conditional", + settings: { tag: "customer", has: false, content: "Hi" }, + }, + ]; + for (const block of valid) { + expect(() => + validateTemplateInputContent(email(block), "marketing"), + ).not.toThrow(); + } + + const invalid: Email["content"] = [ + { blockType: "spacer", settings: { height: "tall" } }, + { blockType: "columns", settings: { left: "a" } }, + { + blockType: "social", + settings: { links: [{ network: "x", url: "javascript:alert(1)" }] }, + }, + { blockType: "html", settings: {} }, + { + blockType: "conditional", + settings: { tag: 'a" %}{% endif %}', content: "Hi" }, + }, + ]; + for (const block of invalid) { + expect(() => + validateTemplateInputContent(email(block), "marketing"), + ).toThrowError(expect.objectContaining({ message: "invalid_email_content" })); + } + }); + + it("keeps conditional sections out of transactional content", () => { + const transactional: Email = { + ...defaultEmail, + content: [ + { + blockType: "conditional", + settings: { tag: "customer", content: "Hi" }, + }, + ], + }; + expect(() => + validateTemplateInputContent(transactional, "transactional"), + ).toThrowError(expect.objectContaining({ message: "conditional_not_allowed" })); + }); + it("rejects footer and reserved marketing variables transactionally", () => { expect(() => validateTemplateContent(content("Hello", "marketing"), "transactional"), diff --git a/apps/api/src/templates/validation.ts b/apps/api/src/templates/validation.ts index a022efdb..b29a30f0 100644 --- a/apps/api/src/templates/validation.ts +++ b/apps/api/src/templates/validation.ts @@ -2,6 +2,8 @@ import { emailContentInputSchema, type TemplatePurpose } from "@sendlit/api-cont import type { Email, EmailBlock } from "@sendlit/email-editor"; import { discoverRequiredTemplateVariables } from "../mail/render"; +// fontFamily is still accepted so older templates save, but the footer now +// uses the email's text font and ignores it. const FOOTER_SETTINGS = new Set([ "alignment", "fontFamily", @@ -122,6 +124,11 @@ export function validateTemplateContent( if (footerIndexes.length > 0) { throw new TemplateValidationError("footer_not_allowed"); } + // Conditional sections read the subscriber's tags; transactional sends have + // no subscriber. + if (contentBlocks.some((block) => block.blockType === "conditional")) { + throw new TemplateValidationError("conditional_not_allowed"); + } const reservedVariables = findReservedMarketingVariables(content); if (reservedVariables.length > 0) { throw new TemplateValidationError( diff --git a/apps/docs/content/docs/developers/errors.mdx b/apps/docs/content/docs/developers/errors.mdx index c15dc7b0..07e0019d 100644 --- a/apps/docs/content/docs/developers/errors.mdx +++ b/apps/docs/content/docs/developers/errors.mdx @@ -14,6 +14,7 @@ on the code rather than human-readable descriptions. | `422` | `template_conversion_requires_changes` | Marketing-only references remain outside the managed footer. | | `422` | `footer_required` | Marketing content does not contain exactly one final managed footer. | | `422` | `footer_not_allowed` | Transactional content contains a managed footer. | +| `422` | `conditional_not_allowed` | Transactional content contains a conditional section. | | `422` | `marketing_variables_not_allowed` | Transactional content references marketing-owned values. | Missing and conversion errors include the affected paths: diff --git a/apps/docs/content/docs/developers/mcp.mdx b/apps/docs/content/docs/developers/mcp.mdx index e9b0e97b..b3f50f09 100644 --- a/apps/docs/content/docs/developers/mcp.mdx +++ b/apps/docs/content/docs/developers/mcp.mdx @@ -109,7 +109,7 @@ sendable templates. Use `duplicate_template` to copy or safely convert one. Template and sequence-email content is validated as a complete SendLit email document on every write. The `style` must include `colors`, `typography.header`, `typography.text`, `typography.link`, `interactives`, and -`structure`; blocks must be one of text, link, image, separator, or footer. +`structure`; blocks must be one of text, link, image, separator, spacer, columns, social, html, conditional, or footer. A conditional section shows its content only to contacts with (or without) a tag, so it is marketing-only (`conditional_not_allowed` on transactional content). Metadata supports only optional `previewText` and an optional `utm` object with `source`, `medium`, and `campaign` strings. For AI-created content, start with `list_system_templates` and diff --git a/apps/docs/content/docs/email-blocks/email-editor.mdx b/apps/docs/content/docs/email-blocks/email-editor.mdx index fd0f53a8..92acc948 100644 --- a/apps/docs/content/docs/email-blocks/email-editor.mdx +++ b/apps/docs/content/docs/email-blocks/email-editor.mdx @@ -3,8 +3,8 @@ title: EmailEditor description: WYSIWYG editor for an email's content. --- -`EmailEditor` edits an `Email`'s block content (text, separator, image, link -by default) and reports changes via `onChange`; pass `blocks` to customize +`EmailEditor` edits an `Email`'s block content (text, link, image, separator, spacer, +columns, social, html and conditional by default) and reports changes via `onChange`; pass `blocks` to customize which block types are available. If all you need is the editor and renderer — no filters, triggers, or the @@ -32,6 +32,90 @@ function Example() { } ``` +### Writing, subject and merge tags + +The editor opens in **Write** mode: the subject and preview text sit above the +email like a document title, text is written inline as markdown (select text for +a format bar, type `/` for blocks, type `{{` for merge tags), and blocks can be +dragged by their handle. **Style** mode shows the email as readers will see it +(desktop or mobile, sample data, a dark inbox) with a panel for the palette, +typography and the selected block. A "Before you send" checklist flags a missing +subject or preview text, empty buttons and images without alt text. + +Pass the optional props below to turn those on: + +```tsx +