@flozy/editor 9.3.5 → 9.3.7

package/dist/Editor/commonStyle.js

@@ -49,26 +49,36 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& .MuiPaper-root": {
-        border: `unset !important`,
-        borderRadius: "0px",
-        height: "fit-content",
-        padding: "2px"
-      },
+      // "& .MuiPaper-root": {
+      //   border: `unset !important`,
+      //   borderRadius: "0px",
+      //   height: "fit-content",
+      // },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"
       },
-      "& p": {
-        marginBottom: "7px",
-        marginTop: "4px"
+      "& .MuiPaper-root": {
+        border: "unset !important",
+        borderRadius: "0px",
+        height: "fit-content",
+        padding: "2px"
       },
       "& .muiIconsListParent": {
         "& svg": {
           color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
         },
+        // "&::-webkit-scrollbar-thumb": {
+        //   background: `none !important`,
+        // },
+        // "&::-webkit-scrollbar-track": {
+        //   visibility: "hidden",
+        // },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
@@ -520,6 +530,10 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -532,10 +546,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

package/dist/Editor/helper/index.js

@@ -287,18 +287,22 @@ export const bringItemToFB = (editor, {
 };
 export const debounce = function (func, wait, immediate) {
   let timeout;
-  return function () {
-    const context = this,
-      args = arguments,
-      later = function () {
-        timeout = null;
-        if (!immediate) func.apply(context, args);
-      },
-      callNow = immediate && !timeout;
+  function debounced(...args) {
+    const context = this;
+    const later = function () {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
+  }
+  debounced.cancel = function () {
+    clearTimeout(timeout);
+    timeout = null;
   };
+  return debounced;
 };
 export const getTextColor = (color = "") => {
   return color?.indexOf("gradient") >= 0 ? {

package/dist/Editor/helper/theme.js

@@ -1,6 +1,4 @@
-import { ReactEditor } from "slate-react";
 import { sizeMap } from "../utils/font";
-import { Editor, Node } from "slate";
 export const breakpoints = {
   small: 0,
   mobile: 600,
@@ -35,7 +33,7 @@ const overrideValues = (value, ot) => {
   return Object.keys(value).reduce((a, b) => {
     return {
       ...a,
-      [b]: overrides[ot] ? overrides[ot](value[b], value) : value
+      [b]: overrides[ot] ? overrides[ot](value[b]) : value
     };
   }, {});
 };
@@ -52,15 +50,7 @@ const overrides = {
   overrideReSizeH: val => {
     return val ? `${val?.height}px` : "auto";
   },
-  overrideBorderRadius: (val, breakpointValues) => {
-    if (!val?.topLeft) {
-      Object.values(breakpointValues || {}).forEach(v => {
-        if (v) {
-          // Applying the values from breakpoints that exist to those that do not have
-          val = v;
-        }
-      });
-    }
+  overrideBorderRadius: val => {
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
@@ -128,194 +118,6 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
     console.log(err);
   }
 };
-export function getElementStyle(editor, element, stylePropertyName) {
-  try {
-    const path = ReactEditor.findPath(editor, element);
-    if (path?.length) {
-      const currentEle = Node.get(editor, path);
-      const dom = ReactEditor.toDOMNode(editor, currentEle);
-      const editorBtn = dom?.querySelector(".button.theme-element");
-      return getElementProperty(editorBtn, stylePropertyName);
-    }
-  } catch (err) {
-    // console.log(err);
-  }
-}
-export function getTextSizeVal(editor) {
-  try {
-    const currentNode = Node.get(editor, editor.selection.anchor.path);
-    const currentElement = ReactEditor.toDOMNode(editor, currentNode);
-    if (currentElement) {
-      const element = currentElement.querySelector('span[data-slate-string="true"]');
-      return getElementProperty(element, "font-size");
-    }
-  } catch (err) {
-    // console.log(err);
-  }
-}
-export function getVariableValue(val) {
-  const bodyElement = document.body;
-  const computedStyle = getComputedStyle(bodyElement);
-  const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
-  const varValue = computedStyle.getPropertyValue(variableName).trim();
-  return varValue;
-}
-const MAP_PROPERTY_KEYS = {
-  fontFamily: "font-family",
-  fontSize: "font-size",
-  textSize: "font-size",
-  fontWeight: "font-weight"
-};
-export function getElementProperty(element, styleProperty) {
-  if (!element) {
-    return "";
-  }
-  const computedStyle = window.getComputedStyle(element);
-  const property = MAP_PROPERTY_KEYS[styleProperty] || styleProperty;
-  let style = computedStyle.getPropertyValue(property);
-  if (property === "font-family") {
-    style = style.replace(/"/g, ""); // remove double quotes if exists e.g: '"Courier New"'
-  }
-
-  return style || "";
-}
-export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
-// "underline",
-// "strikethrough",
-];
-
-const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
-export const isTextCustomized = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children,
-        type
-      } = currentElement;
-      if (!themeElements.includes(type)) {
-        return false;
-      }
-      if (!children?.length) {
-        return true;
-      }
-      const customized = textThemeFields.some(field => {
-        const element = children.find(child => child.text.trim() !== "") || {};
-        const value = element[field];
-        if (field === "fontSize") {
-          return Object.keys(value || {}).length;
-        } else {
-          return value;
-        }
-      });
-      return customized;
-    } else {
-      return null;
-    }
-  } catch (err) {
-    return null;
-  }
-};
-const addToTheme = (field, value, element) => {
-  switch (field) {
-    case "fontFamily":
-      return {
-        fontFamily: value
-      };
-    case "fontSize":
-      return {
-        fontSize: value?.lg
-      };
-    case "color":
-      return {
-        color: value
-      };
-    case "bold":
-      return {
-        fontWeight: "bold"
-      };
-    case "italic":
-      return {
-        fontStyle: "italic"
-      };
-    // case "underline":
-    // case "strikethrough":
-    //   let textDecoration = "";
-
-    //   if (element.underline) {
-    //     textDecoration = "underline";
-    //   }
-
-    //   if (element.strikethrough) {
-    //     textDecoration += " strikethrough";
-    //   }
-
-    //   return { textDecoration };
-    default:
-      return {};
-  }
-};
-const MAP_TEXT_THEME_FIELD = {
-  headingOne: "h1",
-  headingTwo: "h2",
-  headingThree: "h3",
-  headingFour: "h4",
-  headingFive: "h5",
-  headingSix: "h6",
-  paragraphOne: "para1",
-  paragraphTwo: "para2",
-  paragraphThree: "para3"
-};
-export const saveToTheme = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children
-      } = currentElement;
-      if (!children?.length) {
-        return true;
-      }
-      let theme = {};
-      textThemeFields.forEach(field => {
-        const element = children.find(child => child.text.trim() !== "") || {};
-        const value = element[field];
-        let style = {};
-        let isValueExist = false;
-        if (value) {
-          isValueExist = true;
-          if (field === "fontSize") {
-            isValueExist = !!Object.keys(value).length;
-          }
-        }
-        if (isValueExist) {
-          style = addToTheme(field, value, element);
-        }
-        theme = {
-          ...theme,
-          ...style
-        };
-      });
-      textThemeFields.forEach(field => {
-        Editor.removeMark(editor, field);
-      });
-      return {
-        field: MAP_TEXT_THEME_FIELD[currentElement?.type],
-        theme
-      };
-    }
-  } catch (err) {
-    return;
-  }
-};
-export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
-export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
 export const getBRValue = (props, rbr = "lg") => {
   const {
     value,

package/dist/Editor/hooks/useDrag.js

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

package/dist/Editor/hooks/useEditorScroll.js

@@ -3,22 +3,18 @@ function useEditorScroll(editorWrapper = {
   current: null
 }, callback) {
   useEffect(() => {
+    if (!editorWrapper?.current) return;
     const handleScroll = () => {
-      if (editorWrapper.current) {
-        callback("scroll");
-      }
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
+      callback("scroll");
     };
     const currentEditorWrapper = editorWrapper.current;
-    if (currentEditorWrapper) {
-      currentEditorWrapper.addEventListener("scroll", handleScroll);
-    }
+    currentEditorWrapper.addEventListener("scroll", handleScroll);
 
     // Cleanup the event listener on component unmount
     return () => {
-      if (currentEditorWrapper) {
-        currentEditorWrapper.removeEventListener("scroll", handleScroll);
-      }
+      currentEditorWrapper.removeEventListener("scroll", handleScroll);
     };
-  }, [editorWrapper.current, callback]);
+  }, [editorWrapper, callback]);
 }
 export default useEditorScroll;

package/dist/Editor/hooks/useMouseMove.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { useEffect, useState, createContext, useContext, useMemo, useCallback } from "react";
 import { getSelectedText } from "../utils/helper";
 import { debounce } from "../helper";
 import { defaultFontFamilies } from "../common/FontLoader/FontList";
@@ -21,10 +21,7 @@ export const useEditorSelection = editor => {
 export const EditorProvider = ({
   editor,
   theme,
-  children,
-  openTheme = false,
-  setOpenTheme = () => {},
-  triggerRender
+  children
 }) => {
   const [previous, setPrevious] = useState("");
   const [drop, setDrop] = useState(0);
@@ -103,12 +100,9 @@ export const EditorProvider = ({
     updateDragging,
     fontFamilies,
     setFontFamilies,
-    openTheme,
-    setOpenTheme,
     activeBreakPoint,
-    setActiveBreakPoint,
-    triggerRender
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint]);
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children
@@ -121,13 +115,7 @@ const useMouseMove = dragging => {
   const [event, setEvent] = useState({
     target: null
   });
-  useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
-  }, []);
-  const onMouseMove = e => {
+  const onMouseMove = useCallback(debounce(e => {
     if (!dragging?.id) {
       const dpath = e?.target?.closest(".dpath");
       if (dpath) {
@@ -136,14 +124,14 @@ const useMouseMove = dragging => {
         });
       }
     }
-  };
-  const debounceMouseMove = debounce(onMouseMove, 100);
-  const addListener = () => {
-    document.addEventListener("mousemove", debounceMouseMove);
-  };
-  const removeListener = () => {
-    document.removeEventListener("mousemove", debounceMouseMove);
-  };
+  }, 100), [dragging]);
+  useEffect(() => {
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      onMouseMove.cancel(); // Cancel any pending debounced calls
+    };
+  }, [onMouseMove]);
   return [event];
 };
 export default useMouseMove;

