From 37dbe7dda4d1a3659c7ae986780457a960434989 Mon Sep 17 00:00:00 2001 From: Adeel Raza Date: Sun, 4 Oct 2026 09:47:53 +0400 Subject: [PATCH 1/5] docs: add a runnable Elements-to-editor workflow --- .github/workflows/ci.yml | 19 + README.md | 58 +- context7.json | 3 +- demo/README.md | 41 + demo/index.tsx | 10 + demo/package-lock.json | 1701 +++++++++++++++++++++++++++-- demo/package.json | 13 +- demo/scripts/check-docs.mjs | 49 + demo/src/dashboard/DesignEdit.tsx | 8 +- demo/src/elements/index.tsx | 188 ++++ demo/src/elements/storage.ts | 29 + demo/src/elements/style.css | 114 ++ demo/src/elements/welcome.tsx | 40 + demo/src/example/index.tsx | 49 +- demo/test/elements.test.tsx | 204 ++++ demo/tsconfig.json | 9 +- demo/vite-env.d.ts | 1 + demo/vite.config.ts | 4 +- demo/vitest.config.ts | 8 + docs/react-elements.md | 121 ++ 20 files changed, 2534 insertions(+), 135 deletions(-) create mode 100644 demo/README.md create mode 100644 demo/scripts/check-docs.mjs create mode 100644 demo/src/elements/index.tsx create mode 100644 demo/src/elements/storage.ts create mode 100644 demo/src/elements/style.css create mode 100644 demo/src/elements/welcome.tsx create mode 100644 demo/test/elements.test.tsx create mode 100644 demo/vite-env.d.ts create mode 100644 demo/vitest.config.ts create mode 100644 docs/react-elements.md diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index ba9a8b25e..39c689dfe 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -26,6 +26,25 @@ jobs: token: ${{ secrets.CODECOV_TOKEN }} fail_ci_if_error: false + demo: + name: Elements demo and documentation examples + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v7 + - uses: actions/setup-node@v7 + with: + node-version: 22 + cache: npm + cache-dependency-path: | + package-lock.json + demo/package-lock.json + - run: npm ci + - run: npm run build + - run: npm --prefix demo ci + - run: npm --prefix demo run build + - run: npm --prefix demo test + - run: npm --prefix demo run test:docs + test: name: Test (Node ${{ matrix.node }}, React ${{ matrix.react }}) runs-on: ubuntu-latest diff --git a/README.md b/README.md index 6f292acc7..4dcd5462b 100644 --- a/README.md +++ b/README.md @@ -54,40 +54,42 @@ See the [CHANGELOG](CHANGELOG.md) for the full list. Require the EmailEditor component and render it with JSX: ```tsx -import React, { useRef } from 'react'; +import { useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; +import EmailEditor, { + type EditorRef, + type EmailEditorProps, +} from 'react-email-editor'; -import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor'; - -const App = (props) => { +const App = () => { const emailEditorRef = useRef(null); + const [ready, setReady] = useState(false); + const [html, setHtml] = useState(''); const exportHtml = () => { - const unlayer = emailEditorRef.current?.editor; - - unlayer?.exportHtml((data) => { - const { design, html } = data; - console.log('exportHtml', html); + if (!ready) return; + emailEditorRef.current?.editor?.exportHtml((data) => { + setHtml(data.html); + // Persist data.design to reopen it later with editor.loadDesign(data.design). }); }; - const onReady: EmailEditorProps['onReady'] = (unlayer) => { - // editor is ready - // you can load your template here; - // the design json can be obtained by calling - // unlayer.loadDesign(callback) or unlayer.exportHtml(callback) - // or generated from React code with @unlayer/react-elements (renderToJson) - // const templateJson = { DESIGN JSON GOES HERE }; - // unlayer.loadDesign(templateJson); + const onReady: EmailEditorProps['onReady'] = (editor) => { + setReady(true); + // editor is now ready for calls such as saveDesign and loadDesign. + console.log('Editor ready', editor); + // Load an existing design here: editor.loadDesign(savedDesign). + // Obtain design JSON from editor.saveDesign(callback), editor.exportHtml(callback), + // or @unlayer/react-elements' renderToJson(). loadDesign accepts JSON, not a callback. }; return (
-
- -
- + + {html &&