@parathantl/react-email-editor 0.1.8 → 0.1.10

package/README.md

@@ -165,6 +165,81 @@ Or pass MJML at init time without a ref:
 | `className` | `string` | CSS class for the outer wrapper |
 | `style` | `CSSProperties` | Inline styles for the outer wrapper |
 
+## Custom Icons (`customIcons`)
+
+You can pass `customIcons` to override built-in UI icons.  
+Every key is optional. If you skip a key, the editor uses its default emoji/icon.
+
+```tsx
+<EmailEditor
+  customIcons={{
+    desktop: '🖥️',
+    mobile: '📱',
+    undo: '↩️',
+    redo: '↪️',
+    addSection: '➕',
+    sidebar: '📚',
+    properties: '⚙️',
+    visual: '🎨',
+    source: '🧾',
+    preview: '👁️',
+    sectionDrag: '↕️',
+    sectionDuplicate: '📄',
+    sectionRemove: '🗑️',
+    blockDuplicate: '📄',
+    blockRemove: '🗑️',
+    previewDesktop: '🖥️',
+    previewMobile: '📱',
+    paletteText: '📝',
+    paletteHeading: '🔤',
+    paletteButton: '🔘',
+    paletteImage: '🖼️',
+    paletteVideo: '▶️',
+    paletteDivider: '➖',
+    paletteSpacer: '↕️',
+    paletteSocial: '🌐',
+    paletteHtml: '💻',
+    paletteCountdown: '⏰',
+    paletteMenu: '📋',
+    paletteHero: '⭐',
+  }}
+/>
+```
+
+### Available `customIcons` keys
+
+| Key | Used In |
+|-----|---------|
+| `desktop` | Canvas desktop view toggle |
+| `mobile` | Canvas mobile view toggle |
+| `undo` | Canvas undo button |
+| `redo` | Canvas redo button |
+| `addSection` | Canvas "Add Section" button |
+| `sidebar` | Toolbar sidebar toggle button |
+| `properties` | Toolbar properties toggle button |
+| `visual` | Toolbar Visual tab icon |
+| `source` | Toolbar Source tab icon |
+| `preview` | Toolbar Preview tab icon |
+| `sectionDrag` | Section drag handle |
+| `sectionDuplicate` | Section duplicate action |
+| `sectionRemove` | Section remove action |
+| `blockDuplicate` | Block duplicate action |
+| `blockRemove` | Block remove action |
+| `previewDesktop` | Preview panel desktop toggle |
+| `previewMobile` | Preview panel mobile toggle |
+| `paletteText` | Block palette icon for Text |
+| `paletteHeading` | Block palette icon for Heading |
+| `paletteButton` | Block palette icon for Button |
+| `paletteImage` | Block palette icon for Image |
+| `paletteVideo` | Block palette icon for Video |
+| `paletteDivider` | Block palette icon for Divider |
+| `paletteSpacer` | Block palette icon for Spacer |
+| `paletteSocial` | Block palette icon for Social |
+| `paletteHtml` | Block palette icon for HTML |
+| `paletteCountdown` | Block palette icon for Countdown |
+| `paletteMenu` | Block palette icon for Menu |
+| `paletteHero` | Block palette icon for Hero |
+
 ## Block Types
 
 | Type | Description | MJML Output |

package/dist/index.cjs

@@ -3080,7 +3080,6 @@ var editor_default = {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions }) {
   const { template, activeTab } = useTemplateContext();
-  const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
   const fileInputRef = (0, import_react15.useRef)(null);
   const [exportOpen, setExportOpen] = (0, import_react15.useState)(false);
@@ -3098,12 +3097,6 @@ var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, prope
     },
     [dispatch]
   );
