@flozy/editor 7.0.4 → 7.0.5

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Popper, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -14,13 +14,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
+    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
   const classes = usePopupStyles(theme);
   const {
     setPopupType,
-    openAI
+    openAI,
+    selectedElement
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -31,17 +33,10 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
-  const {
-    selectedElement
-  } = useEditorContext();
-  console.log("Editor debug ====>", event, open, anchorEl, selection);
-  const updateAnchorEl = useCallback(() => {
+  const updateAnchorEl = isScroll => {
     try {
-      const {
-        selection
-      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
-      if (isHavingSelection) {
+      if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
@@ -50,16 +45,21 @@ const PopupTool = props => {
           rect.y = -500; // hide the popper
         }
 
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+        // Create a dummy anchor element to match Popper's requirements
+        const anchor = document.createElement("div");
+        anchor.style.position = "absolute";
+        anchor.style.top = `${rect.top + window.scrollY}px`;
+        anchor.style.left = `${rect.left + window.scrollX}px`;
+        document.body.appendChild(anchor);
+        if (!anchorEl || isScroll === "scroll") {
+          setAnchorEl(anchor);
+          setOpen(true);
+        }
       }
     } catch (err) {
       console.log(err);
     }
-  }, [editor?.selection]);
+  };
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -74,32 +74,22 @@ const PopupTool = props => {
       if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
-        // setIsTextSelected(true);
+        setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");
-      // setIsTextSelected(false);
+      setIsTextSelected(false);
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || selectedElement?.enable === 1) {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
-  }, [selection]);
-  useEffect(() => {
-    const {
-      path,
-      enable
-    } = selectedElement || {};
-    const isFreeGridElement = path && path.split("|").length > 2;
-    if (enable === 1 && isFreeGridElement) {
-      setAnchorEl(null);
-    }
-  }, [selection, selectedElement?.path, selectedElement?.enable]);
+  }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {
     // setAnchorEl(null);
     setOpen(false);
@@ -125,24 +115,18 @@ const PopupTool = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
-      transition: true,
       sx: classes.popupWrapper,
       placement: "top-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        children: /*#__PURE__*/_jsx(Paper, {
-          style: {
-            borderRadius: "6px",
-            border: "1px solid #8360FD"
-          },
-          children: /*#__PURE__*/_jsx(MiniTextFormat, {
-            editor: editor,
-            classes: classes,
-            closeMainPopup: handleClose,
-            customProps: customProps
-          })
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          borderRadius: "6px",
+          border: "1px solid #8360FD"
+        },
+        children: /*#__PURE__*/_jsx(MiniTextFormat, {
+          editor: editor,
+          classes: classes,
+          closeMainPopup: handleClose,
+          customProps: customProps
         })
       })
     })

package/dist/Editor/common/FontLoader/FontList.js

