@one-million-lines/email-builder 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -4,6 +4,87 @@ All notable changes to this package are documented here.
 This project adheres to [Semantic Versioning](https://semver.org/) and the
 [Keep a Changelog](https://keepachangelog.com/) format.
 
+## [0.6.0] — 2026-09-03
+
+### Added
+
+- **8 new email templates** covering core ecommerce lifecycle flows:
+  - `back-in-stock` — urgency-first product return notification
+  - `price-drop-alert` — 3-product grid with old/new price comparison
+  - `post-purchase-follow-up` — warm thank-you, usage tips, soft review request
+  - `review-request` — ⭐ prompt with founder personal note and CTA
+  - `replenishment-reminder` — "Running low?" reorder with subscription nudge
+  - `vip-early-access` — exclusive luxury-themed 24h early access
+  - `birthday-reward` — personalised (uses `{user.firstname}` merge tag) birthday voucher
+  - `win-back` — re-engagement with "what's new" grid and best offer
+- **HTML preview files** for all 16 templates generated via new script
+  (`scripts/generate-previews.mjs`) to `examples/previews/<id>.html`.
+  Each preview wraps the email HTML in a minimal browser shell with a sticky
+  info bar (template name, category, description).
+- `"generate:previews"` npm script: `npm run build && node scripts/generate-previews.mjs`.
+
+### Fixed
+
+- **Text selection loss** — `TextRender` in `Canvas.tsx` no longer uses
+  `dangerouslySetInnerHTML`. innerHTML is now synced from the store **only
+  when the element is not focused**, preventing React from clobbering
+  in-progress text selections or cursor positions during parent re-renders.
+  This was the root cause of "cursor jumps to start of block" when editing.
+- **Bold button missing** in the rich-text toolbar — replaced lucide `Bold`,
+  `Italic`, `Underline` icons with styled `<b>B</b>`, `<i>I</i>`, `<u>U</u>`
+  text to avoid icon availability issues and to match toolbar conventions.
+- **Link insertion** (`LinkPopover`) now correctly focuses the contenteditable
+  element and restores the saved selection range before calling `insertHTML`,
+  so links are inserted at the correct position.
+
+### Changed
+
+- **Right sidebar** — added an **expand/narrow** toggle button (◁▷) next to
+  the existing collapse button. The sidebar now has three states:
+  - **Collapsed**: 6px strip with re-open button
+  - **Normal**: 288px (w-72) — default
+  - **Expanded**: 576px (w-[576px]) — double width, useful for complex panels
+  Smooth CSS transition between states.
+
+## [0.5.0] — 2026-09-03
+
+### Added
+
+- **Inline rich-text toolbar** — a floating, selection-aware formatting bar
+  appears whenever the cursor is inside a text element in the canvas.
+  - **Formatting**: Bold, Italic, Underline — toggle buttons that reflect the
+    current selection state via `queryCommandState`.
+  - **Font family** — email-safe font stacks: Arial, Georgia, Tahoma, Trebuchet
+    MS, Verdana, Courier New, Times New Roman. Wraps the selection in
+    `<span style="font-family:...">`.
+  - **Font size** — 10–48 px presets. Wraps the selection in
+    `<span style="font-size:...px">`.
+  - **Text colour** — 21 preset swatches plus a custom hex/name input. Uses
+    `styleWithCSS` + `execCommand('foreColor')` to produce
+    `<span style="color:...">`.
+  - **Insert link** — inline popover with a URL input and a special-link role
+    dropdown (Unsubscribe, View in browser, Manage preferences, User profile).
+    Wraps the selection in `<a href="..." data-link-type="...">` or inserts a
+    standalone linked anchor when nothing is selected.
+  - **Emoji picker** — 44 curated emojis in a compact grid; inserts at cursor.
+  - **Merge-tag inserter** — when `mergeTags` are configured, a tag dropdown
+    appears in the toolbar; selecting a tag inserts `{attribute}` at the cursor.
+  - The toolbar uses `onMouseDown + preventDefault` on all buttons so the
+    contenteditable never loses focus during formatting.
+  - New files: `src/editor/RichTextToolbar.tsx`, `src/editor/richTextState.ts`.
+
+### Changed
+
+- **Right sidebar — Text element panel** simplified. Removed per-selection
+  properties (font family, font size, font weight, colour, link URL, link role,
+  merge-tag inserter) which are now handled by the inline toolbar. The sidebar
+  now only shows block-level settings: default alignment, line height, letter
+  spacing, padding, and visibility (hide on mobile / desktop).
+- `TextRender` in `Canvas.tsx` now registers/unregisters itself with
+  `useRichTextStore` on focus/blur, supplies a `data-email-text` attribute for
+  toolbar targeting, and prevents click events from bubbling when the element is
+  actively being edited (so caret repositioning clicks don't deselect the element).
+
 ## [0.4.0] — 2026-09-03
 
 ### Added

package/dist/editor/RichTextToolbar.d.ts

@@ -0,0 +1 @@
+export declare function RichTextToolbar(): import("react").JSX.Element | null;

package/dist/editor/richTextState.d.ts

@@ -0,0 +1,7 @@
+interface RichTextState {
+    /** The currently focused contenteditable element, or null. */
+    activeEl: HTMLElement | null;
+    setActiveEl: (el: HTMLElement | null) => void;
+}
+export declare const useRichTextStore: import('zustand').UseBoundStore<import('zustand').StoreApi<RichTextState>>;
+export {};