react-edit-to-html 1.2.0 → 1.2.1

package/README.md

@@ -1,9 +1,13 @@
 # react-edit-to-html
 
-[![Edit react-edit-to-html](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/react-edit-to-html-forked-tfsm4n)
-
 `react-edit-to-html` is a premium, highly customizable, responsive React drag-and-drop template builder for creating dynamic HTML layouts. It is perfect for generating backend templates (invoices, shipping lists, email templates, billing letters, reports, etc.) that get populated with dynamic data.
 
+## 🚀 Live Online Demo
+
+Click the button below to try out `react-edit-to-html` live on CodeSandbox:
+
+[![Edit react-edit-to-html](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/react-edit-to-html-forked-tfsm4n)
+
 The editor allows you to structure tables, images, text, and barcodes, preview them in real time with custom mock values, configure loop templates for multiple template engines (Handlebars, Liquid, Scriban, .NET, C#), and export clean, production-ready HTML files.
 
 ---
@@ -160,12 +164,15 @@ interface HtmlEditorProps {
 | Prop | Type | Default | Details |
 | :--- | :--- | :--- | :--- |
 | `tableSchemas` | `TableSchemaInfo[]` | `[]` | Configures dynamic table schemas. Supports top-level loop tables and nested sub-tables (`loop: true` with `columns`).<br/>**Example:** `tableSchemas={[{ tableName: 'items', loop: true, columns: [{ columnName: 'SKU', placeholder: '{{item.sku}}' }] }]}` |
-| `placeholders` | `PlaceholderItem[]` | `[]` | Controls variables shown in the Placeholders tab and mock values (`mockValue`) used by preview rendering.<br/>**Example:** `placeholders={[{ label: 'User Name', placeholder: '{{user.name}}', mockValue: 'John Doe' }]}` |
+| `placeholders` | `PlaceholderItem[]` | `[]` | Controls variables shown in the Placeholders tab. Left empty by default until passed as a prop.<br/>**Example:** `placeholders={[{ label: 'User Name', placeholder: '{{user.name}}' }]}` |
 | `defaultLogo` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `logo` image blocks. Accepts URL or base64 data URI.<br/>**Example:** `defaultLogo="https://example.com/logo.png"` |
 | `defaultBanner` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `banner` image blocks. Accepts URL or base64 data URI.<br/>**Example:** `defaultBanner="https://example.com/banner.png"` |
 | `headerTitle` | `string` | `'Layout Designer'` | Header title text displayed at the top of the editor.<br/>**Example:** `headerTitle="Invoice Template Builder"` |
 | `headerSubtitle` | `string` | `'Interactive Document HTML Builder'` | Header subtitle text displayed below the title.<br/>**Example:** `headerSubtitle="Customize & Export Invoices"` |
 | `headerLogo` | `React.ReactNode` | Sparkles icon badge | Custom header logo node. If omitted, the built-in orange Sparkles badge is rendered.<br/>**Example:** `headerLogo={<img src="/logo.png" className="h-6 w-6" />}` |
+| `typographySizes` | `Array<{ label: string; value: string }>` | Standard px list | Custom list of font sizes available in the formatting panel dropdown.<br/>**Example:** `typographySizes={[{ label: '14px', value: '14px' }, { label: '20px', value: '20px' }]}` |
+| `typographyWeights` | `Array<{ label: string; value: string }>` | Standard weights list | Custom list of font weights available in the formatting panel dropdown.<br/>**Example:** `typographyWeights={[{ label: 'Normal', value: '400' }, { label: 'Bold', value: '700' }]}` |
+| `typographyFonts` | `Array<{ label: string; value: string }>` | Default fonts list | Custom list of font families available in the typography font selector dropdown.<br/>**Example:** `typographyFonts={[{ label: 'Inter', value: 'Inter, sans-serif' }]}` |
 | `templatingLanguage` | `'handlebars' \| 'liquid' \| 'scriban' \| ...` | `'handlebars'` | Sets initial loop-tag generation mode for table export.<br/>**Example:** `templatingLanguage="liquid"` |
 | `loopSyntax` | `'for' \| 'foreach' \| 'each'` | `'each'` | Sets initial mapping keyword used by the loop-tag generator.<br/>**Example:** `loopSyntax="foreach"` |
 | `onChange` | `(blocks: CanvasBlock[]) => void` | `undefined` | Fired whenever canvas blocks state changes.<br/>**Example:** `onChange={(blocks) => console.log('Blocks:', blocks)}` |