@maildeno/editor 0.1.0 → 0.1.2

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/dist/{RowPreviewLegacyComponent-osWbuByc.js → RowPreviewLegacyComponent-yjHSkZLz.js}

@@ -1,4 +1,4 @@
-import { I as openBlock, R as renderList, V as resolveDynamicComponent, _ as createBlock, _t as toDisplayString, f as Fragment, g as createBaseVNode, gt as normalizeStyle, h as computed, v as createCommentVNode, w as defineComponent, x as createTextVNode, y as createElementBlock } from "./vue.runtime.esm-bundler-DwQEK7WO.js";
+import { I as openBlock, R as renderList, V as resolveDynamicComponent, _ as createBlock, _t as toDisplayString, f as Fragment, g as createBaseVNode, gt as normalizeStyle, h as computed, v as createCommentVNode, w as defineComponent, x as createTextVNode, y as createElementBlock } from "./vue.runtime.esm-bundler-CfYyFhW6.js";
 //#region src/components/features/emailBuilder/product/RowPreviewLegacyComponent.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["innerHTML"];
 var _hoisted_2 = ["src", "alt"];

package/dist/{RowPreviewRow-MSc_unf3.js → RowPreviewRow-CAeMRdd8.js}

@@ -1,8 +1,8 @@
-import { C as defineAsyncComponent, I as openBlock, R as renderList, S as createVNode, f as Fragment, ft as unref, gt as normalizeStyle, h as computed, v as createCommentVNode, w as defineComponent, y as createElementBlock } from "./vue.runtime.esm-bundler-DwQEK7WO.js";
+import { C as defineAsyncComponent, I as openBlock, R as renderList, S as createVNode, f as Fragment, ft as unref, gt as normalizeStyle, h as computed, v as createCommentVNode, w as defineComponent, y as createElementBlock } from "./vue.runtime.esm-bundler-CfYyFhW6.js";
 //#region src/components/features/emailBuilder/product/RowPreviewRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "w-full border border-dashed border-gray-200 rounded",
+	class: "w-full border border-dashed border-(--md-border) rounded",
 	style: { "min-height": "10px" }
 };
 //#endregion
@@ -15,7 +15,7 @@ var RowPreviewRow_default = /* @__PURE__ */ defineComponent({
 		depth: {}
 	},
 	setup(__props) {
-		const RowPreviewChildren = defineAsyncComponent(() => import("./element-DN22fZmQ.js").then((n) => n.o));
+		const RowPreviewChildren = defineAsyncComponent(() => import("./element-DLJCEP_z.js").then((n) => n.o));
 		const props = __props;
 		function resolveBackground(item) {
 			const bg = item?.backgroundGradient;

package/dist/{RowPreviewRow-D-U1mV4v.js → RowPreviewRow-CeowK6Q_.js}

@@ -2,7 +2,7 @@ import { Fragment, computed, createCommentVNode, createElementBlock, createVNode
 //#region src/components/features/emailBuilder/product/RowPreviewRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "w-full border border-dashed border-gray-200 rounded",
+	class: "w-full border border-dashed border-(--md-border) rounded",
 	style: { "min-height": "10px" }
 };
 //#endregion