@flozy/editor 5.3.3 → 5.3.4

package/dist/Editor/commonStyle.js

@@ -1,7 +1,147 @@
 const useCommonStyle = theme => ({
   sideBarDrawer: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.textFormatBgColor,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+      "@media only screen and (min-width: 899px)": {
+        borderRadius: "20px",
+        margin: "5px",
+        height: "calc(100% - 10px)",
+        overflow: "hidden"
+      },
+      "@media only screen and (max-width: 599px)": {
+        borderRadius: "20px 20px 0px 0px"
+      }
+    },
+    "& .optionePopupHeader": {
+      borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`,
+      padding: "0px 0px 10px 0px",
+      margin: "0px 10px",
+      "& .MuiTypography-root": {
+        textTransform: "capitalize"
+      },
+      "& .close-popupbtn": {
+        background: theme?.palette?.editor?.closeButtonBgColor,
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        "& svg": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
+    "& .MuiDialogActions-root": {
+      // paddingTop: "10px",
+      "& .primaryBtn, .deleteBtn": {
+        height: "32px !important",
+        fontSize: "14px !important",
+        fontWeight: "600 !important",
+        padding: "0px 20px !important"
+      },
+      "& .deleteBtn": {
+        background: `${theme?.palette?.type === "light" && "#FFF7F9"} !important`
+      }
+    },
+    "& .MuiDialogContent-root": {
+      padding: "0px 5px 0px 10px!important",
+      height: "100%",
+      fontFamily: "Inter, sans-serif",
+      "& .MuiTypography-root": {
+        fontSize: "14px",
+        fontWeight: "500",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
+      "& .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": {
+        paddingRight: "0px !important",
+        fontFamily: "Inter, sans-serif",
+        height: 'fit-content'
+      },
+      "& .MuiInputBase-root": {
+        borderRadius: "10px",
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        border: `none`,
+        height: "36px",
+        boxShadow: "0px 4px 16px 0px #0000000D",
+        fontFamily: "Inter, sans-serif",
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+        },
+        "& input::placeholder": {
+          color: "#94A3B8 !important",
+          opacity: "unset",
+          fontFamily: "Inter, sans-serif"
+        },
+        "& .colorPickerButton": {
+          border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+        }
+      },
+      "& .MuiInputBase-root:has(.colorPickerButton)": {
+        "& .MuiInputBase-input": {
+          padding: "8.5px 14px 8.5px 0px",
+          fontFamily: "Inter, sans-serif"
+        }
+      },
+      "& .MuiInputBase-input": {
+        color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+        textTransform: "math-auto",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& fieldset": {
+        border: `1px solid transparent`,
+        borderRadius: "10px"
+      },
+      "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&:hover": {
+        "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .sld-wrpr": {
+        paddingLeft: "5px",
+        "& .sliderInput": {
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          borderRadius: "10px",
+          width: "46px !important",
+          marginLeft: "10px",
+          height: '36px !important'
+        }
+      },
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontFamily: "Inter, sans-serif"
+      }
     },
     "& .MuiTypography-root": {
       color: theme?.palette?.editor?.textColor
@@ -26,11 +166,41 @@ const useCommonStyle = theme => ({
     backgroundColor: theme?.palette?.editor?.background,
     color: theme?.palette?.editor?.textColor
   },
+  customCheckBox: {
+    padding: "0px",
+    "& .MuiCheckbox-root": {
+      padding: "8px 8px 8px 10px",
+      "&:hover": {
+        background: "unset !important"
+      }
+    },
+    "& button": {
+      width: "18px !important",
+      height: "18px !important",
+      borderRadius: "3px",
+      border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
+      "& svg": {
+        width: "14px",
+        height: "14px"
+      }
+    },
+    "& .checkedIcon": {
+      background: "#2563EB",
+      borderColor: "#2563EB",
+      padding: "0px"
+    },
+    "& .unCheckedIcon": {
+      background: theme?.palette?.editor?.checkedIconBg
+    },
+    "& p": {
+      margin: "0px !important"
+    }
+  },
   customPaddingInput: {
     background: theme?.palette?.editor?.inputFieldBgColor,
     border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
     color: theme?.palette?.editor?.textColor,
-    borderRadius: '6px'
+    borderRadius: "6px"
   },
   colorPickerPopup: {
     "& .MuiPaper-root": {
@@ -40,7 +210,7 @@ const useCommonStyle = theme => ({
     "& .popup_tabs": {
       backgroundColor: theme?.palette?.editor?.background,
       "@media only screen and (max-width: 899px)": {
-        width: '100% !important'
+        width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
@@ -78,6 +248,9 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  colorPickerBtnBorder: {
+    border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+  },
   signaturePopup: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
@@ -175,7 +348,7 @@ const useCommonStyle = theme => ({
       },
       "& .deleteBtn": {
         background: "transparent",
-        margin: '0px !important'
+        margin: "0px !important"
       },
       "& .MuiGrid-container": {
         "& .workFlowButton": {
@@ -209,6 +382,44 @@ const useCommonStyle = theme => ({
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px",
+      color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+    }
+  },
+  textOptionsList: {
+    "& .MuiMenuItem-root": {
+      padding: "8px 12px",
+      fontSize: "12px",
+      color: theme?.palette?.editor?.menuOptionTextColor,
+      fontWeight: '500',
+      fontFamily: "Inter, sans-serif",
+      minHeight: '36px',
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
+      }
+    },
+    '& .Mui-selected': {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+    },
+    "& .MuiListSubheader-root": {
+      color: "gray",
+      fontWeight: "bold",
+      fontSize: "12px"
+    },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      padding: '0px',
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
+    },
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
+    },
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
@@ -256,7 +467,73 @@ 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': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
+  buttonMoreOption2: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  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': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  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': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    '&: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'
+  },
+  emptyThumbBtn: {
+    background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+    color: `${theme?.palette?.editor?.textColor} !important`,
+    fontSize: '14px !important',
     '& svg': {
+      width: '20px !important',
+      height: '20px !important',
       '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,5 @@
-import { Editor, Node, Path, Point, Transforms } from "slate";
-import { getNextNode } from "../utils/helper";
+import { Editor, Node, Path, Point, Range, Transforms } from "slate";
+import { containsSurrogatePair, getNextNode } from "../utils/helper";
 const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
@@ -29,6 +29,37 @@ const withCustomDeleteBackward = editor => {
           return;
         }
       }
+      if (selection && Range.isCollapsed(selection)) {
+        const [currentNode, path] = Editor.node(editor, selection);
+        if (currentNode && typeof currentNode.text === 'string') {
+          const text = currentNode.text;
+          if (containsSurrogatePair(text)) {
+            // Check if the cursor is at the end of a surrogate pair
+            const {
+              offset
+            } = selection.anchor;
+            const beforeCursor = text.slice(0, offset);
+            const afterCursor = text.slice(offset);
+            if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
+              // Delete the entire surrogate pair
+              Transforms.delete(editor, {
+                at: {
+                  anchor: {
+                    path,
+                    offset: offset - 2
+                  },
+                  // Move back 2 for surrogate pair
+                  focus: {
+                    path,
+                    offset
+                  }
+                }
+              });
+              return;
+            }
+          }
+        }
+      }
 
       // Check if current node is a list item and is the last one, signature node
       const [node] = Editor.nodes(editor, {

package/dist/Editor/plugins/withLayout.js

@@ -60,47 +60,6 @@ const withLayout = editor => {
         });
         return;
       }
-
-      // 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/helper.js

@@ -686,4 +686,9 @@ export function getSelectedCls(defaultCls = "", selected, selectedClsName = "sel
 }
 export function handleNegativeInteger(val) {
   return val < 0 ? 0 : val;
-}
+}
+export const containsSurrogatePair = text => {
+  // Match surrogate pairs (high and low surrogate)
+  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+  return surrogatePairRegex.test(text);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -68,7 +68,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:local": "rm -rf /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [