@maildeno/editor 0.1.0 → 0.1.1

package/README.md

@@ -1,6 +1,6 @@
-# @maildeno/editor — Vue
+# @maildeno/editor 
 
-A drag-and-drop email template editor for Vue 3 apps.
+A drag-and-drop email template editor.
 
 ## Install
 
@@ -11,7 +11,7 @@ npm install @maildeno/editor
 One package, no peer dependencies, no CSS import. The editor injects its own
 styling when it mounts.
 
-## Minimal usage
+## Minimal usage Vue
 
 ```vue
 <script setup lang="ts">
@@ -23,52 +23,6 @@ import { EmailEditor } from "@maildeno/editor";
 </template>
 ```
 
-## Full example
-
-```vue
-<script setup lang="ts">
-import { ref } from "vue";
-import { EmailEditor } from "@maildeno/editor";
-import { myAdapter } from "./adapter";
-
-const editor = ref<InstanceType<typeof EmailEditor> | null>(null);
-
-function handleSave({ templateId }: { templateId: string | null }) {
-  // Persist which template is open, however you track it
-  router.replace(`/editor/${templateId}`);
-}
-
-async function handleSendTestEmail(payload: {
-  to: string; subject: string; html: string;
-}) {
-  await fetch("/api/send-test", { method: "POST", body: JSON.stringify(payload) });
-}
-
-async function publish() {
-  const html = editor.value?.getHtml();
-  if (!html) return; // empty canvas
-  await fetch("/api/campaigns", { method: "POST", body: JSON.stringify({ html }) });
-}
-</script>
-
-<template>
-  <div style="display: flex; flex-direction: column; height: 100vh">
-    <button @click="publish">Publish</button>
-
-    <EmailEditor
-      ref="editor"
-      style="flex: 1; min-height: 0"
-      template-id="welcome_email"
-      :storage-adapter="myAdapter"
-      :theme="{ primaryColor: '#6366f1' }"
-      :capabilities="{ export: ['html', 'json'] }"
-      :on-send-test-email="handleSendTestEmail"
-      @save="handleSave"
-    />
-  </div>
-</template>
-```
-
 ## Props and events
 
 | Prop | Type |
@@ -93,66 +47,51 @@ editor.value.getReactEmail();
 editor.value.getJson();
 ```
 
-Theming is reactive through the `theme` prop — change it and the editor
-re-themes live; no imperative call needed.
-
-## Alternative: `init()`
-
-The same API the React and vanilla guides use also works in Vue:
+## Minimal usage React
 
-```vue
-<script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from "vue";
+```tsx
+import { useEffect, useRef } from "react";
 import { init, type EditorHandle } from "@maildeno/editor/init";
 
-const container = ref<HTMLDivElement | null>(null);
-let handle: EditorHandle | null = null;
+export default function Editor() {
+  const container = useRef<HTMLDivElement>(null);
+  const handle = useRef<EditorHandle | null>(null);
 
-onMounted(async () => {
-  handle = await init({ container: container.value! });
-});
-onBeforeUnmount(() => handle?.destroy());
-</script>
+  useEffect(() => {
+    let cancelled = false;
 
-<template>
-  <div ref="container" />
-</template>
-```
-
-**Prefer the component unless you specifically need style isolation.** `init()`
-bundles its own Vue so it can run on framework-free pages — calling it from a
-Vue app ships two Vue runtimes (~60 kB gzipped plus a second reactivity graph).
-The component uses the Vue you already have, and gives you reactive props,
-template refs, normal event binding and devtools visibility.
-
-The one case where `init()` wins: it renders in a shadow root, so your app's
-global CSS can't reach the editor. If your stylesheets conflict with it, that
-isolation is worth the duplicate runtime.
+    init({ container: container.current! }).then((h) => {
+      // React 18 StrictMode mounts effects twice in development. Without
+      // this guard the first instance is orphaned and never destroyed.
+      if (cancelled) return h.destroy();
+      handle.current = h;
+    });
 
-## Feature reference
+    return () => {
+      cancelled = true;
+      handle.current?.destroy();
+    };
+  }, []);
 
