[EMAIL-PREVIEW-1] PLU-386: add TFieldPreviewType and previewType to IFieldRichText by ogp-weeloong · Pull Request #1652 · opengovsg/plumber

ogp-weeloong · 2026-05-28T08:07:19Z

Problem

We want pipe owners to be able to preview their email across a variety of email clients (Outlook, Yahoo etc).

High-level Approach

We will use the emaillens library to generate the preview. This is a front-end only change; high level approach is

Introduce the concept of "previewing" a rich text field by adding a previewType property in the IRichTextField type.
1. When this is specified, we will:
  1. Add a new "Preview" button to the field itself (to preview live rich text content)
  2. Update the "View" button in the corresponding row of the "Previous Result" table (to view formatted dataOut for that run).
2. When clicked, the front end substitutes variables in the rich text content with test / dataOut data, and loads the appropriate react component to render it
Add a email preview type.
1. This pops up a modal which supports choosing between several email clients; it calls into the emaillens library with the chosen client to generate the client's HTML

IMPORTANT

The emailens library is technically meant to be run on a node backend. However, I want this to run on the frontend to reduce latency and save costs.

It turns out you can run this on the browser as long as we don't need the features [see github] that use node stuff:

@emailens/engine/server — imports dns (the checkDeliverability + SpamAssassin stuff).
@emailens/engine/compile — JSX/MJML/Maizzle compilation, which uses node:vm / isolated-vm / mjml etc.

I added a vite safeguard to prevent us from from doing so. In the event that emailens updates the code to make this impossible, we can always add a REST API to do this (non-ideal)

This PR

Creates the previewType field
Creates the email value for preview type and also a new PreviewEmailModal for previewing emails in selected clients

Tests

Only regression tests as this is a no-op.

Check that I can still compose postman emails in the rich text editor
Check that I can still view email from past executions

Full test in later PR

ogp-weeloong · 2026-05-28T08:07:39Z

[EMAIL-PREVIEW-2] PLU-386: Enable RichTextEditor to substitute variables #1653 : 2 dependent PRs (#1654 , #1659 )
[EMAIL-PREVIEW-1] PLU-386: add TFieldPreviewType and previewType to IFieldRichText #1652 👈 (View in Graphite)
develop-v2

How to use the Graphite Merge Queue

Add the label lfg to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

linear · 2026-05-28T08:17:16Z

PLU-386

Adds a narrow union type marker (`'email'` for now) plus an optional `previewType` field on rich-text fields. This will let downstream code opt a rich-text field into a kind-specific preview modal in FlowStepTestController without churning the schema for future preview kinds (e.g. SMS). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Installs @emailens/engine in the frontend workspace; the slice we use (transformForClient) only needs cheerio + css-tree which are browser-safe. The engine declares engines.node: ">=18", which is a deliberate tech-debt acceptance. To guard against future regressions where the engine — or any other dep — starts importing a node-only module, add a Rollup onwarn handler in both vite.config.ts and vite.config.lib.ts that promotes the "has been externalized for browser compatibility" warning (and MISSING_NODE_BUILTINS) into a hard build error. The comment + error message name @emailens/engine explicitly so future readers understand why this guardrail exists. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Adds a self-contained, lazy-loaded modal that renders an HTML email body through @emailens/engine's transformForClient for one of four target clients (Outlook Classic, Gmail, Apple Mail, Yahoo Mail), defaulting to Outlook Classic (Word engine — worst-case rendering). - index.tsx: React.lazy wrapper + Suspense boundary so consumers don't pay the engine's bundle cost up front. - EmailPreviewModal.tsx: real implementation. Chakra Flex (fixed-width left rail of client options, flex="1" iframe on the right). The iframe uses sandbox="" (no allow-* flags) to block scripts, forms, and navigation in user HTML. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

kevinkim-ogp

other than a few minor things, lgtm!
can still create and send email, can still view past emails

kevinkim-ogp · 2026-06-05T02:53:34Z

