@flozy/editor 3.9.8 → 4.0.0

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

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

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

@@ -1,32 +1,35 @@
-const ButtonNavSettingsStyles = () => ({
+const ButtonNavSettingsStyles = themeType => ({
   dialogContainer: {
-    '& .MuiDialogContent-root': {
+    "& .MuiPaper-root": {
+      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
+    },
+    "& .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"
     }
   },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
     }
   },
   closeIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

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/Section/index.js

@@ -1,15 +1,17 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const anchorEl = useRef(null);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = () => {
+  const Toolbar = ({
+    fromPopper
+  }) => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: {
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
         left: "-28px",
         top: "3px"
       },
@@ -99,6 +120,8 @@ const Section = props => {
       alignItems: horizantal,
       justifyContent: vertical
     },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -107,9 +130,36 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-        ...props
-      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
+      ref: anchorEl,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            background: "#F6F6F6",
+            height: "30px",
+            position: "relative"
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

package/dist/Editor/common/Section/styles.js

@@ -6,6 +6,9 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
+      },
+      "& .sectionPopper": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
+    "& .sectionPopper": {
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    "& .sectionPopper": {
+      opacity: 0
+    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",

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

@@ -40,6 +40,60 @@ 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: "",

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

@@ -1,18 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "colors",
+  value: "accordionColor",
   fields: [{
-    label: "Text Color",
-    key: "textColor",
+    label: "Accordion Color",
+    key: "accordionTextColor",
     type: "color",
     needPreview: 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/buttonStyle.js

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

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

@@ -3,12 +3,12 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/
 import { squreStyle } from "./radiusStyle";
 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,11 +18,21 @@ const BannerSpacing = props => {
     key
   } = data;
   const lockKeyVal = `lock${key}`;
-  let lockSpacing = elementProps[lockKeyVal];
+  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;
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }
-  const [size] = useWindowResize();
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};

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

@@ -3,27 +3,35 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue } from "../../../helper/theme";
+import { useEditorTheme } from "../../../hooks/useEditorTheme";
 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 = {};

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

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

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

@@ -1,22 +1,44 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, 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,
+    value: val,
     data,
     onChange,
-    classes
+    classes,
+    elementProps,
+    handleClose,
+    customProps
   } = 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);
     }
@@ -39,7 +61,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,
@@ -56,7 +78,7 @@ const Color = props => {
       children: label
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
-      value: value,
+      value: inputValue,
       placeholder: `${label} color code`,
       InputLabelProps: {
         shrink: true
@@ -68,7 +90,9 @@ const Color = props => {
             classes: classes,
             value: value,
             onSave: onSave,
-            recentColors: recentColors[key]
+            recentColors: recentColors[key],
+            handleClose: handleClose,
+            disableEditTheme: customProps?.disableEditTheme
           })
         })
       }

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

@@ -1,19 +1,26 @@
-import React from "react";
+import React, { useMemo } 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,
+    value: val,
     data,
-    onChange
+    onChange,
+    elementProps
   } = 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;
@@ -24,7 +31,9 @@ const FontSize = props => {
   const getSizeVal = () => {
     try {
       const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
-      return parseInt(size || 16);
+      const defaultSize = 16;
+      const val = parseInt(size || defaultSize);
+      return isNaN(val) ? defaultSize : val;
     } catch (err) {
       return "";
     }

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/common/StyleBuilder/fieldTypes/textOptions.js

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { FormControl, Grid, ListItemIcon, ListSubheader, MenuItem, Select, Typography } from "@mui/material";
-import { getBreakPointsValue } from "../../../helper/theme";
+import { getBreakPointsValue, getElementStyle } 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";
@@ -22,10 +23,19 @@ const TextOptions = props => {
     isBreakpoint,
     options,
     renderOption,
-    width
+    width,
+    themeEnabled
   } = data;
   const [size] = useWindowResize();
-  const value = isBreakpoint ? getBreakPointsValue(val, size?.device) : val;
+  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 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,