@parathantl/react-email-editor 0.1.7 → 0.1.8

package/dist/index.d.mts

@@ -455,6 +455,8 @@ interface EmailEditorProps {
     onTemplateLoad?: (template: EmailTemplate) => void;
     /** 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;
 }
 interface EmailEditorRef {
     getMJML: () => string;

package/dist/index.d.ts

@@ -455,6 +455,8 @@ interface EmailEditorProps {
     onTemplateLoad?: (template: EmailTemplate) => void;
     /** 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;
 }
 interface EmailEditorRef {
     getMJML: () => string;

package/dist/index.js

@@ -2998,7 +2998,7 @@ 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();
@@ -3184,6 +3184,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 +25097,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 +25285,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 +25314,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 +25746,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,
       {
@@ -29746,7 +29756,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: [