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

package/CHANGELOG.md

@@ -4,6 +4,45 @@ 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.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 {};