email-builder-online 2.0.0 → 2.0.1

package/README.md

@@ -1,11 +1,11 @@
 # email-builder-online
 
-Powerful, modern email builder with drag-and-drop blocks, live preview, and HTML/JSON export. Built with React and Material UI, distributed as a React component and as a Web Component so it can be embedded in other frameworks (Nuxt 3, Next.js, SvelteKit, etc.). Compatible with React 18 and 19.
+Powerful, modern email builder with drag-and-drop blocks, live preview, and HTML export. Built with React and Material UI, distributed as a React component and as a Web Component so it can be embedded in other frameworks (Nuxt 3, Next.js, SvelteKit, etc.). Compatible with React 18 and 19.
 
 - Drag-and-drop blocks (Text, Image, Button, Columns, etc.)
 - Editor and Preview tabs with responsive screen sizes
 - Undo/Redo and keyboard shortcuts
-- HTML/JSON outputs and copy-to-clipboard helpers
+- HTML outputs and copy-to-clipboard helpers
 - CSS size guard for email client compatibility
 
 ## Installation
@@ -61,7 +61,7 @@ import { registerEmailBuilder } from 'email-builder-online';
 import 'email-builder-online/style.css';
 
 export default defineNuxtPlugin(() => {
-  registerEmailBuilder('email-builder'); // optional tag name (default: 'email-builder')
+ registerEmailBuilder('email-builder'); // optional tag name (default: 'email-builder')
 });
 ```
 
@@ -107,6 +107,74 @@ Notes on SSR and dependencies
 - The Web Component wrapper is registered only on the client. Use a client-only plugin in SSR frameworks.
 - React and ReactDOM are peer dependencies even for the Web Component. Install them in your app or use a bundler that provides them. React 18 and 19 are supported.
 
+## Custom Editor Standalone
+
+The package also ships the `CustomEditorInputStandalone` component (referred to in the UI as **CustomEditorStandalone**) so the rich text block can be embedded outside of the full builder experience.
+
+### React
+
+```tsx
+import { useState } from 'react';
+import { CustomEditorInputStandalone } from 'email-builder-online';
+import 'email-builder-online/style.css';
+
+export default function CustomEditorExample() {
+  const [value, setValue] = useState('<p>Write your custom content here…</p>');
+
+  return (
+    <CustomEditorInputStandalone
+      initialData={value}
+      onChange={setValue}
+      editorBackgroundColor="#ffffff"
+      editorColorDefault="#1f2937"
+      fontFamily="MODERN_SANS"
+      lineHeight={1.6}
+    />
+  );
+}
+```
+
+Key props you may want to control:
+- `initialData`: starting HTML value of the editor.
+- `onChange`: receives the latest HTML string every time the content changes.
+- `editorBackgroundColor`, `editorColorDefault`, `fontFamily`, `fontSize`, `lineHeight`: styling helpers for the standalone instance.
+- `linkColor`, `underlineLinks`, `rootFontFamily`, `rootTextColor`, `rootCanvasColor`: override the root node defaults when you need consistent rendering outside the builder.
+
+### Web Component
+
+Register the element on the client and optionally pick a custom tag name:
+
+```ts
+import { registerCustomEditorInput } from 'email-builder-online';
+import 'email-builder-online/style.css';
+
+if (typeof window !== 'undefined') {
+  registerCustomEditorInput('custom-editor'); // default is "custom-editor-input"
+}
+```
+
+Usage example in plain HTML (Nuxt/Vue/Svelte users should wrap with their client-only utilities):
+
+```html
+<custom-editor
+  editor-background-color="#ffffff"
+  editor-color-default="#1f2937"
+  font-family="MODERN_SANS"
+  initial-data="<p>Write your custom content here…</p>"
+></custom-editor>
+
+<script type="module">
+  const editor = document.querySelector('custom-editor');
+  editor?.addEventListener('onChange', (event) => {
+    const value = event.detail; // latest HTML string
+    console.log('Editor value:', value);
+  });
+  editor.initialData = '<p>Programmatically update the content.</p>';
+</script>
+```
+
+Boolean and numeric attributes on the custom element map to their camelCase React counterparts (`dark-mode` → `darkMode`, `font-size` → `fontSize`, etc.). When working in frameworks, prefer binding them as element properties to avoid string coercion.
+
 ## Props / Attributes
 
 React Props (camelCase) and Web Component attributes (dash-case) map 1:1:
@@ -136,4 +204,3 @@ MIT Ac Laravel42
 ## Changelog
 
 See Git history for details. Please open issues or PRs for bugs and improvements.
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "email-builder-online",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"type": "module",
 	"main": "./dist/email-builder.cjs.js",
 	"module": "./dist/email-builder.es.js",