+  )
+
+  const transformed = useMemo(() => {
+    return transformForClient(html, selectedClientId).html


should this be wrapped in a try/catch: if it so happens to throw an error due to malformed HTML, the preview might break?
also do we want to only transform when the isOpen is true?

kevinkim-ogp · 2026-06-05T02:54:37Z

+      // Guardrail for the @emailens/engine tech-debt: the engine declares
+      // `engines.node: ">=18"` but the slice we use (transformForClient) is
+      // browser-safe. If a future version of @emailens/engine — or any other
+      // dep — starts importing a node-only module (fs, path, crypto, etc.),
+      // Vite externalizes it and emits a warning. We promote that warning to
+      // a hard error so CI catches the regression instead of silently
+      // shipping a broken bundle.
+      onwarn(warning, defaultHandler) {
+        const msg = warning.message ?? ''
+        if (
+          msg.includes('has been externalized for browser compatibility') ||
+          warning.code === 'MISSING_NODE_BUILTINS'
+        ) {
+          throw new Error(
+            `[vite-guardrail] A node-only import leaked into the frontend bundle. ` +
+              `This guardrail exists to catch @emailens/engine (and similar libraries) ` +
+              `pulling in backend-only modules. Original warning: ${msg}`,
+          )
+        }
+        defaultHandler(warning)
+      },


nit: do we want to extract this to a shared helper since its the same thing in both vite.config.lib.ts and vite.config.ts ?

This was referenced May 28, 2026

[EMAIL-PREVIEW-4] PLU-386: Enable email previews in appropriate previous result data #1655

Open

feat: extend useTestDetails with previewAction #1654

Closed

ogp-weeloong mentioned this pull request May 28, 2026

[EMAIL-PREVIEW-2] PLU-386: Enable RichTextEditor to substitute variables #1653

Open

2 tasks

ogp-weeloong changed the title ~~feat: add TFieldPreviewType and previewType to IFieldRichText~~ [EMAIL-PREVIEW-1] PLU-386: add TFieldPreviewType and previewType to IFieldRichText May 28, 2026

ogp-weeloong and others added 2 commits May 29, 2026 10:40

ogp-weeloong force-pushed the claude/email-preview-modal branch from 13c6512 to ba98c73 Compare May 29, 2026 03:16

ogp-weeloong mentioned this pull request May 29, 2026

[EMAIL-PREVIEW-3] PLU-386: Add "Preview" button to TipTap toolbar #1659

Open

4 tasks

ogp-weeloong marked this pull request as ready for review June 2, 2026 06:38

ogp-weeloong requested a review from a team as a code owner June 2, 2026 06:38

ogp-weeloong force-pushed the claude/email-preview-modal branch from ba98c73 to aa87e38 Compare June 2, 2026 06:58

ogp-weeloong mentioned this pull request Jun 2, 2026

[EMAIL-PREVIEW-5] nit stuff #1668

Open

kevinkim-ogp approved these changes Jun 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EMAIL-PREVIEW-1] PLU-386: add TFieldPreviewType and previewType to IFieldRichText#1652

[EMAIL-PREVIEW-1] PLU-386: add TFieldPreviewType and previewType to IFieldRichText#1652
ogp-weeloong wants to merge 3 commits into
develop-v2from
claude/email-preview-modal

ogp-weeloong commented May 28, 2026 •

edited

Loading

Uh oh!

ogp-weeloong commented May 28, 2026 •

edited

Loading

Uh oh!

linear Bot commented May 28, 2026

Uh oh!

kevinkim-ogp left a comment

Uh oh!

kevinkim-ogp Jun 5, 2026

Uh oh!

kevinkim-ogp Jun 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ogp-weeloong commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

High-level Approach

IMPORTANT

This PR

Tests

Uh oh!

ogp-weeloong commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

linear Bot commented May 28, 2026

Uh oh!

kevinkim-ogp left a comment

Choose a reason for hiding this comment

Uh oh!

kevinkim-ogp Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

kevinkim-ogp Jun 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ogp-weeloong commented May 28, 2026 •

edited

Loading

ogp-weeloong commented May 28, 2026 •

edited

Loading