@flozy/editor 4.0.2 → 4.0.3

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -134,13 +134,10 @@ export const SelectPage = props => {
   });
 };
 export const Trigger = props => {
-  const {
-    nav
-  } = props;
-  return /*#__PURE__*/_jsxs(Typography, {
+  return /*#__PURE__*/_jsx(Typography, {
     variant: "subtitle1",
     gutterBottom: true,
-    children: ["Choosing this will trigger the ", nav.type, " step"]
+    children: "Choosing this will trigger the next step"
   });
 };
 const scrollToOptions = [{

package/dist/Editor/common/LinkSettings/index.js

@@ -18,8 +18,7 @@ const MAP_COMPONENT = {
   webAddress: TextInput,
   email: TextInput,
   phone: TextInput,
-  nextTrigger: Trigger,
-  prevTrigger: Trigger,
+  actionTrigger: Trigger,
   scrollTopOrBottom: ScrollTopBottom,
   page: SelectPage
 };
@@ -36,12 +35,11 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
-  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles(themeType);
+  const classes = LinkSettingsStyles();
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -3,13 +3,8 @@ export const getNavOptions = (hideTools = []) => {
     label: "None",
     value: ""
   }, {
-    label: "Next Trigger",
-    value: "nextTrigger",
-    type: "next"
-  }, {
-    label: "Previous Trigger",
-    value: "prevTrigger",
-    type: "previous"
+    label: "Trigger",
+    value: "actionTrigger"
   }, {
     label: "Web Address",
     value: "webAddress",

package/dist/Editor/common/LinkSettings/style.js

@@ -1,35 +1,32 @@
-const ButtonNavSettingsStyles = themeType => ({
+const ButtonNavSettingsStyles = () => ({
   dialogContainer: {
-    "& .MuiPaper-root": {
-      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
-    },
-    "& .MuiDialogContent-root": {
+    '& .MuiDialogContent-root': {
       padding: "0px 20px"
     },
-    "& .MuiDialogActions-root": {
+    '& .MuiDialogActions-root': {
       padding: "10px"
     },
-    "& .MuiTypography-h6": {
+    '& .MuiTypography-h6': {
       fontWeight: 600,
       fontSize: "16px",
       paddingRight: "20px"
     },
     "& .MuiGrid-container": {
-      marginTop: "0px"
+      marginTop: '0px'
     },
     "& .MuiGrid-item": {
       padding: "14px"
     }
   },
   saveBtn: {
-    color: "#fff",
+    color: '#fff',
     background: "#2563EB",
     fontSize: "14px",
     fontWeight: 500,
     padding: "4px 24px",
     textTransform: "none",
     "&:hover": {
-      color: "#fff",
+      color: '#fff',
       background: "#2563EB"
     }
   },
@@ -46,7 +43,7 @@ const ButtonNavSettingsStyles = themeType => ({
     }
   },
   closeIcon: {
-    position: "absolute",
+    position: 'absolute',
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

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

@@ -58,7 +58,7 @@ const usePopupStyles = theme => ({
         borderRadius: "0px",
         justifyContent: "start",
         "& svg": {
-          margin: "5.5px",
+          margin: "8px",
           width: "24px",
           height: "24px"
         },

package/dist/Editor/common/Shorthands/elements.js

@@ -40,60 +40,6 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
-}, {
-  name: "Heading 4",
-  desc: "",
-  group: "Text",
-  type: "headingFour",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFour"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFour", false)
-}, {
-  name: "Heading 5",
-  desc: "",
-  group: "Text",
-  type: "headingFive",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFive"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFive", false)
-}, {
-  name: "Heading 6",
-  desc: "",
-  group: "Text",
-  type: "headingSix",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingSix"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingSix", false)
-}, {
-  name: "Paragraph 1",
-  desc: "",
-  group: "Text",
-  type: "paragraphOne",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphOne"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
-}, {
-  name: "Paragraph 2",
-  desc: "",
-  group: "Text",
-  type: "paragraphTwo",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphTwo"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
-}, {
-  name: "Paragraph 3",
-  desc: "",
-  group: "Text",
-  type: "paragraphThree",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphThree"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",
@@ -179,6 +125,15 @@ const ELEMENTS_LIST = [{
     icon: "calenderNewIcon"
   }),
   onInsert: editor => insertDefaultEmbed(editor, "calendly", "")
+}, {
+  name: "Emoji",
+  group: "Elements",
+  desc: "",
+  type: "emoji",
+  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
+    ...rest,
+    icoBtnType: "cmd"
+  })
 }, {
   name: "Table",
   group: "Elements",
@@ -191,15 +146,6 @@ const ELEMENTS_LIST = [{
     const table = new TableUtil(editor);
     table.insertTable(3, 3);
   }
-}, {
-  name: "Emoji",
-  group: "Elements",
-  desc: "",
-  type: "emoji",
-  renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
-    ...rest,
-    icoBtnType: "cmd"
-  })
 }, {
   name: "Divider",
   group: "Elements",

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

@@ -20,8 +20,7 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    },
-    themeEnabled: true
+    }
   }, {
     label: "Font Size",
     key: "textSize",
@@ -45,8 +44,7 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color",
-    themeEnabled: true
+    type: "color"
   }, {
     label: "Border Color",
     key: "borderColor",

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

@@ -1,14 +1,14 @@
 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 { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
@@ -18,21 +18,11 @@ const BannerSpacing = props => {
     key
   } = data;
   const lockKeyVal = `lock${key}`;
-  const [size] = useWindowResize();
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    bannerSpacing,
-    lockbannerSpacing
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
-  const val = isUserValue ? props?.value : bannerSpacing;
-  let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
+  let lockSpacing = elementProps[lockKeyVal];
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }
+  const [size] = useWindowResize();
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
@@ -88,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",
@@ -135,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,36 +2,28 @@ import React from "react";
 import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
-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"];
 const BorderRadius = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
     classes
   } = props;
+  let {
+    lockRadius
+  } = elementProps;
+  if (lockRadius === undefined) {
+    lockRadius = true;
+  }
   const {
     key
   } = data;
   const [size] = useWindowResize();
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    borderRadius,
-    lockRadius: themeLockRadius
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
-  const val = isUserValue ? props?.value : borderRadius;
-  let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
-  if (lockRadius === undefined) {
-    lockRadius = true;
-  }
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};
@@ -88,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",
@@ -135,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,
@@ -146,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,
@@ -158,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,
@@ -170,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/buttonLink.js

@@ -59,7 +59,7 @@ const ButtonLink = props => {
           value: elementProps?.url
         })
       });
-    } else if (value?.linkType === "prevTrigger" || value?.linkType === "nextTrigger") {
+    } else if (value?.linkType === "actionTrigger") {
       return null;
     }
   };

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

