hivewrite-sdk 1.1.16 → 1.1.17

package/README.md

@@ -101,11 +101,11 @@ Initializes and mounts the editor.
 | `apiKey` | `string` | Yes | Your HiveWrite API Key |
 | `container` | `string \| HTMLElement` | Yes | CSS selector or DOM element to mount the editor |
 | `userId` | `string` | No | Unique identifier for the current user |
-| `mode` | `string` | Yes | `'FULL_EDITOR'`, `'DESIGN_ONLY'`, `'READ_ONLY'` |
+| `mode` | `string` | Yes | `'FULL_EDITOR'`, `'DESIGN_ONLY'`, `'READ_ONLY'`, `'HTML_IMPORT'` |
 | `theme` | `string` | No | `'light'` (default) or `'dark'` |
 | `locale` | `string` | No | `'en'` (default), `'es'`, or `'fr'` |
-| `branding` | `object` | No | Custom white-labeling options |
-| `permissions` | `object` | No | Toggle features: `export`, `aiMagic`, `uploadImages` |
+| `branding` | `object` | No | Custom white-labeling options (`primaryColor`, `secondaryColor`, `accentColor`, `logoUrl`, `customCSS`) |
+| `permissions` | `object` | No | Toggle features: `export`, `aiMagic`, `uploadImages`, `hideSaveButton` |
 | `mergeTags` | `array` | No | Array of `{ label, value }` for dynamic content |
 | `portalTarget` | `string` | No | `'window'` (default) or `'container'`. Controls where dialogs render. |
 | `callbacks` | `object` | No | Event hooks for SDK actions |
@@ -140,10 +140,10 @@ Initializes and mounts the editor.
 ```javascript
 const result = await hivewrite.export({ 
   format: 'html',
-  minify: true,
-  inlineCSS: true 
+  minify: true
 });
-console.log(result.html);
+// Or use the shorthand
+hivewrite.exportHtml((html) => console.log(html));
 ```
 
 ### Export to JSON (Design)
@@ -192,9 +192,10 @@ Control what features are available:
 
 ```javascript
 permissions: {
-  export: true,       // Allow HTML export
+  export: true,           // Allow HTML export
   aiMagic: true,          // Enable AI features
-  uploadImages: false     // Disable uploads (stock images only)
+  uploadImages: false,    // Disable uploads (stock images only)
+  hideSaveButton: true    // Hide the built-in save button
 }
 ```
 
@@ -210,7 +211,6 @@ mergeTags: [
   { label: 'Company', value: '{{company}}' },
   { label: 'Unsubscribe Link', value: '{{unsubscribe_url}}' }
 ]
-```
 
 ---
 
@@ -219,7 +219,8 @@ mergeTags: [
 | Callback | Arguments | Description |
 | :--- | :--- | :--- |
 | `onLoad` | `()` | Editor fully initialized |
-| `onExport` | `(html: string, userId?: string)` | User exports or `export` called |
+| `onExport` | `(html: string, userId?: string)` | Triggered on HTML export |
+| `onSave` | `(json: {blocks: any[], canvasSettings: CanvasSettings, name: string, description: string, category: string}, userId?: string)` | Triggered on design save |
 | `onError` | `(err: any, userId?: string)` | Initialization or processing error |
 | `onTemplateChange` | `(templateId: string, userId?: string)` | Template selection changed |
 | `onImageUpload` | `(file: File, userId?: string)` | **Async**. Handle image uploads, return URL |
@@ -241,18 +242,20 @@ callbacks: {
 ### Response Examples
 
 #### `hivewrite.save()`
-Returns the current design state as a JSON object.
+Triggers the `onSave` callback with the current design state.
 
 ```javascript
-const design = hivewrite.save();
-console.log(design);
+hivewrite.save();
 
-// Output:
+// Result sent to onSave(json, userId):
 {
-  "blocks": [ ... ],       // Array of block objects
+  "body": {
+    "blocks": [ ... ]       // Array of block objects
+  },
   "canvasSettings": { ... }, // Canvas styles (width, background, etc)
-  "templateName": "My Email Template",
-  "userId": "user_12345"   // The current user ID, If present
+  "name": "My Email Template",
+  "description": "Here will be the description",
+  "category": "marketing"
 }
 ```
 
@@ -269,6 +272,67 @@ onExport: (html, userId) => {
 
 ---
 
+## 🏗️ Design JSON Format
+
+The `loadDesign(data)` method and `onSave` callback use a specific JSON structure.
+
+### `data` Object
+
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `blocks` | `EditorBlock[]` | Array of content blocks |
+| `canvasSettings` | `CanvasSettings` | Global editor styles and branding |
+
+### JSON Example
+
+```json
+{
+  "blocks": [
+    {
+      "id": "os-UuWl9Cx32T7OYMdmRO",
+      "type": "text",
+      "content": {
+        "text": "<a href=\"#\" style=\"color:#666;text-decoration:none;\">View in browser</a>"
+      },
+      "styles": {
+        "textAlign": "center",
+        "fontSize": "12px",
+        "color": "#666",
+        "padding": "10px",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    {
+      "id": "II1rUSyoqXnn9qTqQp54h",
+      "type": "image",
+      "content": {
+        "src": "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop"
+      },
+      "styles": {
+        "width": "100%",
+        "height": "300px",
+        "objectFit": "cover"
+      }
+    }
+  ],
+  "canvasSettings": {
+    "backgroundColor": "#ffffff",
+    "outerBackgroundColor": "#ffffff",
+    "width": "100%",
+    "maxWidth": "600px",
+    "fontFamily": "Inter, sans-serif",
+    "padding": "32px",
+    "branding": {
+      "primary": "#000000",
+      "secondary": "#4b5563",
+      "accent": "#2563eb"
+    }
+  }
+}
+```
+
+---
+
 ## 📱 Mobile Preview
 
 The editor includes a mobile preview mode (350px width) with automatic scaling:
@@ -299,11 +363,14 @@ Exported HTML is fully compatible with:
 | Method | Description |
 | :--- | :--- |
 | `init(config)` | Initialize the editor |
-| `export({ format, minify?, inlineCSS? })` | Export design to HTML or JSON |
-| `save()` | Save current design state to JSON |
-| `importHTML({ html })` | Import HTML into editor (experimental) |
+| `loadDesign(data)` | Load a previously saved JSON design |
+| `export({ format, minify? })` | Export design to HTML, JSON, or MJML |
+| `exportHtml(callback)` | Shorthand for HTML export |
+| `exportJson(callback)` | Shorthand for JSON export |
+| `exportMjml(callback)` | Shorthand for MJML export |
+| `save()` | Triggers `onSave` callback with current JSON |
 | `setTheme(theme)` | Switch theme at runtime |
-| `setUserId(userId)` | Update user ID at runtime |
+| `setLocale(locale)` | Switch locale at runtime |
 | `destroy()` | Unmount and cleanup |
 
 ---