@maildeno/editor 0.1.3 → 0.4.2

package/dist/init.d.ts

@@ -1,4 +1,5 @@
 import { PartialStorageAdapter } from './adapters/types';
+import { AssistantMount } from './types/assistant';
 import { ThemeOptions } from './theme';
 /**
  * The ergonomic, no-Vue-knowledge entry point. element.ts already provides
@@ -22,6 +23,67 @@ export interface InitOptions {
         subject: string;
         html: string;
     }) => Promise<void> | void;
+    /**
+     * Name shown in the desktop-only notice's "Powered by" line. Omit for the
+     * package default; pass an empty string to drop the line entirely.
+     *
+     * Unlike storageAdapter/theme/onSendTestEmail this is a plain string, so
+     * the custom element accepts it as a `brand-name` attribute too —
+     * `<maildeno-editor brand-name="Acme">` works without any JavaScript.
+     * init() still sets it as a property below, for consistency with the
+     * other options rather than out of necessity.
+     */
+    brandName?: string;
+    /**
+     * Replaces the saved-templates panel and its header button with version
+     * history. Requires an adapter implementing the version methods — see
+     * EditorStorageAdapter; the built-in localStorage adapter implements all
+     * of them, so this works with no backend.
+     *
+     * A boolean, so the custom element accepts it as a `versions` attribute
+     * too — attribute presence is truthy, matching how HTML booleans work.
+     */
+    versions?: boolean;
+    /**
+     * Called after a successful save. Its presence is what reveals the Save
+     * button — omit it for a read-only or guest editor and the button, the
+     * save-status indicator and the autosave timer all disappear.
+     *
+     * The "save" event still fires alongside, so handle.on("save", …) keeps
+     * working; this option exists because a listener attached after mount
+     * can't retroactively decide whether the button should have rendered.
+     */
+    onSave?: (payload: {
+        templateId: string | null;
+    }) => void;
+    /**
+     * Fills the editor's assistant drawer with your own UI.
+     *
+     * The editor supplies the drawer, its trigger button, open/close state,
+     * escape handling and shadow-DOM-safe positioning; `mount` receives the
+     * drawer's body element plus a small canvas API (getJson/setJson/
+     * getSelection/setSelection/onChange) and renders whatever it likes into
+     * it — React root, plain DOM, anything.
+     *
+     * Called on first open rather than at startup, and `unmount` on close, so
+     * a drawer the user never opens costs nothing.
+     *
+     * ```ts
+     * init({
+     *   container: "#editor",
+     *   assistant: {
+     *     mount(el, editor) {
+     *       el.innerHTML = "<button>Rewrite</button>";
+     *       el.querySelector("button").onclick = async () => {
+     *         const next = await myApi.rewrite(editor.getJson());
+     *         editor.setJson(next);
+     *       };
+     *     },
+     *   },
+     * });
+     * ```
+     */
+    assistant?: AssistantMount;
     /**
      * Render inside a shadow root (default) or directly in the page.
      *
@@ -46,6 +108,14 @@ export interface EditorHandle {
     /** Vue's defineCustomElement dispatches emits as real DOM CustomEvents
      * on the host element, with the emit payload in event.detail — this is
      * just addEventListener with that unwrapping done for you. */
+    /**
+     * Additional listeners for the save event.
+     *
+     * Only ever fires when `onSave` was passed to init(): without it the editor
+     * has no Save button and never saves, so there is no event to hear. If you
+     * only want to observe saves, pass a no-op `onSave` to enable saving and do
+     * the work here.
+     */
     on(event: "save", handler: (payload: {
         templateId: string | null;
     }) => void): void;
