@kgalexander/mcreate 1.0.9 → 1.0.12

package/dist/{chunk-R3LRNUKL.mjs → chunk-RKZFFE24.mjs}

@@ -142,6 +142,57 @@ var SOCIAL_OPTIONS = [
   }
 ];
 
+// src/core/editor/constant/fonts.ts
+var emailSafeFonts = [
+  { name: "Arial", value: "arial" },
+  { name: "Helvetica", value: "helvetica" },
+  { name: "Times New Roman", value: "times-new-roman" },
+  { name: "Tahoma", value: "tahoma" },
+  { name: "Trebuchet MS", value: "trebuchet-ms" },
+  { name: "Lucida Console", value: "lucida-console" },
+  { name: "Courier New", value: "courier-new" },
+  { name: "Georgia", value: "georgia" },
+  { name: "Verdana", value: "verdana" }
+];
+var OtherFonts = [
+  { name: "Abril Fatface", value: "abril-fatface-regular", url: "https://fonts.googleapis.com/css?family=Abril+Fatface" },
+  { name: "Alegreya", value: "alegreya", url: "https://fonts.googleapis.com/css?family=Alegreya" },
+  { name: "Alegreya Sans", value: "alegreya-sans", url: "https://fonts.googleapis.com/css?family=Alegreya+Sans" },
+  { name: "Anton", value: "anton", url: "https://fonts.googleapis.com/css?family=Anton" },
+  { name: "Arimo", value: "arimo", url: "https://fonts.googleapis.com/css?family=Arimo" },
+  { name: "Arvo", value: "arvo", url: "https://fonts.googleapis.com/css?family=Arvo" },
+  { name: "Catamaran", value: "catamaran", url: "https://fonts.googleapis.com/css?family=Catamaran" },
+  { name: "Comic Neue", value: "comic-neue", url: "https://fonts.googleapis.com/css?family=Comic+Neue" },
+  { name: "Della Respira", value: "della-respira", url: "https://fonts.googleapis.com/css2?family=Della+Respira&display=swap" },
+  { name: "DM Sans", value: "dm-sans", url: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap" },
+  { name: "Gilda Display", value: "gilda-display", url: "https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap" },
+  { name: "Lato", value: "lato", url: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" },
+  { name: "Lora", value: "lora", url: "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" },
+  { name: "Marcellus", value: "marcellus", url: "https://fonts.googleapis.com/css2?family=Marcellus&display=swap" },
+  { name: "Merriweather", value: "merriweather", url: "https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap" },
+  { name: "Merriweather Sans", value: "merriweather-sans", url: "https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700&display=swap" },
+  { name: "Nanum Gothic Coding", value: "nanum-gothic-coding", url: "https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap" },
+  { name: "Neuton", value: "neuton", url: "https://fonts.googleapis.com/css2?family=Neuton:wght@300;400;700&display=swap" },
+  { name: "Noticia Text", value: "noticia-text", url: "https://fonts.googleapis.com/css2?family=Noticia+Text:wght@400;700&display=swap" },
+  { name: "Noto Sans", value: "noto-sans", url: "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap" },
+  { name: "Open Sans", value: "open-sans", url: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" },
+  { name: "Playfair Display", value: "playfair-display", url: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" },
+  { name: "Raleway", value: "raleway", url: "https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap" },
+  { name: "Recursive", value: "recursive", url: "https://fonts.googleapis.com/css2?family=Recursive:wght@300;400;500;600;700&display=swap" },
+  { name: "Roboto", value: "roboto", url: "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" },
+  { name: "Source Sans 3", value: "source-sans-3", url: "https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap" },
+  { name: "Source Code Pro", value: "source-code-pro", url: "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap" },
+  { name: "Space Mono", value: "space-mono", url: "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" },
+  { name: "Syncopate", value: "syncopate", url: "https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap" },
+  { name: "Work Sans", value: "work-sans", url: "https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap" }
+];
+function getGoogleFont(fontName) {
+  return OtherFonts.find((f) => f.name.toLowerCase() === fontName.toLowerCase());
+}
+function getGoogleFontUrl(fontName) {
+  return getGoogleFont(fontName)?.url;
+}
+
 // src/core/editor/utils/border.ts
 var DEFAULT_BORDER = {
   width: 0,
@@ -222,16 +273,6 @@ var ALIGNMENT_ICONS = {
   center: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-center.svg",
   right: "https://mzyngaqmbvhpgmmipndy.supabase.co/storage/v1/object/public/Maillow/icons/align-vertical-space-around-right.svg"
 };
-var FONTS = [
-  "Arial",
-  "Helvetica",
-  "Times New Roman",
-  "Courier New",
-  "Verdana",
-  "Tahoma",
-  "Trebuchet MS",
-  "Georgia"
-];
 var TEXT_ALIGNMENT_ICONS = {
   left: AlignLeftIcon,
   center: AlignCenterIcon,
@@ -1120,6 +1161,35 @@ function rootChildrenToMjml(children, parentContext) {
     return "";
   }).join("\n");
 }
+function collectUsedGoogleFonts(template) {
+  const fontNames = /* @__PURE__ */ new Set();
+  const googleFontNames = new Set(OtherFonts.map((f) => f.name.toLowerCase()));
+  function extractFromFontFamily(fontFamily) {
+    if (!fontFamily) return;
+    const fonts = fontFamily.split(",").map((f) => f.trim().replace(/['"]/g, ""));
+    for (const f of fonts) {
+      if (googleFontNames.has(f.toLowerCase())) {
+        const original = OtherFonts.find((of) => of.name.toLowerCase() === f.toLowerCase());
+        if (original) fontNames.add(original.name);
+      }
+    }
+  }
+  function scanElement(el) {
+    if (!el) return;
+    extractFromFontFamily(el.attributes?.["font-family"]);
+    const content = el.data?.value?.content;
+    if (typeof content === "string") {
+      const matches = content.matchAll(/font-family:\s*([^;"]+)/gi);
+      for (const m of matches) extractFromFontFamily(m[1]);
+    }
+    if (Array.isArray(el.children)) el.children.forEach(scanElement);
+  }
+  template.content.forEach(scanElement);
+  return [...fontNames].map((name) => {
+    const url = getGoogleFontUrl(name);
+    return url ? { name, url } : null;
+  }).filter((f) => f !== null);
+}
 function json2mjml(template, mode = "production", options = {}) {
   const showCompanyFooter = template.content[0]?.data?.value?.showCompanyFooter ?? true;
   const footerMutation = needsCompanyFooterMutation(template);
@@ -1165,12 +1235,17 @@ function json2mjml(template, mode = "production", options = {}) {
     allContent += pageContent;
   }
   const linkColor = template.content[0]?.data?.value?.linkColor || "#0000ff";
+  const usedGoogleFonts = collectUsedGoogleFonts(template);
+  const mjFontTags = usedGoogleFonts.map((f) => `<mj-font name="${f.name}" href="${f.url}" />`).join("\n        ");
   return `
     <mjml>
 
       <mj-head>
 
         <mj-breakpoint width="480px" />
+        <mj-preview>${options.previewText ?? template?.preview ?? ""}</mj-preview>
+        
+        ${mjFontTags}
 
         <mj-style>
           p { margin: 0px 0px 0px 0px !important; }
@@ -3527,6 +3602,26 @@ var ShadowDomRenderer = memo(function ShadowDomRenderer2({
     shadowRootRef.current.appendChild(styleEl);
     shadowRootRef.current.appendChild(contentWrapper);
   }, [html]);
+  useEffect(() => {
+    const templateState = useEditorStore.getState().template;
+    if (!templateState) return;
+    const htmlStr = html + JSON.stringify(templateState);
+    const neededUrls = /* @__PURE__ */ new Set();
+    for (const font of OtherFonts) {
+      if (font.url && htmlStr.includes(font.name)) {
+        neededUrls.add(font.url);
+      }
+    }
+    for (const url of neededUrls) {
+      if (!document.querySelector(`link[data-google-font][href="${url}"]`)) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = url;
+        link.setAttribute("data-google-font", "true");
+        document.head.appendChild(link);
+      }
+    }
+  }, [html]);
   useEffect(() => {
     if (!shadowRootRef.current) return;
     const styleEl = shadowRootRef.current.querySelector("#editor-styles");
@@ -12942,13 +13037,14 @@ import { MoreHorizontalIcon as MoreHorizontalIcon3, PlusCircleIcon } from "lucid
 import { createContext, useContext, useState as useState5 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var SidebarContext = createContext(null);
-var PICKER_VIEWS = ["color", "images", "add-social"];
+var PICKER_VIEWS = ["color", "images", "add-social", "fonts"];
 function SidebarProvider({ children }) {
   const [activeView, setActiveViewState] = useState5("elements");
   const [lastView, setLastView] = useState5("elements");
   const [colorType, setColorType] = useState5("Color");
   const [colorTarget, setColorTarget] = useState5(null);
   const [imageTarget, setImageTarget] = useState5(null);
+  const [fontTarget, setFontTarget] = useState5(null);
   const setActiveView = (view) => {
     if (view !== activeView) {
       if (!PICKER_VIEWS.includes(activeView)) {
@@ -12957,7 +13053,7 @@ function SidebarProvider({ children }) {
     }
     setActiveViewState(view);
   };
-  return /* @__PURE__ */ jsx31(SidebarContext.Provider, { value: { activeView, setActiveView, lastView, colorType, setColorType, colorTarget, setColorTarget, imageTarget, setImageTarget }, children });
+  return /* @__PURE__ */ jsx31(SidebarContext.Provider, { value: { activeView, setActiveView, lastView, colorType, setColorType, colorTarget, setColorTarget, imageTarget, setImageTarget, fontTarget, setFontTarget }, children });
 }
 function useSidebarContext() {
   const context = useContext(SidebarContext);
@@ -16036,13 +16132,14 @@ export {
   getParentByIdx,
   SOCIAL_ITEMS,
   SOCIAL_OPTIONS,
+  emailSafeFonts,
+  OtherFonts,
   parseBorder,
   formatBorder,
   parsePrice,
   MAX_TEMPLATE_SIZE,
   BUTTON_ALIGNMENTS,
   ALIGNMENT_ICONS,
-  FONTS,
   TEXT_ALIGNMENT_ICONS,
   TEXT_TYPE_OPTIONS,
   DEFAULT_FONT_SIZE,

package/dist/{core-HIQH4BAG.mjs → core-IGOHPWMU.mjs}

@@ -5,7 +5,7 @@ import {
   MAILLOW_EMAIL_EDITOR_VERSION,
   Preview,
   useEditorStore
-} from "./chunk-R3LRNUKL.mjs";
+} from "./chunk-RKZFFE24.mjs";
 export {
   Editor,
   History,

package/dist/index.d.mts

@@ -254,6 +254,7 @@ type TemplateJSON = {
     id: string;
     name: string;
     image: string;
+    preview: string;
     version: string;
     published: boolean;
     creator: string;
@@ -320,6 +321,14 @@ declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, on
 
 declare const MAX_TEMPLATE_SIZE: number;
 
+type FontEntry = {
+    name: string;
+    value: string;
+    url?: string;
+};
+declare const emailSafeFonts: FontEntry[];
+declare const OtherFonts: FontEntry[];
+
 interface MergeFieldType {
     label: string;
     value: string;
@@ -360,6 +369,7 @@ declare function campaign_validation_warnings(): {
 type RenderMode = 'production' | 'editing';
 interface RenderOptions {
     isPaidLevel?: number;
+    previewText?: string;
 }
 /**
  * Convert template JSON to MJML string
@@ -370,4 +380,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type MergeFieldType, type MissingLinkType, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type PreviewValidationType, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, campaign_validation_warnings, json2mjml, validate_campaign_onCreate, validate_editor_onPreview };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type MergeFieldType, type MissingLinkType, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, OtherFonts, type PaidLevel, type PreviewValidationType, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, campaign_validation_warnings, emailSafeFonts, json2mjml, validate_campaign_onCreate, validate_editor_onPreview };

package/dist/index.d.ts

@@ -254,6 +254,7 @@ type TemplateJSON = {
     id: string;
     name: string;
     image: string;
+    preview: string;
     version: string;
     published: boolean;
     creator: string;
@@ -320,6 +321,14 @@ declare function TemplatePage({ templateId, initialTemplate, onSave, onToast, on
 
 declare const MAX_TEMPLATE_SIZE: number;
 
+type FontEntry = {
+    name: string;
+    value: string;
+    url?: string;
+};
+declare const emailSafeFonts: FontEntry[];
+declare const OtherFonts: FontEntry[];
+
 interface MergeFieldType {
     label: string;
     value: string;
@@ -360,6 +369,7 @@ declare function campaign_validation_warnings(): {
 type RenderMode = 'production' | 'editing';
 interface RenderOptions {
     isPaidLevel?: number;
+    previewText?: string;
 }
 /**
  * Convert template JSON to MJML string
@@ -370,4 +380,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type MergeFieldType, type MissingLinkType, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type PreviewValidationType, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, campaign_validation_warnings, json2mjml, validate_campaign_onCreate, validate_editor_onPreview };
+export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type MergeFieldType, type MissingLinkType, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, OtherFonts, type PaidLevel, type PreviewValidationType, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, campaign_validation_warnings, emailSafeFonts, json2mjml, validate_campaign_onCreate, validate_editor_onPreview };