@parathantl/react-email-editor 0.1.7 → 0.1.9

package/dist/index.js

@@ -2998,9 +2998,8 @@ 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 }) {
+var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions }) {
   const { template, activeTab } = useTemplateContext();
-  const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
   const fileInputRef = useRef6(null);
   const [exportOpen, setExportOpen] = useState3(false);
@@ -3018,12 +3017,6 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
     },
     [dispatch]
   );
-  const handleUndo = useCallback6(() => {
-    dispatch({ type: "UNDO" });
-  }, [dispatch]);
-  const handleRedo = useCallback6(() => {
-    dispatch({ type: "REDO" });
-  }, [dispatch]);
   const handleExportMJML = useCallback6(() => {
     const mjml = generateMJML(templateRef.current);
     const blob = new Blob([mjml], { type: "text/xml" });
@@ -3091,30 +3084,6 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
     [dispatch]
   );
   return /* @__PURE__ */ jsxs3("div", { className: `ee-toolbar ${toolbar_default.toolbar}`, role: "toolbar", "aria-label": "Editor toolbar", children: [
-    /* @__PURE__ */ jsxs3("div", { className: `ee-toolbar-history ${toolbar_default.toolbarGroup}`, role: "group", "aria-label": "History", children: [
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          className: `ee-toolbar-undo ${toolbar_default.toolbarBtn}`,
-          onClick: handleUndo,
-          disabled: !canUndo,
-          title: "Undo (Ctrl+Z)",
-          "aria-label": "Undo",
-          children: "Undo"
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          className: `ee-toolbar-redo ${toolbar_default.toolbarBtn}`,
-          onClick: handleRedo,
-          disabled: !canRedo,
-          title: "Redo (Ctrl+Shift+Z)",
-          "aria-label": "Redo",
-          children: "Redo"
-        }
-      )
-    ] }),
     /* @__PURE__ */ jsxs3("div", { className: editor_default.panelToggle, children: [
       /* @__PURE__ */ jsx4(
         "button",
@@ -3184,6 +3153,7 @@ var Toolbar = React3.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onTog
         ] })
       ] })
     ] }),
+    toolbarActions && /* @__PURE__ */ jsx4("div", { className: `ee-toolbar-actions ${toolbar_default.toolbarGroup}`, children: toolbarActions }),
     /* @__PURE__ */ jsx4(
       "input",
       {
@@ -25096,12 +25066,12 @@ function preventBlur(e) {
   }
   e.preventDefault();
 }
-function RichTextToolbar({ editor }) {
+function RichTextToolbar({ editor, defaultFontFamily, defaultFontSize }) {
   if (!editor) return null;
   return /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
     /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
-      /* @__PURE__ */ jsx13(FontFamilySelect, { editor }),
-      /* @__PURE__ */ jsx13(FontSizeSelect, { editor })
+      /* @__PURE__ */ jsx13(FontFamilySelect, { editor, defaultFontFamily }),
+      /* @__PURE__ */ jsx13(FontSizeSelect, { editor, defaultFontSize })
     ] }),
     /* @__PURE__ */ jsxs11("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
       /* @__PURE__ */ jsx13(Tooltip, { label: "Bold", shortcut: "Ctrl+B", children: /* @__PURE__ */ jsx13(
@@ -25284,9 +25254,10 @@ function RichTextToolbar({ editor }) {
     ] })
   ] });
 }
