@bolttech/template-editor 0.0.13 → 0.1.1

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.
package/README.md CHANGED
@@ -9,7 +9,7 @@ A powerful, drag-and-drop visual template editor built with React, TypeScript, a
9
9
  - **🔧 Variable System**: Dynamic content with Handlebars-style variables (`{{variable}}`)
10
10
  - **🧱 Rich Component Library**: Text, images, buttons, containers, and dividers
11
11
  - **⚡ Real-time Editing**: See changes instantly as you build
12
- - **📤 HTML Export**: Generate clean, production-ready HTML
12
+ - **📤 Export Options**: Download as HTML or PDF with live preview
13
13
  - **🎯 TypeScript Support**: Full type safety and excellent developer experience
14
14
  - **🔒 Shadow DOM Isolation**: Styles and components are fully encapsulated
15
15
 
@@ -59,21 +59,22 @@ function App() {
59
59
  export default App;
60
60
  ```
61
61
 
62
- ### With Variables and Schema
62
+ ### With Variables
63
63
 
64
64
  ```tsx
65
65
  import React from 'react';
66
66
 
67
- import {
68
- PlaceholderData,
69
- PlaceholderSchema,
70
- TemplateEditor,
71
- } from '@bolttech/template-editor';
67
+ import { PlaceholderData, TemplateEditor } from '@bolttech/template-editor';
72
68
  import '@bolttech/template-editor/style.css';
73
69
 
74
- const placeholderData: PlaceholderData = {
70
+ const placeholders: PlaceholderData = {
75
71
  user: {
76
- name: 'John Doe',
72
+ name: {
73
+ key: 'user.name',
74
+ label: 'User Name',
75
+ value: 'John Doe',
76
+ type: 'text',
77
+ },
77
78
  email: 'john@example.com',
78
79
  profile: {
79
80
  age: 28,
@@ -92,49 +93,25 @@ const placeholderData: PlaceholderData = {
92
93
  price: 99.99,
93
94
  },
94
95
  campaign: {
96
+ type: {
97
+ key: 'campaign.type',
98
+ label: 'Campaign Type',
99
+ value: 'email',
100
+ type: 'enum',
101
+ options: [
102
+ { label: 'Email Campaign', value: 'email' },
103
+ { label: 'SMS Campaign', value: 'sms' },
104
+ { label: 'Push Notification', value: 'push' },
105
+ ],
106
+ },
95
107
  active: true,
96
108
  },
97
109
  };
98
110
 
99
- const placeholderSchema: PlaceholderSchema[] = [
100
- {
101
- key: 'user.name',
102
- label: 'User Name',
103
- value: 'John Doe',
104
- type: 'text',
105
- },
106
- {
107
- key: 'user.email',
108
- label: 'User Email',
109
- value: 'user@example.com',
110
- type: 'text',
111
- },
112
- {
113
- key: 'product.price',
114
- label: 'Product Price',
115
- value: 0,
116
- type: 'number',
117
- },
118
- {
119
- key: 'campaign.type',
120
- label: 'Campaign Type',
121
- value: 'email',
122
- type: 'enum',
123
- options: [
124
- { label: 'Email Campaign', value: 'email' },
125
- { label: 'SMS Campaign', value: 'sms' },
126
- { label: 'Push Notification', value: 'push' },
127
- ],
128
- },
129
- ];
130
-
131
111
  function App() {
132
112
  return (
133
113
  <div style={{ height: '100vh' }}>
134
- <TemplateEditor
135
- placeholders={placeholderData}
136
- placeholderSchema={placeholderSchema}
137
- />
114
+ <TemplateEditor placeholders={placeholders} />
138
115
  </div>
139
116
  );
140
117
  }
@@ -144,33 +121,39 @@ function App() {
144
121
 
145
122
  ### Props
146
123
 
147
- The `TemplateEditor` component accepts two optional props:
124
+ The `TemplateEditor` component accepts one optional prop:
148
125
 
149
- | Prop | Type | Description |
150
- | ------------------- | --------------------- | ----------------------------------------------------- |
151
- | `placeholders` | `PlaceholderData` | Data for template variables (supports nested objects) |
152
- | `placeholderSchema` | `PlaceholderSchema[]` | Schema definitions for variable types and options |
126
+ | Prop | Type | Description |
127
+ | -------------- | ----------------- | ------------------------------------------------------------------------ |
128
+ | `placeholders` | `PlaceholderData` | Unified data structure supporting primitives, schemas, and nested values |
153
129
 
154
- ### Basic Example
130
+ ### Example with Mixed Values
155
131
 
156
132
  ```tsx
157
- const placeholders = {
158
- user: { name: 'John Doe', email: 'john@example.com' },
159
- company: { name: 'ACME Corp' },
160
- };
133
+ const placeholders: PlaceholderData = {
134
+ // Primitive values (auto-converted to schemas in the UI)
135
+ userName: 'John Doe',
136
+ userEmail: 'john@example.com',
137
+
138
+ // Nested objects
139
+ company: {
140
+ name: 'ACME Corp',
141
+ address: {
142
+ city: 'New York',
143
+ },
144
+ },
161
145
 
162
- const schema = [
163
- { key: 'user.name', label: 'User Name', value: 'Default', type: 'text' },
164
- {
165
- key: 'user.role',
166
- label: 'Role',
146
+ // Schema with metadata for form controls
147
+ userRole: {
148
+ key: 'userRole',
149
+ label: 'User Role',
167
150
  value: 'user',
168
151
  type: 'enum',
169
- options: ['admin', 'user'],
152
+ options: ['admin', 'user', 'guest'],
170
153
  },
171
- ];
154
+ };
172
155
 
173
- <TemplateEditor placeholders={placeholders} placeholderSchema={schema} />;
156
+ <TemplateEditor placeholders={placeholders} />;
174
157
  ```
175
158
 
176
159
  📋 **Need more details?** See [complete API reference](docs/api/types.md) for full TypeScript definitions.
@@ -197,6 +180,37 @@ Perfect for creating:
197
180
 
198
181
  💡 **Want examples?** Check [docs/](docs/) for sample implementations.
199
182
 
183
+ ## 📥 Export & Download
184
+
185
+ The template editor includes powerful export capabilities:
186
+
187
+ ### Download as HTML
188
+
189
+ Export your template as clean, production-ready HTML:
190
+
191
+ - **Standalone HTML files** - Complete with embedded styles
192
+ - **Compiled variables** - All `{{variable}}` placeholders replaced with actual values
193
+ - **Responsive output** - Works across all devices and email clients
194
+
195
+ ### Download as PDF
196
+
197
+ Generate PDF documents from your templates:
198
+
199
+ - **High-quality PDFs** - Professional document output
200
+ - **Live preview** - See exactly what you'll get before downloading
201
+ - **Variable resolution** - All placeholders resolved to their current values
202
+
203
+ ### Export Options
204
+
205
+ Access export features through the preview panel:
206
+
207
+ 1. Click the **Preview** button to see your template with live data
208
+ 2. Use the **Download** dropdown to choose your format:
209
+ - **HTML** - Download as .html file
210
+ - **PDF** - Download as .pdf document
211
+
212
+ Both formats automatically compile your template with the current placeholder values, ensuring the exported content matches what you see in the preview.
213
+
200
214
  ## 🎨 Styling
201
215
 
202
216
  The editor uses **Shadow DOM** for complete style isolation - no CSS conflicts with your app!
@@ -209,8 +223,10 @@ Full TypeScript support included:
209
223
  import type {
210
224
  PlaceholderData,
211
225
  PlaceholderSchema,
226
+ PlaceholderValue,
212
227
  TemplateEditorProps,
213
228
  } from '@bolttech/template-editor';
229
+ import { PlaceholderUtils } from '@bolttech/template-editor';
214
230
  ```
215
231
 
216
232
  ## 🐛 Troubleshooting