@standhigher/react-email-editor 0.3.0 → 0.4.1

package/dist/index.js

@@ -31,9 +31,6 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/EmailEditor.tsx
-import { forwardRef as forwardRef3 } from "react";
-
 // src/plugins/editor-context.ts
 import { createContext, useContext } from "react";
 var RichTextFocusContext = createContext({ active: null, activate: () => {
@@ -47,7 +44,7 @@ function usePluginEditor() {
 }
 
 // src/shell/EmailEditorShell.tsx
-import { forwardRef as forwardRef2, useState as useState18 } from "react";
+import { useState as useState18 } from "react";
 
 // src/editor-dnd/EditorDnd.tsx
 import { useLayoutEffect as useLayoutEffect5, useMemo, useRef as useRef7, useState as useState7 } from "react";
@@ -2730,13 +2727,13 @@ function bindPluginComponent(Component2) {
 // src/plugins/controls.ts
 import { createElement as createElement2 } from "react";
 
-// src/plugins/config-snapshot.ts
+// src/utils/snapshot.ts
 import { isValidElement } from "react";
-function snapshotConfig(value) {
-  if (Array.isArray(value)) return Object.freeze(value.map((item) => snapshotConfig(item)));
+function snapshotValue(value) {
+  if (Array.isArray(value)) return Object.freeze(value.map((item) => snapshotValue(item)));
   if (!value || typeof value !== "object" || isValidElement(value)) return value;
   if (Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return value;
-  return Object.freeze(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshotConfig(item)])));
+  return Object.freeze(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshotValue(item)])));
 }
 
 // src/plugins/control-validation.ts
