@bolttech/template-editor 0.0.13 → 0.1.0

package/README.md

@@ -9,7 +9,7 @@ A powerful, drag-and-drop visual template editor built with React, TypeScript, a
 - **🔧 Variable System**: Dynamic content with Handlebars-style variables (`{{variable}}`)
 - **🧱 Rich Component Library**: Text, images, buttons, containers, and dividers
 - **⚡ Real-time Editing**: See changes instantly as you build
-- **📤 HTML Export**: Generate clean, production-ready HTML
+- **📤 Export Options**: Download as HTML or PDF with live preview
 - **🎯 TypeScript Support**: Full type safety and excellent developer experience
 - **🔒 Shadow DOM Isolation**: Styles and components are fully encapsulated
 
@@ -59,21 +59,22 @@ function App() {
 export default App;
 ```
 
-### With Variables and Schema
+### With Variables
 
 ```tsx
 import React from 'react';
 
-import {
-  PlaceholderData,
-  PlaceholderSchema,
-  TemplateEditor,
-} from '@bolttech/template-editor';
+import { PlaceholderData, TemplateEditor } from '@bolttech/template-editor';
 import '@bolttech/template-editor/style.css';
 
-const placeholderData: PlaceholderData = {
+const placeholders: PlaceholderData = {
   user: {
-    name: 'John Doe',
+    name: {
+      key: 'user.name',
+      label: 'User Name',
+      value: 'John Doe',
+      type: 'text',
+    },
     email: 'john@example.com',
     profile: {
       age: 28,
@@ -92,49 +93,25 @@ const placeholderData: PlaceholderData = {
     price: 99.99,
   },
   campaign: {
+    type: {
+      key: 'campaign.type',
+      label: 'Campaign Type',
+      value: 'email',
+      type: 'enum',
+      options: [
+        { label: 'Email Campaign', value: 'email' },
+        { label: 'SMS Campaign', value: 'sms' },
+        { label: 'Push Notification', value: 'push' },
+      ],
+    },
     active: true,
   },
 };
 
-const placeholderSchema: PlaceholderSchema[] = [
-  {
-    key: 'user.name',
-    label: 'User Name',
-    value: 'John Doe',
-    type: 'text',
-  },
-  {
-    key: 'user.email',
-    label: 'User Email',
-    value: 'user@example.com',
-    type: 'text',
-  },
-  {
-    key: 'product.price',
-    label: 'Product Price',
-    value: 0,
-    type: 'number',
-  },
-  {
-    key: 'campaign.type',
-    label: 'Campaign Type',
-    value: 'email',
-    type: 'enum',
-    options: [
-      { label: 'Email Campaign', value: 'email' },
-      { label: 'SMS Campaign', value: 'sms' },
-      { label: 'Push Notification', value: 'push' },
-    ],
-  },
-];
-
 function App() {
   return (
     <div style={{ height: '100vh' }}>
-      <TemplateEditor
-        placeholders={placeholderData}
-        placeholderSchema={placeholderSchema}
-      />
+      <TemplateEditor placeholders={placeholders} />
     </div>
   );
 }
@@ -144,33 +121,39 @@ function App() {
 
 ### Props
 
-The `TemplateEditor` component accepts two optional props:
+The `TemplateEditor` component accepts one optional prop:
 
-| Prop                | Type                  | Description                                           |
-| ------------------- | --------------------- | ----------------------------------------------------- |
-| `placeholders`      | `PlaceholderData`     | Data for template variables (supports nested objects) |
-| `placeholderSchema` | `PlaceholderSchema[]` | Schema definitions for variable types and options     |
+| Prop           | Type              | Description                                                              |
+| -------------- | ----------------- | ------------------------------------------------------------------------ |
+| `placeholders` | `PlaceholderData` | Unified data structure supporting primitives, schemas, and nested values |
 
-### Basic Example
+### Example with Mixed Values
 
 ```tsx
-const placeholders = {
-  user: { name: 'John Doe', email: 'john@example.com' },
-  company: { name: 'ACME Corp' },
-};
+const placeholders: PlaceholderData = {
+  // Primitive values (auto-converted to schemas in the UI)
+  userName: 'John Doe',
+  userEmail: 'john@example.com',
+
+  // Nested objects
+  company: {
+    name: 'ACME Corp',
+    address: {
+      city: 'New York',
+    },
+  },
 
-const schema = [
-  { key: 'user.name', label: 'User Name', value: 'Default', type: 'text' },
-  {
-    key: 'user.role',
-    label: 'Role',
+  // Schema with metadata for form controls
+  userRole: {
+    key: 'userRole',
+    label: 'User Role',
     value: 'user',
     type: 'enum',
-    options: ['admin', 'user'],
+    options: ['admin', 'user', 'guest'],
   },
-];
+};
 
-<TemplateEditor placeholders={placeholders} placeholderSchema={schema} />;
+<TemplateEditor placeholders={placeholders} />;
 ```
 
 📋 **Need more details?** See [complete API reference](docs/api/types.md) for full TypeScript definitions.
@@ -197,6 +180,37 @@ Perfect for creating:
 
 💡 **Want examples?** Check [docs/](docs/) for sample implementations.
 
+## 📥 Export & Download
+
+The template editor includes powerful export capabilities:
+
+### Download as HTML
+
+Export your template as clean, production-ready HTML:
+
+- **Standalone HTML files** - Complete with embedded styles
+- **Compiled variables** - All `{{variable}}` placeholders replaced with actual values
+- **Responsive output** - Works across all devices and email clients
+
+### Download as PDF
+
+Generate PDF documents from your templates:
+
+- **High-quality PDFs** - Professional document output
+- **Live preview** - See exactly what you'll get before downloading
+- **Variable resolution** - All placeholders resolved to their current values
+
+### Export Options
+
+Access export features through the preview panel:
+
+1. Click the **Preview** button to see your template with live data
+2. Use the **Download** dropdown to choose your format:
+   - **HTML** - Download as .html file
+   - **PDF** - Download as .pdf document
+
+Both formats automatically compile your template with the current placeholder values, ensuring the exported content matches what you see in the preview.
+
 ## 🎨 Styling
 
 The editor uses **Shadow DOM** for complete style isolation - no CSS conflicts with your app!
@@ -209,8 +223,10 @@ Full TypeScript support included:
 import type {
   PlaceholderData,
   PlaceholderSchema,
+  PlaceholderValue,
   TemplateEditorProps,
 } from '@bolttech/template-editor';
+import { PlaceholderUtils } from '@bolttech/template-editor';
 ```
 
 ## 🐛 Troubleshooting