@@ -69,14 +139,37 @@ export interface EditorHandle {
     getMjml(mode?: "prune" | "wrap"): string | null;
     getReactEmail(mode?: "prune" | "wrap"): string | null;
     getJson(): Record<string, unknown> | null;
+    /** The write side of getJson(). Accepts what getJson() returns, so
+     * setJson(getJson()) round-trips, plus the { canvas, content: { rows } }
+     * shape version APIs typically hand back.
+     *
+     * history defaults to "undoable" — one Ctrl+Z-able step, right for
+     * anything the user triggered. Pass "reset" when swapping which document
+     * is open, where undoing back into the previous document would be wrong. */
+    setJson(data: unknown, opts?: {
+        history?: "undoable" | "reset";
+    }): void;
+    /** The selected node, or null. `type` is the block type, so a host can
+     * branch on it without resolving the id against the tree itself. */
+    getSelection(): {
+        id: string;
+        type: string | null;
+    } | null;
+    /** Selects by id, or clears with null. Returns false if no node has that
+     * id. Does not touch history — selection is view state. */
+    setSelection(id: string | null): boolean;
+    /** Fires after each committed change. Returns an unsubscribe function.
+     * Keyed to history commits rather than raw mutations, so typing inside a
+     * text block produces one call, not one per keystroke. */
+    onChange(cb: () => void): () => void;
     /** Removes the element from the DOM. Vue's custom element wrapper
      * handles unmounting the internal app and cleaning up watchers/effects
      * as part of its own disconnectedCallback — not reimplemented here. */
     destroy(): void;
 }
 export declare function init(options: InitOptions): Promise<EditorHandle>;
-export { registerBlock, getBlock, getAllBlocks, } from './blocks/registry';
-export { registerESPSyntax, getRegisteredCustomESPs, } from './esp/registry';
+export { registerBlock, getBlock, getAllBlocks } from './blocks/registry';
+export { registerESPSyntax, getRegisteredCustomESPs } from './esp/registry';
 export { registerMergeTags, getRegisteredMergeTagIds, } from './merge-tags/registry';
 export { setEditorTheme, palette } from './theme';
 export { createLocalStorageAdapter } from './adapters/localStorageAdapter';

package/dist/init.js

