@flozy/editor 3.9.3 → 3.9.4

package/dist/Editor/common/ColorPickerButton.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,8 +11,7 @@ const ColorPickerButton = props => {
     onSave,
     defaultColors = [],
     classes = {},
-    recentColors = [],
-    hideGradient
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -30,13 +29,6 @@ const ColorPickerButton = props => {
   const handleColorChange = color => {
     setColor(color);
   };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -69,10 +61,10 @@ const ColorPickerButton = props => {
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
+              gradient: true,
               value: color,
               onChange: handleColorChange,
-              defaultColors: initialColors
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

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

@@ -39,12 +39,7 @@ const MentionsListCard = props => {
       },
       alt: name,
       children: /*#__PURE__*/_jsx(Avatar, {
-        sx: {
-          background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
-        },
-        alt: name,
-        src: avatar_filename,
-        children: !avatar_filename && name && name.charAt(0).toUpperCase()
+        src: avatar_filename
       })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {

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

@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      background: `#2563EB2B`,
-      "& .MuiTypography-root": {
-        color: `${theme?.palette?.editor?.activeColor} !important`
-      }
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&:hover": {
-      background: theme?.palette?.action?.hover || `#F4F4F4`
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -1,19 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "accordionColor",
+  value: "colors",
   fields: [{
-    label: "Accordion Color",
-    key: "accordionTextColor",
+    label: "Text Color",
+    key: "textColor",
     type: "color",
-    needPreview: true,
-    hideGradient: true
+    needPreview: true
   }, {
-    label: "Accordion Background Color",
-    key: "accordionBgColor",
+    label: "Background Color",
+    key: "bgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
-    key: "accordionBorderColor",
+    label: "Border Color",
+    key: "borderColor",
     type: "color"
   }]
 }];

package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js

@@ -1,4 +1,20 @@
 const accordionTitleStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
   tab: "Colors",
   value: "colors",
   fields: [{
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border Radius",
-  value: "borderRadius",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
-  }]
 }];
 export default accordionTitleStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -78,12 +78,10 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
-        className: "sliderInput removeScroll",
+        value: !lockSpacing ? "" : value?.top || 0,
+        className: "sliderInput",
         disabled: !lockSpacing,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,54 +123,50 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "top",
-                value: getCustomizationValue(value?.top),
-                className: "borderInput removeScroll",
+                value: value?.top,
+                className: "borderInput",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "right",
-                value: getCustomizationValue(value?.right),
-                className: "borderInput removeScroll",
+                value: value?.right,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "bottom",
-                value: getCustomizationValue(value?.bottom),
-                className: "borderInput removeScroll",
+                value: value?.bottom,
+                className: "borderInput",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "number",
+                type: "text",
                 name: "left",
-                className: "borderInput removeScroll",
-                value: getCustomizationValue(value?.left),
+                className: "borderInput",
+                value: value?.left,
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange,
-                placeholder: "0"
+                onChange: handleChange
               })
             })]
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -80,13 +80,11 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
-        className: "sliderInput removeScroll",
+        value: !lockRadius ? "" : value?.topLeft || 0,
+        className: "sliderInput",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange,
-        type: "number",
-        placeholder: "0"
+        onChange: handleChange
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -127,10 +125,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topLeft",
-            value: getCustomizationValue(value?.topLeft),
-            className: "borderInput removeScroll",
+            value: value?.topLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -138,10 +136,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "topRight",
-            value: getCustomizationValue(value?.topRight),
-            className: "borderInput removeScroll",
+            value: value?.topRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -150,10 +148,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomLeft",
-            value: getCustomizationValue(value?.bottomLeft),
-            className: "borderInput removeScroll",
+            value: value?.bottomLeft,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -162,10 +160,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "number",
+            type: "text",
             name: "bottomRight",
-            value: getCustomizationValue(value?.bottomRight),
-            className: "borderInput removeScroll",
+            value: value?.bottomRight,
+            className: "borderInput",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -12,12 +12,11 @@ const Color = props => {
   } = props;
   const {
     key,
-    label,
-    hideGradient
+    label
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
+    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -40,7 +39,7 @@ const Color = props => {
       [key]: updatedColors
     };
     setRecentColors(updatedColors);
-    localStorage.setItem("recentColors", JSON.stringify(updatedColors));
+    localStorage.setItem('recentColors', JSON.stringify(updatedColors));
   };
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
@@ -69,8 +68,7 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key],
-            hideGradient: hideGradient
+            recentColors: recentColors[key]
           })
         })
       }

