@kontakto/email-template-editor 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -1677,6 +1677,9 @@ function resetDocument(document2) {
     selectedBlockId: null
   });
 }
+function getDocument() {
+  return editorStateStore.getState().document;
+}
 function setDocument(document2) {
   const originalDocument = editorStateStore.getState().document;
   editorStateStore.setState({
@@ -1700,61 +1703,49 @@ function setPersistenceEnabled(persistenceEnabled) {
 var EmailEditorContext = React81.createContext(null);
 var EmailEditorProvider = ({
   children,
-  initialTemplate,
   initialTemplateId = null,
   initialTemplateName = null,
-  onSave,
-  onChange
+  onSave
 }) => {
-  const [template, setTemplate] = React81.useState(initialTemplate || {});
   const [currentTemplateId, setCurrentTemplateId] = React81.useState(initialTemplateId);
   const [currentTemplateName, setCurrentTemplateName] = React81.useState(initialTemplateName);
-  const [saveListeners, setSaveListeners] = React81.useState([]);
-  const updateTemplate = React81.useCallback((newTemplate) => {
-    setTemplate(newTemplate);
-    if (onChange) {
-      onChange(newTemplate);
-    }
-  }, [onChange]);
+  const saveListenersRef = React81.useRef([]);
+  const onSaveRef = React81.useRef(onSave);
+  onSaveRef.current = onSave;
   const saveTemplate = React81.useCallback(() => {
-    saveListeners.forEach((listener) => listener(template));
-    if (onSave) {
-      onSave(template);
+    const currentDoc = getDocument();
+    saveListenersRef.current.forEach((listener) => listener(currentDoc));
+    if (onSaveRef.current) {
+      onSaveRef.current(currentDoc);
     }
-    return template;
-  }, [template, saveListeners, onSave]);
+    return currentDoc;
+  }, []);
   const loadTemplate = React81.useCallback((newTemplate, templateId, templateName) => {
-    setTemplate(newTemplate);
     if (templateId !== void 0) {
       setCurrentTemplateId(templateId);
     }
     if (templateName !== void 0) {
       setCurrentTemplateName(templateName);
     }
-    if (onChange) {
-      onChange(newTemplate);
-    }
-  }, [onChange]);
+  }, []);
   const setCurrentTemplate = React81.useCallback((templateId, templateName) => {
     setCurrentTemplateId(templateId);
     setCurrentTemplateName(templateName);
   }, []);
   const registerSaveListener = React81.useCallback((callback) => {
-    setSaveListeners((prev) => [...prev, callback]);
+    saveListenersRef.current = [...saveListenersRef.current, callback];
     return () => {
-      setSaveListeners((prev) => prev.filter((listener) => listener !== callback));
+      saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
     };
   }, []);
-  const value = {
-    template,
+  const value = React81.useMemo(() => ({
     currentTemplateId,
     currentTemplateName,
-    updateTemplate,
     saveTemplate,
     loadTemplate,
     registerSaveListener,
     setCurrentTemplate
-  };
+  }), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
   return /* @__PURE__ */ React81__default.default.createElement(EmailEditorContext.Provider, { value }, children);
 };
 var useEmailEditor = () => {
@@ -4850,6 +4841,31 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
 }
 
 // src/app/index.tsx
+function htmlToEditorConfig(html2) {
+  return {
+    root: {
+      type: "EmailLayout",
+      data: {
+        backdropColor: "#F5F5F5",
+        canvasColor: "#FFFFFF",
+        textColor: "#262626",
+        fontFamily: "MODERN_SANS",
+        childrenIds: ["block-html-import"]
+      }
+    },
+    "block-html-import": {
+      type: "Html",
+      data: {
+        style: {
+          padding: { top: 0, bottom: 0, right: 0, left: 0 }
+        },
+        props: {
+          contents: html2
+        }
+      }
+    }
+  };
+}
 function useDrawerTransition(cssProperty, open) {
   const { transitions } = material.useTheme();
   return transitions.create(cssProperty, {
@@ -4868,19 +4884,26 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
     loadTemplate,
     deleteTemplate,
     copyTemplate,
-    saveAs
+    saveAs,
+    onChange
   } = props;
-  const { template, updateTemplate, saveTemplate, loadTemplate: contextLoadTemplate, currentTemplateId } = useEmailEditor();
+  const { saveTemplate, loadTemplate: contextLoadTemplate, currentTemplateId } = useEmailEditor();
   const currentDocument = useDocument();
   const inspectorDrawerOpen = useInspectorDrawerOpen();
   const samplesDrawerOpen = useSamplesDrawerOpen();
   const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
   const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
+  const onChangeRef = React81.useRef(onChange);
+  onChangeRef.current = onChange;
+  const prevDocJsonRef = React81.useRef("");
   React81.useEffect(() => {
-    if (JSON.stringify(currentDocument) !== JSON.stringify(template)) {
-      updateTemplate(currentDocument);
+    var _a;
+    const docJson = JSON.stringify(currentDocument);
+    if (docJson !== prevDocJsonRef.current) {
+      prevDocJsonRef.current = docJson;
+      (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
     }
-  }, [currentDocument, template, updateTemplate]);
+  }, [currentDocument]);
   React81.useImperativeHandle(ref, () => ({
     saveTemplate: () => {
       return saveTemplate();
@@ -4890,7 +4913,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
       resetDocument(newTemplate);
     },
     getTemplate: () => {
-      return template;
+      return getDocument();
     }
   }));
   return /* @__PURE__ */ React81__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React81__default.default.createElement(
@@ -4927,7 +4950,7 @@ var EmailEditorInternal = React81.forwardRef((props, ref) => {
 });
 var EmailEditor = React81.forwardRef((props, ref) => {
   const {
-    initialTemplate,
+    initialTemplate: initialTemplateProp,
     initialTemplateId,
     initialTemplateName,
     onSave,
@@ -4945,16 +4968,23 @@ var EmailEditor = React81.forwardRef((props, ref) => {
     saveAs,
     theme
   } = props;
+  const resolvedTemplate = typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp;
+  const initializedRef = React81.useRef(false);
   React81.useEffect(() => {
-    if (initialTemplate) {
-      resetDocument(initialTemplate);
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      if (resolvedTemplate) {
+        resetDocument(resolvedTemplate);
+      }
     }
+  }, [resolvedTemplate]);
+  React81.useEffect(() => {
     setPersistenceEnabled(persistenceEnabled);
-  }, [initialTemplate, persistenceEnabled]);
+  }, [persistenceEnabled]);
   return /* @__PURE__ */ React81__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React81__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React81__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React81__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React81__default.default.createElement(
     EmailEditorProvider,
     {
-      initialTemplate,
+      initialTemplate: resolvedTemplate,
       initialTemplateId,
       initialTemplateName,
       onSave,
@@ -4973,7 +5003,8 @@ var EmailEditor = React81.forwardRef((props, ref) => {
         loadTemplate,
         deleteTemplate,
         copyTemplate,
-        saveAs
+        saveAs,
+        onChange
       }
     )
   ))));
@@ -5033,6 +5064,7 @@ exports.TextPropsSchema = TextPropsSchema;
 exports.buildBlockComponent = buildBlockComponent;
 exports.buildBlockConfigurationDictionary = buildBlockConfigurationDictionary;
 exports.buildBlockConfigurationSchema = buildBlockConfigurationSchema;
+exports.htmlToEditorConfig = htmlToEditorConfig;
 exports.renderToStaticMarkup = renderToStaticMarkup;
 exports.theme = theme_default;
 exports.useEmailEditor = useEmailEditor;