@parathantl/react-email-editor 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -3078,9 +3078,8 @@ var editor_default = {
 
 // src/components/Toolbar/Toolbar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties }) {
+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",
@@ -3264,6 +3233,7 @@ var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, prope
         ] })
       ] })
     ] }),
+    toolbarActions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `ee-toolbar-actions ${toolbar_default.toolbarGroup}`, children: toolbarActions }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
       {
@@ -25176,12 +25146,12 @@ function preventBlur(e) {
   }
   e.preventDefault();
 }
-function RichTextToolbar({ editor }) {
+function RichTextToolbar({ editor, defaultFontFamily, defaultFontSize }) {
   if (!editor) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-toolbar ${toolbar_default.richTextToolbar}`, onMouseDown: preventBlur, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontFamilySelect, { editor }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontSizeSelect, { editor })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontFamilySelect, { editor, defaultFontFamily }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FontSizeSelect, { editor, defaultFontSize })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `ee-richtext-group ${toolbar_default.richTextGroup}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { label: "Bold", shortcut: "Ctrl+B", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -25364,9 +25334,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);
@@ -25392,9 +25363,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);
@@ -25823,7 +25795,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__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `ee-block-text ${blocks_default.textBlock}`, ref: wrapperRef, children: [
-    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RichTextToolbar, { editor: editorInstance }) }),
+    isFocused && editorInstance && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: blocks_default.textBlockToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      RichTextToolbar,
+      {
+        editor: editorInstance,
+        defaultFontFamily: p.fontFamily,
+        defaultFontSize: p.fontSize
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       TipTapEditor,
       {
@@ -27537,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",
@@ -28078,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]);
@@ -28119,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
@@ -29826,7 +29873,8 @@ var EditorInner = (0, import_react61.forwardRef)(function EditorInner2(props, re
         sidebarOpen,
         propertiesOpen,
         onToggleSidebar: toggleSidebar,
-        onToggleProperties: toggleProperties
+        onToggleProperties: toggleProperties,
+        toolbarActions: props.toolbarActions
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: editor_default.editorBody, children: [