@@ -1,130 +1,174 @@
-import { D as h, at as ref, i as createApp, rt as reactive } from "./vue.runtime.esm-bundler-CfYyFhW6.js";
-import { a as setEditorTheme, c as createLocalStorageAdapter, d as getRegisteredMergeTagIds, f as registerMergeTags, h as registerBlock, i as palette, l as getRegisteredCustomESPs, m as getBlock, n as registerMaildenoEditorElement, p as getAllBlocks, r as EmailEditor_default, s as buildShadowStyles, u as registerESPSyntax } from "./element-CMhqxYnE.js";
-//#region src/lightDom.ts
-var stylesInjected = false;
-/**
-* The shadow path hands these strings to defineCustomElement, which turns
-* them into <style> tags inside the shadow root. Here they go to
-* document.head instead — same content, different destination. Guarded so
-* multiple editors on one page inject once.
-*/
+import { r as reactive, c as createApp, b as buildShadowStyles, h, _ as _sfc_main, a as ref, d as registerMaildenoEditorElement } from "./element-C2ZH0Z_i.js";
+import { e, g, f, i, j, p, k, l, m, s } from "./element-C2ZH0Z_i.js";
+let stylesInjected = false;
 function injectStylesIntoHead() {
-	if (stylesInjected || typeof document === "undefined") return;
-	stylesInjected = true;
-	for (const css of buildShadowStyles()) {
-		if (!css) continue;
-		const style = document.createElement("style");
-		style.setAttribute("data-maildeno-light-dom", "");
-		style.textContent = css;
-		document.head.appendChild(style);
-	}
+  if (stylesInjected || typeof document === "undefined") return;
+  stylesInjected = true;
+  for (const css of buildShadowStyles()) {
+    if (!css) continue;
+    const style = document.createElement("style");
+    style.setAttribute("data-maildeno-light-dom", "");
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
 }
 function mountLightDom(container, initialProps) {
-	injectStylesIntoHead();
-	const props = reactive({ ...initialProps });
-	const saveHandlers = /* @__PURE__ */ new Set();
-	const editorRef = ref(null);
-	const mountEl = document.createElement("div");
-	mountEl.style.height = "100%";
-	container.appendChild(mountEl);
-	const app = createApp({ setup() {
-		return () => h(EmailEditor_default, {
-			...props,
-			ref: editorRef,
-			onSave: (payload) => saveHandlers.forEach((fn) => fn(payload))
-		});
-	} });
-	app.mount(mountEl);
-	return {
-		element: mountEl,
-		exposed: () => editorRef.value ?? null,
-		setProp: (key, value) => {
-			props[key] = value;
-		},
-		addSaveHandler: (fn) => saveHandlers.add(fn),
-		removeSaveHandler: (fn) => saveHandlers.delete(fn),
-		destroy: () => {
-			app.unmount();
-			mountEl.remove();
-		}
-	};
+  injectStylesIntoHead();
+  const props = reactive({ ...initialProps });
+  const saveHandlers = /* @__PURE__ */ new Set();
+  const editorRef = ref(null);
+  const mountEl = document.createElement("div");
+  mountEl.style.height = "100%";
+  container.appendChild(mountEl);
+  const app = createApp({
+    setup() {
+      return () => h(_sfc_main, {
+        ...props,
+        ref: editorRef,
+        onSave: (payload) => saveHandlers.forEach((fn) => fn(payload))
+      });
+    }
+  });
+  app.mount(mountEl);
+  return {
+    element: mountEl,
+    exposed: () => editorRef.value ?? null,
+    setProp: (key, value) => {
+      props[key] = value;
+    },
+    addSaveHandler: (fn) => saveHandlers.add(fn),
+    removeSaveHandler: (fn) => saveHandlers.delete(fn),
+    destroy: () => {
+      app.unmount();
+      mountEl.remove();
+    }
+  };
 }
-//#endregion
-//#region src/init.ts
 function toDomEventName(event) {
-	return event;
+  return event;
 }
 async function init(options) {
-	const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
-	if (!container) throw new Error(`[maildeno-editor] init() couldn't find a container${typeof options.container === "string" ? ` matching "${options.container}"` : ""}.`);
-	if (options.shadowDom === false) {
-		const mount = mountLightDom(container, {
-			templateId: options.templateId,
-			storageAdapter: options.storageAdapter,
-			theme: options.theme,
-			capabilities: options.capabilities,
-			onSendTestEmail: options.onSendTestEmail
-		});
-		await new Promise((resolve) => setTimeout(resolve, 0));
-		const call = (name, ...args) => {
-			const fn = mount.exposed()?.[name];
-			return typeof fn === "function" ? fn(...args) : null;
-		};
-		return {
-			element: mount.element,
-			on: (_event, handler) => mount.addSaveHandler(handler),
-			off: (_event, handler) => mount.removeSaveHandler(handler),
-			setTheme: (theme) => mount.setProp("theme", theme),
-			getHtml: (mode = "prune") => call("getHtml", mode),
-			getMjml: (mode = "prune") => call("getMjml", mode),
-			getReactEmail: (mode = "prune") => call("getReactEmail", mode),
-			getJson: () => call("getJson"),
-			destroy: () => mount.destroy()
-		};
-	}
-	registerMaildenoEditorElement();
-	const el = document.createElement("maildeno-editor");
-	if (options.templateId !== void 0) el.templateId = options.templateId;
-	if (options.storageAdapter) el.storageAdapter = options.storageAdapter;
-	if (options.theme) el.theme = options.theme;
-	if (options.capabilities) el.capabilities = options.capabilities;
-	if (options.onSendTestEmail) el.onSendTestEmail = options.onSendTestEmail;
-	container.appendChild(el);
-	await new Promise((resolve) => setTimeout(resolve, 0));
-	const listenerWrappers = /* @__PURE__ */ new WeakMap();
-	return {
-		element: el,
-		on(event, handler) {
-			const wrapped = ((e) => handler(Array.isArray(e.detail) ? e.detail[0] : e.detail));
-			listenerWrappers.set(handler, wrapped);
-			el.addEventListener(toDomEventName(event), wrapped);
-		},
-		off(event, handler) {
-			const wrapped = listenerWrappers.get(handler);
-			if (wrapped) {
-				el.removeEventListener(toDomEventName(event), wrapped);
-				listenerWrappers.delete(handler);
-			}
-		},
-		setTheme(theme) {
-			el.theme = theme;
-		},
-		getHtml(mode = "prune") {
-			return el.getHtml ? el.getHtml(mode) : null;
-		},
-		getMjml(mode = "prune") {
-			return el.getMjml ? el.getMjml(mode) : null;
-		},
-		getReactEmail(mode = "prune") {
-			return el.getReactEmail ? el.getReactEmail(mode) : null;
-		},
-		getJson() {
-			return el.getJson ? el.getJson() : null;
-		},
-		destroy() {
-			el.remove();
-		}
-	};
+  const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
+  if (!container) {
+    throw new Error(
+      `[maildeno-editor] init() couldn't find a container${typeof options.container === "string" ? ` matching "${options.container}"` : ""}.`
+    );
+  }
+  if (options.shadowDom === false) {
+    const mount = mountLightDom(container, {
+      templateId: options.templateId,
+      storageAdapter: options.storageAdapter,
+      theme: options.theme,
+      capabilities: options.capabilities,
+      onSendTestEmail: options.onSendTestEmail,
+      brandName: options.brandName,
+      versions: options.versions,
+      saveHandler: options.onSave,
+      assistant: options.assistant
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    const call = (name, ...args) => {
+      var _a;
+      const fn = (_a = mount.exposed()) == null ? void 0 : _a[name];
+      return typeof fn === "function" ? fn(...args) : null;
+    };
+    return {
+      element: mount.element,
+      on: (_event, handler) => mount.addSaveHandler(handler),
+      off: (_event, handler) => mount.removeSaveHandler(handler),
+      setTheme: (theme) => mount.setProp("theme", theme),
+      getHtml: (mode = "prune") => call("getHtml", mode),
+      getMjml: (mode = "prune") => call("getMjml", mode),
+      getReactEmail: (mode = "prune") => call("getReactEmail", mode),
+      getJson: () => call("getJson"),
+      setJson: (data, opts) => {
+        call("setJson", data, opts);
+      },
+      getSelection: () => call("getSelection"),
+      setSelection: (id) => call("setSelection", id) ?? false,
+      // Falls back to a no-op unsubscribe rather than null so callers can
+      // always call the result — a host storing it and invoking it during
+      // teardown shouldn't have to null-check a cleanup function.
+      onChange: (cb) => call("onChange", cb) ?? (() => {
+      }),
+      destroy: () => mount.destroy()
+    };
+  }
+  registerMaildenoEditorElement();
+  const el = document.createElement("maildeno-editor");
+  if (options.templateId !== void 0) el.templateId = options.templateId;
+  if (options.storageAdapter) el.storageAdapter = options.storageAdapter;
+  if (options.theme) el.theme = options.theme;
+  if (options.capabilities) el.capabilities = options.capabilities;
+  if (options.onSendTestEmail) el.onSendTestEmail = options.onSendTestEmail;
+  if (options.brandName !== void 0) el.brandName = options.brandName;
+  if (options.versions !== void 0) el.versions = options.versions;
+  if (options.assistant) el.assistant = options.assistant;
+  if (options.onSave) el.saveHandler = options.onSave;
+  container.appendChild(el);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  const listenerWrappers = /* @__PURE__ */ new WeakMap();
+  const handle = {
+    element: el,
+    on(event, handler) {
+      const wrapped = ((e2) => handler(
+        Array.isArray(e2.detail) ? e2.detail[0] : e2.detail
+      ));
+      listenerWrappers.set(handler, wrapped);
+      el.addEventListener(toDomEventName(event), wrapped);
+    },
+    off(event, handler) {
+      const wrapped = listenerWrappers.get(handler);
+      if (wrapped) {
+        el.removeEventListener(toDomEventName(event), wrapped);
+        listenerWrappers.delete(handler);
+      }
+    },
+    setTheme(theme) {
+      el.theme = theme;
+    },
+    getHtml(mode = "prune") {
+      return el.getHtml ? el.getHtml(mode) : null;
+    },
+    getMjml(mode = "prune") {
+      return el.getMjml ? el.getMjml(mode) : null;
+    },
+    getReactEmail(mode = "prune") {
+      return el.getReactEmail ? el.getReactEmail(mode) : null;
+    },
+    getJson() {
+      return el.getJson ? el.getJson() : null;
+    },
+    setJson(data, opts) {
+      var _a;
+      (_a = el.setJson) == null ? void 0 : _a.call(el, data, opts);
+    },
+    getSelection() {
+      return el.getSelection ? el.getSelection() : null;
+    },
+    setSelection(id) {
+      return el.setSelection ? el.setSelection(id) : false;
+    },
+    onChange(cb) {
+      return el.onChange ? el.onChange(cb) : () => {
+      };
+    },
+    destroy() {
+      el.remove();
+    }
+  };
+  return handle;
 }
-//#endregion
-export { createLocalStorageAdapter, getAllBlocks, getBlock, getRegisteredCustomESPs, getRegisteredMergeTagIds, init, palette, registerBlock, registerESPSyntax, registerMergeTags, setEditorTheme };
+export {
+  e as createLocalStorageAdapter,
+  g as getAllBlocks,
+  f as getBlock,
+  i as getRegisteredCustomESPs,
+  j as getRegisteredMergeTagIds,
+  init,
+  p as palette,
+  k as registerBlock,
+  l as registerESPSyntax,
+  m as registerMergeTags,
+  s as setEditorTheme
+};