Skip to content

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

Open
ogp-weeloong wants to merge 1 commit into
claude/substitute-for-previewfrom
claude/preview-button-menubar
Open

[EMAIL-PREVIEW-3] PLU-386: Add "Preview" button to TipTap toolbar#1659
ogp-weeloong wants to merge 1 commit into
claude/substitute-for-previewfrom
claude/preview-button-menubar

Conversation

@ogp-weeloong
Copy link
Copy Markdown
Contributor

@ogp-weeloong ogp-weeloong commented May 29, 2026 •
edited
Loading

Problem

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

High-level Approach

See #1652 for more details.

This PR

  • Adds a right-aligned preview button to the tiptap editor top bar.
  • Enables email preview for postman's email action

IMPORTANT

Feel free to comment on the best UX treatment for the preview button. I had a few ideas in mind:

  1. In editortop bar, as a right aligned button with a minimum left margin to keep it visually separate from the text formatting controls.
  2. In editor bottom bar or FAB in the editor - Rejected as bottom bar is wasting real estate, while FAB might be irritating if it floats over the users' content.
  3. As a split button in the "test step" button (like formsg) - Rejected as I worry about discoverability; its unlikely users will try this out.

Beedios

Desktop

Screen Recording 2026-06-02 at 2.34.05 PM.mov (uploaded via Graphite)

Mobile
NOTE: Our mobile UX needs some love...

Screen Recording 2026-06-02 at 2.51.19 PM.mov (uploaded via Graphite)

Tests

  • Check that i can preview emails in a variety of clients via the preview button
  • Check that preview is accurate (tested on outlook and gmail)
  • Check that I can still view email with actual values past executions
  • [Regression test] Check that emails from published pipes have variables substituted correctly

@ogp-weeloong Graphite App
Copy link
Copy Markdown
Contributor Author

ogp-weeloong commented May 29, 2026 •
edited
Loading

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

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.

This was referenced May 29, 2026
Open
Closed
Open
Open
@ogp-weeloong ogp-weeloong changed the title feat: render Preview email button in TipTap toolbar [EMAIL-PREVIEW-3] PLU-386: Add "Preview" button to TipTap toolbar May 29, 2026
@linear
Copy link
Copy Markdown

linear Bot commented May 29, 2026

PLU-386

@ogp-weeloong @claude
feat: render Preview email button in TipTap toolbar
5a30fef 
Plumb previewType through InputCreator -> RichTextEditor -> Editor ->
MenuBar so the TipTap toolbar can render a kind-specific Preview button
when the field opts in. The button matches the toolbar's icon-button
style (eye icon with kind-specific tooltip). Clicking it substitutes
editor.getHTML() through substituteForPreview and opens
EmailPreviewModal.

.editor__header flips to flex layout so the button can be end-aligned
with marginLeft: auto.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@ogp-weeloong ogp-weeloong marked this pull request as ready for review June 2, 2026 06:56
@ogp-weeloong ogp-weeloong requested a review from a team as a code owner June 2, 2026 06:57
@ogp-weeloong ogp-weeloong force-pushed the claude/substitute-for-preview branch from bb896d2 to adda098 Compare June 2, 2026 06:58
@ogp-weeloong ogp-weeloong force-pushed the claude/preview-button-menubar branch from 3453746 to 5a30fef Compare June 2, 2026 06:58
@ogp-weeloong ogp-weeloong mentioned this pull request Jun 2, 2026
Open
kevinkim-ogp
kevinkim-ogp approved these changes Jun 8, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@kevinkim-ogp kevinkim-ogp left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

preview button at the menu bar makes sense since it allows users the preview without sending anything!

small issue where new lines in the editor are not being displayed properly and different font in the preview modal (see screenshots), other than that lgtm!

Screenshot 2026-06-08 at 11.19.20 AM.png
Screenshot 2026-06-08 at 11.20.08 AM.png

Comment thread packages/frontend/src/components/RichTextEditor/PreviewButton.tsx
</button>
</Tooltip>
<Suspense fallback={null}>
{isOpen && renderPreviewer({ isOpen, onClose, html })}
Copy link
Copy Markdown
Contributor

@kevinkim-ogp kevinkim-ogp Jun 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we render the modal unconditionally and let the isOpen prop control the visibility?

Comment thread packages/frontend/src/components/EmailPreviewModal/index.tsx
borderRadius="md"
bg={isSelected ? 'primary.100' : undefined}
_hover={{ bg: isSelected ? undefined : 'grey.100' }}
aria-current={isSelected || undefined}
Copy link
Copy Markdown
Contributor

@kevinkim-ogp kevinkim-ogp Jun 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be aria-checked?

aria-checked={isSelected}
role="radio"

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

Reviewers

@kevinkim-ogp kevinkim-ogp kevinkim-ogp approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ogp-weeloong @kevinkim-ogp