@flozy/editor 10.2.9 → 10.3.1

package/dist/Editor/common/iconListV2.js

@@ -962,41 +962,6 @@ export function DragIcon() {
     })]
   });
 }
-export function ResizeIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("rect", {
-      width: "16",
-      height: "16",
-      rx: "8",
-      fill: "#F8FAFC"
-    }), /*#__PURE__*/_jsx("rect", {
-      x: "0.5",
-      y: "0.5",
-      width: "15",
-      height: "15",
-      rx: "7.5",
-      stroke: "#2563EB",
-      strokeOpacity: "0.32"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M5.76758 6.44141L3.99981 8.20917L5.76758 9.97694",
-      stroke: "#94A3B8",
-      strokeWidth: "0.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M10.2324 6.44141L12.0002 8.20917L10.2324 9.97694",
-      stroke: "#94A3B8",
-      strokeWidth: "0.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
 export function LeftAlignTextFormat() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "19",
@@ -1358,27 +1323,6 @@ export function CheckedBoxCheckIcon() {
     })
   });
 }
-export function CheckedRadioIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "17",
-    height: "17",
-    viewBox: "0 0 17 17",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M16.5 8.42148C16.5 12.792 12.9227 16.343 8.5 16.343C4.07734 16.343 0.5 12.792 0.5 8.42148C0.5 4.05093 4.07734 0.5 8.5 0.5C12.9227 0.5 16.5 4.05093 16.5 8.42148Z",
-      fill: "#DEE8FC",
-      stroke: "#2563EB",
-      className: "radio-icon-path"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "8.5",
-      cy: "8.42079",
-      rx: "3.5",
-      ry: "3.46767",
-      fill: "#2563EB"
-    })]
-  });
-}
 export function SectionSettingIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "13",
@@ -1523,26 +1467,6 @@ export function PenIcon() {
     })]
   });
 }
-export function ResetIcon() {
-  return /*#__PURE__*/_jsxs("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/_jsx("circle", {
-      cx: "11.646",
-      cy: "11.6452",
-      r: "11.5",
-      transform: "rotate(-89.2717 11.646 11.6452)",
-      fill: "#2563EB",
-      fillOpacity: "0.16"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M18.2814 11.8168V11.8168C18.2813 11.8313 18.2987 11.8387 18.3091 11.8287L19.2379 10.9273C19.6367 10.5404 20.247 10.5482 20.6358 10.9451C21.0245 11.342 21.0168 11.9495 20.6181 12.3364L17.9434 14.9012C17.5478 15.2806 16.9205 15.2708 16.5369 14.8792L13.9636 12.2519C13.7692 12.0534 13.674 11.7974 13.677 11.5622C13.6802 11.3075 13.7819 11.054 13.981 10.8801C14.3797 10.4932 14.9901 10.501 15.3788 10.8979L16.2708 11.8085C16.286 11.824 16.3124 11.8135 16.3126 11.7917V11.7917C16.351 8.77391 13.9017 6.27324 10.8698 6.2347C7.83784 6.19615 5.32577 8.63374 5.28741 11.6516C5.24904 14.6694 7.69833 17.1701 10.7303 17.2086C11.2815 17.2156 11.7092 17.6522 11.7022 18.2009C11.6952 18.7496 11.2566 19.1752 10.7054 19.1682C6.5709 19.1157 3.2663 15.7418 3.31861 11.6265C3.37093 7.51133 6.76023 4.22251 10.8947 4.27507C15.0095 4.32738 18.3338 7.70154 18.2814 11.8168Z",
-      fill: "#2563EB"
-    })]
-  });
-}
 export function SaveTemplIcon() {
   return /*#__PURE__*/_jsxs("svg", {
     width: "18",

package/dist/Editor/common/iconslist.js

@@ -1677,27 +1677,6 @@ export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinejoin: "round"
   })]
 });