@@ -1,11 +1,11 @@
-export const defaultFonts = [
-// "EB Garamond",
-"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
-export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
-export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
-// "Source Sans 3",
-"Hind",
-// "Exo 2",
-"Teko", "Oxygen", "Cairo", "Crimson Text", "Plus Jakarta Sans", "Overpass", "Pacifico", "Prompt", "Red Hat Display", "Varela Round", "Cormorant Garamond", "Assistant", "Comfortaa", "Lexend", "Signika Negative",
-// "M PLUS Rounded 1c",
-"Fjalla One", "Caveat", "IBM Plex Mono", "Arvo", "Lobster", "Schibsted Grotesk", "Chakra Petch", "Maven Pro", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", 'Titillium Web', ...defaultFonts];
+const otherFonts = ["PoppinsRegular", "PoppinsBold", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door"];
+const mostUsedGoogleFonts = ["Roboto", "Poppins", "Lato", "Inter", "Nunito", "Ubuntu", "Oswald", "Rubik", "Roboto Slab", "PT Sans", "Work Sans", "Lora", "Mulish", "DM Sans", "Fira Sans", "Quicksand", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Libre Franklin", "Bebas Neue", "Cabin", "Titillium Web", "Heebo", "Noto Serif", "Jost", "Source Code Pro", "Josefin Sans", "Dosis", "Fira Sans Condensed", "Archivo", "Noto Serif JP", "Crimson Text", "Cairo", "Pacifico", "Red Hat Display", "Assistant", "Comfortaa", "Lexend", "Fjalla One", "Caveat", "Arvo", "Lobster", "Schibsted Grotesk", "EB Garamond", "Sora", "Kalam", "Onest", "Space Grotesk", "Outfit", "Plus Jakarta Sans"];
+const systemFonts = ["Monaco", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
+export const googleFontList = [...mostUsedGoogleFonts, ...otherFonts];
+const fontList = [...mostUsedGoogleFonts, ...otherFonts, ...systemFonts];
+export const defaultFontFamilies = {
+  id: 1,
+  format: "fontFamily",
+  type: "fontfamilydropdown",
+  options: fontList || []
+};

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,11 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { defaultFonts, googleFontList, otherFonts } from "./FontList";
+import { googleFontList } from "./FontList";
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -10,69 +14,74 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
+  const [loading, setLoading] = useState(true);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
-    function loadNextBatch() {
-      if (currentIndex >= families?.length) {
-        // console.log("All fonts have been loaded");
-        return;
-      }
-      const batch = families?.slice(currentIndex, currentIndex + batchSize);
-      const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
-      WebFont.load({
-        google: {
-          families: [...batchWithWeights]
-        },
-        classes: false,
-        timeout: 2000,
-        active: () => {
-          // console.log(`Fonts loaded successfully: ${batch}`);
-          currentIndex += batchSize;
-          retryCount = 0; // Reset retry count for the next batch
-          loadNextBatch();
-        },
-        inactive: () => {
-          // console.log(`Font loading failed for: ${batch}`);
-
-          if (retryCount < maxRetries) {
-            retryCount++;
-            // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
-            // Retry loading the same batch
-            loadNextBatch();
-          } else {
-            // console.log(
-            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            // );
+    const loadNextBatch = () => {
+      try {
+        if (currentIndex >= families?.length) {
+          // console.log("All fonts have been loaded");
+          setLoading(false);
+          return;
+        }
+        const batch = families?.slice(currentIndex, currentIndex + batchSize);
+        const batchWithWeights = batch?.map(font => `${font}:300,400,600,700`);
+        WebFont.load({
+          google: {
+            families: [...batchWithWeights]
+          },
+          classes: false,
+          timeout: 2000,
+          active: () => {
+            // console.log(`Fonts loaded successfully: ${batch}`);
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
+          },
+          inactive: () => {
+            // console.log(`Font loading failed for: ${batch}`);
+            if (retryCount < maxRetries) {
+              retryCount++;
+              // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
+              // Retry loading the same batch
+              loadNextBatch();
+            } else {
+              // console.log(
+              //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
+              // );
+              currentIndex += batchSize;
+              retryCount = 0;
+              loadNextBatch();
+            }
           }
-        }
-      });
-    }
+        });
+      } catch (err) {
+        setLoading(false);
+      }
+    };
     loadNextBatch();
   };
   useEffect(() => {
-    let families = [...otherFonts, ...defaultFonts];
+    let families = [...googleFontList];
     if (!readOnly) {
       otherProps?.services("listGoogleFont", []).then(data => {
-        families = [...families, ...(data?.data || [])];
-        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
+        families = [...(data?.data || [])];
         setFontFamilies({
           id: 1,
           format: "fontFamily",
           type: "fontfamilydropdown",
-          options: filteredfamilies || []
+          options: families || []
         });
         loadFontsInBatches(families);
       }).catch(err => {
         // console.log(err);
+        setLoading(false);
       });
     } else {
       function correctFontArray(fontString) {
-        let fontsArray = fontString.split(",");
-        let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
+        let fontsArray = fontString?.split(",");
+        let cleanedFontsArray = [...new Set(fontsArray?.map(font => font.trim()))];
         return cleanedFontsArray;
       }
       function sanitizeFontFamily(fontFamily) {
@@ -88,11 +97,32 @@ const FontLoader = props => {
       let families = Array.from(fontSet);
       families = correctFontArray(families.join(", "));
       families = families?.map(font => font?.replace(/\"/g, ""));
-      families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
-      families = families.filter(font => googleFontList.includes(font));
+      families = families?.map(font => font?.replace(", sans-serif", ""));
+      families = families?.filter(font => googleFontList?.includes(font));
       loadFontsInBatches(families);
     }
+
+    // Set timeout to hide loader after 5 seconds
+    const timeoutId = setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+    return () => clearTimeout(timeoutId);
   }, []);
-  return null;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 99999,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /*#__PURE__*/_jsx(CircularProgress, {})
+    }) : null
+  });
 };
 export default FontLoader;

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,7 +18,7 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: '10px',
+      padding: "10px",
       height: '100%'
     },
     className: "ims-right",

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -7,7 +7,7 @@ const UploadStyles = theme => ({
     background: theme?.palette?.editor?.uploadFileBg,
     height: '100%',
     minHeight: '150px',
-    height: "inherit"
+    height: 'inherit'
   },
   uploadField: {
     width: "100%",

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -58,8 +58,8 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      paddingLeft: "4px",
       background: theme?.palette?.editor?.background,
+      paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },

package/dist/Editor/common/Section/index.js

@@ -2,36 +2,33 @@ import React, { useRef, useState } from "react";
 import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import DragHandle from "../DnD/DragHandleButton";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+// import DragHandle from "../DnD/DragHandleButton";
+// import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 import { SectionSettingIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const Toolbar = ({
   fromPopper,
   readOnly,
   showTool,
-  onSettings
+  onSettings,
+  isSectionFullWidth
 }) => {
   return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: `element-toolbar no-border-button hr section-tw sectionIcon`,
     contentEditable: false,
-    style: fromPopper ? {
-      position: "unset",
-      marginLeft: "28px",
-      paddingTop: "4px",
-      marginRight: "10px",
-      height: "100%"
-    } : {
-      left: "-28px",
-      top: "1px"
+    sx: {
+      left: isSectionFullWidth ? "0px" : "-28px",
+      top: isSectionFullWidth ? "-28px" : "1px",
+      "&:hover": {
+        backgroundColor: "rgba(0,0,0,0.5)"
+      }
     },
     children: /*#__PURE__*/_jsx(Tooltip, {
       title: "Section Settings",
@@ -56,7 +53,8 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
+  // const [isHovering, setIsHovering] = useState(false);
+  const [size] = useWindowResize();
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -73,41 +71,11 @@ const Section = props => {
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
-  const popperEl = useRef(null);
-  const [size] = useWindowResize();
+  // const popperEl = useRef(null);
+  // const [showTool] = useEditorSelection(editor);
   const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
-  const [isHovering, setIsHovering] = useState(false);
-  const onMouseEnter = () => {
-    setIsHovering(true);
-  };
-  const onMouseLeave = () => {
-    setIsHovering(false);
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-  };
-  const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
-  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
+  const isFreeGrid = element?.children[0]?.type === "freegrid";
+  const needHover = false;
   let tempProps = {};
   if (element?.type === "temp") {
     tempProps = {
@@ -131,6 +99,38 @@ const Section = props => {
       ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
     }
   }, themeReact);
+
+  // const onMouseEnter = () => {
+  //   setIsHovering(true);
+  // };
+
+  // const onMouseLeave = () => {
+  //   setIsHovering(false);
+  // };
+
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
@@ -145,9 +145,10 @@ const Section = props => {
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
-    },
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    }
+    // onMouseEnter={onMouseEnter}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -155,41 +156,11 @@ const Section = props => {
         ...edInnerSp
       },
       ref: anchorEl,
-      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering && isSectionFullWidth,
-        anchorEl: anchorEl?.current,
-        placement: "top-start",
-        sx: {
-          zIndex: 9999
-        },
-        disablePortal: true,
-        ref: popperEl,
-        className: "sectionPopper",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            bgcolor: "background.paper",
-            height: "30px",
-            position: "relative",
-            background: theme?.palette?.type === "dark" ? theme?.palette?.editor?.miniToolBarBackground : "#F6F6F6"
-          },
-          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-            ...props,
-            fromPopper: true
-          }) : null, /*#__PURE__*/_jsx(Toolbar, {
-            fromPopper: true,
-            readOnly: readOnly,
-            showTool: showTool,
-            onSettings: onSettings
-          })]
-        })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-          ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {
-          readOnly: readOnly,
-          showTool: showTool,
-          onSettings: onSettings
-        })]
+      children: [/*#__PURE__*/_jsx(Toolbar, {
+        isSectionFullWidth: isSectionFullWidth,
+        readOnly: readOnly,
+        showTool: false,
+        onSettings: onSettings
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

package/dist/Editor/helper/deserialize/index.js

@@ -175,7 +175,7 @@ const deserialize = el => {
   if (el.nodeType === 3) {
     // if there is any line-breaks
     const match = /\r|\n/.exec(el.textContent);
-    const text = el.textContent.replace(/\r|\n/g, "").trim();
+    const text = el.textContent?.trim()?.length === 0 ? el.textContent.replace(/\r|\n/g, "").trim() : el.textContent;
     return match && !text ? null : {
       text,
       ...getInlineTextStyles(el.parentNode)

package/dist/Editor/hooks/useDrag.js

@@ -1,20 +1,26 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
-  const onMouseDown = useCallback(() => {
-    setEvent("start");
-  }, []);
-  const onMouseUp = useCallback(() => {
-    setEvent("end");
-  }, []);
   useEffect(() => {
-    document.addEventListener("pointerdown", onMouseDown);
-    document.addEventListener("pointerup", onMouseUp);
+    addListener();
     return () => {
-      document.removeEventListener("pointerdown", onMouseDown);
-      document.removeEventListener("pointerup", onMouseUp);
+      removeListener();
     };
   }, []);
+  const onMouseDown = () => {
+    setEvent("start");
+  };
+  const onMouseUp = () => {
+    setEvent("end");
+  };
+  const addListener = () => {
+    document.addEventListener("pointerdown", onMouseDown);
+    document.addEventListener("pointerup", onMouseUp);
+  };
+  const removeListener = () => {
+    document.removeEventListener("pointerdown", onMouseDown);
+    document.removeEventListener("pointerup", onMouseUp);
+  };
   return [event];
 };
 export default useDrag;

package/dist/Editor/hooks/useEditorScroll.js

@@ -4,9 +4,8 @@ function useEditorScroll(editorWrapper = {
 }, callback) {
   useEffect(() => {
     const handleScroll = () => {
-      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       if (editorWrapper.current) {
-        callback();
+        callback("scroll");
       }
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/hooks/useMouseMove.js

@@ -1,6 +1,7 @@
 import { useEffect, useState, createContext, useContext, useMemo } from "react";
 import { getSelectedText } from "../utils/helper";
 import { debounce } from "../helper";
+import { defaultFontFamilies } from "../common/FontLoader/FontList";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EditorContext = /*#__PURE__*/createContext();
 export const useEditorSelection = editor => {
@@ -34,7 +35,7 @@ export const EditorProvider = ({
   const [contextMenu, setContextMenu] = useState({
     path: null
   });
-  const [fontFamilies, setFontFamilies] = useState({});
+  const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
   const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -630,6 +630,11 @@ export const getBlock = props => {
         children: children
       });
     default:
+      // return (
+      //   <span {...attributes} {...element.attr}>
+      //     {children}
+      //   </span>
+      // );
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,
         isEmpty: isEmpty