-Everything below is identical across frameworks. Only the mounting differs.
+  return <div ref={container} />;
+}
+```
 
-### The editor at a glance
+## `EditorHandle`
 
-- **Drag-and-drop block editor** — paragraph, heading, image, video, list, button, anchor, divider, spacer, menu, socials, plus custom blocks you register.
-- **Four export formats** — HTML, MJML, React Email (`.tsx`), JSON.
-- **ESP-aware conditional logic** — visibility rules compile to the right syntax for Klaviyo, Mailchimp, Braze, SFMC, HubSpot, Iterable, Handlebars and more.
-- **Merge tags** with an in-editor picker.
-- **Saved templates and saved rows** — reusable snippets and full documents.
-- **Desktop/mobile styling** — per-block mobile overrides.
-- **Undo/redo**, autosave draft recovery, and a preview with client-specific rendering checks.
-- **Zero backend required** — defaults to `localStorage`; bring an adapter to use your own.
+`init()` resolves to this once the editor has mounted:
 
-### Configuration
+| Member | Description |
+| --- | --- |
+| `element` | The underlying `<maildeno-editor>` DOM node. |
+| `on(event, fn)` / `off(event, fn)` | Subscribe to editor events. Currently `"save"`. |
+| `setTheme(theme)` | Re-theme live, any time after mount. |
+| `getHtml(mode?)` | Current template as an HTML email string, or `null` if empty. |
+| `getMjml(mode?)` | Current template as MJML. |
+| `getReactEmail(mode?)` | Current template as React Email `.tsx` source. |
+| `getJson()` | Current template as a plain object. |
+| `destroy()` | Unmount and clean up. Always call this on unmount. |
 
-| Option | Type | Purpose |
-| --- | --- | --- |
-| `templateId` | `string` | Load an existing template on mount. Omit to start blank. |
-| `storageAdapter` | `EditorStorageAdapter` | Where templates, rows and images persist. Omit for `localStorage`. |
-| `theme` | `{ primaryColor?, surfaceColor? }` | Brand colour, expanded into a full 50–950 shade scale. |
-| `capabilities` | `{ export?: Array<"html"\|"mjml"\|"react"\|"json"> }` | Restrict which export formats appear. Omit for all four. |
-| `onSendTestEmail` | `(payload) => Promise<void>` | Enables the "Send test" button. Hidden entirely when omitted. |
 
 ### Getting content out
 
@@ -179,6 +118,22 @@ if (!html) return; // nothing built yet
 
 `getJson()` returns the portable template format — `template_id`, `template_name`, `canvas`, `rows`, `schema_version`. Store it and pass it back via your adapter's `loadTemplate` to restore exactly.
 
+## Feature reference
+
+Everything below is identical across frameworks. Only the mounting differs.
+
+### The editor at a glance
+
+- **Drag-and-drop block editor** — paragraph, heading, image, video, list, button, anchor, divider, spacer, menu, socials, plus custom blocks you register.
+- **Four export formats** — HTML, MJML, React Email (`.tsx`), JSON.
+- **ESP-aware conditional logic** — visibility rules compile to the right syntax for Klaviyo, Mailchimp, Braze, SFMC, HubSpot, Iterable, Handlebars and more.
+- **Merge tags** with an in-editor picker.
+- **Saved templates and saved rows** — reusable snippets and full documents.
+- **Desktop/mobile styling** — per-block mobile overrides.
+- **Undo/redo**, autosave draft recovery, and a preview with client-specific rendering checks.
+- **Zero backend required** — defaults to `localStorage`; bring an adapter to use your own.
+
+
 ### Storage adapter
 
 The editor never talks to your backend directly. Implement this and it uses your storage for everything:
@@ -420,7 +375,7 @@ Pass it back as `templateId` next time to reopen.
 
 ### Practical notes
 
-- **The container needs a real height.** The editor fills its parent; `height: 100vh` or a sized flex child both work. A container with no height renders nothing visible.
+- **The container needs a real height.** The editor fills its parent; `height: 100vh` or a sized flex child both work.
 - **`transform`, `filter`, `perspective` or `will-change` on any ancestor** breaks `position: fixed` inside it — floating toolbars and pickers will land in the wrong place. Avoid them above the mount point.
 - **Desktop only.** The editor shows a notice on small screens rather than attempting a mobile drag-and-drop UI.
 - **Autosave** keeps a local draft, so a refresh mid-edit recovers. "New template" clears it deliberately.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maildeno/editor",
-  "version": "0.1.0",
-  "description": "An open-source, framework-agnostic email template editor. Drag-and-drop block editing, HTML/MJML/React Email/JSON export, and a pluggable ESP-conditional-logic engine usable as a Vue component or a plain custom element with zero required backend.",
+  "version": "0.1.1",
+  "description": "An open-source, framework-agnostic email template editor. Drag-and-drop block editing, HTML/MJML/React Email/JSON export, and a pluggable ESP-conditional-logic engine with zero required backend.",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 - present, Noruwa Obaseki
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.