-export const CloseIcon2 = props => /*#__PURE__*/_jsxs("svg", {
-  width: "10",
-  height: "10",
-  viewBox: "0 0 10 10",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  ...(props || {}),
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M9.12476 0.875L0.875176 9.12458",
-    stroke: "#8F9CAE",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M0.875183 0.875L9.12476 9.12458",
-    stroke: "#8F9CAE",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })]
-});
 export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
   width: "18",
   height: "18",

package/dist/Editor/commonStyle.js

@@ -49,28 +49,31 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& .MuiPaper-root": {
-        border: `unset !important`,
-        borderRadius: "0px",
-        height: "fit-content",
-        padding: "2px"
-      },
       "& 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: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
         paddingRight: "0px !important",
         fontFamily: "Inter, sans-serif",
-        height: "fit-content"
+        height: 'fit-content'
       },
       "& .MuiInputBase-root": {
         borderRadius: "10px",
@@ -131,14 +134,14 @@ const useCommonStyle = theme => ({
           borderRadius: "10px",
           width: "52px !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"
       }
@@ -208,16 +211,16 @@ const useCommonStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+      backgroundColor: theme?.palette?.editor?.background,
       "@media only screen and (max-width: 899px)": {
         width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+      backgroundColor: theme?.palette?.editor?.background,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+        backgroundColor: theme?.palette?.editor?.background
       }
     },
     "& .colorpicker": {
@@ -246,40 +249,6 @@ const useCommonStyle = theme => ({
         backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
         color: theme?.palette?.editor?.textColor
       }
-    },
-    "& .colorPickerActionBtns": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      display: "flex",
-      justifyContent: "end",
-      padding: "10px",
-      position: "sticky",
-      bottom: 0,
-      right: 0,
-      boxShadow: `0px -3px 12px 0px ${theme?.palette?.editor?.cardShadow}`,
-      gap: "8px",
-      "& button": {
-        fontWeight: 600,
-        fontSize: "14px",
-        opacity: 1,
-        borderRadius: "8px",
-        textTransform: "math-auto",
-        padding: "4px 20px",
-        height: "fit-content",
-        minWidth: "90px",
-        "@media only screen and (max-width: 899px)": {
-          width: "50%"
-        },
-        "&.confirmBtn": {
-          backgroundColor: "#2563EB",
-          color: "#ffffff",
-          border: `1px solid #2563EB`
-        },
-        "&.cancelBtn": {
-          backgroundColor: theme?.palette?.editor?.closeButtonBackground,
-          color: theme?.palette?.editor?.customDialogueCloseBtnColor,
-          border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
-        }
-      }
     }
   },
   colorPickerBtnBorder: {
@@ -291,12 +260,6 @@ const useCommonStyle = theme => ({
       "& .signature-canvas": {
         backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
-      "& .clear-canvas": {
-        position: "absolute",
-        top: 6,
-        right: 6,
-        color: theme?.palette?.editor?.closeButtonSvgStroke
-      },
       "& label": {
         color: theme?.palette?.editor?.textColor
       },
@@ -434,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": {
@@ -450,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: {
@@ -559,45 +522,27 @@ 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`,
-    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`
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
-  buttonMoreIcon: {
-    position: "absolute",
-    top: "50%",
-    right: -40,
-    transform: "translateY(-50%)"
-  },
-  // 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`,
-  //     },
-  //   },
-  // },
   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`
       }
     }
@@ -605,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`
       }
     }
@@ -617,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/helper/index.js

@@ -401,8 +401,4 @@ export const clearSelectionOnly = editor => {
   } catch (err) {
     console.log(err);
   }
-};
-export const isMobileWindow = () => {
-  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
-  return isMobile;
 };

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,197 +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"]');
-      const fontSize = getElementProperty(element, "font-size");
-      return fontSize || 16;
-    }
-  } 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",
-  color: "color",
-  bgColor: "background-color"
-};
-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", "fontWeight"
-// "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/useMouseMove.js

@@ -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);
@@ -101,11 +98,8 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies,
-    openTheme,
-    setOpenTheme,
-    triggerRender
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme]);
+    setFontFamilies
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children