@flozy/editor 9.7.4 → 9.7.5

package/dist/Editor/ChatEditor.js

@@ -189,8 +189,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       children: children
     });
   };
+  const isEmpty = node => {
+    if (node.text && node.text.trim()) return false;
+    if (node.url && node.url.trim()) return false;
+    if (node.children) {
+      return node.children.every(isEmpty);
+    }
+    return true;
+  };
   const handleEditorChange = newValue => {
-    console.log("🚀 ~ handleEditorChange ~ newValue:", newValue);
+    const isSlateEmpty = newValue.every(isEmpty);
     if (editor.children.length === 0) {
       Transforms.insertNodes(editor, {
         type: "paragraph",
@@ -199,21 +207,28 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         }]
       });
     } else {
-      newValue.forEach((val, index) => {
-        if (val?.type === "table") {
-          const nextNode = newValue[index + 1];
-          if (!nextNode || nextNode.type !== "paragraph") {
-            Transforms.insertNodes(editor, {
-              type: "paragraph",
-              children: [{
-                text: ""
-              }]
-            }, {
-              at: [index + 1]
-            });
+      const lastNode = newValue?.[newValue.length - 1] || null;
+      if (isSlateEmpty && lastNode?.type !== "paragraph") {
+        Transforms.removeNodes(editor, {
+          at: [0]
+        });
+      } else {
+        newValue.forEach((val, index) => {
+          if (val?.type === "table") {
+            const nextNode = newValue[index + 1];
+            if (!nextNode || nextNode.type !== "paragraph") {
+              Transforms.insertNodes(editor, {
+                type: "paragraph",
+                children: [{
+                  text: ""
+                }]
+              }, {
+                at: [index + 1]
+              });
+            }
           }
-        }
-      });
+        });
+      }
     }
     debounced(newValue);
     debouncedValue.current = newValue;

package/dist/Editor/Editor.css

@@ -1282,8 +1282,8 @@ blockquote {
 }
 @media (max-width: 899px) {
   /* Qa validation required */
-    /* .MuiPopover-root {
-      z-index: 1302 !important;
+  /* .MuiPopover-root {
+    z-index: 1302 !important;
   } */
 
   canvas {

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 { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
+import { 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/Search/SearchList.js

@@ -31,7 +31,7 @@ const SearchAndDocList = ({
         children: "Brains"
       }), !isMobile ? /*#__PURE__*/_jsx(IconButton, {
         onClick: e => {
-          e.stopPropagation();
+          e?.stopPropagation();
           handleClose();
         },
         sx: {
@@ -134,8 +134,7 @@ const SearchAndDocList = ({
         position: 'relative',
         maxHeight: '400px',
         minWidth: "275px",
-        overflowY: 'auto',
-        overflowX: 'hidden',
+        overflow: 'auto',
         padding: '0px 16px 8px',
         marginBottom: '20px',
         scrollbarWidth: "thin",

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { Grid } from "@mui/material";
+import { Grid, useMediaQuery } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DrawSignature = props => {
@@ -24,6 +24,11 @@ const DrawSignature = props => {
       signature: result?.imageURL || strImage
     });
   };
+  const isMobile = useMediaQuery("(max-width:599px)");
+  const signatureCanvasStyle = isMobile ? {
+    width: "260px",
+    height: "200px"
+  } : {};
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
@@ -35,7 +40,8 @@ const DrawSignature = props => {
       },
       children: /*#__PURE__*/_jsx(SignatureCanvas, {
         canvasProps: {
-          className: "signature-canvas"
+          className: "signature-canvas",
+          ...signatureCanvasStyle
         },
         onEnd: onSigned,
         ref: ref => canvasRef = ref,

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

@@ -33,17 +33,14 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
+
+  // const { element: pageSt } = getPageSettings(editor) || {};
   // const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  const {
-    activeBreakPoint
-  } = useEditorContext();
+  // const { activeBreakPoint } = useEditorContext();
   // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");

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

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
-    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -35,6 +34,9 @@ const PopupTool = props => {
   const [size] = useWindowResize();
   const updateAnchorEl = isScroll => {
     try {
+      const {
+        selection
+      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -74,15 +76,16 @@ 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(() => {
+    console.log("Editor useEffect", selection);
     const {
       path,
       enable
@@ -92,17 +95,20 @@ const PopupTool = props => {
     if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
       setAnchorEl(null);
     } else {
+      console.log("Editor updateAnchorEl", selection);
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {
+    console.log("Editor closing");
     // setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
+      console.log("ClickAwayListener", e.target, document.body, e.target !== document.body);
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
       if (e.target !== document.body) {
         // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close

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

@@ -19,7 +19,7 @@ const Upload = props => {
     xs: 12,
     sx: {
       padding: "10px",
-      height: '100%'
+      height: "100%"
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

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

@@ -5,8 +5,8 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
-    minHeight: '150px',
-    height: 'inherit'
+    minHeight: "150px",
+    height: "inherit"
   },
   uploadField: {
     width: "100%",
@@ -18,21 +18,21 @@ const UploadStyles = theme => ({
     backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
     border: "1px dashed #2563EB",
-    minHeight: '150px'
+    minHeight: "150px"
   },
   uploadIcon: {
     display: "grid !important",
     "& svg": {
-      display: 'flex',
-      width: '100%',
+      display: "flex",
+      width: "100%",
       "& path": {
         stroke: "#2563EB"
       }
     },
-    '& span': {
-      display: 'flex',
-      width: '100%',
-      marginTop: '5px'
+    "& span": {
+      display: "flex",
+      width: "100%",
+      marginTop: "5px"
     }
   }
 });

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

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

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

@@ -29,8 +29,8 @@ function SwipeableDrawerComponent({
   } = useEditorContext();
   const classes = DrawerStyles(theme);
   const handleClose = e => {
-    e.stopPropagation();
     onClose();
+    e?.stopPropagation();
   };
   return /*#__PURE__*/_jsx(Fragment, {
     children: swipeableDrawer ? /*#__PURE__*/_jsxs(SwipeableDrawer, {

package/dist/Editor/commonStyle.js

@@ -54,10 +54,10 @@ const useCommonStyle = theme => ({
         marginTop: "4px"
       },
       "& .MuiPaper-root": {
-        border: 'unset !important',
-        borderRadius: '0px',
-        height: 'fit-content',
-        padding: '2px'
+        border: "unset !important",
+        borderRadius: "0px",
+        height: "fit-content",
+        padding: "2px"
       },
       "& .muiIconsListParent": {
         "& svg": {
@@ -73,7 +73,7 @@ const useCommonStyle = theme => ({
       "& .MuiGrid-root>.MuiGrid-item": {
         paddingRight: "0px !important",
         fontFamily: "Inter, sans-serif",
-        height: 'fit-content'
+        height: "fit-content"
       },
       "& .MuiInputBase-root": {
         borderRadius: "10px",
@@ -134,14 +134,14 @@ const useCommonStyle = theme => ({
           borderRadius: "10px",
           width: "46px !important",
           marginLeft: "10px",
-          height: '36px !important'
+          height: "36px !important"
         },
         "& .spacingSlider": {
           width: "calc(100% - 18px)"
         }
       },
-      '& .MuiFormHelperText-root': {
-        margin: '4px 0px 0px 0px',
+      "& .MuiFormHelperText-root": {
+        margin: "4px 0px 0px 0px",
         color: theme?.palette?.editor?.closeButtonSvgStroke,
         fontFamily: "Inter, sans-serif"
       }
@@ -397,14 +397,14 @@ const useCommonStyle = theme => ({
       padding: "8px 12px",
       fontSize: "12px",
       color: theme?.palette?.editor?.menuOptionTextColor,
-      fontWeight: '500',
+      fontWeight: "500",
       fontFamily: "Inter, sans-serif",
-      minHeight: '36px',
+      minHeight: "36px",
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
       }
     },
-    '& .Mui-selected': {
+    "& .Mui-selected": {
       background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
     },
     "& .MuiListSubheader-root": {
@@ -413,16 +413,16 @@ const useCommonStyle = theme => ({
       fontSize: "12px"
     },
     "& .MuiPaper-root": {
-      borderRadius: '8px',
-      padding: '0px',
+      borderRadius: "8px",
+      padding: "0px",
       background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
     },
-    '& .MuiButtonBase-root': {
-      margin: '4px',
-      borderRadius: '6px'
+    "& .MuiButtonBase-root": {
+      margin: "4px",
+      borderRadius: "6px"
     },
-    '& .MuiList-root': {
-      padding: '0px'
+    "& .MuiList-root": {
+      padding: "0px"
     }
   },
   datePicker: {
@@ -529,11 +529,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '4px !important',
-    '& svg': {
-      width: '18px !important',
-      height: '18px !important',
-      '& path': {
+    padding: "4px !important",
+    "& svg": {
+      width: "18px !important",
+      height: "18px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -541,8 +541,8 @@ const useCommonStyle = theme => ({
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    '& svg': {
-      '& path': {
+    "& svg": {
+      "& path": {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -550,11 +550,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption3: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '5px !important',
-    '& svg': {
-      width: '16px !important',
-      height: '16px !important',
-      '& path': {
+    padding: "5px !important",
+    "& svg": {
+      width: "16px !important",
+      height: "16px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -562,37 +562,37 @@ const useCommonStyle = theme => ({
   resizeButton: {
     background: theme?.palette?.editor?.aiInputBackground,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
-    padding: '5px !important',
-    borderRadius: '50% !important',
-    '& svg': {
-      width: '18px',
-      height: '18px',
-      '& path': {
+    padding: "5px !important",
+    borderRadius: "50% !important",
+    "& svg": {
+      width: "18px",
+      height: "18px",
+      "& path": {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
       }
     },
-    '&:hover': {
+    "&:hover": {
       background: theme?.palette?.editor?.aiInputBackground
     }
   },
   gradientFillBtn: {
     background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
-    textTransform: 'math-auto !important',
-    color: '#FFFFFF !important',
-    padding: '0px 12px !important',
-    height: '32px',
-    borderRadius: '8px',
-    fontWeight: '500',
-    fontSize: '14px'
+    textTransform: "math-auto !important",
+    color: "#FFFFFF !important",
+    padding: "0px 12px !important",
+    height: "32px",
+    borderRadius: "8px",
+    fontWeight: "500",
+    fontSize: "14px"
   },
   emptyThumbBtn: {
     background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
     color: `${theme?.palette?.editor?.textColor} !important`,
-    fontSize: '14px !important',
-    '& svg': {
-      width: '20px !important',
-      height: '20px !important',
-      '& path': {
+    fontSize: "14px !important",
+    "& svg": {
+      width: "20px !important",
+      height: "20px !important",
+      "& path": {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }

package/dist/Editor/hooks/useDrag.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
   useEffect(() => {

package/dist/Editor/hooks/useEditorScroll.js

@@ -5,6 +5,7 @@ function useEditorScroll(editorWrapper = {
   useEffect(() => {
     if (!editorWrapper?.current) return;
     const handleScroll = () => {
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       callback("scroll");
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range, Text, Element } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.7.4",
+  "version": "9.7.5",
   "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",