@kgalexander/mcreate 1.0.8 → 1.0.11

package/dist/{chunk-FJ4KXNNM.mjs → chunk-CLU5KQRY.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,15 @@ 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" />
+        ${mjFontTags}
 
         <mj-style>
           p { margin: 0px 0px 0px 0px !important; }
@@ -3527,6 +3600,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 +13035,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 +13051,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);
@@ -14702,6 +14796,16 @@ function validate_editor_onPreview(template, mergeFields) {
   const is_over_size_limit = templateSize > 50 * 1024;
   return { invalid_merge_fields, missing_links, is_over_size_limit, placeholder_property_images };
 }
+function validate_campaign_onCreate() {
+  return true;
+}
+function campaign_validation_warnings() {
+  return {
+    invalid_merge_fields: true,
+    missing_properties_attributes: true,
+    missing_links: true
+  };
+}
 
 // src/core/editor/components/preview.tsx
 import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -16026,13 +16130,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,
@@ -16079,6 +16184,9 @@ export {
   SidebarProvider,
   useSidebarContext,
   Textarea,
+  validate_editor_onPreview,
+  validate_campaign_onCreate,
+  campaign_validation_warnings,
   Preview,
   History,
   MAILLOW_EMAIL_EDITOR_VERSION,

package/dist/{core-OW5KVXX7.mjs → core-CH5LA5D6.mjs}

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

package/dist/index.d.mts

@@ -320,6 +320,46 @@ 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;
+}
+interface MissingLinkType {
+    type: 'button' | 'social-item';
+    label: string;
+}
+interface PreviewValidationType {
+    invalid_merge_fields: string[];
+    missing_links: MissingLinkType[];
+    is_over_size_limit: boolean;
+    placeholder_property_images: number;
+}
+
+/**
+ * Validate a template when the user previews the template
+ */
+declare function validate_editor_onPreview(template: any, mergeFields: MergeFieldType[]): PreviewValidationType;
+/**
+ * Validate a campaign template when the user creates a new campaign
+ */
+declare function validate_campaign_onCreate(): boolean;
+/**
+ * Return validation warnings for a campaign template
+ */
+declare function campaign_validation_warnings(): {
+    invalid_merge_fields: boolean;
+    missing_properties_attributes: boolean;
+    missing_links: boolean;
+};
+
 /**
  * JSON to MJML Converter
  * Converts template JSON to MJML string for rendering
@@ -338,4 +378,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+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

@@ -320,6 +320,46 @@ 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;
+}
+interface MissingLinkType {
+    type: 'button' | 'social-item';
+    label: string;
+}
+interface PreviewValidationType {
+    invalid_merge_fields: string[];
+    missing_links: MissingLinkType[];
+    is_over_size_limit: boolean;
+    placeholder_property_images: number;
+}
+
+/**
+ * Validate a template when the user previews the template
+ */
+declare function validate_editor_onPreview(template: any, mergeFields: MergeFieldType[]): PreviewValidationType;
+/**
+ * Validate a campaign template when the user creates a new campaign
+ */
+declare function validate_campaign_onCreate(): boolean;
+/**
+ * Return validation warnings for a campaign template
+ */
+declare function campaign_validation_warnings(): {
+    invalid_merge_fields: boolean;
+    missing_properties_attributes: boolean;
+    missing_links: boolean;
+};
+
 /**
  * JSON to MJML Converter
  * Converts template JSON to MJML string for rendering
@@ -338,4 +378,4 @@ interface RenderOptions {
  */
 declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
 
-export { Editor, type ImageData, MAX_TEMPLATE_SIZE, type MergeField, type OnDeleteCallback, type OnDuplicateCallback, type OnExitCallback, type OnImageUploadCallback, type OnSaveCallback, type OnToastCallback, type PaidLevel, type TemplateJSON, TemplatePage, type ToastOptions, type ToastType, json2mjml };
+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 };