Skip to content

Richer email editor: Write and Style modes, new blocks (#169) - #171

Open
clbotdev wants to merge 4 commits into
mainfrom
t3/implement-issue-169
Open

clbotdev wants to merge 4 commits into
mainfrom
t3/implement-issue-169

Conversation

@clbotdev

@clbotdev clbotdev commented Nov 1, 2026

Copy link
Copy Markdown
Contributor

Closes #169.

Redesigns the email editor around writing, following the design attached to the issue.

What changes

Write mode

  • The subject and preview text sit above the email, with an inbox preview.
  • Text is edited paragraph by paragraph:
    • Enter starts a new paragraph or list item; Backspace joins paragraphs.
    • Markdown shortcuts (#, ##, -, 1., >) turn a paragraph into a heading, list or quote.
    • Merge tags show as chips.
    • Text blocks are still stored as one markdown block each, so there are no data changes.
  • A format bar (⌘B/I/K), a / block menu, a {{ merge-tag menu, and drag or arrow-key reordering.
  • Clicking a block opens a compact popover (for example, label and URL for a button). Its full settings are one click away in Style mode.
  • Undo and redo work across the whole document.
  • A "Before you send" checklist covers the missing subject, preview text, broken links, missing alt text and social URLs, with one-click fallbacks for merge tags that may be blank.

Style mode

  • Two independently scrolling cards: the canvas, and the Email / Block / Tags panel.
  • Desktop, mobile, sample-data and dark-inbox previews, palette presets, and typography settings.

New blocks

  • spacer, columns, social and html.
  • conditional: a section shown to contacts with or without a tag. Marketing only; it renders as Liquid and fails closed.

For packages that embed the editor

  • New EmailEditor props: subject, onSubjectChange, variables, senderName, theme and defaultMode.
  • Blocks can define quickEdit for the popover.
  • Hosts can still add their own blocks and leave out any or all of ours; component tests cover this.

API

  • The new blocks are validated on write.
  • conditional in transactional content is rejected with conditional_not_allowed.
  • Updated: REST error docs, MCP tool text, and the editor docs.

Web

  • Template and sequence-email screens use the new editor; the template title moves into the top bar.
  • A broadcast's subject is saved as its sequence title, which is what the API sends.

Testing

  • bun run test passes in every workspace (0 failures), and lint passes.
  • New tests:
    • Unit tests for text items, markdown editing, history, checklist and inline markdown.
    • happy-dom component tests for host blocks and writing behaviour.
    • API tests for validation and real Liquid rendering of conditionals.
  • Tested by hand in a browser: writing, slash menu, popovers, drag, undo, checklist fallbacks, Style previews, and the save round trip for templates and broadcasts.
  • Not tested: "Send test" and a real send, because no ESP was configured locally.

Known rough edges (not in this PR)

  • A new broadcast's subject starts as the template name.
  • Nothing has focus when the editor opens.
  • While a paragraph with a link is being edited, the raw link markdown changes how lines wrap.
  • "Your sender name" shows when no ESP is set up.

…nd new blocks (#169)

Write mode edits text paragraph by paragraph with markdown shortcuts, a
format bar, a / block menu, {{ merge tags, undo/redo and a send checklist;
Style mode previews desktop, mobile, sample data and dark inboxes beside
the palette and block settings. Adds spacer, columns, social, html and
conditional blocks, and a quickEdit hook so host blocks get the compact
popover. Hosts can still add their own blocks and leave out any of ours.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Richer email editor

2 participants