@flozy/editor 5.2.1 → 5.2.3

package/dist/Editor/CommonEditor.js

@@ -103,6 +103,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isTextSelected, setIsTextSelected] = useState(false);
   const [breakpoint, setBreakpoint] = useState("");
+  const [topBanner, setTopBanner] = useState();
   const debouncedValue = useRef(value);
   const [size] = useWindowResize();
   const {
@@ -300,6 +301,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const handleEditorChange = newValue => {
     if (!readOnly) {
       if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+        setTopBanner(() => {
+          const firstNode = newValue[0];
+          return firstNode?.type === "topbanner" ? firstNode : null;
+        });
         debounced(newValue);
         if (!isInteracted) {
           setIsInteracted(true);
@@ -414,10 +419,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorWrapper?.current?.classList.remove("hideScroll");
     handleScrollStop();
   };
-  const hasTopBanner = () => {
-    const tb = editor.children[0];
-    return tb?.type === "topbanner" ? tb : null;
-  };
+  const hasTopBanner = () => topBanner;
   const renderTopBanner = () => {
     const tb = hasTopBanner();
     return tb ? /*#__PURE__*/_jsx(TopBanner, {

package/dist/Editor/Elements/Button/EditorButton.js

@@ -269,6 +269,7 @@ const EditorButton = props => {
             display: "inline-flex",
             alignItems: "center",
             position: "relative",
+            lineHeight: 1.43,
             "& .element-toolbar": {
               display: "none"
             },

package/dist/Editor/Elements/Form/Form.js

@@ -402,6 +402,7 @@ const Form = props => {
         borderStyle: borderStyle || "solid",
         background: bgColor || "transparent",
         position: "relative",
+        lineHeight: 1.43,
         ...formSX
       },
       ref: formEle,

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

@@ -171,6 +171,7 @@ const useFreeGridStyles = ({
           height: "100%",
           "& .signature-container": {
             height: "100%",
+            LineHeight: 1.43,
             "& .signature-btn-container": {
               height: "100%",
               display: "flex",

package/dist/Editor/Elements/List/CheckList.js

@@ -39,7 +39,8 @@ const CheckList = ({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...(style || {})
+        ...(style || {}),
+        lineHeight: 1.43
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -49,6 +49,7 @@ const SearchAttachment = props => {
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         margin: '4px 0px',
+        lineHeight: 1.43,
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'

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

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

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

@@ -128,6 +128,8 @@ const Table = props => {
   const tableRef = useRef(null);
   const containerRef = useRef(null);
   const path = ReactEditor.findPath(editor, element);
+  const isValidPath = path && Editor.hasPath(editor, path); // getting cannot find the descendant path error while deleting table from free grid on right click
+
   const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
   const handleAction = type => {
     Transforms.select(editor, editor.selection);
@@ -243,14 +245,15 @@ const Table = props => {
       openSetttings,
       exandTools
     },
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [isValidPath ? /*#__PURE__*/_jsxs("div", {
       style: {
         minWidth: "100%",
         maxWidth: "100%",
         position: "relative",
         overflowX: "auto",
         display: "flex",
-        paddingTop: "10px"
+        paddingTop: "10px",
+        lineHeight: 1.43
       },
       ref: containerRef,
       onScroll: handleScroll,
@@ -282,7 +285,7 @@ const Table = props => {
         addType: "col",
         onAdd: addCol
       })]
-    }), /*#__PURE__*/_jsx(AddRowCol, {
+    }) : null, /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow

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

@@ -177,6 +177,11 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
+      // "& .colorBoxElementIcon": {
+      //   "& path": {
+      //     fill: theme?.palette?.type === "dark" ? "none" : "",
+      //   },
+      // },
       "& .signatureElementIcon": {
         "& path": {
           fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
@@ -744,7 +749,10 @@ const usePopupStyle = theme => ({
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+      "@media only screen and (max-width: 899px)": {
+        width: '100% !important'
+      }
     },
     "& .popup_tabs-header": {
       fontFamily: "Inter, sans-serif",

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

@@ -33,14 +33,14 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const {
-    fontFamilies,
-    theme
-  } = useEditorContext();
   const {
     element: pageSt
   } = getPageSettings(editor) || {};
   const pageSettingLine = pageSt?.pageProps?.lineHeight;
+  const {
+    fontFamilies,
+    theme
+  } = useEditorContext();
   const {
     activeBreakPoint
   } = useEditorContext();

package/dist/Editor/common/ColorPickerButton.js

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
+import SwipeableDrawerComponent from "./SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -17,6 +18,7 @@ const ColorPickerButton = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const handleColorPicker = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -37,6 +39,33 @@ const ColorPickerButton = props => {
     }
     return colors;
   }, [recentColors, defaultColors, hideGradient]);
+  const ColorPickerToolComponent = () => /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+        gradient: hideGradient ? false : true,
+        value: color,
+        onChange: handleColorChange,
+        defaultColors: initialColors
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        margin: "8px"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        className: "secondaryBtn",
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        className: "primaryBtn",
+        children: "Save"
+      })]
+    })]
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -48,7 +77,18 @@ const ColorPickerButton = props => {
       },
 
       onClick: handleColorPicker
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      swipeableDrawer: false,
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        padding: 0,
+        className: "ed-cp-wrpr",
+        sx: classes.colorPickerPopup,
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
       anchorOrigin: {
@@ -65,33 +105,7 @@ const ColorPickerButton = props => {
         container: true,
         padding: 0,
         className: "ed-cp-wrpr",
-        children: /*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 12,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
-              value: color,
-              onChange: handleColorChange,
-              defaultColors: initialColors
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            style: {
-              display: "flex",
-              justifyContent: "end",
-              margin: "8px"
-            },
-            children: [/*#__PURE__*/_jsx(Button, {
-              onClick: handleClose,
-              className: "secondaryBtn",
-              children: "Cancel"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: handleSave,
-              className: "primaryBtn",
-              children: "Save"
-            })]
-          })]
-        })
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {})
       })
     })]
   });

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,6 +3,7 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
+    // padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden",
     padding: "8px 0px !important",

