@parathantl/react-email-editor 0.1.9 → 0.1.11

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { CSSProperties, ReactNode, Dispatch, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _tiptap_core from '@tiptap/core';
 import { Editor, Node } from '@tiptap/core';
@@ -434,7 +434,7 @@ interface EmailEditorProps {
     /** Custom persistence adapter. Defaults to localStorage when persistenceKey is set. */
     persistenceAdapter?: PersistenceAdapter;
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Called when a block is added to the template */
     onBlockAdd?: (block: Block, sectionId: string, columnId: string) => void;
     /** Called when a block is removed from the template */
@@ -456,7 +456,8 @@ interface EmailEditorProps {
     /** Called when history state changes (undo/redo) */
     onHistoryChange?: (canUndo: boolean, canRedo: boolean) => void;
     /** React node rendered at the right end of the toolbar (e.g. a Save button). */
-    toolbarActions?: React.ReactNode;
+    toolbarActions?: ReactNode;
+    customIcons?: Record<string, ReactNode>;
 }
 interface EmailEditorRef {
     getMJML: () => string;
@@ -485,7 +486,7 @@ declare function useEditorState(): {
     canUndo: boolean;
     canRedo: boolean;
 };
-declare function useEditorDispatch(): React.Dispatch<EditorAction>;
+declare function useEditorDispatch(): Dispatch<EditorAction>;
 declare function useSelectedBlock(): Block | null;
 declare function useSelectedSection(): Section | null;
 declare function useEditorVariables(): {
@@ -506,7 +507,7 @@ declare function useImageAdapter(): {
     imageUploadAdapter: ImageUploadAdapter | undefined;
 };
 
-declare function useDispatchContext(): React.Dispatch<EditorAction>;
+declare function useDispatchContext(): Dispatch<EditorAction>;
 
 interface TemplateContextValue {
     template: EmailTemplate;
@@ -560,6 +561,7 @@ interface EditorProviderProps {
     initialTemplate?: EmailTemplate;
     variables?: Variable[];
     initialCustomVariables?: Variable[];
+    customIcons?: Record<string, ReactNode>;
     imageUploadAdapter?: ImageUploadAdapter;
     onChange?: (template: EmailTemplate) => void;
     onVariablesChange?: (customVariables: Variable[]) => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { CSSProperties, ReactNode, Dispatch, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _tiptap_core from '@tiptap/core';
 import { Editor, Node } from '@tiptap/core';
@@ -434,7 +434,7 @@ interface EmailEditorProps {
     /** Custom persistence adapter. Defaults to localStorage when persistenceKey is set. */
     persistenceAdapter?: PersistenceAdapter;
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Called when a block is added to the template */
     onBlockAdd?: (block: Block, sectionId: string, columnId: string) => void;
     /** Called when a block is removed from the template */
@@ -456,7 +456,8 @@ interface EmailEditorProps {
     /** Called when history state changes (undo/redo) */
     onHistoryChange?: (canUndo: boolean, canRedo: boolean) => void;
     /** React node rendered at the right end of the toolbar (e.g. a Save button). */
-    toolbarActions?: React.ReactNode;
+    toolbarActions?: ReactNode;
+    customIcons?: Record<string, ReactNode>;
 }
 interface EmailEditorRef {
     getMJML: () => string;
@@ -485,7 +486,7 @@ declare function useEditorState(): {
     canUndo: boolean;
     canRedo: boolean;
 };
-declare function useEditorDispatch(): React.Dispatch<EditorAction>;
+declare function useEditorDispatch(): Dispatch<EditorAction>;
 declare function useSelectedBlock(): Block | null;
 declare function useSelectedSection(): Section | null;
 declare function useEditorVariables(): {
@@ -506,7 +507,7 @@ declare function useImageAdapter(): {
     imageUploadAdapter: ImageUploadAdapter | undefined;
 };
 
-declare function useDispatchContext(): React.Dispatch<EditorAction>;
+declare function useDispatchContext(): Dispatch<EditorAction>;
 
 interface TemplateContextValue {
     template: EmailTemplate;
@@ -560,6 +561,7 @@ interface EditorProviderProps {
     initialTemplate?: EmailTemplate;
     variables?: Variable[];
     initialCustomVariables?: Variable[];
+    customIcons?: Record<string, ReactNode>;
     imageUploadAdapter?: ImageUploadAdapter;
     onChange?: (template: EmailTemplate) => void;
     onVariablesChange?: (customVariables: Variable[]) => void;

package/dist/index.js

@@ -2998,11 +2998,18 @@ var editor_default = {
 
 // src/components/Toolbar/Toolbar.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions }) {
+var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions, customIcons }) {
   const { template, activeTab } = useTemplateContext();
   const dispatch = useEditorDispatch();
   const fileInputRef = useRef6(null);
   const [exportOpen, setExportOpen] = useState3(false);
+  const sidebarIcon = customIcons?.sidebar ?? "\u{1F4DA}";
+  const propertiesIcon = customIcons?.properties ?? "\u2699\uFE0F";
+  const tabIcons = {
+    visual: customIcons?.visual ?? "\u{1F3A8}",
+    source: customIcons?.source ?? "\u{1F9FE}",
+    preview: customIcons?.preview ?? "\u{1F441}\uFE0F"
+  };
   const templateRef = useRef6(template);
   templateRef.current = template;
   useEffect5(() => {
@@ -3093,7 +3100,7 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
           "aria-label": "Toggle sidebar",
           "aria-pressed": sidebarOpen,
           title: "Toggle sidebar",
-          children: "\u2630"
+          children: sidebarIcon
         }
       ),
       /* @__PURE__ */ jsx4(
@@ -3104,19 +3111,22 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
           "aria-label": "Toggle properties",
           "aria-pressed": propertiesOpen,
           title: "Toggle properties",
-          children: "\u2699"
+          children: propertiesIcon
         }
       )
     ] }),
     /* @__PURE__ */ jsx4("div", { className: `ee-toolbar-separator ${toolbar_default.toolbarSeparator}`, role: "separator" }),
-    /* @__PURE__ */ jsx4("div", { className: `ee-toolbar-tabs ${toolbar_default.tabBar}`, role: "tablist", "aria-label": "Editor views", children: ["visual", "source", "preview"].map((tab) => /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4("div", { className: `ee-toolbar-tabs ${toolbar_default.tabBar}`, role: "tablist", "aria-label": "Editor views", children: ["visual", "source", "preview"].map((tab) => /* @__PURE__ */ jsxs3(
       "button",
       {
         role: "tab",
         "aria-selected": activeTab === tab,
         className: `ee-toolbar-tab ee-toolbar-tab--${tab} ${toolbar_default.tabBtn} ${activeTab === tab ? toolbar_default.tabBtnActive : ""}`,
         onClick: () => handleTabChange(tab),
-        children: tab.charAt(0).toUpperCase() + tab.slice(1)
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "ee-toolbar-tab-icon", children: tabIcons[tab] }),
+          /* @__PURE__ */ jsx4("span", { className: "ee-toolbar-tab-label", children: tab.charAt(0).toUpperCase() + tab.slice(1) })
+        ]
       },
       tab
     )) }),
@@ -3254,7 +3264,21 @@ var sidebar_default = {
 
 // src/components/Sidebar/BlockPalette.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var BlockPalette = React4.memo(function BlockPalette2({ blockDefinitions }) {
+var BLOCK_PALETTE_ICON_KEYS = {
+  text: "paletteText",
+  heading: "paletteHeading",
+  button: "paletteButton",
+  image: "paletteImage",
+  video: "paletteVideo",
+  divider: "paletteDivider",
+  spacer: "paletteSpacer",
+  social: "paletteSocial",
+  html: "paletteHtml",
+  countdown: "paletteCountdown",
+  menu: "paletteMenu",
+  hero: "paletteHero"
+};
+var BlockPalette = React4.memo(function BlockPalette2({ blockDefinitions, customIcons }) {
   const defs = blockDefinitions ?? BLOCK_DEFINITIONS;
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
@@ -3280,30 +3304,34 @@ var BlockPalette = React4.memo(function BlockPalette2({ blockDefinitions }) {
     },
     [dispatch, template.sections]
   );
-  return /* @__PURE__ */ jsx5("div", { className: `ee-block-palette ${sidebar_default.blockPalette}`, role: "list", "aria-label": "Available blocks", children: defs.map((def) => /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      "data-block-type": def.type,
-      className: `ee-palette-item ee-palette-item--${def.type} ${sidebar_default.blockCard}`,
-      draggable: true,
-      onDragStart: (e) => handleDragStart(def.type, e),
-      title: def.description,
-      role: "listitem",
-      "aria-label": `${def.label} block - drag or press Enter to add`,
-      tabIndex: 0,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleKeyboardAdd(def.type);
-        }
+  return /* @__PURE__ */ jsx5("div", { className: `ee-block-palette ${sidebar_default.blockPalette}`, role: "list", "aria-label": "Available blocks", children: defs.map((def) => {
+    const iconKey = BLOCK_PALETTE_ICON_KEYS[def.type];
+    const icon = customIcons?.[iconKey] ?? def.icon;
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        "data-block-type": def.type,
+        className: `ee-palette-item ee-palette-item--${def.type} ${sidebar_default.blockCard}`,
+        draggable: true,
+        onDragStart: (e) => handleDragStart(def.type, e),
+        title: def.description,
+        role: "listitem",
+        "aria-label": `${def.label} block - drag or press Enter to add`,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleKeyboardAdd(def.type);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: `ee-palette-icon ${sidebar_default.blockCardIcon}`, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx5("span", { className: `ee-palette-label ${sidebar_default.blockCardLabel}`, children: def.label })
+        ]
       },
-      children: [
-        /* @__PURE__ */ jsx5("span", { className: `ee-palette-icon ${sidebar_default.blockCardIcon}`, "aria-hidden": "true", children: def.icon }),
-        /* @__PURE__ */ jsx5("span", { className: `ee-palette-label ${sidebar_default.blockCardLabel}`, children: def.label })
-      ]
-    },
-    def.type
-  )) });
+      def.type
+    );
+  }) });
 });
 
 // src/components/Sidebar/VariableList.tsx
@@ -3482,7 +3510,7 @@ function AddVariableForm() {
 
 // src/components/Sidebar/Sidebar.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function Sidebar({ blockDefinitions }) {
+function Sidebar({ blockDefinitions, customIcons }) {
   const dispatch = useEditorDispatch();
   const handleAddSection = useCallback10(
     (widths) => {
@@ -3495,7 +3523,7 @@ function Sidebar({ blockDefinitions }) {
     /* @__PURE__ */ jsx8(VariableList, {}),
     /* @__PURE__ */ jsx8("div", { className: sidebar_default.addVariableSection, children: /* @__PURE__ */ jsx8(AddVariableForm, {}) }),
     /* @__PURE__ */ jsx8("h3", { className: `ee-sidebar-title ${sidebar_default.sectionTitle}`, children: "Blocks" }),
-    /* @__PURE__ */ jsx8(BlockPalette, { blockDefinitions }),
+    /* @__PURE__ */ jsx8(BlockPalette, { blockDefinitions, customIcons }),
     /* @__PURE__ */ jsx8("h3", { className: `ee-sidebar-title ${sidebar_default.sectionTitle}`, children: "Layouts" }),
     /* @__PURE__ */ jsx8("div", { className: `ee-layout-section ${sidebar_default.layoutSection}`, children: COLUMN_LAYOUTS.map((layout) => /* @__PURE__ */ jsxs7(
       "div",
@@ -27569,10 +27597,12 @@ function getBlockData(e) {
   if (!blockId || index === void 0) return null;
   return { blockId, index: Number(index) };
 }
-var Column = React27.memo(function Column2({ column, sectionId }) {
+var Column = React27.memo(function Column2({ column, sectionId, customIcons }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const [blockToRemove, setBlockToRemove] = useState15(null);
+  const blockDuplicateIcon = customIcons?.blockDuplicate ?? "\u{1F4C4}";
+  const blockRemoveIcon = customIcons?.blockRemove ?? "\u{1F5D1}\uFE0F";
   const confirmRemoveBlock = useCallback19(
     (blockId) => {
       setBlockToRemove(blockId);
@@ -27768,7 +27798,7 @@ var Column = React27.memo(function Column2({ column, sectionId }) {
                   onClick: handleDuplicateClick,
                   title: "Duplicate block",
                   "aria-label": "Duplicate block",
-                  children: "\u29C9"
+                  children: blockDuplicateIcon
                 }
               ),
               /* @__PURE__ */ jsx29(
@@ -27778,7 +27808,7 @@ var Column = React27.memo(function Column2({ column, sectionId }) {
                   onClick: handleRemoveClick,
                   title: "Remove block",
                   "aria-label": "Remove block",
-                  children: "x"
+                  children: blockRemoveIcon
                 }
               )
             ] }),
@@ -27809,12 +27839,15 @@ var Column = React27.memo(function Column2({ column, sectionId }) {
 
 // src/components/Canvas/Section.tsx
 import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
-var Section = React28.memo(function Section2({ section }) {
+var Section = React28.memo(function Section2({ section, customIcons }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
   const isSelected = selection.sectionId === section.id && !selection.blockId;
   const [showRemoveConfirm, setShowRemoveConfirm] = useState16(false);
+  const sectionDragIcon = customIcons?.sectionDrag ?? "\u2195\uFE0F";
+  const sectionDuplicateIcon = customIcons?.sectionDuplicate ?? "\u{1F4C4}";
+  const sectionRemoveIcon = customIcons?.sectionRemove ?? "\u{1F5D1}\uFE0F";
   const handleClick2 = useCallback20(
     (e) => {
       e.stopPropagation();
@@ -27889,7 +27922,7 @@ var Section = React28.memo(function Section2({ section }) {
               role: "button",
               "aria-label": "Reorder section with Arrow Up/Down keys",
               tabIndex: 0,
-              children: "\u283F"
+              children: sectionDragIcon
             }
           ),
           /* @__PURE__ */ jsx30(
@@ -27899,7 +27932,7 @@ var Section = React28.memo(function Section2({ section }) {
               onClick: handleDuplicate,
               title: "Duplicate section",
               "aria-label": "Duplicate section",
-              children: "\u29C9"
+              children: sectionDuplicateIcon
             }
           ),
           /* @__PURE__ */ jsx30(
@@ -27909,11 +27942,11 @@ var Section = React28.memo(function Section2({ section }) {
               onClick: handleRemove,
               title: "Remove section",
               "aria-label": "Remove section",
-              children: "x"
+              children: sectionRemoveIcon
             }
           )
         ] }),
-        /* @__PURE__ */ jsx30("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ jsx30(Column, { column, sectionId: section.id }, column.id)) }),
+        /* @__PURE__ */ jsx30("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ jsx30(Column, { column, sectionId: section.id, customIcons }, column.id)) }),
         showRemoveConfirm && /* @__PURE__ */ jsx30(
           ConfirmDialog,
           {
@@ -27984,7 +28017,7 @@ var SectionDropZone = React29.memo(function SectionDropZone2({ index }) {
 // src/components/Canvas/Canvas.tsx
 import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var MOBILE_WIDTH = 375;
-var Canvas = React30.memo(function Canvas2() {
+var Canvas = React30.memo(function Canvas2({ customIcons }) {
   const { template } = useTemplateContext();
   const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
@@ -28034,6 +28067,10 @@ var Canvas = React30.memo(function Canvas2() {
     dispatch({ type: "REDO" });
   }, [dispatch]);
   const canvasWidth = previewMode === "mobile" ? MOBILE_WIDTH : template.globalStyles.width;
+  const desktopIcon = customIcons?.desktop ?? "\u{1F5A5}";
+  const mobileIcon = customIcons?.mobile ?? "\u{1F4F1}";
+  const undoIcon = customIcons?.undo ?? "\u21A9";
+  const redoIcon = customIcons?.redo ?? "\u21AA";
   return /* @__PURE__ */ jsxs22("div", { className: `ee-canvas-area ${canvas_default.canvasArea}`, children: [
     /* @__PURE__ */ jsxs22("div", { className: `ee-canvas-header ${canvas_default.canvasHeader}`, children: [
       /* @__PURE__ */ jsx32("div", { className: `ee-canvas-header-center ${canvas_default.canvasHeaderCenter}`, children: /* @__PURE__ */ jsxs22("div", { className: `ee-canvas-view-toggle ${canvas_default.canvasHeaderGroup}`, role: "group", "aria-label": "Preview size", children: [
@@ -28045,7 +28082,7 @@ var Canvas = React30.memo(function Canvas2() {
             "aria-pressed": previewMode === "desktop",
             "aria-label": "Desktop view",
             title: `Desktop (${template.globalStyles.width}px)`,
-            children: "\u{1F5A5}"
+            children: desktopIcon
           }
         ),
         /* @__PURE__ */ jsx32(
@@ -28056,7 +28093,7 @@ var Canvas = React30.memo(function Canvas2() {
             "aria-pressed": previewMode === "mobile",
             "aria-label": "Mobile view",
             title: "Mobile (375px)",
-            children: "\u{1F4F1}"
+            children: mobileIcon
           }
         )
       ] }) }),
@@ -28069,7 +28106,7 @@ var Canvas = React30.memo(function Canvas2() {
             disabled: !canUndo,
             title: "Undo (Ctrl+Z)",
             "aria-label": "Undo",
-            children: "\u21A9"
+            children: undoIcon
           }
         ),
         /* @__PURE__ */ jsx32(
@@ -28080,7 +28117,7 @@ var Canvas = React30.memo(function Canvas2() {
             disabled: !canRedo,
             title: "Redo (Ctrl+Shift+Z)",
             "aria-label": "Redo",
-            children: "\u21AA"
+            children: redoIcon
           }
         )
       ] })
@@ -28102,10 +28139,13 @@ var Canvas = React30.memo(function Canvas2() {
         children: [
           template.sections.map((section, index) => /* @__PURE__ */ jsxs22(React30.Fragment, { children: [
             /* @__PURE__ */ jsx32(SectionDropZone, { index }),
-            /* @__PURE__ */ jsx32(Section, { section })
+            /* @__PURE__ */ jsx32(Section, { section, customIcons })
           ] }, section.id)),
           template.sections.length > 0 && /* @__PURE__ */ jsx32(SectionDropZone, { index: template.sections.length }),
-          /* @__PURE__ */ jsx32("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
+          /* @__PURE__ */ jsxs22("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: [
+            customIcons?.addSection ?? "\u2795",
+            " Add Section"
+          ] })
         ]
       }
     ) })
@@ -29473,11 +29513,13 @@ var PREVIEW_WIDTHS = {
   desktop: 600,
   mobile: 375
 };
-function PreviewPanel() {
+function PreviewPanel({ customIcons }) {
   const { template } = useTemplateContext();
   const [html2, setHtml] = useState22("");
   const [previewMode, setPreviewMode] = useState22("desktop");
   const iframeRef = useRef23(null);
+  const desktopIcon = customIcons?.previewDesktop ?? "\u{1F5A5}\uFE0F";
+  const mobileIcon = customIcons?.previewMobile ?? "\u{1F4F1}";
   useEffect16(() => {
     let cancelled = false;
     const timer = setTimeout(() => {
@@ -29507,24 +29549,30 @@ function PreviewPanel() {
   }, [html2]);
   return /* @__PURE__ */ jsxs45("div", { className: `ee-preview ${preview_default.preview}`, children: [
     /* @__PURE__ */ jsxs45("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
-      /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsxs45(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--desktop ${preview_default.previewToggle} ${preview_default.previewToggleDesktop} ${previewMode === "desktop" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
           onClick: () => setPreviewMode("desktop"),
           "aria-pressed": previewMode === "desktop",
           "aria-label": "Desktop preview",
-          children: "Desktop"
+          children: [
+            desktopIcon,
+            " Desktop"
+          ]
         }
       ),
-      /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsxs45(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--mobile ${preview_default.previewToggle} ${preview_default.previewToggleMobile} ${previewMode === "mobile" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
           onClick: () => setPreviewMode("mobile"),
           "aria-pressed": previewMode === "mobile",
           "aria-label": "Mobile preview",
-          children: "Mobile"
+          children: [
+            mobileIcon,
+            " Mobile"
+          ]
         }
       )
     ] }),
@@ -29606,7 +29654,7 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
   const selection = useSelectionContext();
   const { clearPersisted } = useConfigContext();
   const containerRef = useRef24(null);
-  const { onReady, onSave } = props;
+  const { onReady, onSave, customIcons } = props;
   const [sidebarOpen, setSidebarOpen] = useState24(false);
   const [propertiesOpen, setPropertiesOpen] = useState24(false);
   const [pendingRemoval, setPendingRemoval] = useState24(null);
@@ -29794,21 +29842,22 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
         propertiesOpen,
         onToggleSidebar: toggleSidebar,
         onToggleProperties: toggleProperties,
-        toolbarActions: props.toolbarActions
+        toolbarActions: props.toolbarActions,
+        customIcons
       }
     ),
     /* @__PURE__ */ jsxs47("div", { className: editor_default.editorBody, children: [
       activeTab === "visual" && /* @__PURE__ */ jsxs47(Fragment5, { children: [
-        /* @__PURE__ */ jsx58("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
-        /* @__PURE__ */ jsx58("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Canvas, {}) }) }),
+        /* @__PURE__ */ jsx58("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Sidebar, { blockDefinitions: props.blockDefinitions, customIcons }) }) }),
+        /* @__PURE__ */ jsx58("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(Canvas, { customIcons }) }) }),
         /* @__PURE__ */ jsx58("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PropertiesPanel, {}) }) }),
         /* @__PURE__ */ jsx58("div", { className: overlayClasses, onClick: closeOverlays })
       ] }),
       activeTab === "source" && /* @__PURE__ */ jsxs47("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
         /* @__PURE__ */ jsx58("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(SourceEditor, {}) }) }),
-        /* @__PURE__ */ jsx58("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, {}) }) })
+        /* @__PURE__ */ jsx58("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, { customIcons }) }) })
       ] }),
-      activeTab === "preview" && /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, {}) })
+      activeTab === "preview" && /* @__PURE__ */ jsx58(ErrorBoundary, { children: /* @__PURE__ */ jsx58(PreviewPanel, { customIcons }) })
     ] })
   ] });
 });
@@ -29837,7 +29886,8 @@ var EmailEditor = forwardRef2(
       onSectionRemove,
       onSelectionChange,
       onTemplateLoad,
-      onHistoryChange
+      onHistoryChange,
+      customIcons
     } = props;
     let template = initialTemplate;
     if (!template && initialMJML) {
@@ -29870,6 +29920,7 @@ var EmailEditor = forwardRef2(
         onSelectionChange,
         onTemplateLoad,
         onHistoryChange,
+        customIcons,
         children: /* @__PURE__ */ jsx58("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ jsx58(EditorInner, { ref, ...props }) })
       }
     );