@flozy/editor 3.9.4 → 3.9.6

package/dist/Editor/common/ColorPickerButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+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";
@@ -11,7 +11,8 @@ const ColorPickerButton = props => {
     onSave,
     defaultColors = [],
     classes = {},
-    recentColors = []
+    recentColors = [],
+    hideGradient
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -29,6 +30,13 @@ 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: {
@@ -61,10 +69,10 @@ const ColorPickerButton = props => {
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: true,
+              gradient: hideGradient ? false : true,
               value: color,
               onChange: handleColorChange,
-              defaultColors: [...recentColors, ...defaultColors] || []
+              defaultColors: initialColors
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

package/dist/Editor/common/EditorCmds.js

@@ -0,0 +1,35 @@
+import { Editor, Transforms } from "slate";
+const selectAll = (event, {
+  editor,
+  needLayout
+}) => {
+  try {
+    if (needLayout) {
+      event.preventDefault();
+      // Select the entire document
+      const {
+        selection
+      } = editor;
+      const [firstNode] = Editor.nodes(editor, {
+        at: [0]
+      }); // First node
+      const [lastNode] = Editor.nodes(editor, {
+        at: [editor.children.length - 1]
+      }); // Last node
+
+      if (firstNode && lastNode) {
+        Transforms.select(editor, {
+          anchor: Editor.start(editor, [0]),
+          // Start at the first node
+          focus: Editor.end(editor, [editor.children.length - 1]) // End at the last node
+        });
+      }
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+const EDITORCMDS = {
+  a: selectAll
+};
+export default EDITORCMDS;

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

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

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

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

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

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

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

@@ -1,20 +1,4 @@
 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: [{
@@ -31,5 +15,21 @@ 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 } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } 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,10 +78,12 @@ const BannerSpacing = props => {
         component: "input",
         sx: classes.sapcingInput,
         name: "top",
-        value: !lockSpacing ? "" : value?.top || 0,
-        className: "sliderInput",
+        value: !lockSpacing ? "" : getCustomizationValue(value?.top),
+        className: "sliderInput removeScroll",
         disabled: !lockSpacing,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -123,50 +125,54 @@ const BannerSpacing = props => {
             children: [/*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxTop",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "top",
-                value: value?.top,
-                className: "borderInput",
+                value: getCustomizationValue(value?.top),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxRight",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "right",
-                value: value?.right,
-                className: "borderInput",
+                value: getCustomizationValue(value?.right),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxBottom",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "bottom",
-                value: value?.bottom,
-                className: "borderInput",
+                value: getCustomizationValue(value?.bottom),
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomRight
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             }), /*#__PURE__*/_jsx("div", {
               className: "bannerSpaceBoxLeft",
               children: /*#__PURE__*/_jsx("input", {
-                type: "text",
+                type: "number",
                 name: "left",
-                className: "borderInput",
-                value: value?.left,
+                className: "borderInput removeScroll",
+                value: getCustomizationValue(value?.left),
                 style: {
                   ...squreStyle.topLeft
                 },
-                onChange: handleChange
+                onChange: handleChange,
+                placeholder: "0"
               })
             })]
           })

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 } from "../../../helper/theme";
+import { getBreakPointsValue, getCustomizationValue } 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,11 +80,13 @@ const BorderRadius = props => {
       }), /*#__PURE__*/_jsx(Box, {
         sx: classes.sapcingInput,
         component: "input",
-        value: !lockRadius ? "" : value?.topLeft || 0,
-        className: "sliderInput",
+        value: !lockRadius ? "" : getCustomizationValue(value?.topLeft),
+        className: "sliderInput removeScroll",
         name: "topLeft",
         disabled: !lockRadius,
-        onChange: handleChange
+        onChange: handleChange,
+        type: "number",
+        placeholder: "0"
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
@@ -125,10 +127,10 @@ const BorderRadius = props => {
             borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
           },
           children: [/*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topLeft",
-            value: value?.topLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topLeft,
@@ -136,10 +138,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "topRight",
-            value: value?.topRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.topRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.topRight,
@@ -148,10 +150,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomLeft",
-            value: value?.bottomLeft,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomLeft),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomLeft,
@@ -160,10 +162,10 @@ const BorderRadius = props => {
             },
             onChange: handleChange
           }), /*#__PURE__*/_jsx("input", {
-            type: "text",
+            type: "number",
             name: "bottomRight",
-            value: value?.bottomRight,
-            className: "borderInput",
+            value: getCustomizationValue(value?.bottomRight),
+            className: "borderInput removeScroll",
             placeholder: "0",
             style: {
               ...radiusStyle.bottomRight,

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

@@ -12,11 +12,12 @@ const Color = props => {
   } = props;
   const {
     key,
-    label
+    label,
+    hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
+    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -39,7 +40,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,
@@ -68,7 +69,8 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key]
+            recentColors: recentColors[key],
+            hideGradient: hideGradient
           })
         })
       }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState, useRef } 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,12 +6,23 @@ const SelectBox = props => {
   const {
     value,
     data,
-    onChange
+    onChange,
+    elementProps
   } = 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
@@ -26,7 +37,7 @@ const SelectBox = props => {
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
-        checked: value,
+        checked: checkedValue,
         onChange: handleChange
       }),
       label: placeholder

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

@@ -72,15 +72,20 @@ const ELEMENT_TAGS = {
     type: "paragraph"
   }),
   TABLE: (el, children = []) => {
-    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
-    };
+    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);
+    }
   },
   THEAD: () => ({
     type: "table-head"

package/dist/Editor/helper/index.js

@@ -154,4 +154,26 @@ 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,4 +97,5 @@ 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,7 +75,6 @@ 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 } from "slate";
+import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
@@ -26,6 +26,48 @@ 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 = [];
@@ -64,11 +106,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);
@@ -79,7 +121,7 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        insertData(data);
+        handleInsert(editor, () => insertData(data), decoded);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -96,7 +138,7 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      Transforms.insertFragment(editor, formattedFragment);
+      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -32,16 +32,21 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const title = {
-          type: "title",
-          children: [{
-            text: "Untitled"
-          }]
-        };
-        Transforms.insertNodes(editor, title, {
-          at: path.concat(0),
-          select: true
-        });
+        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
+          });
+        }
       }
       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 { isEmptyTextNode } from "../helper";
+import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
 import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
@@ -203,13 +203,7 @@ 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 = leaf?.color?.indexOf("gradient") >= 0 ? {
-      background: leaf?.color?.concat("text"),
-      WebkitBackgroundClip: "text",
-      WebkitTextFillColor: "transparent"
-    } : {
-      color: leaf.color
-    };
+    const textStyles = getTextColor(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) {
+  } else if (data?.length > 0) {
     return data;
   } else {
     return [{