package/dist/Editor/commonStyle.js

@@ -38,7 +38,10 @@ const useCommonStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.background
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      "@media only screen and (max-width: 899px)": {
+        width: '100% !important'
+      }
     },
     "& .popup_tabs-header": {
       backgroundColor: theme?.palette?.editor?.background,

package/dist/Editor/plugins/withLayout.js

@@ -56,56 +56,51 @@ const withLayout = editor => {
           }]
         };
         Transforms.insertNodes(editor, paragraph, {
-          at: [0]
+          at: path.concat(1)
         });
         return;
       }
-      const extractFirstText = node => {
-        if (node.text) {
-          return node.text;
-        }
-        if (node.children) {
-          for (const child of node.children) {
-            const text = extractFirstText(child);
-            if (text) {
-              return text;
-            }
-          }
-        }
-        return "";
-      };
-      const extractRemainingNodes = node => {
-        if (!node.children) {
-          return [];
-        }
-        const [, ...remainingChildren] = node.children;
-        return remainingChildren.map(child => ({
-          ...child
-        }));
-      };
-      const firstNode = editor.children[0];
-      const firstContent = extractFirstText(firstNode);
-      if (firstNode.type !== "title") {
-        const titleNode = {
-          type: "title",
-          children: [{
-            text: firstContent
-          }]
-        };
-        Transforms.removeNodes(editor, {
-          at: [0]
-        });
-        Transforms.insertNodes(editor, titleNode, {
-          at: [0],
-          select: true
-        });
-        const remainingNodes = extractRemainingNodes(firstNode);
-        if (remainingNodes.length > 0) {
-          Transforms.insertNodes(editor, remainingNodes, {
-            at: [1]
-          });
-        }
-      }
+
+      // Transforms.insertNodes(editor, paragraph, { at: [0] });
+      // const extractFirstText = (node) => {
+      //   if (node.text) {
+      //     return node.text;
+      //   }
+      //   if (node.children) {
+      //     for (const child of node.children) {
+      //       const text = extractFirstText(child);
+      //       if (text) {
+      //         return text;
+      //       }
+      //     }
+      //   }
+      //   return "";
+      // };
+
+      // const extractRemainingNodes = (node) => {
+      //   if (!node.children) {
+      //     return [];
+      //   }
+      //   const [, ...remainingChildren] = node.children;
+      //   return remainingChildren.map((child) => ({ ...child }));
+      // };
+
+      // const firstNode = editor.children[0];
+      // const firstContent = extractFirstText(firstNode);
+
+      // if (firstNode.type !== "title") {
+      //   const titleNode = {
+      //     type: "title",
+      //     children: [{ text: firstContent }],
+      //   };
+      //   Transforms.removeNodes(editor, { at: [0] });
+      //   Transforms.insertNodes(editor, titleNode, { at: [0], select: true });
+      //   const remainingNodes = extractRemainingNodes(firstNode);
+      //   if (remainingNodes.length > 0) {
+      //     Transforms.insertNodes(editor, remainingNodes, { at: [1] });
+      //   }
+      // }
+
       ORDERS_LAYOUT.forEach((enforce, index) => {
         if (index < editor.children.length) {
           const existsNode = Node.get(editor, [index]);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -312,7 +312,8 @@ export const getBlock = props => {
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
-          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
+          lineHeight: 1.43
         },
         children: children
       });
@@ -372,6 +373,9 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -379,6 +383,9 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        style: {
+          lineHeight: 1.43
+        },
         className: "listItemMargin",
         ...attributes,
         children: children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"