package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,23 +6,12 @@ const SelectBox = props => {
   const {
     value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
     placeholder
   } = data;
-  const [checkedValue, setCheckedValue] = useState(false);
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
-      setCheckedValue(true);
-      isFirstRender.current = false;
-    } else {
-      setCheckedValue(value);
-    }
-  }, [elementProps.element, value]);
   const handleChange = e => {
     onChange({
       [key]: e.target.checked
@@ -37,7 +26,7 @@ const SelectBox = props => {
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
-        checked: checkedValue,
+        checked: value,
         onChange: handleChange
       }),
       label: placeholder

package/dist/Editor/helper/deserialize/index.js

@@ -72,20 +72,15 @@ const ELEMENT_TAGS = {
     type: "paragraph"
   }),
   TABLE: (el, children = []) => {
-    try {
-      const tableBody = (children || [])?.find(f => f?.type === "table-body");
-      const bodyChild = tableBody?.children || [];
-      const firstRowChildren = tableBody[0]?.children || [];
-      return {
-        type: "table",
-        overwriteChild: bodyChild,
-        // we are not having table-body in our json format, just we are wrapping table-row's inside the table
-        rows: bodyChild?.length,
-        columns: firstRowChildren?.length
-      };
-    } catch (err) {
-      console.log(err);
-    }
+    const bodyChild = children[0]?.children || [];
+    const firstRowChildren = bodyChild[0]?.children || [];
+    return {
+      type: "table",
+      overwriteChild: bodyChild,
+      // we are not having table-body in our json format, just we are wrapping table-row's inside the table
+      rows: bodyChild?.length,
+      columns: firstRowChildren?.length
+    };
   },
   THEAD: () => ({
     type: "table-head"

package/dist/Editor/helper/index.js

@@ -154,26 +154,4 @@ export const debounce = function (func, wait, immediate) {
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
   };
-};
-export const getTextColor = (color = "") => {
-  return color?.indexOf("gradient") >= 0 ? {
-    background: color?.concat("text"),
-    WebkitBackgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    color: "transparent",
-    caretColor: "black"
-  } : {
-    color
-  };
-};
-export const getBorderColor = (borderColor = "") => {
-  const borderStyle = borderColor ? {
-    border: "1px solid"
-  } : {};
-  if (borderColor?.indexOf("gradient") >= 0) {
-    borderStyle.borderImage = `${borderColor} 1`;
-  } else {
-    borderStyle.borderColor = borderColor;
-  }
-  return borderStyle;
 };

package/dist/Editor/helper/theme.js

@@ -97,5 +97,4 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
   } catch (err) {
     console.log(err);
   }
-};
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -75,6 +75,7 @@ const useMouseMove = () => {
   }, []);
   const onMouseMove = e => {
     const dpath = e?.target?.closest(".dpath");
+    console.log(dpath);
     if (dpath) {
       console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
       setEvent({

package/dist/Editor/plugins/withHTML.js

@@ -1,4 +1,4 @@
-import { Transforms, Editor, Element, Node, Path } from "slate";
+import { Transforms, Editor, Element, Node } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
@@ -26,48 +26,6 @@ const getCurrentElement = editor => {
     return null;
   }
 };
-const getCurrentElementText = editor => {
-  try {
-    if (editor.selection) {
-      return Editor.string(editor, editor?.selection?.anchor?.path);
-    } else {
-      return null;
-    }
-  } catch (err) {
-    return null;
-  }
-};
-const insertAtNextNode = (editor, formattedFragment) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (selection) {
-      const parentPath = Path.parent(editor?.selection?.anchor?.path);
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath
-      });
-      Transforms.insertFragment(editor, formattedFragment, {
-        at: nextPath
-      });
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
-};
 const formatFragment = {
   "list-item": fragment => {
     let refactorFragment = [];
@@ -106,11 +64,11 @@ const withHtml = editor => {
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
     if (slateHTML && !formatFragment[eltype]) {
-      const decoded = decodeAndParseBase64(slateHTML);
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
       if (tableNode && tableNode[0]) {
+        const decoded = decodeAndParseBase64(slateHTML);
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
@@ -121,7 +79,7 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -138,7 +96,7 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -32,21 +32,16 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const {
-          anchor
-        } = editor?.selection || {};
-        if (anchor?.offset !== 0) {
-          const title = {
-            type: "title",
-            children: [{
-              text: "Untitled"
-            }]
-          };
-          Transforms.insertNodes(editor, title, {
-            at: path.concat(0),
-            select: true
-          });
-        }
+        const title = {
+          type: "title",
+          children: [{
+            text: "Untitled"
+          }]
+        };
+        Transforms.insertNodes(editor, title, {
+          at: path.concat(0),
+          select: true
+        });
       }
       if (editor.children.length === 0) {
         const paragraph = {

package/dist/Editor/plugins/withTable.js

@@ -8,7 +8,7 @@ const withTable = editor => {
     delete: slateDelete
   } = editor;
   editor.delete = arg => {
-    if (arg?.reverse) {
+    if (arg.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
       if (cellsSelected && cellsSelected.length > 1) {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -32,7 +32,7 @@ import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
-import { getTextColor, isEmptyTextNode } from "../helper";
+import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -203,7 +203,13 @@ export const getMarked = (leaf, children) => {
   // cover under single span
   if (leaf.color || leaf.bgColor || leaf.fontSize || leaf.fontFamily || leaf.fontWeight || className) {
     const family = fontFamilyMap[leaf?.fontFamily];
-    const textStyles = getTextColor(leaf?.color);
+    const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
+      background: leaf?.color?.concat("text"),
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    } : {
+      color: leaf.color
+    };
     children = /*#__PURE__*/_jsx("span", {
       style: {
         background: leaf.bgColor

package/dist/Editor/utils/draftToSlate.js

@@ -100,7 +100,7 @@ export const draftToSlate = props => {
       return a;
     }, []);
     return converted;
-  } else if (data?.length > 0) {
+  } else if (data?.length) {
     return data;
   } else {
     return [{