@flozy/editor 9.1.1 → 9.1.2

package/dist/Editor/Elements/DataView/styles.js

@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
     },
     "& table th": {
       cursor: "pointer",
-      minWidth: "200px"
+      width: "200px"
     },
     "& table, th, td": {
       border: "1px solid black",
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         "& .tv-ck-box": {
           "& svg": {
             color: appTheme?.palette?.editor?.tv_border,
-            "& rect": {
+            '& rect': {
               fill: appTheme?.palette?.editor?.tv_chk_box_fill,
               stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
             }
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
           "&.Mui-checked": {
             "& svg": {
               color: "rgba(37, 99, 235, 1)",
-              "& rect": {
+              '& rect': {
                 fill: appTheme?.palette?.editor?.activeColor,
-                stroke: "none"
+                stroke: 'none'
               }
             }
           }
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px",
-        minWidth: "148px"
+        minWidth: '148px'
       },
       "& input": {
         paddingBottom: "0px",
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
-      fontFamily: "Inter !important",
+      fontFamily: 'Inter !important',
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
-        padding: "6px 8px",
+        padding: '6px 8px',
         "& svg": {
           width: "16px",
           height: "16px",
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
-            "& path": {
+            '& path': {
               stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }

package/dist/Editor/Elements/Embed/Image.js

@@ -5,7 +5,7 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
-import { LinkIcon } from "../../common/iconslist";
+import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import Icon from "../../common/Icon";
@@ -32,7 +32,7 @@ const ToolBar = ({
       top: "-4px",
       left: topM ? "35px" : "0px",
       margin: "0px",
-      gap: "3px"
+      gap: '3px'
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -180,6 +180,20 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
+            bgColor: "#2563EB",
+            textColor: "#FFF",
+            borderRadius: {
+              topLeft: 30,
+              topRight: 30,
+              bottomLeft: 30,
+              bottomRight: 30
+            },
+            bannerSpacing: {
+              left: 12,
+              top: 12,
+              right: 12,
+              bottom: 12
+            },
             textAlign: "center",
             label: "Get Started"
           }],

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -59,8 +59,7 @@ const FreeGridBox = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData,
-      [`${breakpoint}_updatedOn`]: new Date().getTime()
+      ...updateData
     }, {
       at: path
     });

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -59,8 +59,7 @@ const FreeGridItem = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData,
-      [`${breakpoint}_updatedOn`]: new Date().getTime()
+      ...updateData
     }, {
       at: path
     });

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -338,9 +338,6 @@ const useFreeGridStyles = ({
           fontSize: "14px",
           borderRadius: "7px"
         }
-      },
-      "& .remove-resize-styles": {
-        transform: "none !important"
       }
     }
   },

package/dist/Editor/Elements/Grid/GridItem.js

@@ -50,7 +50,8 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp hide-popper-on-overlap",
+    className: "gi-tool-pp",
+    disablePortal: true,
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",
@@ -287,7 +288,7 @@ const GridItem = props => {
       ...getBRProps,
       display: "flex",
       flexDirection: flexDirection || "column",
-      background: bgColor,
+      background: bgColor || "transparent",
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderStyle: borderStyle || "solid",

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,62 +11,6 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Toolbar = props => {
-  const {
-    urlPath,
-    linkType,
-    showInNewTab,
-    selected,
-    linkRef,
-    onEditLink,
-    editor
-  } = props;
-  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-  const navType = getLinkType(linkType, urlPath);
-  const hideOpenLink = navType === "page" || !navType;
-  return selected ? /*#__PURE__*/_jsx(Popper, {
-    anchorEl: linkRef?.current,
-    open: true,
-    placement: "top-start",
-    className: "hide-popper-on-overlap",
-    contentEditable: false,
-    style: {
-      zIndex: 1000
-    },
-    children: /*#__PURE__*/_jsxs(Box, {
-      className: "element-toolbar hr",
-      style: {
-        width: "150px",
-        display: "flex",
-        position: "unset"
-      },
-      component: "div",
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    })
-  }) : null;
-};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -96,6 +40,7 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
+  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -108,7 +53,6 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
-  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -133,25 +77,54 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
+  const Toolbar = () => {
+    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+    const navType = getLinkType(linkType, urlPath);
+    const hideOpenLink = navType === "page" || !navType;
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px",
+        display: "flex"
+      },
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
+  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
-    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {
-      urlPath: urlPath,
-      linkType: linkType,
-      showInNewTab: showInNewTab,
-      selected: selected,
-      linkRef: linkRef,
-      onEditLink: onEditLink,
-      editor: editor
-    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
+// import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/Elements/SimpleText/style.js

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: "inline-flex",
-      alignItems: "center",
+      display: 'inline-flex',
+      alignItems: 'center',
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Table/Table.js

@@ -133,8 +133,7 @@ const Table = props => {
   const classes = TableStyles(editorTheme);
   const {
     readOnly,
-    isMobile,
-    hideTools = []
+    isMobile
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const [exandTools, setExpandTools] = useState(null);
@@ -305,16 +304,16 @@ const Table = props => {
           ...attributes,
           children: children
         })
-      }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
+      }), /*#__PURE__*/_jsx(AddRowCol, {
         ...commonAddBtnProps,
         addType: "col",
         onAdd: addCol
       })]
