strapi-plugin-magic-mail 1.0.4 → 1.0.5

package/admin/src/pages/EmailDesigner/EditorPage.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useAuthRefresh } from '../../hooks/useAuthRefresh';
@@ -26,6 +26,7 @@ import {
   CodeBracketIcon,
 } from '@heroicons/react/24/outline';
 import { useLicense } from '../../hooks/useLicense';
+import EmailEditor from 'react-email-editor';
 
 // Standard Email Template for Core Emails (when no design exists)
 const STANDARD_EMAIL_TEMPLATE = {
@@ -107,13 +108,6 @@ const STANDARD_EMAIL_TEMPLATE = {
   schemaVersion: 6,
 };
 
-// Dynamic import for Email Editor (500KB)
-const EmailEditor = lazy(() => 
-  import('react-email-editor').then((module) => ({
-    default: module.default || module.EmailEditor || module,
-  }))
-);
-
 // Styled components
 const Container = styled.div`
   min-height: 100vh;
@@ -245,6 +239,16 @@ const LoadingContainer = styled.div`
   align-items: center;
 `;
 
+const EditorCanvas = styled.div`
+  min-height: calc(100vh - 240px);
+`;
+
+const DesignerLoadingContainer = styled(LoadingContainer)`
+  width: 100%;
+  min-height: calc(100vh - 240px);
+  padding: 40px 20px;
+`;
+
 const HiddenInput = styled.input`
   display: none;
 `;
@@ -585,6 +589,7 @@ const EditorPage = () => {
   const [loading, setLoading] = useState(!isNewTemplate && !isCoreEmail);
   const [saving, setSaving] = useState(false);
   const [activeTab, setActiveTab] = useState('html');
+  const [editorLoaded, setEditorLoaded] = useState(false);
 
   const [templateData, setTemplateData] = useState({
     templateReferenceId: '',
@@ -937,6 +942,7 @@ const EditorPage = () => {
   };
 
   const onEditorReady = () => {
+    setEditorLoaded(true);
     if (templateData.design && emailEditorRef.current?.editor) {
       setTimeout(() => {
         emailEditorRef.current.editor.loadDesign(templateData.design);
@@ -1101,12 +1107,16 @@ const EditorPage = () => {
 
           <StyledTabsContent value="html">
             <TabContentWrapper>
-              <Suspense
-                fallback={
-                  <LoadingContainer>
-                    <Loader>Loading Email Designer...</Loader>
-                  </LoadingContainer>
-                }
+              {!editorLoaded && (
+                <DesignerLoadingContainer>
+                  <Loader>Loading Email Designer...</Loader>
+                </DesignerLoadingContainer>
+              )}
+              <EditorCanvas
+                style={{
+                  visibility: editorLoaded ? 'visible' : 'hidden',
+                  pointerEvents: editorLoaded ? 'auto' : 'none',
+                }}
               >
                 <EmailEditor
                   ref={emailEditorRef}
@@ -1292,7 +1302,7 @@ const EditorPage = () => {
                     }
                   }}
                 />
-              </Suspense>
+              </EditorCanvas>
             </TabContentWrapper>
           </StyledTabsContent>
 

package/dist/_chunks/{App-kROs3WSy.js → App-CClpsmQH.js}

@@ -1,26 +1,4 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -30,9 +8,11 @@ const outline = require("@heroicons/react/24/outline");
 const admin = require("@strapi/strapi/admin");
 const styled = require("styled-components");
 const icons = require("@strapi/icons");
+const EmailEditor = require("react-email-editor");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const EmailEditor__default = /* @__PURE__ */ _interopDefault(EmailEditor);
 const useAuthRefresh = () => {
   const { get } = admin.useFetchClient();
   const intervalRef = React.useRef(null);
@@ -5422,11 +5402,6 @@ const STANDARD_EMAIL_TEMPLATE = {
   },
   schemaVersion: 6
 };
-const EmailEditor = React.lazy(
-  () => import("react-email-editor").then((module2) => ({
-    default: module2.default || module2.EmailEditor || module2
-  }))
-);
 const Container$1 = styled__default.default.div`
   min-height: 100vh;
   display: flex;
@@ -5541,6 +5516,14 @@ const LoadingContainer = styled__default.default.div`
   justify-content: center;
   align-items: center;
 `;
+const EditorCanvas = styled__default.default.div`
+  min-height: calc(100vh - 240px);
+`;
+const DesignerLoadingContainer = styled__default.default(LoadingContainer)`
+  width: 100%;
+  min-height: calc(100vh - 240px);
+  padding: 40px 20px;
+`;
 const HiddenInput = styled__default.default.input`
   display: none;
 `;
@@ -5854,6 +5837,7 @@ const EditorPage = () => {
   const [loading, setLoading] = React.useState(!isNewTemplate && !isCoreEmail);
   const [saving, setSaving] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState("html");
+  const [editorLoaded, setEditorLoaded] = React.useState(false);
   const [templateData, setTemplateData] = React.useState({
     templateReferenceId: "",
     name: "",
@@ -6136,6 +6120,7 @@ const EditorPage = () => {
     reader.readAsText(file);
   };
   const onEditorReady = () => {
+    setEditorLoaded(true);
     if (templateData.design && emailEditorRef.current?.editor) {
       setTimeout(() => {
         emailEditorRef.current.editor.loadDesign(templateData.design);
@@ -6252,192 +6237,198 @@ const EditorPage = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "html", children: "✨ Visual Designer" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tabs.Trigger, { value: "text", children: "📝 Plain Text" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(StyledTabsContent, { value: "html", children: /* @__PURE__ */ jsxRuntime.jsx(TabContentWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        React.Suspense,
-        {
-          fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading Email Designer..." }) }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            EmailEditor,
-            {
-              ref: emailEditorRef,
-              onReady: onEditorReady,
-              minHeight: "calc(100vh - 240px)",
-              options: {
-                // Display mode
-                displayMode: "email",
-                locale: "en",
-                projectId: 1,
-                // Required for some features
-                // Merge Tags Config
-                mergeTagsConfig: {
-                  autocompleteTriggerChar: "@",
-                  sort: false,
-                  delimiter: ["{{", "}}"]
-                },
-                // Appearance
-                appearance: {
-                  theme: "modern_light",
-                  panels: {
-                    tools: { dock: "left" }
-                  }
-                },
-                // Features - Enable responsive preview
-                features: {
-                  preview: true,
-                  previewInBrowser: true,
-                  textEditor: {
-                    enabled: true,
-                    spellChecker: true,
-                    tables: true,
-                    cleanPaste: true
-                  }
-                },
-                // Fonts
-                fonts: {
-                  showDefaultFonts: true,
-                  customFonts: [
-                    {
-                      label: "Inter",
-                      value: "'Inter', sans-serif",
-                      url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      /* @__PURE__ */ jsxRuntime.jsx(StyledTabsContent, { value: "html", children: /* @__PURE__ */ jsxRuntime.jsxs(TabContentWrapper, { children: [
+        !editorLoaded && /* @__PURE__ */ jsxRuntime.jsx(DesignerLoadingContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading Email Designer..." }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          EditorCanvas,
+          {
+            style: {
+              visibility: editorLoaded ? "visible" : "hidden",
+              pointerEvents: editorLoaded ? "auto" : "none"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              EmailEditor__default.default,
+              {
+                ref: emailEditorRef,
+                onReady: onEditorReady,
+                minHeight: "calc(100vh - 240px)",
+                options: {
+                  // Display mode
+                  displayMode: "email",
+                  locale: "en",
+                  projectId: 1,
+                  // Required for some features
+                  // Merge Tags Config
+                  mergeTagsConfig: {
+                    autocompleteTriggerChar: "@",
+                    sort: false,
+                    delimiter: ["{{", "}}"]
+                  },
+                  // Appearance
+                  appearance: {
+                    theme: "modern_light",
+                    panels: {
+                      tools: { dock: "left" }
                     }
-                  ]
-                },
-                // Tools configuration - minimal, let Unlayer show all
-                tools: {
-                  image: {
-                    properties: {
-                      src: {
-                        value: {
-                          url: "https://picsum.photos/600/350"
-                        }
-                      }
+                  },
+                  // Features - Enable responsive preview
+                  features: {
+                    preview: true,
+                    previewInBrowser: true,
+                    textEditor: {
+                      enabled: true,
+                      spellChecker: true,
+                      tables: true,
+                      cleanPaste: true
                     }
-                  }
-                },
-                // Merge Tags with extended support
-                mergeTags: {
-                  user: {
-                    name: "User",
-                    mergeTags: {
-                      firstName: {
-                        name: "First Name",
-                        value: "{{user.firstName}}",
-                        sample: "John"
-                      },
-                      lastName: {
-                        name: "Last Name",
-                        value: "{{user.lastName}}",
-                        sample: "Doe"
-                      },
-                      email: {
-                        name: "Email",
-                        value: "{{user.email}}",
-                        sample: "john@example.com"
-                      },
-                      username: {
-                        name: "Username",
-                        value: "{{user.username}}",
-                        sample: "johndoe"
+                  },
+                  // Fonts
+                  fonts: {
+                    showDefaultFonts: true,
+                    customFonts: [
+                      {
+                        label: "Inter",
+                        value: "'Inter', sans-serif",
+                        url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
                       }
-                    }
+                    ]
                   },
-                  company: {
-                    name: "Company",
-                    mergeTags: {
-                      name: {
-                        name: "Name",
-                        value: "{{company.name}}",
-                        sample: "ACME Corp"
-                      },
-                      url: {
-                        name: "Website",
-                        value: "{{company.url}}",
-                        sample: "https://acme.com"
-                      },
-                      address: {
-                        name: "Address",
-                        value: "{{company.address}}",
-                        sample: "123 Main St, City"
+                  // Tools configuration - minimal, let Unlayer show all
+                  tools: {
+                    image: {
+                      properties: {
+                        src: {
+                          value: {
+                            url: "https://picsum.photos/600/350"
+                          }
+                        }
                       }
                     }
                   },
-                  order: {
-                    name: "Order",
-                    mergeTags: {
-                      number: {
-                        name: "Number",
-                        value: "{{order.number}}",
-                        sample: "#12345"
-                      },
-                      total: {
-                        name: "Total",
-                        value: "{{order.total}}",
-                        sample: "$199.99"
-                      },
-                      date: {
-                        name: "Date",
-                        value: "{{order.date}}",
-                        sample: "2024-01-15"
-                      },
-                      status: {
-                        name: "Status",
-                        value: "{{order.status}}",
-                        sample: "Shipped"
+                  // Merge Tags with extended support
+                  mergeTags: {
+                    user: {
+                      name: "User",
+                      mergeTags: {
+                        firstName: {
+                          name: "First Name",
+                          value: "{{user.firstName}}",
+                          sample: "John"
+                        },
+                        lastName: {
+                          name: "Last Name",
+                          value: "{{user.lastName}}",
+                          sample: "Doe"
+                        },
+                        email: {
+                          name: "Email",
+                          value: "{{user.email}}",
+                          sample: "john@example.com"
+                        },
+                        username: {
+                          name: "Username",
+                          value: "{{user.username}}",
+                          sample: "johndoe"
+                        }
+                      }
+                    },
+                    company: {
+                      name: "Company",
+                      mergeTags: {
+                        name: {
+                          name: "Name",
+                          value: "{{company.name}}",
+                          sample: "ACME Corp"
+                        },
+                        url: {
+                          name: "Website",
+                          value: "{{company.url}}",
+                          sample: "https://acme.com"
+                        },
+                        address: {
+                          name: "Address",
+                          value: "{{company.address}}",
+                          sample: "123 Main St, City"
+                        }
+                      }
+                    },
+                    order: {
+                      name: "Order",
+                      mergeTags: {
+                        number: {
+                          name: "Number",
+                          value: "{{order.number}}",
+                          sample: "#12345"
+                        },
+                        total: {
+                          name: "Total",
+                          value: "{{order.total}}",
+                          sample: "$199.99"
+                        },
+                        date: {
+                          name: "Date",
+                          value: "{{order.date}}",
+                          sample: "2024-01-15"
+                        },
+                        status: {
+                          name: "Status",
+                          value: "{{order.status}}",
+                          sample: "Shipped"
+                        }
+                      }
+                    },
+                    system: {
+                      name: "System",
+                      mergeTags: {
+                        date: {
+                          name: "Current Date",
+                          value: "{{system.date}}",
+                          sample: (/* @__PURE__ */ new Date()).toLocaleDateString()
+                        },
+                        year: {
+                          name: "Current Year",
+                          value: "{{system.year}}",
+                          sample: (/* @__PURE__ */ new Date()).getFullYear().toString()
+                        },
+                        unsubscribe: {
+                          name: "Unsubscribe Link",
+                          value: "{{system.unsubscribe}}",
+                          sample: "https://example.com/unsubscribe"
+                        }
                       }
                     }
                   },
-                  system: {
-                    name: "System",
-                    mergeTags: {
-                      date: {
-                        name: "Current Date",
-                        value: "{{system.date}}",
-                        sample: (/* @__PURE__ */ new Date()).toLocaleDateString()
-                      },
-                      year: {
-                        name: "Current Year",
-                        value: "{{system.year}}",
-                        sample: (/* @__PURE__ */ new Date()).getFullYear().toString()
-                      },
-                      unsubscribe: {
-                        name: "Unsubscribe Link",
-                        value: "{{system.unsubscribe}}",
-                        sample: "https://example.com/unsubscribe"
-                      }
+                  // Special links
+                  specialLinks: {
+                    unsubscribe: {
+                      enabled: true,
+                      text: "Unsubscribe",
+                      href: "{{system.unsubscribe}}"
+                    },
+                    webview: {
+                      enabled: true,
+                      text: "View in browser",
+                      href: "{{system.webview}}"
                     }
-                  }
-                },
-                // Special links
-                specialLinks: {
-                  unsubscribe: {
-                    enabled: true,
-                    text: "Unsubscribe",
-                    href: "{{system.unsubscribe}}"
                   },
-                  webview: {
+                  // Custom CSS
+                  customCSS: [
+                    ".blockbuilder-content-email { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }"
+                  ],
+                  // Validation
+                  validator: {
                     enabled: true,
-                    text: "View in browser",
-                    href: "{{system.webview}}"
-                  }
-                },
-                // Custom CSS
-                customCSS: [
-                  ".blockbuilder-content-email { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }"
-                ],
-                // Validation
-                validator: {
-                  enabled: true,
-                  rules: {
-                    maxImageSize: 1024 * 1024
-                    // 1MB
+                    rules: {
+                      maxImageSize: 1024 * 1024
+                      // 1MB
+                    }
                   }
                 }
               }
-            }
-          )
-        }
-      ) }) }),
+            )
+          }
+        )
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(StyledTabsContent, { value: "text", children: /* @__PURE__ */ jsxRuntime.jsx(TextTabContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Textarea,
         {

package/dist/_chunks/{App-DqArrXrm.mjs → App-DQpXIAmV.mjs}

@@ -1,11 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState, Suspense, lazy } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Modal, Typography, Flex, Box, Field, TextInput, Alert, Textarea, NumberInput, Divider, Toggle, Badge, Button, Loader, SingleSelect, SingleSelectOption, Thead, Tr, Th, Tbody, Td, Table, Tabs } from "@strapi/design-system";
 import { EnvelopeIcon, ServerIcon, SparklesIcon, PlusIcon, PencilIcon, PlayIcon, TrashIcon, MagnifyingGlassIcon, FunnelIcon, CheckIcon, Cog6ToothIcon, DocumentTextIcon, ChartBarIcon, BoltIcon, CheckCircleIcon, ArrowUpTrayIcon, ArrowDownTrayIcon, DocumentArrowDownIcon, CodeBracketIcon, DocumentDuplicateIcon, PaperAirplaneIcon, ClipboardDocumentIcon, ArrowLeftIcon, ClockIcon, XMarkIcon, ArrowUturnLeftIcon, EnvelopeOpenIcon, CursorArrowRaysIcon, ExclamationTriangleIcon, XCircleIcon, KeyIcon } from "@heroicons/react/24/outline";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Star, Mail, Server, Lock, Cog, Check, Cloud, Key, ArrowLeft, ArrowRight } from "@strapi/icons";
+import EmailEditor from "react-email-editor";
 const useAuthRefresh = () => {
   const { get } = useFetchClient();
   const intervalRef = useRef(null);
@@ -5395,11 +5396,6 @@ const STANDARD_EMAIL_TEMPLATE = {
   },
   schemaVersion: 6
 };
-const EmailEditor = lazy(
-  () => import("react-email-editor").then((module) => ({
-    default: module.default || module.EmailEditor || module
-  }))
-);
 const Container$1 = styled.div`
   min-height: 100vh;
   display: flex;
@@ -5514,6 +5510,14 @@ const LoadingContainer = styled.div`
   justify-content: center;
   align-items: center;
 `;
+const EditorCanvas = styled.div`
+  min-height: calc(100vh - 240px);
+`;
+const DesignerLoadingContainer = styled(LoadingContainer)`
+  width: 100%;
+  min-height: calc(100vh - 240px);
+  padding: 40px 20px;
+`;
 const HiddenInput = styled.input`
   display: none;
 `;
@@ -5827,6 +5831,7 @@ const EditorPage = () => {
   const [loading, setLoading] = useState(!isNewTemplate && !isCoreEmail);
   const [saving, setSaving] = useState(false);
   const [activeTab, setActiveTab] = useState("html");
+  const [editorLoaded, setEditorLoaded] = useState(false);
   const [templateData, setTemplateData] = useState({
     templateReferenceId: "",
     name: "",
@@ -6109,6 +6114,7 @@ const EditorPage = () => {
     reader.readAsText(file);
   };
   const onEditorReady = () => {
+    setEditorLoaded(true);
     if (templateData.design && emailEditorRef.current?.editor) {
       setTimeout(() => {
         emailEditorRef.current.editor.loadDesign(templateData.design);
@@ -6225,192 +6231,198 @@ const EditorPage = () => {
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "html", children: "✨ Visual Designer" }),
         /* @__PURE__ */ jsx(Tabs.Trigger, { value: "text", children: "📝 Plain Text" })
       ] }) }),
-      /* @__PURE__ */ jsx(StyledTabsContent, { value: "html", children: /* @__PURE__ */ jsx(TabContentWrapper, { children: /* @__PURE__ */ jsx(
-        Suspense,
-        {
-          fallback: /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Loader, { children: "Loading Email Designer..." }) }),
-          children: /* @__PURE__ */ jsx(
-            EmailEditor,
-            {
-              ref: emailEditorRef,
-              onReady: onEditorReady,
-              minHeight: "calc(100vh - 240px)",
-              options: {
-                // Display mode
-                displayMode: "email",
-                locale: "en",
-                projectId: 1,
-                // Required for some features
-                // Merge Tags Config
-                mergeTagsConfig: {
-                  autocompleteTriggerChar: "@",
-                  sort: false,
-                  delimiter: ["{{", "}}"]
-                },
-                // Appearance
-                appearance: {
-                  theme: "modern_light",
-                  panels: {
-                    tools: { dock: "left" }
-                  }
-                },
-                // Features - Enable responsive preview
-                features: {
-                  preview: true,
-                  previewInBrowser: true,
-                  textEditor: {
-                    enabled: true,
-                    spellChecker: true,
-                    tables: true,
-                    cleanPaste: true
-                  }
-                },
-                // Fonts
-                fonts: {
-                  showDefaultFonts: true,
-                  customFonts: [
-                    {
-                      label: "Inter",
-                      value: "'Inter', sans-serif",
-                      url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      /* @__PURE__ */ jsx(StyledTabsContent, { value: "html", children: /* @__PURE__ */ jsxs(TabContentWrapper, { children: [
+        !editorLoaded && /* @__PURE__ */ jsx(DesignerLoadingContainer, { children: /* @__PURE__ */ jsx(Loader, { children: "Loading Email Designer..." }) }),
+        /* @__PURE__ */ jsx(
+          EditorCanvas,
+          {
+            style: {
+              visibility: editorLoaded ? "visible" : "hidden",
+              pointerEvents: editorLoaded ? "auto" : "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              EmailEditor,
+              {
+                ref: emailEditorRef,
+                onReady: onEditorReady,
+                minHeight: "calc(100vh - 240px)",
+                options: {
+                  // Display mode
+                  displayMode: "email",
+                  locale: "en",
+                  projectId: 1,
+                  // Required for some features
+                  // Merge Tags Config
+                  mergeTagsConfig: {
+                    autocompleteTriggerChar: "@",
+                    sort: false,
+                    delimiter: ["{{", "}}"]
+                  },
+                  // Appearance
+                  appearance: {
+                    theme: "modern_light",
+                    panels: {
+                      tools: { dock: "left" }
                     }
-                  ]
-                },
-                // Tools configuration - minimal, let Unlayer show all
-                tools: {
-                  image: {
-                    properties: {
-                      src: {
-                        value: {
-                          url: "https://picsum.photos/600/350"
-                        }
-                      }
+                  },
+                  // Features - Enable responsive preview
+                  features: {
+                    preview: true,
+                    previewInBrowser: true,
+                    textEditor: {
+                      enabled: true,
+                      spellChecker: true,
+                      tables: true,
+                      cleanPaste: true
                     }
-                  }
-                },
-                // Merge Tags with extended support
-                mergeTags: {
-                  user: {
-                    name: "User",
-                    mergeTags: {
-                      firstName: {
-                        name: "First Name",
-                        value: "{{user.firstName}}",
-                        sample: "John"
-                      },
-                      lastName: {
-                        name: "Last Name",
-                        value: "{{user.lastName}}",
-                        sample: "Doe"
-                      },
-                      email: {
-                        name: "Email",
-                        value: "{{user.email}}",
-                        sample: "john@example.com"
-                      },
-                      username: {
-                        name: "Username",
-                        value: "{{user.username}}",
-                        sample: "johndoe"
+                  },
+                  // Fonts
+                  fonts: {
+                    showDefaultFonts: true,
+                    customFonts: [
+                      {
+                        label: "Inter",
+                        value: "'Inter', sans-serif",
+                        url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
                       }
-                    }
+                    ]
                   },
-                  company: {
-                    name: "Company",
-                    mergeTags: {
-                      name: {
-                        name: "Name",
-                        value: "{{company.name}}",
-                        sample: "ACME Corp"
-                      },
-                      url: {
-                        name: "Website",
-                        value: "{{company.url}}",
-                        sample: "https://acme.com"
-                      },
-                      address: {
-                        name: "Address",
-                        value: "{{company.address}}",
-                        sample: "123 Main St, City"
+                  // Tools configuration - minimal, let Unlayer show all
+                  tools: {
+                    image: {
+                      properties: {
+                        src: {
+                          value: {
+                            url: "https://picsum.photos/600/350"
+                          }
+                        }
                       }
                     }
                   },
-                  order: {
-                    name: "Order",
-                    mergeTags: {
-                      number: {
-                        name: "Number",
-                        value: "{{order.number}}",
-                        sample: "#12345"
-                      },
-                      total: {
-                        name: "Total",
-                        value: "{{order.total}}",
-                        sample: "$199.99"
-                      },
-                      date: {
-                        name: "Date",
-                        value: "{{order.date}}",
-                        sample: "2024-01-15"
-                      },
-                      status: {
-                        name: "Status",
-                        value: "{{order.status}}",
-                        sample: "Shipped"
+                  // Merge Tags with extended support
+                  mergeTags: {
+                    user: {
+                      name: "User",
+                      mergeTags: {
+                        firstName: {
+                          name: "First Name",
+                          value: "{{user.firstName}}",
+                          sample: "John"
+                        },
+                        lastName: {
+                          name: "Last Name",
+                          value: "{{user.lastName}}",
+                          sample: "Doe"
+                        },
+                        email: {
+                          name: "Email",
+                          value: "{{user.email}}",
+                          sample: "john@example.com"
+                        },
+                        username: {
+                          name: "Username",
+                          value: "{{user.username}}",
+                          sample: "johndoe"
+                        }
+                      }
+                    },
+                    company: {
+                      name: "Company",
+                      mergeTags: {
+                        name: {
+                          name: "Name",
+                          value: "{{company.name}}",
+                          sample: "ACME Corp"
+                        },
+                        url: {
+                          name: "Website",
+                          value: "{{company.url}}",
+                          sample: "https://acme.com"
+                        },
+                        address: {
+                          name: "Address",
+                          value: "{{company.address}}",
+                          sample: "123 Main St, City"
+                        }
+                      }
+                    },
+                    order: {
+                      name: "Order",
+                      mergeTags: {
+                        number: {
+                          name: "Number",
+                          value: "{{order.number}}",
+                          sample: "#12345"
+                        },
+                        total: {
+                          name: "Total",
+                          value: "{{order.total}}",
+                          sample: "$199.99"
+                        },
+                        date: {
+                          name: "Date",
+                          value: "{{order.date}}",
+                          sample: "2024-01-15"
+                        },
+                        status: {
+                          name: "Status",
+                          value: "{{order.status}}",
+                          sample: "Shipped"
+                        }
+                      }
+                    },
+                    system: {
+                      name: "System",
+                      mergeTags: {
+                        date: {
+                          name: "Current Date",
+                          value: "{{system.date}}",
+                          sample: (/* @__PURE__ */ new Date()).toLocaleDateString()
+                        },
+                        year: {
+                          name: "Current Year",
+                          value: "{{system.year}}",
+                          sample: (/* @__PURE__ */ new Date()).getFullYear().toString()
+                        },
+                        unsubscribe: {
+                          name: "Unsubscribe Link",
+                          value: "{{system.unsubscribe}}",
+                          sample: "https://example.com/unsubscribe"
+                        }
                       }
                     }
                   },
-                  system: {
-                    name: "System",
-                    mergeTags: {
-                      date: {
-                        name: "Current Date",
-                        value: "{{system.date}}",
-                        sample: (/* @__PURE__ */ new Date()).toLocaleDateString()
-                      },
-                      year: {
-                        name: "Current Year",
-                        value: "{{system.year}}",
-                        sample: (/* @__PURE__ */ new Date()).getFullYear().toString()
-                      },
-                      unsubscribe: {
-                        name: "Unsubscribe Link",
-                        value: "{{system.unsubscribe}}",
-                        sample: "https://example.com/unsubscribe"
-                      }
+                  // Special links
+                  specialLinks: {
+                    unsubscribe: {
+                      enabled: true,
+                      text: "Unsubscribe",
+                      href: "{{system.unsubscribe}}"
+                    },
+                    webview: {
+                      enabled: true,
+                      text: "View in browser",
+                      href: "{{system.webview}}"
                     }
-                  }
-                },
-                // Special links
-                specialLinks: {
-                  unsubscribe: {
-                    enabled: true,
-                    text: "Unsubscribe",
-                    href: "{{system.unsubscribe}}"
                   },
-                  webview: {
+                  // Custom CSS
+                  customCSS: [
+                    ".blockbuilder-content-email { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }"
+                  ],
+                  // Validation
+                  validator: {
                     enabled: true,
-                    text: "View in browser",
-                    href: "{{system.webview}}"
-                  }
-                },
-                // Custom CSS
-                customCSS: [
-                  ".blockbuilder-content-email { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; }"
-                ],
-                // Validation
-                validator: {
-                  enabled: true,
-                  rules: {
-                    maxImageSize: 1024 * 1024
-                    // 1MB
+                    rules: {
+                      maxImageSize: 1024 * 1024
+                      // 1MB
+                    }
                   }
                 }
               }
-            }
-          )
-        }
-      ) }) }),
+            )
+          }
+        )
+      ] }) }),
       /* @__PURE__ */ jsx(StyledTabsContent, { value: "text", children: /* @__PURE__ */ jsx(TextTabContent, { children: /* @__PURE__ */ jsx(
         Textarea,
         {

package/dist/admin/index.js

@@ -25,7 +25,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "MagicMail"
       },
-      Component: () => Promise.resolve().then(() => require("../_chunks/App-kROs3WSy.js"))
+      Component: () => Promise.resolve().then(() => require("../_chunks/App-CClpsmQH.js"))
     });
     app.createSettingSection(
       {

package/dist/admin/index.mjs

@@ -24,7 +24,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: "MagicMail"
       },
-      Component: () => import("../_chunks/App-DqArrXrm.mjs")
+      Component: () => import("../_chunks/App-DQpXIAmV.mjs")
     });
     app.createSettingSection(
       {

package/dist/server/index.js

@@ -4776,7 +4776,7 @@ function requireOauth() {
   });
   return oauth;
 }
-const version = "1.0.3";
+const version = "1.0.4";
 const require$$2 = {
   version
 };

package/dist/server/index.mjs

@@ -4768,7 +4768,7 @@ function requireOauth() {
   });
   return oauth;
 }
-const version = "1.0.3";
+const version = "1.0.4";
 const require$$2 = {
   version
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.4",
+  "version": "1.0.5",
   "keywords": [
     "strapi",
     "strapi-plugin",