-function FontFamilySelect({ editor }) {
+function FontFamilySelect({ editor, defaultFontFamily }) {
   const { fontFamilies } = useEditorFonts();
-  const currentFont = editor.getAttributes("textStyle").fontFamily || "";
+  const inlineFont = editor.getAttributes("textStyle").fontFamily || "";
+  const currentFont = inlineFont || defaultFontFamily || "";
   const fonts = fontFamilies.slice();
   if (currentFont && !fonts.some((f) => f.toLowerCase() === currentFont.toLowerCase())) {
     fonts.push(currentFont);
@@ -25312,9 +25283,10 @@ function FontFamilySelect({ editor }) {
     }
   );
 }
-function FontSizeSelect({ editor }) {
+function FontSizeSelect({ editor, defaultFontSize }) {
   const { fontSizes } = useEditorFonts();
-  const currentSize = editor.getAttributes("textStyle").fontSize || "";
+  const inlineSize = editor.getAttributes("textStyle").fontSize || "";
+  const currentSize = inlineSize || defaultFontSize || "";
   const sizes = fontSizes.slice();
   if (currentSize && !sizes.includes(currentSize)) {
     sizes.push(currentSize);
@@ -25743,7 +25715,14 @@ var TextBlockInner = function TextBlock({ block }) {
     backgroundColor: p.backgroundColor && p.backgroundColor !== "transparent" ? p.backgroundColor : void 0
   }), [p.fontFamily, p.fontSize, p.color, p.lineHeight, p.padding, p.fontWeight, p.textTransform, p.letterSpacing, p.backgroundColor]);
   return /* @__PURE__ */ jsxs12("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ jsx14("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx14(RichTextToolbar, { editor: editorInstance }) }),
+    isFocused && editorInstance && /* @__PURE__ */ jsx14("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ jsx14(
+      RichTextToolbar,
+      {
+        editor: editorInstance,
+        defaultFontFamily: p.fontFamily,
+        defaultFontSize: p.fontSize
+      }
+    ) }),
     /* @__PURE__ */ jsx14("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx14(
       TipTapEditor,
       {
@@ -27457,6 +27436,12 @@ import React26, { useState as useState14, useCallback as useCallback18, useRef a
 
 // 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",
@@ -27998,10 +27983,13 @@ 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() {
   const { template } = useTemplateContext();
+  const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
   const [isDragOver, setIsDragOver] = useState18(false);
+  const [previewMode, setPreviewMode] = useState18("desktop");
   const handleAddSection = useCallback22(() => {
     dispatch({ type: "ADD_SECTION", payload: { section: createSection() } });
   }, [dispatch]);
@@ -28039,30 +28027,89 @@ var Canvas = React30.memo(function Canvas2() {
     },
     [dispatch]
   );
-  return /* @__PURE__ */ jsx32("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ jsxs22(
-    "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__ */ jsxs22(React30.Fragment, { children: [
-          /* @__PURE__ */ jsx32(SectionDropZone, { index }),
-          /* @__PURE__ */ jsx32(Section, { section })
-        ] }, 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" })
-      ]
-    }
-  ) });
+  const handleUndo = useCallback22(() => {
+    dispatch({ type: "UNDO" });
+  }, [dispatch]);
+  const handleRedo = useCallback22(() => {
+    dispatch({ type: "REDO" });
+  }, [dispatch]);
+  const canvasWidth = previewMode === "mobile" ? MOBILE_WIDTH : template.globalStyles.width;
+  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: [
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsx32(
+          "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__ */ jsxs22("div", { className: `ee-canvas-history ${canvas_default.canvasHeaderGroup}`, role: "group", "aria-label": "History", children: [
+        /* @__PURE__ */ jsx32(
+          "button",
+          {
+            className: `ee-canvas-undo ${canvas_default.canvasHeaderBtn}`,
+            onClick: handleUndo,
+            disabled: !canUndo,
+            title: "Undo (Ctrl+Z)",
+            "aria-label": "Undo",
+            children: "\u21A9"
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "button",
+          {
+            className: `ee-canvas-redo ${canvas_default.canvasHeaderBtn}`,
+            onClick: handleRedo,
+            disabled: !canRedo,
+            title: "Redo (Ctrl+Shift+Z)",
+            "aria-label": "Redo",
+            children: "\u21AA"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx32("div", { className: `ee-canvas-wrapper ${canvas_default.canvasWrapper}`, onClick: handleCanvasClick, role: "main", "aria-label": "Email canvas", children: /* @__PURE__ */ jsxs22(
+      "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__ */ jsxs22(React30.Fragment, { children: [
+            /* @__PURE__ */ jsx32(SectionDropZone, { index }),
+            /* @__PURE__ */ jsx32(Section, { section })
+          ] }, 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" })
+        ]
+      }
+    ) })
+  ] });
 });
 
 // src/components/Properties/SectionProperties.tsx
@@ -29746,7 +29793,8 @@ var EditorInner = forwardRef2(function EditorInner2(props, ref) {
         sidebarOpen,
         propertiesOpen,
         onToggleSidebar: toggleSidebar,
-        onToggleProperties: toggleProperties
+        onToggleProperties: toggleProperties,
+        toolbarActions: props.toolbarActions
       }
     ),
     /* @__PURE__ */ jsxs47("div", { className: editor_default.editorBody, children: [