Skip to content

docs: add a runnable Elements-to-editor workflow - #536

Open
adeelraza wants to merge 5 commits into
masterfrom
docs/elements-integration
Open

adeelraza wants to merge 5 commits into
masterfrom
docs/elements-integration

Conversation

@adeelraza

@adeelraza adeelraza commented Oct 4, 2026 •

Copy link
Copy Markdown
Contributor

Adds an optional Elements example to React Email Editor: generate a welcome email from React, edit it visually, persist the edited design, and export HTML or JSON. The README keeps the editor wrapper as its focus, with a short, self-contained Elements paragraph near the bottom.

Changes

  • Correct the quick start’s design-JSON guidance, gate export on readiness, show exported HTML, and clarify React 18 versus classic React 16.8/17 rendering.
  • Add a complete integration guide and lazy-loaded /elements demo. The demo saves/reopens edits locally, exposes the React source, and offers HTML/JSON inspection, copying, and downloading.
  • Recover from a missing export callback after 30 seconds; ignore late callbacks after timeout, retry, or unmount. Discard malformed or unsupported saved demo data while safely handling blocked storage.
  • Keep Context7 rules self-contained with a complete workflow and absolute guide URL. Validate against the official schema and keep each rule under 255 characters.
  • Document the built-package development workflow: root npm start alongside npm --prefix demo run dev, using Node 22 from .nvmrc.
  • Run demo checks on Node 22 and 25 in a separate path-filtered workflow. Main wrapper CI stays unfiltered, and demo CI relies on the existing prepare build during npm ci.
  • Compile only complete TSX snippets marked with <!-- check-docs -->; allow multiple examples and report failures at their original Markdown lines. Use jsdom’s browser storage in tests to avoid the Node 25 native-storage conflict.

Validation

All commands below passed on both Node 22.23.3 and Node 25.9.0, after clean installs and without disabling Node’s storage API:

npm ci
npm run lint
npm run typecheck
npm test
npm --prefix demo ci
npm --prefix demo run build
npm --prefix demo test
npm --prefix demo run test:docs

Each runtime passed 12 wrapper tests and 10 demo tests, the production demo build, and both marked documentation examples. Additional checks passed for changed-demo formatting, Context7 schema validation, whitespace, and documentation-checker fixtures (multiple independent examples, ignored fragments, correct error locations, and missing-marker errors).

The demo tests use the real Elements renderer and a mocked hosted-editor boundary. Storage is browser-local; production applications need their own persistence. The narrow as EmailDesign assertion bridges Elements 0.1.22’s current declarations and uses the same explanation in both examples. Wrapper source and published-package configuration are unchanged.

@codecov

codecov Bot commented Oct 4, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.43%. Comparing base (c5fc76b) to head (dacf25c).

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #536   +/-   ##
=======================================
  Coverage   97.43%   97.43%           
=======================================
  Files           2        2           
  Lines          78       78           
  Branches       20       20           
=======================================
  Hits           76       76           
  Partials        2        2           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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.

1 participant