react-edit-to-html 1.1.8 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +26 -23
  2. package/dist/index.cjs +18 -18
  3. package/dist/index.js +627 -571
  4. package/dist/react-edit-to-html.css +1 -1
  5. package/dist/src/App.d.ts +1 -1
  6. package/dist/src/types.d.ts +8 -0
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -159,29 +159,32 @@ interface HtmlEditorProps {
159
159
 
160
160
  | Prop | Type | Default | Details |
161
161
  | :--- | :--- | :--- | :--- |
162
- | `tableSchemas` | `TableSchemaInfo[]` | `[]` | Configures dynamic table schemas. Supports top-level loop tables and nested sub-tables (`loop: true` with `columns`). |
163
- | `placeholders` | `PlaceholderItem[]` | `[]` | Controls variables shown in the Placeholders tab and mock values (`mockValue`) used by preview rendering. Left empty by default until passed as a prop. |
164
- | `defaultLogo` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `logo` image blocks. Accepts URL or base64 data URI. |
165
- | `defaultBanner` | `string` | Neutral SVG placeholder | Default image source when inserting/selecting `banner` image blocks. Accepts URL or base64 data URI. |
166
- | `headerTitle` | `string` | `'Layout Designer'` | Header title text displayed at the top of the editor. |
167
- | `headerSubtitle` | `string` | `'Interactive Document HTML Builder'` | Header subtitle text displayed below the title. |
168
- | `headerLogo` | `React.ReactNode` | Sparkles icon badge | Custom header logo node. If omitted, the built-in orange Sparkles badge is rendered. |
169
- | `templatingLanguage` | `'handlebars' \| 'liquid' \| 'scriban' \| ...` | `'handlebars'` | Sets initial loop-tag generation mode for table export. |
170
- | `loopSyntax` | `'for' \| 'foreach' \| 'each'` | `'each'` | Sets initial mapping keyword used by the loop-tag generator. |
171
- | `onChange` | `(blocks: CanvasBlock[]) => void` | `undefined` | Fired whenever canvas blocks state changes. |
172
- | `onExport` | `(html: string) => void` | `undefined` | Called when user clicks Export Template. If omitted, it automatically downloads `template.html`. |
173
- | `onExportPdf` | `(html: string) => void` | `undefined` | Called when user clicks Download PDF. If omitted, it defaults to triggering `window.print()` for a native PDF preview. |
174
- | `initialBlocks` | `CanvasBlock[]` | `[]` | Pass preloaded blocks to initialize the layout canvas (e.g. from previously exported session or DB templates). |
175
- | `defaultStyles` | `Record<string, Partial<TextStyle>>` | `{}` | Key-value dictionary providing pre-defined styling configurations for elements dropped or created in the canvas (e.g. `{ h1: { fontSize: '24px', fontWeight: 'bold' } }`). |
176
- | `showImportHtml` | `boolean` | `true` | Show/hide the "Import HTML" action button in the header. |
177
- | `showImportPdf` | `boolean` | `true` | Show/hide the "Import PDF" action button in the header. |
178
- | `showClearCanvas` | `boolean` | `true` | Show/hide the "Clear Canvas" utility button in the canvas toolbar. |
179
- | `showPreview` | `boolean` | `true` | Show/hide the "Live Preview" action button in the header. |
180
- | `showExport` | `boolean` | `true` | Show/hide the "Export Template" action button in the header. |
181
- | `showExportPdf` | `boolean` | `true` | Show/hide the "Download PDF" action button in the header. |
182
- | `customButtonStyles` | `object` | `{}` | Allows passing custom CSS inline style properties dynamically to any of the header actions. |
183
- | `customButtonClassNames` | `object` | `{}` | Allows passing custom CSS Tailwind class names dynamically to customize/override button class sheets. |
184
- | `customActionComponents` | `object` | `undefined` | Pass custom React components for header actions (`importHtml`, `importPdf`, `preview`, `exportPdf`, `export`). Render prop receives `{ onClick }`. |
162
+ | `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}}' }] }]}` |
163
+ | `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' }]}` |
164
+ | `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"` |
165
+ | `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"` |
166
+ | `headerTitle` | `string` | `'Layout Designer'` | Header title text displayed at the top of the editor.<br/>**Example:** `headerTitle="Invoice Template Builder"` |
167
+ | `headerSubtitle` | `string` | `'Interactive Document HTML Builder'` | Header subtitle text displayed below the title.<br/>**Example:** `headerSubtitle="Customize & Export Invoices"` |
168
+ | `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" />}` |
169
+ | `templatingLanguage` | `'handlebars' \| 'liquid' \| 'scriban' \| ...` | `'handlebars'` | Sets initial loop-tag generation mode for table export.<br/>**Example:** `templatingLanguage="liquid"` |
170
+ | `loopSyntax` | `'for' \| 'foreach' \| 'each'` | `'each'` | Sets initial mapping keyword used by the loop-tag generator.<br/>**Example:** `loopSyntax="foreach"` |
171
+ | `onChange` | `(blocks: CanvasBlock[]) => void` | `undefined` | Fired whenever canvas blocks state changes.<br/>**Example:** `onChange={(blocks) => console.log('Blocks:', blocks)}` |
172
+ | `onExport` | `(html: string) => void` | `undefined` | Called when user clicks Export Template. If omitted, it automatically downloads `template.html`.<br/>**Example:** `onExport={(html) => saveTemplate(html)}` |
173
+ | `onExportPdf` | `(html: string) => void` | `undefined` | Called when user clicks Download PDF. If omitted, it defaults to triggering `window.print()` for a native PDF preview.<br/>**Example:** `onExportPdf={(html) => downloadPdfFile(html)}` |
174
+ | `initialBlocks` | `CanvasBlock[]` | `[]` | Pass preloaded blocks to initialize the layout canvas.<br/>**Example:** `initialBlocks={[{ id: 'b1', type: 'h1', content: 'Title', style: { fontSize: '24px' } }]}` |
175
+ | `defaultStyles` | `Record<string, Partial<TextStyle>>` | `{}` | Key-value dictionary providing pre-defined styling configurations for elements dropped or created in the canvas.<br/>**Example:** `defaultStyles={{ h1: { fontSize: '24px', fontWeight: 'bold' } }}` |
176
+ | `showHeader` | `boolean` | `true` | Show or hide the top header bar branding. Visible by default (`true`).<br/>**Example:** `showHeader={false}` |
177
+ | `isTablesLoading` | `boolean` | `false` | Displays an animated skeleton loader inside the Dynamic Tables sidebar tab.<br/>**Example:** `isTablesLoading={true}` |
178
+ | `isPlaceholdersLoading` | `boolean` | `false` | Displays an animated skeleton loader inside the Variables Palette sidebar tab.<br/>**Example:** `isPlaceholdersLoading={true}` |
179
+ | `showImportHtml` | `boolean` | `true` | Show/hide the "Import HTML" action button in the toolbar.<br/>**Example:** `showImportHtml={true}` |
180
+ | `showImportPdf` | `boolean` | `true` | Show/hide the "Import PDF" action button in the toolbar.<br/>**Example:** `showImportPdf={false}` |
181
+ | `showClearCanvas` | `boolean` | `true` | Show/hide the "Clear Canvas" utility button in the canvas toolbar.<br/>**Example:** `showClearCanvas={true}` |
182
+ | `showPreview` | `boolean` | `true` | Show/hide the "Live Preview" action button in the toolbar.<br/>**Example:** `showPreview={true}` |
183
+ | `showExport` | `boolean` | `true` | Show/hide the "Export Template" action button in the toolbar.<br/>**Example:** `showExport={true}` |
184
+ | `showExportPdf` | `boolean` | `true` | Show/hide the "Download PDF" action button in the toolbar.<br/>**Example:** `showExportPdf={true}` |
185
+ | `customButtonStyles` | `object` | `{}` | Allows passing custom CSS inline style properties dynamically to any of the header/toolbar actions.<br/>**Example:** `customButtonStyles={{ export: { backgroundColor: '#10b981' } }}` |
186
+ | `customButtonClassNames` | `object` | `{}` | Allows passing custom CSS Tailwind class names dynamically to customize/override button class sheets.<br/>**Example:** `customButtonClassNames={{ export: 'bg-emerald-600 hover:bg-emerald-700' }}` |
187
+ | `customActionComponents` | `object` | `undefined` | Pass custom React components for toolbar actions (`importHtml`, `importPdf`, `preview`, `exportPdf`, `export`). Render prop receives `{ onClick }`.<br/>**Example:** `customActionComponents={{ export: ({ onClick }) => <button onClick={onClick}>Save</button> }}` |
185
188
 
186
189
  ### Notes on Table & Sub-Table Types
187
190