react-email-studio 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [3.1.1] - 2026-04-30
+
+### Added
+
+- **Loading state for `loadJson`**: `ReactEmailEditor` shows a full-workspace overlay (spinner + localized “Loading design…”) while a design JSON is applied, including invalid-parse early exit.
+- **Lossless studio JSON**: document `settings._reactEmailStudio.editorSettings` stores a snapshot of editor settings; each row may include `_reactEmailStudio.row` (row fields without `cells`) for presets, ratios, `columnStyles`, etc.
+- **i18n**: `loadingDesign` string in `en`, `fr`, `de`, `es`.
+
+### Fixed
+
+- **Settings round-trip**: exported document `rtl` / `responsive` now follow `pageRtl` / `pageResponsive` so normalization no longer overwrites them from stale canonical defaults.
+- **Social blocks**: canonical `content.networks` includes URLs from `socialUrls` even when not listed in `networks`; import supports `networks` as an array plus `content.socialUrls`; `styles.padding` is exported/imported; legacy flat-merge skips `socialUrls` where appropriate.
+- **Nested layout `columnStyles`**: importing a layout whose `props.cells` is hydrated no longer drops `columnStyles` that exist only on `content` (merge after hydrate).
+- **Nested layout inspector**: `LayoutRowEditor` background-step UI (row + per-column) re-syncs when `bgColor` / `bgImage` / `bgGradient` / `columnStyles` change, not only when `row.id` changes.
+- **Block palette (click)**: new blocks go to the focused column, a focused nested column, column 0 of a row selected in the rails, or **first row / first column** by default (instead of always column 0 of the last row).
+
+### Notes for integrators
+
+- Prefer **`loadJson` / `exportJson`** (or `designToEmailDocument` + `normalizeEmailDesignInput`) for full fidelity; blocks may include a `props` object alongside `content` / `styles` for editor-only fields.
+- **`jsonToHtml`** nested layouts already receive `columnStyles` when present on hydrated blocks.

package/README.md

@@ -5,6 +5,10 @@
 [![npm](https://img.shields.io/npm/v/react-email-studio.svg)](https://www.npmjs.com/package/react-email-studio)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
+## Release notes
+
+Version history and migration hints: **[CHANGELOG.md](./CHANGELOG.md)** (also included in the published npm tarball under `node_modules/react-email-studio/CHANGELOG.md`).
+
 ---
 
 ## Features
@@ -13,7 +17,7 @@
 - **Page & content** backgrounds (solid, gradient, image), responsive preview
 - **Undo / redo**, zoom, device preview modal
 - **Internationalized** UI strings (`en`, `fr`, `de`, `es`)
-- **Merge tags** support for templates
+- **Template placeholders** (e.g. `{{first_name}}`) can be typed directly in HTML / text blocks
 - Tree-shakeable ESM + CJS, TypeScript types
 
 ---

package/TUTORIAL.md

@@ -134,7 +134,7 @@ Adjust the import path to match your structure.
 | Prop | Type | Description |
 |------|------|-------------|
 | `ref` | `ReactEmailEditorRef` | Imperative API: `loadJson`, `exportJson` (see below). |
-| `options` | `ReactEmailEditorOptions` | Editor chrome, locale, merge tags, feature flags, etc. (see §6). |
+| `options` | `ReactEmailEditorOptions` | Editor chrome, locale, feature flags, etc. (see §6). |
 | `onUpload` | `(file: File) => Promise<string>` | Required for good image/video UX; return public URL string. |
 | `onLoad` / `onReady` | `(api: ReactEmailEditorRef) => void` | Fired once with the same API object; use to call `loadJson` with server data. |
 | `hideTemplates` | `boolean` | Hide built-in templates UI; use when you only load via `loadJson`. |
@@ -163,7 +163,6 @@ Adjust the import path to match your structure.
 | **`customCSS`** | Extra `<style>` content for generated HTML (preview / export parity). |
 | **`appearance`** | `theme`, `colors`, `customThemes` — chrome theming. |
 | **`locale`** | `"en"` \| `"fr"` \| `"de"` \| `"es"` for UI strings. |
-| **`mergeTags`** | `{ name: string; value: string }[]` for rich-text insertion. |
 | **`features.autoSave`** | `{ enabled?: boolean; interval?: number }` — UI autosave hint. |
 | **`tools`** | `{ [blockType: string]: { enabled?: boolean } }` — toggle blocks. |
 | **`blockLibrary`** | `groupHeadings`, `paletteGroupLabels` — library copy overrides. |