@flozy/editor 9.2.0 → 9.2.1

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 ? {
@@ -337,14 +341,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

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";
@@ -115,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) {
@@ -130,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/withHTML.js

@@ -9,7 +9,7 @@ const parseCopiedHTML = html => {
   const parsed = new DOMParser().parseFromString(html, "text/html");
 
   // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
-  parsed.querySelectorAll("li > ul, li > ol, li > table").forEach(list => {
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
     // Find the parent li
     const parentLi = list.parentElement;
 
@@ -149,6 +149,7 @@ const getFocusedNode = (editor, nodeType = "") => {
     console.log(err);
   }
 };
+const voidTypes = ["image", "page-settings"];
 const withHtml = editor => {
   const {
     insertData,
@@ -159,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");

package/dist/Editor/utils/helper.js

@@ -764,16 +764,4 @@ export const hideSlateSelection = () => {
 };
 export function handleNegativeInteger(val) {
   return val < 0 ? 0 : val;
-}
-export const isEverythingSelected = editor => {
-  const {
-    selection
-  } = editor;
-  if (selection && Range.isExpanded(selection)) {
-    if (Range.includes(selection, Editor.start(editor, [])) && Range.includes(selection, Editor.end(editor, []))) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-};
+}

package/dist/Editor/utils/link.js

@@ -3,7 +3,7 @@ import { isBlockActive } from "./SlateUtilityFunctions";
 export const createLinkNode = (href, showInNewTab, text, linkType) => ({
   type: "link",
   href,
-  target: showInNewTab === "_blank" ? "_blank" : "_self",
+  target: showInNewTab ? "_blank" : "_self",
   linkType,
   children: [{
     text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -61,7 +61,7 @@
   "scripts": {
     "prepare": "husky install .husky",
     "analyze": "source-map-explorer build/static/js/*.js",
-    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
+    "lint": "./node_modules/. bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",
@@ -69,10 +69,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
-    "publish:flozy": "./publish-flozy.sh",
-    "publish:flozy2": "./publish-flozy2.sh",
-    "publish:permission": "chmod +x publish-flozy.sh && chmod +x publish-flozy2.sh"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [

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

@@ -1,90 +0,0 @@
-import { Button, Dialog, DialogActions, DialogContent, Grid, SwipeableDrawer, Typography, useMediaQuery } from "@mui/material";
-import PropTypes from "prop-types";
-import { useEditorContext } from "../../hooks/useMouseMove";
-import CustomDialogStyles from "./styles";
-import { forwardRef, useImperativeHandle, useState } from "react";
-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 CustomDialog = (props, ref) => {
-  const {
-    content,
-    confirmText,
-    cancelText,
-    onConfirm
-  } = props;
-  const [open, setOpen] = useState(false);
-  const isMobile = useMediaQuery("(max-width:899px)");
-  const {
-    theme
-  } = useEditorContext();
-  const classes = CustomDialogStyles(theme);
-  useImperativeHandle(ref, () => ({
-    handleOpen: () => setOpen(true),
-    handleClose: () => setOpen(false)
-  }));
-  const DialogueContent = () => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DialogContent, {
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: content
-      })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
-      children: [/*#__PURE__*/_jsx(Button, {
-        className: "closeBtn",
-        onClick: () => setOpen(false),
-        children: cancelText
-      }), /*#__PURE__*/_jsx(Button, {
-        className: "confirmBtn",
-        onClick: () => {
-          onConfirm();
-          setOpen(false);
-        },
-        children: confirmText
-      })]
-    })]
-  });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: !isMobile ? /*#__PURE__*/_jsx(Dialog, {
-      className: `${classes.MuiBackdropRoot}`,
-      open: open,
-      onClose: () => setOpen(false),
-      fullWidth: true,
-      maxWidth: "sm",
-      sx: classes.CustomDialogu,
-      children: /*#__PURE__*/_jsx(DialogueContent, {})
-    }) : /*#__PURE__*/_jsxs(SwipeableDrawer, {
-      open: open,
-      anchor: "bottom",
-      onClose: () => setOpen(false),
-      style: {
-        zIndex: "1300"
-      },
-      sx: classes.CustomDialogu,
-      disableBackdropTransition: true,
-      disableSwipeToOpen: true,
-      children: [/*#__PURE__*/_jsx(Grid, {
-        container: true,
-        justifyContent: "center",
-        className: "pullerRoot",
-        children: /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          className: "pullerGrid"
-        })
-      }), /*#__PURE__*/_jsx(DialogueContent, {})]
-    })
-  });
-};
-const CustomDialogComponent = /*#__PURE__*/forwardRef(CustomDialog);
-CustomDialogComponent.defaultProps = {
-  content: "Are you sure you want to proceed?",
-  confirmText: "Confirm",
-  cancelText: "Cancel",
-  onConfirm: () => console.warn("onConfirm not provided")
-};
-CustomDialogComponent.propTypes = {
-  content: PropTypes.string,
-  confirmText: PropTypes.string,
-  cancelText: PropTypes.string,
-  onConfirm: PropTypes.func
-};
-export { CustomDialogComponent };

package/dist/Editor/common/CustomDialog/styles.js

@@ -1,80 +0,0 @@
-const CustomDialogStyles = theme => ({
-  MuiBackdropRoot: {
-    opacity: "1",
-    transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
-  },
-  CustomDialogu: {
-    "& .MuiPaper-root": {
-      borderRadius: "12px 12px 0px 0px",
-      backgroundColor: `${theme?.palette?.greyshades?.light9} !important`,
-      "@media only screen and (min-width: 899px)": {
-        maxWidth: "400px",
-        border: `1px solid ${theme?.palette?.editor?.customDialogueBorder}`,
-        borderRadius: "12px"
-      }
-    },
-    "& .MuiDialogContent-root": {
-      padding: "20px 24px 8px 24px",
-      "& .MuiTypography-root": {
-        textAlign: "center",
-        fontFamily: "Inter, sans-serif",
-        fontSize: "14px",
-        fontWeight: 500,
-        color: theme?.palette?.editor?.textColor
-      }
-    },
-    "& .confirmBtn": {
-      backgroundColor: "#2563EB",
-      padding: "8px 12px",
-      color: "#ffffff",
-      fontWeight: 600,
-      fontSize: "14px",
-      opacity: 1,
-      borderRadius: "8px",
-      textTransform: "math-auto",
-      height: "36px",
-      padding: "0px 12px",
-      minWidth: "90px",
-      "&:hover": {
-        backgroundColor: "#2563EB"
-      },
-      "@media only screen and (max-width: 899px)": {
-        width: "50%"
-      }
-    },
-    "& .MuiDialogActions-root": {
-      justifyContent: "center",
-      paddingBottom: "20px"
-    },
-    "& .closeBtn": {
-      padding: "8px 12px",
-      color: theme?.palette?.editor?.customDialogueCloseBtnColor,
-      fontWeight: 600,
-      fontSize: "14px",
-      opacity: 1,
-      borderRadius: "8px",
-      textTransform: "math-auto",
-      height: "36px",
-      padding: "0px 12px",
-      minWidth: "90px",
-      backgroundColor: theme?.palette?.editor?.closeButtonBackground,
-      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`,
-      "&:hover": {
-        backgroundColor: theme?.palette?.editor?.closeButtonBackground
-      },
-      "@media only screen and (max-width: 899px)": {
-        width: "50%"
-      }
-    },
-    "& .pullerRoot": {
-      padding: "8px 0"
-    },
-    "& .pullerGrid": {
-      width: "40px",
-      height: "5px",
-      backgroundColor: "#ccc",
-      borderRadius: "10px"
-    }
-  }
-});
-export default CustomDialogStyles;