-  const handleUndo = (0, import_react15.useCallback)(() => {
-    dispatch({ type: "UNDO" });
-  }, [dispatch]);
-  const handleRedo = (0, import_react15.useCallback)(() => {
-    dispatch({ type: "REDO" });
-  }, [dispatch]);
   const handleExportMJML = (0, import_react15.useCallback)(() => {
     const mjml = generateMJML(templateRef.current);
     const blob = new Blob([mjml], { type: "text/xml" });
@@ -3171,30 +3164,6 @@ var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, prope
     [dispatch]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `ee-toolbar ${toolbar_default.toolbar}`, role: "toolbar", "aria-label": "Editor toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `ee-toolbar-history ${toolbar_default.toolbarGroup}`, role: "group", "aria-label": "History", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          className: `ee-toolbar-undo ${toolbar_default.toolbarBtn}`,
-          onClick: handleUndo,
-          disabled: !canUndo,
-          title: "Undo (Ctrl+Z)",
-          "aria-label": "Undo",
-          children: "Undo"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
-        {
-          className: `ee-toolbar-redo ${toolbar_default.toolbarBtn}`,
-          onClick: handleRedo,
-          disabled: !canRedo,
-          title: "Redo (Ctrl+Shift+Z)",
-          "aria-label": "Redo",
-          children: "Redo"
-        }
-      )
-    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: editor_default.panelToggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
@@ -27547,6 +27516,12 @@ var import_react40 = __toESM(require("react"));
 
 // src/styles/canvas.module.css
 var canvas_default = {
+  "canvasArea": "canvasArea",
+  "canvasHeader": "canvasHeader",
+  "canvasHeaderCenter": "canvasHeaderCenter",
+  "canvasHeaderGroup": "canvasHeaderGroup",
+  "canvasHeaderBtn": "canvasHeaderBtn",
+  "canvasHeaderBtnActive": "canvasHeaderBtnActive",
   "canvasWrapper": "canvasWrapper",
   "canvasBody": "canvasBody",
   "canvasBodyDragOver": "canvasBodyDragOver",
@@ -28088,10 +28063,13 @@ var SectionDropZone = import_react43.default.memo(function SectionDropZone2({ in
 
 // src/components/Canvas/Canvas.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var MOBILE_WIDTH = 375;
 var Canvas = import_react44.default.memo(function Canvas2() {
   const { template } = useTemplateContext();
+  const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
   const [isDragOver, setIsDragOver] = (0, import_react44.useState)(false);
+  const [previewMode, setPreviewMode] = (0, import_react44.useState)("desktop");
   const handleAddSection = (0, import_react44.useCallback)(() => {
     dispatch({ type: "ADD_SECTION", payload: { section: createSection() } });
   }, [dispatch]);
@@ -28129,30 +28107,89 @@ var Canvas = import_react44.default.memo(function Canvas2() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    "div",
-    {
-      className: `ee-canvas-body ${canvas_default.canvasBody} ${isDragOver ? canvas_default.canvasBodyDragOver : ""}`,
-      style: {
-        width: template.globalStyles.width,
-        backgroundColor: template.globalStyles.backgroundColor,
-        fontFamily: template.globalStyles.fontFamily
-      },
-      onClick: (e) => e.stopPropagation(),
-      onDragOver: handleBodyDragOver,
-      onDragLeave: handleBodyDragLeave,
-      onDrop: handleBodyDrop,
-      "aria-label": "Email content area",
-      children: [
-        template.sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react44.default.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { section })
-        ] }, section.id)),
-        template.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index: template.sections.length }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
-      ]
-    }
-  ) });
+  const handleUndo = (0, import_react44.useCallback)(() => {
+    dispatch({ type: "UNDO" });
+  }, [dispatch]);
+  const handleRedo = (0, import_react44.useCallback)(() => {
+    dispatch({ type: "REDO" });
+  }, [dispatch]);
+  const canvasWidth = previewMode === "mobile" ? MOBILE_WIDTH : template.globalStyles.width;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-area ${canvas_default.canvasArea}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-header ${canvas_default.canvasHeader}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `ee-canvas-header-center ${canvas_default.canvasHeaderCenter}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-view-toggle ${canvas_default.canvasHeaderGroup}`, role: "group", "aria-label": "Preview size", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            className: `ee-canvas-view-desktop ${canvas_default.canvasHeaderBtn} ${previewMode === "desktop" ? `ee-canvas-view--active ${canvas_default.canvasHeaderBtnActive}` : ""}`,
+            onClick: () => setPreviewMode("desktop"),
+            "aria-pressed": previewMode === "desktop",
+            "aria-label": "Desktop view",
+            title: `Desktop (${template.globalStyles.width}px)`,
+            children: "\u{1F5A5}"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            className: `ee-canvas-view-mobile ${canvas_default.canvasHeaderBtn} ${previewMode === "mobile" ? `ee-canvas-view--active ${canvas_default.canvasHeaderBtnActive}` : ""}`,
+            onClick: () => setPreviewMode("mobile"),
+            "aria-pressed": previewMode === "mobile",
+            "aria-label": "Mobile view",
+            title: "Mobile (375px)",
+            children: "\u{1F4F1}"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-history ${canvas_default.canvasHeaderGroup}`, role: "group", "aria-label": "History", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            className: `ee-canvas-undo ${canvas_default.canvasHeaderBtn}`,
+            onClick: handleUndo,
+            disabled: !canUndo,
+            title: "Undo (Ctrl+Z)",
+            "aria-label": "Undo",
+            children: "\u21A9"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            className: `ee-canvas-redo ${canvas_default.canvasHeaderBtn}`,
+            onClick: handleRedo,
+            disabled: !canRedo,
+            title: "Redo (Ctrl+Shift+Z)",
+            "aria-label": "Redo",
+            children: "\u21AA"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "div",
+      {
+        className: `ee-canvas-body ${canvas_default.canvasBody} ${isDragOver ? canvas_default.canvasBodyDragOver : ""}`,
+        style: {
+          width: canvasWidth,
+          backgroundColor: template.globalStyles.backgroundColor,
+          fontFamily: template.globalStyles.fontFamily
+        },
+        onClick: (e) => e.stopPropagation(),
+        onDragOver: handleBodyDragOver,
+        onDragLeave: handleBodyDragLeave,
+        onDrop: handleBodyDrop,
+        "aria-label": "Email content area",
+        children: [
+          template.sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react44.default.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { section })
+          ] }, section.id)),
+          template.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index: template.sections.length }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
+        ]
+      }
+    ) })
+  ] });
 });
 
 // src/components/Properties/SectionProperties.tsx