@@ -2761,10 +2758,10 @@ function controlConstraintError(kind, options, value) {
 // src/plugins/controls.ts
 function buildControl(kind, options, fallback, parse) {
   var _b;
-  const _a = snapshotConfig(options), { component: Component2, validate } = _a, config = __objRest(_a, ["component", "validate"]);
+  const _a = snapshotValue(options), { component: Component2, validate } = _a, config = __objRest(_a, ["component", "validate"]);
   const defaultValue = structuredClone((_b = config.defaultValue) != null ? _b : fallback);
   const read = (value) => value === void 0 ? structuredClone(defaultValue) : parse(value);
-  return snapshotConfig(__spreadProps(__spreadValues({}, config), {
+  return snapshotValue(__spreadProps(__spreadValues({}, config), {
     kind,
     defaultValue,
     read,
@@ -2799,8 +2796,8 @@ var EmailControls = {
   }),
   list(options) {
     const _a = options, { controls } = _a, config = __objRest(_a, ["controls"]);
-    const schema = snapshotConfig(controls);
-    return snapshotConfig(__spreadProps(__spreadValues({}, buildControl("list", config, [], (value) => Array.isArray(value) ? value.map((item) => readControlValues(schema, item && typeof item === "object" ? item : {})) : [])), { itemControls: schema }));
+    const schema = snapshotValue(controls);
+    return snapshotValue(__spreadProps(__spreadValues({}, buildControl("list", config, [], (value) => Array.isArray(value) ? value.map((item) => readControlValues(schema, item && typeof item === "object" ? item : {})) : [])), { itemControls: schema }));
   },
   custom(options) {
     const _a = options, { read } = _a, config = __objRest(_a, ["read"]);
@@ -2811,7 +2808,7 @@ var EmailControls = {
 // src/plugins/define-block.ts
 function defineBlock(input) {
   var _a, _b, _c;
-  const options = snapshotConfig(input);
+  const options = snapshotValue(input);
   if (!options.type.trim() || !options.title.trim()) throw new Error("Block type and title are required.");
   const schema = (_a = options.controls) != null ? _a : {};
   const readControls = (source) => {
@@ -2824,7 +2821,7 @@ function defineBlock(input) {
   for (const item of (_b = options.styleControls) != null ? _b : []) styles.set(item.id, item);
   const inline = Object.entries(schema).filter(([, spec]) => spec.kind === "richText" && spec.inline);
   if (inline.length > 1 && !options.Canvas) throw new Error(`${options.type}: multiple inline controls require a Canvas component.`);
-  return snapshotConfig({
+  return snapshotValue({
     type: options.type,
     title: options.title,
     description: options.description,
@@ -4638,8 +4635,10 @@ function renderTemplatePreview(html, defaultData) {
 }
 
 // src/render/block-html.ts
-function normalizeBlockRenderOptions(options) {
-  return typeof options === "boolean" ? { resolveHtmlTemplate: options } : options;
+function assertBlockRenderOptions(options) {
+  if (!options || typeof options !== "object" || Array.isArray(options)) {
+    throw new TypeError("Block render options must be an object.");
+  }
 }
 function renderPreparedBlock(context, definition) {
   try {
@@ -4712,23 +4711,23 @@ function mergeTemplateData(variables, defaultData) {
 }
 function renderBlockContent(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
   var _a;
-  const normalizedOptions = normalizeBlockRenderOptions(options);
+  assertBlockRenderOptions(options);
   const rendered = renderBlock(
     node,
     definitions,
     mode,
-    (_a = normalizedOptions.body) != null ? _a : DEFAULT_EMAIL_BODY
+    (_a = options.body) != null ? _a : DEFAULT_EMAIL_BODY
   );
-  return resolveBlockContent(rendered, node, normalizedOptions);
+  return resolveBlockContent(rendered, node, options);
 }
-function resolveBlockContent(rendered, node, normalizedOptions) {
+function resolveBlockContent(rendered, node, options) {
   var _a, _b;
-  if (!normalizedOptions.resolveHtmlTemplate) {
-    return applyListedVariableDots(rendered, (_a = normalizedOptions.variables) != null ? _a : []);
+  if (!options.resolveHtmlTemplate) {
+    return applyListedVariableDots(rendered, (_a = options.variables) != null ? _a : []);
   }
   return renderTemplatePreview(
     rendered,
-    (_b = normalizedOptions.templateData) != null ? _b : node.defaultData
+    (_b = options.templateData) != null ? _b : node.defaultData
   );
 }
 function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body = DEFAULT_EMAIL_BODY) {
@@ -4742,10 +4741,10 @@ function renderBlock(node, definitions = DEFAULT_BLOCKS, mode = "email", body =
 }
 function blockToHtml(node, definitions = DEFAULT_BLOCKS, mode = "email", options = {}) {
   var _a, _b, _c;
-  const normalizedOptions = normalizeBlockRenderOptions(options);
-  const body = (_a = normalizedOptions.body) != null ? _a : DEFAULT_EMAIL_BODY;
+  assertBlockRenderOptions(options);
+  const body = (_a = options.body) != null ? _a : DEFAULT_EMAIL_BODY;
   const style = resolveBlockStyle(node.style, getBlockDefinition(node.type, definitions));
-  const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, normalizedOptions), {
+  const inner = renderBlockContent(node, definitions, mode, __spreadProps(__spreadValues({}, options), {
     body
   }));
   const height = cssPx((_b = style.dimension) == null ? void 0 : _b.height);
@@ -4785,8 +4784,8 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
     const frame = frameRef.current;
     const document = frame == null ? void 0 : frame.contentDocument;
     if (!container || !frame || !(document == null ? void 0 : document.body)) return;
-    const window = document.defaultView;
-    if (!window) return;
+    const window2 = document.defaultView;
+    if (!window2) return;
     let animationFrame = 0;
     const fit = () => {
       const availableWidth = container.clientWidth;
@@ -4798,12 +4797,12 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
       container.style.height = `${contentHeight}px`;
     };
     const scheduleFit = () => {
-      window.cancelAnimationFrame(animationFrame);
-      animationFrame = window.requestAnimationFrame(fit);
+      window2.cancelAnimationFrame(animationFrame);
+      animationFrame = window2.requestAnimationFrame(fit);
     };
-    const observer = new window.ResizeObserver(scheduleFit);
+    const observer = new window2.ResizeObserver(scheduleFit);
     let previousWidth = container.clientWidth;
-    const containerObserver = new window.ResizeObserver(() => {
+    const containerObserver = new window2.ResizeObserver(() => {
       if (container.clientWidth === previousWidth) return;
       previousWidth = container.clientWidth;
       scheduleFit();
@@ -4816,7 +4815,7 @@ function HtmlCanvas({ html, baseCss = "", onSelect }) {
       observer.disconnect();
       containerObserver.disconnect();
       document.removeEventListener("load", scheduleFit, true);
-      window.cancelAnimationFrame(animationFrame);
+      window2.cancelAnimationFrame(animationFrame);
     };
   }, []);
   useEffect6(() => () => {
@@ -5420,13 +5419,13 @@ function Stage({
   ] });
 }
 
+// src/shell/SubjectBar.tsx
+import { useId as useId13, useRef as useRef15 } from "react";
+
 // src/shell/constants.ts
 var EMPTY_VARIABLES = [];
 var PERSONALIZATION_HINT = "Personalization fields will appear blank if no data is available.";
 
-// src/shell/SubjectBar.tsx
-import { useId as useId13, useRef as useRef15 } from "react";
-
 // src/shell/PersonalizationMenu.tsx
 import { useEffect as useEffect8, useRef as useRef14, useState as useState16 } from "react";
 import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
@@ -5488,6 +5487,7 @@ function SubjectBar({
   onSubjectChange
 }) {
   const inputRef = useRef15(null);
+  const subjectId = useId13();
   const countId = useId13();
   const insertVariable = (token) => {
     var _a, _b;
@@ -5507,12 +5507,12 @@ function SubjectBar({
     });
   };
   return /* @__PURE__ */ jsxs44("div", { className: "ree-subject-bar", children: [
-    /* @__PURE__ */ jsx57("label", { className: "ree-subject-label", htmlFor: "ree-email-subject", children: "Email subject" }),
+    /* @__PURE__ */ jsx57("label", { className: "ree-subject-label", htmlFor: subjectId, children: "Email subject" }),
     /* @__PURE__ */ jsxs44("div", { className: "ree-subject-field", children: [
       /* @__PURE__ */ jsx57(
         TextInput,
         {
-          id: "ree-email-subject",
+          id: subjectId,
           ref: inputRef,
           className: "ree-subject-input",
           value: subject,
@@ -5534,6 +5534,9 @@ function SubjectBar({
   ] });
 }
 
+// src/shell/useEditorSession.ts
+import { useCallback as useCallback3, useState as useState17, useSyncExternalStore } from "react";
+
 // src/utils/id.ts
 function generateId(prefix = "block") {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
@@ -5542,62 +5545,6 @@ function generateId(prefix = "block") {
   return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-// src/document/create-block.ts
-function createBlockNode(type, definitions) {
-  var _a, _b;
-  const definition = getBlockDefinition(type, definitions);
-  if (!definition) return null;
-  const controls = structuredClone(definition.readControls({}));
-  let style = resolveBlockStyle(definition.defaultStyle, definition);
-  for (const control of (_a = definition.styleControls) != null ? _a : []) {
-    const [group, key] = control.id.split(".");
-    const stored = (_b = definition.defaultStyle) == null ? void 0 : _b[group];
-    if (control.defaultValue !== void 0 && (!stored || !(key in stored))) style = writeStyleValue(style, control.id, control.defaultValue);
-  }
-  return {
-    id: generateId(type),
-    type,
-    controls,
-    style,
-    defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
-  };
-}
-
-// src/plugins/config.ts
-function createEmailEditorConfig(options = {}) {
-  var _a, _b, _c;
-  const definitions = new Map(DEFAULT_BLOCKS.map((block) => [block.type, block]));
-  const customTypes = /* @__PURE__ */ new Set();
-  for (const plugin of (_a = options.plugins) != null ? _a : []) {
-    if (customTypes.has(plugin.type)) throw new Error(`Duplicate block plugin: ${plugin.type}`);
-    if (definitions.has(plugin.type) && !plugin.override) throw new Error(`Block ${plugin.type} already exists. Set override: true to replace it.`);
-    customTypes.add(plugin.type);
-    definitions.set(plugin.type, plugin);
-  }
-  const builtinTypes = new Set(DEFAULT_BLOCKS.map((block) => block.type));
-  const visibleBuiltins = options.builtins === false ? [] : (_b = options.builtins) != null ? _b : [...builtinTypes];
-  if (new Set(visibleBuiltins).size !== visibleBuiltins.length) throw new Error("Duplicate builtin in library order.");
-  for (const type of visibleBuiltins) if (!builtinTypes.has(type)) throw new Error(`Unknown builtin block: ${type}`);
-  const all = Object.freeze([...definitions.values()].map((plugin) => snapshotConfig(plugin)));
-  const registered = new Map(all.map((plugin) => [plugin.type, plugin]));
-  return Object.freeze({
-    definitions: all,
-    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_c = options.plugins) != null ? _c : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
-    pickImage: options.pickImage,
-    createBlock: (type) => {
-      const block = createBlockNode(type, all);
-      if (!block) throw new Error(`Unknown block plugin: ${type}`);
-      return block;
-    },
-    toHtml: (document, htmlOptions) => documentToHtml(document, all, htmlOptions),
-    validate: (document) => validateDocument(document, all)
-  });
-}
-var DEFAULT_EDITOR_CONFIG = createEmailEditorConfig();
-
-// src/shell/useEditorSession.ts
-import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect8, useMemo as useMemo5, useRef as useRef16, useState as useState17 } from "react";
-
 // src/document/mutations.ts
 function moveItem(items, from, to) {
   const next = items.slice();
@@ -5666,68 +5613,215 @@ function updateBodySettings(document, patch) {
   });
 }
 
+// src/document/create-block.ts
+function createBlockNode(type, definitions) {
+  var _a, _b;
+  const definition = getBlockDefinition(type, definitions);
+  if (!definition) return null;
+  const controls = structuredClone(definition.readControls({}));
+  let style = resolveBlockStyle(definition.defaultStyle, definition);
+  for (const control of (_a = definition.styleControls) != null ? _a : []) {
+    const [group, key] = control.id.split(".");
+    const stored = (_b = definition.defaultStyle) == null ? void 0 : _b[group];
+    if (control.defaultValue !== void 0 && (!stored || !(key in stored))) style = writeStyleValue(style, control.id, control.defaultValue);
+  }
+  return {
+    id: generateId(type),
+    type,
+    controls,
+    style,
+    defaultData: definition.defaultData ? structuredClone(definition.defaultData) : void 0
+  };
+}
+
+// src/plugins/config.ts
+function buildEmailEditorConfig(options = {}) {
+  var _a, _b, _c;
+  const definitions = new Map(DEFAULT_BLOCKS.map((block) => [block.type, block]));
+  const customTypes = /* @__PURE__ */ new Set();
+  for (const plugin of (_a = options.plugins) != null ? _a : []) {
+    if (customTypes.has(plugin.type)) throw new Error(`Duplicate block plugin: ${plugin.type}`);
+    if (definitions.has(plugin.type) && !plugin.override) throw new Error(`Block ${plugin.type} already exists. Set override: true to replace it.`);
+    customTypes.add(plugin.type);
+    definitions.set(plugin.type, plugin);
+  }
+  const builtinTypes = new Set(DEFAULT_BLOCKS.map((block) => block.type));
+  const visibleBuiltins = options.builtins === false ? [] : (_b = options.builtins) != null ? _b : [...builtinTypes];
+  if (new Set(visibleBuiltins).size !== visibleBuiltins.length) throw new Error("Duplicate builtin in library order.");
+  for (const type of visibleBuiltins) if (!builtinTypes.has(type)) throw new Error(`Unknown builtin block: ${type}`);
+  const all = Object.freeze([...definitions.values()].map((plugin) => snapshotValue(plugin)));
+  const registered = new Map(all.map((plugin) => [plugin.type, plugin]));
+  return Object.freeze({
+    definitions: all,
+    library: Object.freeze([...visibleBuiltins.map((type) => registered.get(type)), ...((_c = options.plugins) != null ? _c : []).filter((plugin) => !builtinTypes.has(plugin.type)).map((plugin) => registered.get(plugin.type))]),
+    pickImage: options.pickImage,
+    createBlock: (type) => {
+      const block = createBlockNode(type, all);
+      if (!block) throw new Error(`Unknown block plugin: ${type}`);
+      return block;
+    },
+    toHtml: (document, htmlOptions) => documentToHtml(document, all, htmlOptions),
+    validate: (document) => validateDocument(document, all)
+  });
+}
+var DEFAULT_EDITOR_CONFIG = buildEmailEditorConfig();
+
+// src/shell/editor-store.ts
+var stores = /* @__PURE__ */ new WeakMap();
+function copyDocument(document) {
+  return ensureEmailDocument(structuredClone(document));
+}
+function getEditorStore(editor) {
+  const store = stores.get(editor);
+  if (!store) throw new Error("EmailEditor requires an instance returned by useEmailEditor().");
+  return store;
+}
+function createEditorStore(options) {
+  var _a, _b, _c, _d;
+  let callbacks = options;
+  const base = copyDocument((_a = options.initialDocument) != null ? _a : createEmptyDocument());
+  const initial = options.body === void 0 ? base : __spreadProps(__spreadValues({}, base), { body: mergeEmailBody(base.body, options.body) });
+  let snapshot = {
+    document: initial,
+    config: (_b = options.config) != null ? _b : DEFAULT_EDITOR_CONFIG,
+    variables: structuredClone((_c = options.variables) != null ? _c : EMPTY_VARIABLES),
+    resetKey: generateId("session")
+  };
+  let state = snapshotValue({ document: copyDocument(initial) });
+  let bodyKey = JSON.stringify(options.body);
+  let variablesKey = JSON.stringify((_d = options.variables) != null ? _d : EMPTY_VARIABLES);
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => listeners.forEach((listener) => listener());
+  let optionsChanged = false;
+  let pendingBodyDocument;
+  const setSnapshot = (next) => {
+    if (next.document !== snapshot.document) state = snapshotValue({ document: copyDocument(next.document) });
+    snapshot = next;
+  };
+  const flushOptions = () => {
+    const shouldNotify = optionsChanged;
+    const document = pendingBodyDocument;
+    const onChange = callbacks.onChange;
+    optionsChanged = false;
+    pendingBodyDocument = void 0;
+    if (shouldNotify) notify();
+    if (document) onChange == null ? void 0 : onChange(copyDocument(document));
+  };
+  const publish = (next) => {
+    setSnapshot(next);
+    notify();
+  };
+  const commit = (document, bodyChange = false) => {
+    var _a2, _b2;
+    flushOptions();
+    if (document === snapshot.document) return;
+    const next = copyDocument(document);
+    publish(__spreadProps(__spreadValues({}, snapshot), { document: next }));
+    (_a2 = callbacks.onChange) == null ? void 0 : _a2.call(callbacks, copyDocument(next));
+    if (bodyChange) (_b2 = callbacks.onBodyChange) == null ? void 0 : _b2.call(callbacks, structuredClone(next.body));
+  };
+  const replace = (document) => {
+    var _a2;
+    flushOptions();
+    const next = copyDocument(document);
+    publish(__spreadProps(__spreadValues({}, snapshot), { document: next, resetKey: generateId("session") }));
+    (_a2 = callbacks.onChange) == null ? void 0 : _a2.call(callbacks, copyDocument(next));
+  };
+  const getDocument = () => copyDocument(snapshot.document);
+  const editor = Object.freeze({
+    getDocument,
+    getJson: () => JSON.stringify(getDocument(), null, 2),
+    getHtml: () => snapshot.config.toHtml(getDocument(), { variables: structuredClone(snapshot.variables) }),
+    getRenderedHtml: () => snapshot.config.toHtml(getDocument(), { variables: structuredClone(snapshot.variables), resolveHtmlTemplates: true }),
+    getData: () => {
+      const document = getDocument();
+      const { config } = snapshot;
+      const variables = structuredClone(snapshot.variables);
+      return {
+        document,
+        json: JSON.stringify(document, null, 2),
+        html: config.toHtml(document, { variables }),
+        renderedHtml: config.toHtml(document, { variables, resolveHtmlTemplates: true })
+      };
+    },
+    setDocument: replace,
+    reset: () => replace(initial),
+    validate: () => snapshot.config.validate(getDocument())
+  });
+  const store = {
+    editor,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => snapshot,
+    getState: () => state,
+    commit,
+    flushOptions,
+    updateOptions: (nextOptions) => {
+      var _a2, _b2, _c2;
+      callbacks = nextOptions;
+      const nextVariablesKey = JSON.stringify((_a2 = nextOptions.variables) != null ? _a2 : EMPTY_VARIABLES);
+      const nextBodyKey = JSON.stringify(nextOptions.body);
+      let next = snapshot;
+      const config = (_b2 = nextOptions.config) != null ? _b2 : DEFAULT_EDITOR_CONFIG;
+      if (config !== next.config || nextVariablesKey !== variablesKey) {
+        next = __spreadProps(__spreadValues({}, next), { config, variables: structuredClone((_c2 = nextOptions.variables) != null ? _c2 : EMPTY_VARIABLES) });
+      }
+      variablesKey = nextVariablesKey;
+      let bodyChanged = false;
+      if (bodyKey !== nextBodyKey && nextOptions.body !== void 0) {
+        const body = mergeEmailBody(next.document.body, nextOptions.body);
+        bodyChanged = !sameEmailBody(next.document.body, body);
+        if (bodyChanged) next = __spreadProps(__spreadValues({}, next), { document: __spreadProps(__spreadValues({}, next.document), { body }) });
+      }
+      bodyKey = nextBodyKey;
+      if (next !== snapshot) {
+        setSnapshot(next);
+        optionsChanged = true;
+      }
+      if (bodyChanged) pendingBodyDocument = next.document;
+    }
+  };
+  stores.set(editor, store);
+  return store;
+}
+
 // src/shell/useEditorSession.ts
-function useEditorSession({
-  initialDocument,
-  body,
-  config = DEFAULT_EDITOR_CONFIG,
-  variables = EMPTY_VARIABLES,
-  onChange,
-  onBodyChange
-}) {
+function useEditorSession(editor) {
   var _a;
+  const store = getEditorStore(editor);
+  const { document, config, variables, resetKey } = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
   const definitions = config.definitions;
-  const [document, setDocument] = useState17(() => {
-    const base = ensureEmailDocument(
-      structuredClone(initialDocument != null ? initialDocument : createEmptyDocument())
-    );
-    if (body === void 0) return base;
-    return __spreadProps(__spreadValues({}, base), { body: mergeEmailBody(base.body, body) });
-  });
   const [selectedId, setSelectedId] = useState17(null);
-  const documentRef = useRef16(document);
-  useLayoutEffect8(() => {
-    documentRef.current = document;
-  }, [document]);
-  const commit = useCallback3(
-    (next) => {
-      documentRef.current = next;
-      setDocument(next);
-      onChange == null ? void 0 : onChange(structuredClone(next));
-    },
-    [onChange]
-  );
-  useEffect9(() => {
-    if (body === void 0) return;
-    const current = documentRef.current;
-    const nextBody = mergeEmailBody(current.body, body);
-    if (sameEmailBody(resolveEmailBody(current.body), nextBody)) return;
-    commit(__spreadProps(__spreadValues({}, current), { body: nextBody }));
-  }, [body, commit]);
-  const getDocument = useCallback3(
-    () => ensureEmailDocument(structuredClone(documentRef.current)),
-    []
-  );
+  const [previousReset, setPreviousReset] = useState17({ editor, resetKey });
+  if (previousReset.editor !== editor || previousReset.resetKey !== resetKey) {
+    setPreviousReset({ editor, resetKey });
+    setSelectedId(null);
+  }
+  const commit = store.commit;
   const selectBlock = useCallback3((id) => {
     setSelectedId(id);
   }, []);
   const insertBlock = useCallback3(
     (type, index) => {
-      const node = createBlockNode(type, definitions);
+      const node = definitions.some((definition) => definition.type === type) ? config.createBlock(type) : null;
       if (!node) return false;
-      commit(insertBlockNode(documentRef.current, node, index));
+      commit(insertBlockNode(store.getSnapshot().document, node, index));
       setSelectedId(node.id);
       return true;
     },
-    [commit, definitions]
+    [commit, definitions, config, store]
   );
   const updateControls = useCallback3(
     (id, patch) => {
-      const current = documentRef.current;
+      const current = store.getSnapshot().document;
       const next = updateBlockControls(current, id, patch);
       if (next !== current) commit(next);
     },
-    [commit]
+    [commit, store]
   );
   const updateControl = useCallback3(
     (id, name, value) => updateControls(id, { [name]: value }),
@@ -5735,58 +5829,56 @@ function useEditorSession({
   );
   const updateStyle = useCallback3(
     (id, styleId, value) => {
-      commit(updateBlockStyle(documentRef.current, id, styleId, value));
+      commit(updateBlockStyle(store.getSnapshot().document, id, styleId, value));
     },
-    [commit]
+    [commit, store]
   );
   const updateBody = useCallback3(
     (patch) => {
-      const next = updateBodySettings(documentRef.current, patch);
-      commit(next);
-      onBodyChange == null ? void 0 : onBodyChange(structuredClone(next.body));
+      const next = updateBodySettings(store.getSnapshot().document, patch);
+      store.commit(next, true);
     },
-    [commit, onBodyChange]
+    [store]
   );
   const moveBlock = useCallback3(
     (id, direction) => {
-      commit(moveBlockBy(documentRef.current, id, direction));
+      commit(moveBlockBy(store.getSnapshot().document, id, direction));
     },
-    [commit]
+    [commit, store]
   );
   const duplicateBlock = useCallback3(
     (id) => {
-      commit(duplicateBlockNode(documentRef.current, id));
+      commit(duplicateBlockNode(store.getSnapshot().document, id));
     },
-    [commit]
+    [commit, store]
   );
   const removeBlock = useCallback3(
     (id) => {
-      commit(removeBlockNode(documentRef.current, id));
+      commit(removeBlockNode(store.getSnapshot().document, id));
       setSelectedId((current) => current === id ? null : current);
     },
-    [commit]
+    [commit, store]
   );
   const reorderBlocks = useCallback3(
     (activeId, overId) => {
-      commit(reorderBlockNodes(documentRef.current, activeId, overId));
+      commit(reorderBlockNodes(store.getSnapshot().document, activeId, overId));
     },
-    [commit]
+    [commit, store]
   );
   const setSubject = useCallback3(
     (subject) => {
-      commit(withSubject(documentRef.current, subject.slice(0, SUBJECT_MAX_LENGTH)));
+      commit(withSubject(store.getSnapshot().document, subject.slice(0, SUBJECT_MAX_LENGTH)));
     },
-    [commit]
+    [commit, store]
   );
-  const resolvedDocument = useMemo5(() => ensureEmailDocument(document), [document]);
-  const selectedBlock = (_a = resolvedDocument.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
+  const selectedBlock = (_a = document.blocks.find((block) => block.id === selectedId)) != null ? _a : null;
   const selectedDefinition = selectedBlock ? getBlockDefinition(selectedBlock.type, definitions) : void 0;
-  return {
-    document: resolvedDocument,
-    getDocument,
+  return __spreadProps(__spreadValues({}, editor), {
+    document,
     definitions,
     config,
     variables,
+    resetKey,
     selectedId,
     selectedBlock,
     selectedDefinition,
@@ -5801,158 +5893,144 @@ function useEditorSession({
     removeBlock,
     reorderBlocks,
     setSubject
-  };
-}
-
-// src/shell/useEditorHandle.ts
-import { useImperativeHandle } from "react";
-function useEditorHandle(ref, { getDocument, definitions, variables }) {
-  useImperativeHandle(ref, () => ({
-    getData: () => {
-      const document = getDocument();
-      return {
-        document,
-        json: JSON.stringify(document, null, 2),
-        html: documentToHtml(document, definitions, { variables }),
-        renderedHtml: documentToHtml(document, definitions, {
-          resolveHtmlTemplates: true,
-          variables
-        })
-      };
-    },
-    getDocument,
-    getJson: () => JSON.stringify(getDocument(), null, 2),
-    getHtml: () => documentToHtml(getDocument(), definitions, { variables }),
-    getRenderedHtml: () => documentToHtml(getDocument(), definitions, {
-      resolveHtmlTemplates: true,
-      variables
-    })
-  }), [getDocument, definitions, variables]);
+  });
 }
 
 // src/shell/EmailEditorShell.tsx
 import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
-var EmailEditorShell = forwardRef2(
-  function EmailEditorShell2({
-    initialDocument,
-    body,
-    config,
-    variables = EMPTY_VARIABLES,
-    height = "100%",
-    onChange,
-    onBodyChange
-  }, ref) {
-    var _a;
-    const session = useEditorSession({
-      initialDocument,
-      body,
-      config,
-      variables,
-      onChange,
-      onBodyChange
-    });
-    useEditorHandle(ref, session);
-    const [activeRichText, setActiveRichText] = useState18(null);
-    const [viewMode, setViewMode] = useState18("edit");
-    const [device, setDevice] = useState18("desktop");
-    const [inspectorPanel, setInspectorPanel] = useState18("body");
-    const [previousSelectedId, setPreviousSelectedId] = useState18(session.selectedId);
-    if (previousSelectedId !== session.selectedId) {
-      setPreviousSelectedId(session.selectedId);
-      if (!session.selectedId) setInspectorPanel("body");
+function EmailEditorShell({ editor, height = "100%" }) {
+  var _a;
+  const session = useEditorSession(editor);
+  const [activeRichText, setActiveRichText] = useState18(null);
+  const [viewMode, setViewMode] = useState18("edit");
+  const [device, setDevice] = useState18("desktop");
+  const [inspectorPanel, setInspectorPanel] = useState18("body");
+  const [previousReset, setPreviousReset] = useState18({ editor, key: session.resetKey });
+  if (previousReset.editor !== editor || previousReset.key !== session.resetKey) {
+    setPreviousReset({ editor, key: session.resetKey });
+    setActiveRichText(null);
+    setInspectorPanel("body");
+  }
+  const [previousSelectedId, setPreviousSelectedId] = useState18(session.selectedId);
+  if (previousSelectedId !== session.selectedId) {
+    setPreviousSelectedId(session.selectedId);
+    if (!session.selectedId) setInspectorPanel("body");
+  }
+  const selectBlock = (id) => {
+    const hadSelection = session.selectedId !== null;
+    session.selectBlock(id);
+    if (!id) {
+      setInspectorPanel("body");
+      return;
     }
-    const selectBlock = (id) => {
-      const hadSelection = session.selectedId !== null;
-      session.selectBlock(id);
-      if (!id) {
-        setInspectorPanel("body");
-        return;
-      }
-      if (!hadSelection) setInspectorPanel("block");
-    };
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      const target = event.target;
-      const tag = target == null ? void 0 : target.tagName;
-      if ((target == null ? void 0 : target.isContentEditable) || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
-        return;
+    if (!hadSelection) setInspectorPanel("block");
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "Escape") return;
+    const target = event.target;
+    const tag = target == null ? void 0 : target.tagName;
+    if ((target == null ? void 0 : target.isContentEditable) || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") {
+      return;
+    }
+    selectBlock(null);
+  };
+  const showCanvas = () => setViewMode("edit");
+  return /* @__PURE__ */ jsx58(EditorConfigContext.Provider, { value: session.config, children: /* @__PURE__ */ jsx58(RichTextFocusContext.Provider, { value: { active: activeRichText, activate: setActiveRichText }, children: /* @__PURE__ */ jsxs45("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsx58(
+      SubjectBar,
+      {
+        subject: (_a = session.document.subject) != null ? _a : "",
+        variables: session.variables,
+        onSubjectChange: session.setSubject
       }
-      selectBlock(null);
-    };
-    const showCanvas = () => setViewMode("edit");
-    return /* @__PURE__ */ jsx58(EditorConfigContext.Provider, { value: session.config, children: /* @__PURE__ */ jsx58(RichTextFocusContext.Provider, { value: { active: activeRichText, activate: setActiveRichText }, children: /* @__PURE__ */ jsxs45("div", { className: "ree-root", style: { height }, onKeyDown: handleKeyDown, children: [
+    ),
+    /* @__PURE__ */ jsxs45("div", { className: "ree-body", children: [
+      /* @__PURE__ */ jsxs45(
+        EditorDnd,
+        {
+          blocks: session.document.blocks,
+          definitions: session.definitions,
+          onInsertBlock: (type, index) => {
+            showCanvas();
+            if (session.insertBlock(type, index)) setInspectorPanel("block");
+          },
+          onReorder: session.reorderBlocks,
+          onLibraryDragStart: showCanvas,
+          children: [
+            /* @__PURE__ */ jsx58(
+              BlockLibrary,
+              {
+                definitions: session.config.library,
+                onAdd: (type) => {
+                  showCanvas();
+                  if (session.insertBlock(type)) setInspectorPanel("block");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx58(
+              Stage,
+              {
+                session,
+                viewMode,
+                device,
+                onViewModeChange: setViewMode,
+                onDeviceChange: setDevice,
+                onSelectBlock: selectBlock
+              }
+            )
+          ]
+        }
+      ),
       /* @__PURE__ */ jsx58(
-        SubjectBar,
+        Inspector,
         {
-          subject: (_a = session.document.subject) != null ? _a : "",
+          panel: inspectorPanel,
+          body: session.document.body,
+          block: session.selectedBlock,
+          definition: session.selectedDefinition,
           variables: session.variables,
-          onSubjectChange: session.setSubject
+          onPanelChange: setInspectorPanel,
+          onCommitBody: session.updateBody,
+          onCommitControl: session.updateControl,
+          onCommitControls: session.updateControls,
+          onCommitStyle: session.updateStyle
         }
-      ),
-      /* @__PURE__ */ jsxs45("div", { className: "ree-body", children: [
-        /* @__PURE__ */ jsxs45(
-          EditorDnd,
-          {
-            blocks: session.document.blocks,
-            definitions: session.definitions,
-            onInsertBlock: (type, index) => {
-              showCanvas();
-              if (session.insertBlock(type, index)) setInspectorPanel("block");
-            },
-            onReorder: session.reorderBlocks,
-            onLibraryDragStart: showCanvas,
-            children: [
-              /* @__PURE__ */ jsx58(
-                BlockLibrary,
-                {
-                  definitions: session.config.library,
-                  onAdd: (type) => {
-                    showCanvas();
-                    if (session.insertBlock(type)) setInspectorPanel("block");
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx58(
-                Stage,
-                {
-                  session,
-                  viewMode,
-                  device,
-                  onViewModeChange: setViewMode,
-                  onDeviceChange: setDevice,
-                  onSelectBlock: selectBlock
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          Inspector,
-          {
-            panel: inspectorPanel,
-            body: session.document.body,
-            block: session.selectedBlock,
-            definition: session.selectedDefinition,
-            variables: session.variables,
-            onPanelChange: setInspectorPanel,
-            onCommitBody: session.updateBody,
-            onCommitControl: session.updateControl,
-            onCommitControls: session.updateControls,
-            onCommitStyle: session.updateStyle
-          }
-        )
-      ] })
-    ] }) }) });
-  }
-);
+      )
+    ] })
+  ] }, session.resetKey) }) });
+}
 
 // src/EmailEditor.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
-var EmailEditor = forwardRef3(
-  function EmailEditor2(props, ref) {
-    return /* @__PURE__ */ jsx59(EmailEditorShell, __spreadProps(__spreadValues({}, props), { ref }));
-  }
-);
+function EmailEditor(props) {
+  return /* @__PURE__ */ jsx59(EmailEditorShell, __spreadValues({}, props));
+}
+
+// src/plugins/useEmailEditorConfig.ts
+import { useMemo as useMemo5 } from "react";
+function useEmailEditorConfig(options = {}) {
+  const { plugins, builtins, pickImage } = options;
+  return useMemo5(() => buildEmailEditorConfig({ plugins, builtins, pickImage }), [plugins, builtins, pickImage]);
+}
+
+// src/shell/useEmailEditor.ts
+import { useEffect as useEffect9, useInsertionEffect, useLayoutEffect as useLayoutEffect8, useState as useState19 } from "react";
+var useOptionsEffect = typeof window === "undefined" ? useEffect9 : useLayoutEffect8;
+function useEmailEditor(options = {}) {
+  const [store] = useState19(() => createEditorStore(options));
+  useInsertionEffect(() => {
+    store.updateOptions(options);
+  });
+  useOptionsEffect(store.flushOptions);
+  return store.editor;
+}
+
+// src/shell/useEmailEditorState.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useEmailEditorState(editor) {
+  const store = getEditorStore(editor);
+  return useSyncExternalStore2(store.subscribe, store.getState, store.getState);
+}
 
 // src/plugins/components/ControlEditor.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
@@ -5991,7 +6069,6 @@ export {
   createDecorationControls,
   createDimensionControls,
   createEmailDocument,
-  createEmailEditorConfig,
   createTypographyControls,
   defineBlock,
   documentToHtml,
@@ -6002,5 +6079,8 @@ export {
   renderBlockContent,
   renderTemplatePreview,
   resolveEmailBody,
+  useEmailEditor,
+  useEmailEditorConfig,
+  useEmailEditorState,
   variablesToTemplateData
 };