package/dist/Editor/hooks/useTable.js

@@ -184,7 +184,7 @@ export const TableProvider = ({
       window.removeEventListener("copy", handleCopy);
       window.removeEventListener("cut", handleCut);
     };
-  }, [tableSelection, editor, tableSelection]);
+  }, [tableSelection, editor]);
 
   // useEffect(() => {
   //   selectFirstCell(tablePath, editor, updateTableSelection);

package/dist/Editor/plugins/withEmbeds.js

@@ -1,5 +1,5 @@
 import { Transforms, Path, Node } from "slate";
-const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
+const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
 const BlockTypes = ["grid"];
 const withEmbeds = editor => {
   const {

package/dist/Editor/plugins/withHTML.js

@@ -30,8 +30,6 @@ const parseCopiedHTML = html => {
 
   // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
   parsed.querySelectorAll("li").forEach(li => {
-    li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
-
     // Check if the parent of <li> is not a <ul> or <ol>
     if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
       // Create a <ul> element
@@ -57,7 +55,7 @@ const loopChildren = (children = [], defaultInsert) => {
   }
   return defaultInsert;
 };
-export const getCurrentElement = editor => {
+const getCurrentElement = editor => {
   try {
     if (editor.selection) {
       return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -151,6 +149,7 @@ const getFocusedNode = (editor, nodeType = "") => {
     console.log(err);
   }
 };
+const voidTypes = ["image", "page-settings"];
 const withHtml = editor => {
   const {
     insertData,
@@ -161,7 +160,7 @@ const withHtml = editor => {
     return element.type === "link" ? true : isInline(element);
   };
   editor.isVoid = element => {
-    return element.type === "image" ? true : isVoid(element);
+    return voidTypes.includes(element.type) ? true : isVoid(element);
   };
   editor.insertData = data => {
     const slateHTML = data?.getData("application/x-slate-fragment");
@@ -238,9 +237,9 @@ const withHtml = editor => {
       const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
-        // if (editor.isChatEditor) {
-        //   return;
-        // }
+        if (editor.isChatEditor) {
+          return;
+        }
         const table = rootElement.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
@@ -262,18 +261,15 @@ const withHtml = editor => {
         return;
       }
       const formattedFragment = normalizeFragment ? normalizeFragment(fragment) : fragment;
-
-      // let is_img_table = false;
-      // formattedFragment.map((f) => {
-      //   if (f.type === "image" || f?.type?.includes("table")) {
-      //     is_img_table = true;
-      //   }
-      // });
-
-      // if (editor.isChatEditor && is_img_table) {
-      //   return;
-      // }
-
+      let is_img_table = false;
+      formattedFragment.map(f => {
+        if (f.type === "image" || f?.type?.includes("table")) {
+          is_img_table = true;
+        }
+      });
+      if (editor.isChatEditor && is_img_table) {
+        return;
+      }
       if (isTitlePath && isNonText) {
         insertAtNextNode(editor, formattedFragment);
         return;

package/dist/Editor/plugins/withLayout.js

@@ -27,8 +27,7 @@ const ORDERS_LAYOUT_VALIDATIONS = {
 };
 const withLayout = editor => {
   const {
-    normalizeNode,
-    translation
+    normalizeNode
   } = editor;
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
@@ -40,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: translation ? translation("Untitled") : "Untitled"
+              text: "Untitled"
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/plugins/withTable.js

@@ -1,6 +1,6 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 import { TableUtil, createTableCell } from "../utils/table";
-const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,