-    }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
+    }), /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow
-    }), !readOnly && !hideTools.includes("settings") && /*#__PURE__*/_jsx(ToolBar, {
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {
       selected: selected,
       showTool: showTool,
       classes: classes,

package/dist/Editor/Elements/Table/TableCell.js

@@ -48,8 +48,7 @@ const TableCell = props => {
     customProps
   } = props;
   const {
-    readOnly,
-    hideTools = []
+    readOnly
   } = customProps;
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const {
@@ -107,8 +106,8 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);

package/dist/Editor/Elements/Title/title.js

@@ -1,24 +1,18 @@
-import React from "react";
-import { Text } from "slate";
+import React, { useEffect, useState } from "react";
+import { Editor } from "slate";
+import { useSlate } from "slate-react";
+import { getNodeText } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
-const isEmptyTextNode = node => {
-  if (Text.isText(node)) {
-    return !node.text.trim();
-  }
-  return false;
-};
 const Title = props => {
   const {
-    element,
     attributes,
     children,
+    element,
     customProps
   } = props;
-  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
+  useDetectExitFromTitle(element, customProps?.getTitleSaveData);
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
-    placeholder: "Title",
-    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"
@@ -26,4 +20,28 @@ const Title = props => {
     children: children
   });
 };
-export default Title;
+export default Title;
+const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
+  const editor = useSlate();
+  const [wasInsideTitle, setWasInsideTitle] = useState(false);
+  useEffect(() => {
+    if (!editor.selection) return;
+
+    // Get the current node where the cursor is
+    const [nodeEntry] = Editor.nodes(editor, {
+      at: editor.selection,
+      match: n => n.type === "title"
+    });
+    if (nodeEntry) {
+      setWasInsideTitle(true); // User was inside the title
+    } else if (wasInsideTitle) {
+      // User exited the title node
+      const text = getNodeText(titleNode) || "";
+      if (text?.trim() && text !== "Untitled" && onSaveTitle) {
+        onSaveTitle(text);
+      }
+      setWasInsideTitle(false);
+    }
+  }, [editor.selection]);
+  return null;
+};

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = theme => ({
+const VariableStyles = () => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,34 +37,8 @@ const VariableStyles = theme => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
-    "& .MuiPaper-root": {
-      borderRadius: '8px',
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      marginTop: '5px',
-      "@media only screen and (max-width: 599px)": {
-        padding: '10px 0px'
-      }
-    },
-    "& .MuiList-root": {
-      padding: '0px'
-    },
-    "& .MuiButtonBase-root": {
-      margin: '6px',
-      borderRadius: '8px',
-      padding: '6px 14px',
-      fontSize: '14px',
-      fontWeight: '400',
-      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
-      "&:hover": {
-        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-      },
-      "@media only screen and (max-width: 599px)": {
-        minHeight: '30px',
-        margin: '0px 6px'
-      }
-    },
     "& .Mui-selected": {
-      backgroundColor: 'unset !important'
+      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,15 +3,11 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
-import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const {
-    theme
-  } = useEditorContext();
-  const classes = VariableStyles(theme);
+  const classes = VariableStyles();
   const editor = useSlateStatic();
   const {
     options
@@ -28,14 +24,13 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto",
-          transformOrigin: 'top left'
+          overflowY: "auto"
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -45,14 +40,6 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
-      },
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'right'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Styles/EditorStyles.js

@@ -133,7 +133,7 @@ const editorStyles = ({
       },
       "& .accordion-summary-collapse-btn": {
         padding: "4px",
-        width: "5px"
+        width: '5px'
       },
       "& .workflow-icon-btn": {
         pointerEvents: "none",
@@ -242,7 +242,7 @@ const editorStyles = ({
         }
       },
       "& .section-tw": {
-        background: "transparent !important",
+        background: 'transparent !important',
         "& button": {
           padding: "2px",
           borderRadius: "0px",
@@ -291,8 +291,8 @@ const editorStyles = ({
         }
       },
       "& ::selection": {
-        background: "rgba(35, 131, 226, 0.35)!important",
-        color: "inherit"
+        background: 'rgba(35, 131, 226, 0.35)!important',
+        color: 'inherit'
       },
       "&.readOnlyContainer": {
         "& .max-content": {
@@ -302,7 +302,7 @@ const editorStyles = ({
     },
     fullScreenWrapper: {
       "& .editor-wrapper": {
-        paddingTop: "20px"
+        paddingTop: '20px'
       },
       "& .MuiDialog-paper, & .MuiPopover-paper": {
         background: `${theme?.palette?.editor?.background} !important`

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -1,32 +1,8 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
-import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
-import { toolbarGroups } from "../toolbarGroups.js";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const fontWeight = allTools.find(f => f.format === "fontWeight");
-export const getValue = (editor, format) => {
-  switch (format) {
-    case "fontFamily":
-      {
-        const style = getSelectedElementStyle("font-family", editor);
-        return style || defaultFonts[0];
-      }
-    case "fontWeight":
-      {
-        const {
-          options
-        } = fontWeight || {};
-        const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
-        const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
-        return selected?.value;
-      }
-    default:
-      return activeMark(editor, format);
-  }
-};
 const Dropdown = ({
   classes,
   editor,
@@ -34,7 +10,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = getValue(editor, format);
+  const value = activeMark(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;
@@ -44,7 +20,7 @@ const Dropdown = ({
     });
   };
   return /*#__PURE__*/_jsx(Select, {
-    value: value || options?.[0]?.value,
+    value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
     MenuProps: {

package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { Autocomplete, TextField } from "@mui/material";
-import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
+import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
 import usePopupStyle from "../PopupTool/PopupToolStyle.js";
 import { useEditorContext } from "../../hooks/useMouseMove.js";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import { getValue } from "./Dropdown.js";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 const FontFamilyAutocomplete = ({
   editor,
@@ -15,7 +14,7 @@ const FontFamilyAutocomplete = ({
   val = "",
   webFont = false
 }) => {
-  const markValue = getValue(editor, format);
+  const markValue = activeMark(editor, format);
   const value = !webFont ? markValue : val;
   const changeMarkData = (event, newValue, format) => {
     if (!webFont) {

package/dist/Editor/Toolbar/FormatTools/MarkButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
-import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
+import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkButton = ({
   editor,
@@ -9,7 +9,7 @@ const MarkButton = ({
   title
 }) => {
   return /*#__PURE__*/_jsx(Button, {
-    active: isMarkBtnActive(editor, format),
+    active: isMarkActive(editor, format),
     format: format,
     onMouseDown: e => {
       e.preventDefault();