@@ -1,44 +1,22 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
-import { useSlateStatic } from "slate-react";
-import { getElementStyle, getVariableValue } from "../../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const MAP_STYLE_PROPS = {
-  bgColor: "background-color",
-  textColor: "color"
-};
 const Color = props => {
   const {
-    value: val,
+    value,
     data,
     onChange,
-    classes,
-    elementProps,
-    handleClose,
-    customProps
+    classes
   } = props;
   const {
     key,
     label
   } = data;
   const [recentColors, setRecentColors] = useState({});
-  const editor = useSlateStatic();
-  const {
-    value,
-    inputValue
-  } = useMemo(() => {
-    const isVariable = val && val.startsWith("var");
-    const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
-    const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
-    return {
-      value: value || val,
-      inputValue: inputValue || val
-    };
-  }, [editor, val]);
   useEffect(() => {
-    const storedColors = JSON.parse(localStorage.getItem("recentColors"));
+    const storedColors = JSON.parse(localStorage.getItem('recentColors'));
     if (storedColors) {
       setRecentColors(storedColors);
     }
@@ -61,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,
@@ -78,7 +56,7 @@ const Color = props => {
       children: label
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
-      value: inputValue,
+      value: value,
       placeholder: `${label} color code`,
       InputLabelProps: {
         shrink: true
@@ -90,9 +68,7 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key],
-            handleClose: handleClose,
-            disableEditTheme: customProps?.disableEditTheme
+            recentColors: recentColors[key]
           })
         })
       }

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

@@ -1,26 +1,19 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { TextField, IconButton, Grid, Typography } from "@mui/material";
 import { sizeMap } from "../../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
-import { getElementStyle } from "../../../helper/theme.js";
-import { useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FontSize = props => {
   const {
-    value: val,
+    value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
     width
   } = data;
-  const editor = useSlateStatic();
-  const value = useMemo(() => {
-    return getElementStyle(editor, elementProps, "font-size") || val;
-  }, [editor, val]);
   const handleChange = e => {
     let inc = parseInt(e.target.value) || 16;
     inc = inc > 200 ? 200 : inc;
@@ -31,9 +24,7 @@ const FontSize = props => {
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      const defaultSize = 16;
-      const val = parseInt(size || defaultSize);
-      return isNaN(val) ? defaultSize : val;
+      return parseInt(size || 16);
     } catch (err) {
       return "";
     }

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

@@ -1,8 +1,7 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
-import { getBreakPointsValue, getElementStyle } from "../../../helper/theme";
+import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { useSlateStatic } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -23,19 +22,10 @@ const TextOptions = props => {
     isBreakpoint,
     options,
     renderOption,
-    width,
-    themeEnabled
+    width
   } = data;
   const [size] = useWindowResize();
-  const editor = useSlateStatic();
-  const value = useMemo(() => {
-    const userValue = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
-    if (themeEnabled) {
-      // editor takes a little amount of time to update the new style in element, in that case userValue will be returned
-      return getElementStyle(editor, elementProps, key) || userValue;
-    }
-    return userValue;
-  }, [editor, isBreakpoint, val, size?.device]);
+  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
   const metaDataMappingOptions = metaMappings?.boards || [];
   const updatedOption = elementProps?.metadatamapping ? [...options, ...metaDataMappingOptions] : options;
   const handleChange = (e, d) => {

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

@@ -87,7 +87,7 @@ const StyleBuilder = props => {
       ...data,
       field_type: data?.element
     });
-    if (data?.hasOwnProperty("name")) {
+    if (data?.hasOwnProperty('name')) {
       setElementProps({
         ...elementProps,
         ...data,

package/dist/Editor/commonStyle.js

@@ -99,12 +99,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  popupTitle2: {
-    fontWeight: "600 !important",
-    fontSize: "20px",
-    display: "flex",
-    alignItems: "center"
-  },
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background