@flozy/editor 9.8.4 → 9.8.6

package/dist/Editor/ChatEditor.js

@@ -171,7 +171,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = type ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools
+    hideTools: hideTools,
+    translation: translation || translationMock
   }) : [];
   const Leaf = ({
     attributes,

package/dist/Editor/CommonEditor.js

@@ -612,6 +612,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       className: "theme-buttons",
       children: [/*#__PURE__*/_jsx(IconButton, {
         onClick: () => setOpenTheme(true),
+        className: "themePaintIcon",
         children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
       }), /*#__PURE__*/_jsx(IconButton, {
         onClick: () => setOpenAITheme(true),

package/dist/Editor/Editor.css

@@ -1361,6 +1361,10 @@ code.markcode {
   z-index: 1000;
 }
 
+.themePaintIcon:hover .iconBorder {
+  fill: #2563EB;
+}
+
 .hyperLink {
   word-break: break-all;
-}
+}

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -215,7 +215,8 @@ const ColorButtons = props => {
           onClick: onColorPickerClick,
           style: {
             alignSelf: "start",
-            margin: "6px"
+            margin: "6px",
+            padding: "0px"
           },
           children: /*#__PURE__*/_jsx("img", {
             src: ColorPicker,

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -550,7 +550,6 @@ const FreeGrid = props => {
           editor,
           path,
           classes,
-          customProps,
           translation
         }
       }

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -98,6 +98,9 @@ const usePopupStyle = theme => ({
         }
       }
     },
+    "& .MuiDivider-root": {
+      border: `0.5px solid ${theme?.palette?.editor?.deviderBgColor}`
+    },
     "@media only screen and (max-width: 599px)": {
       // margin: "10px !important",
       background: "unset",
@@ -310,14 +313,14 @@ const usePopupStyle = theme => ({
       position: "sticky",
       bottom: "0px",
       right: "0px",
-      boxShadow: "0px -3px 12px 0px #00000017",
+      boxShadow: `0px -3px 16px 0px ${theme?.palette?.editor?.cardShadow}`,
       padding: "10px",
       borderRadius: "8px 8px 19px 19px",
       display: "flex",
       justifyContent: "end",
       alignItems: "center",
       gap: "8px",
-      background: theme?.palette?.editor?.background
+      background: theme?.palette?.editor?.miniToolBarBackground
     }
   },
   textFormatLabel: {
@@ -888,7 +891,7 @@ const usePopupStyle = theme => ({
     margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       borderRadius: "14px !important",
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
       minWidth: "fit-content",
@@ -1195,9 +1198,6 @@ const usePopupStyle = theme => ({
       color: theme?.palette?.editor?.tv_text,
       fontSize: "13px"
     }
-  },
-  dividerGrid: {
-    margin: "5px 0px 10px 0px"
   }
 });
 export default usePopupStyle;

package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js

@@ -1,6 +1,6 @@
 import { Box, Button, Divider, Grid, IconButton, Popover, TextField, Tooltip, Typography } from "@mui/material";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import FormatClearIcon from "@mui/icons-material/FormatClear";
+// import FormatClearIcon from "@mui/icons-material/FormatClear";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist";
 import { BREAKPOINTS_DEVICES, getBreakPointsValue, getVariableValue } from "../../helper/theme";
@@ -11,12 +11,14 @@ import { useMemo, useState } from "react";
 import CommonButton from "../../common/Button";
 import CustomSelect from "../../common/CustomSelect";
 import ColorButtons from "../../Elements/Color Picker/ColorButtons";
-import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
+// import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";
 import ColorPickerStyles from "../../Elements/Color Picker/Styles";
 import colorWheel from "../../Elements/Color Picker/colorWheel.png";
 import CustomColorPicker from "../../common/CustomColorPicker";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList";
+import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
+import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -133,12 +135,13 @@ function ThemeTextFormat(props) {
           }), /*#__PURE__*/_jsx(Grid, {
             item: true,
             children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatClearIcon, {}),
+              sx: classes.defaultBtn1,
+              startIcon: /*#__PURE__*/_jsx(TextDefaultStyleIcon, {}),
               onClick: () => updateSettings({
-                fontFamily: defaultFonts[0]
+                fontFamily: Object.values(fontFamilyMap)[0]
               }),
-              children: "Default"
+              className: "npr-0",
+              children: "Default Text"
             })
           })]
         }), /*#__PURE__*/_jsx(Grid, {
@@ -226,12 +229,12 @@ function ThemeTextFormat(props) {
           }), /*#__PURE__*/_jsx(Grid, {
             item: true,
             children: /*#__PURE__*/_jsx(Button, {
-              sx: classes.defaultBtn,
-              startIcon: /*#__PURE__*/_jsx(FormatColorResetIcon, {}),
+              sx: classes.defaultBtn1,
+              startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {}),
               onClick: () => updateSettings({
                 color: "#ddd"
               }),
-              children: "Default"
+              children: "Default Color"
             })
           })]
         }), /*#__PURE__*/_jsx(Grid, {
@@ -286,14 +289,14 @@ function ThemeTextFormat(props) {
       className: "saveThemeBtnsWrapper",
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: onClose,
-        className: "secondaryBtn",
+        className: "closeBtn",
         style: {
           background: "none"
         },
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: onSaveTextSettings,
-        className: "primaryBtn",
+        className: "confirmBtn",
         children: "Save"
       })]
     })]

package/dist/Editor/assets/svg/BackIcon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function BackIcon() {
+  return /*#__PURE__*/_jsx("svg", {
+    width: "8",
+    height: "12",
+    viewBox: "0 0 6 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M4.75 1.5L1.25 5L4.75 8.5",
+      stroke: "#94A3B8",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+export default BackIcon;

package/dist/Editor/assets/svg/ThemeIcons.js

@@ -10,7 +10,8 @@ export const ThemePaintIcon = () => /*#__PURE__*/_jsxs("svg", {
     d: "M10.4325 30.1183C12.139 31.1876 14.0973 31.7882 16.1099 31.8595C16.8893 31.8902 17.6699 31.8481 18.4415 31.7337L17.8907 33.3571C17.2776 33.414 16.6614 33.4296 16.0462 33.4036C13.7653 33.3205 11.5466 32.6376 9.61376 31.4238C7.53754 30.0913 5.95828 28.1117 5.12029 25.7914C4.23027 23.3448 4.06149 20.6941 4.634 18.1544C5.32901 15.0434 7.1361 12.2933 9.71575 10.4207C12.3096 8.51989 15.5017 7.61749 18.7068 7.87886C19.755 7.92879 20.7757 8.23069 21.6825 8.75897C22.0763 8.9939 22.4171 9.30786 22.6835 9.68107C22.9499 10.0543 23.1362 10.4786 23.2304 10.9274C23.2405 10.9823 23.245 11.0381 23.2441 11.0939C23.2158 12.8879 21.9918 13.4622 20.8255 14.0113C20.1397 14.3232 19.5069 14.6321 19.5387 15.2172C19.5497 15.4668 19.7385 15.7377 20.0664 16.0015C20.5942 16.3982 21.197 16.6835 21.8383 16.8402C22.4605 17.0128 23.1214 17.1542 23.7449 17.3003C24.1251 17.3841 24.4862 17.462 24.8522 17.553L23.7035 18.879L23.4025 18.8123C22.7815 18.6728 22.1281 18.5267 21.4188 18.3306C20.5732 18.1157 19.7797 17.7322 19.0859 17.2032C18.4162 16.6584 18.0267 15.9997 17.9896 15.2953C17.9042 13.6668 19.0075 13.1488 20.1607 12.6046C20.8766 12.2684 21.6273 11.9155 21.6909 11.1512C21.5627 10.6932 21.2613 10.3032 20.8504 10.0638C20.1561 9.66831 19.3778 9.4434 18.5796 9.40758C15.747 9.18118 12.9274 9.98108 10.6357 11.6612C8.36068 13.3186 6.76827 15.7488 6.15706 18.4964C5.64599 20.7451 5.79061 23.0931 6.57376 25.2621C7.29184 27.2606 8.64787 28.9672 10.4325 30.1183Z",
     fill: "#64748B",
     stroke: "#64748B",
-    strokeWidth: "0.5"
+    strokeWidth: "0.5",
+    className: "iconBorder"
   }), /*#__PURE__*/_jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -30,7 +31,8 @@ export const ThemePaintIcon = () => /*#__PURE__*/_jsxs("svg", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M32.7335 9.18621C31.3102 11.8459 26.9461 11.8944 26.9128 15.3245C26.9126 15.8075 27.0124 16.2852 27.2061 16.7277C27.3998 17.1701 27.6831 17.5676 28.0381 17.895C28.4548 18.2729 28.9983 18.4802 29.5607 18.476C31.813 18.4825 33.0805 16.295 33.3333 14.2829C33.5585 12.4266 33.106 10.4893 32.7335 9.18621ZM28.6753 24.4217C27.0476 24.0905 25.5122 23.4072 24.1766 22.4198L19.9589 34.8736C19.8518 35.1342 19.7782 35.4074 19.74 35.6866C19.7196 35.902 19.7541 36.119 19.8402 36.3175C19.9263 36.516 20.0612 36.6895 20.2324 36.8218C20.4035 36.9542 20.6053 37.0411 20.8191 37.0745C21.0329 37.1079 21.2516 37.0867 21.455 37.0129C21.7724 36.8627 22.0272 36.6059 22.1748 36.2872L28.6785 24.4205L28.6753 24.4217ZM29.2912 19.8582C28.6241 19.8255 27.5539 19.4973 26.9954 18.8102L24.5583 21.6431C25.9722 22.7123 27.476 23.4776 29.1409 23.7349C29.0576 21.977 29.0679 21.7996 29.277 19.8654L29.2912 19.8582Z",
-    fill: "#64748B"
+    fill: "#64748B",
+    className: "iconBorder"
   }), /*#__PURE__*/_jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

package/dist/Editor/common/ColorPickerButton.js

@@ -53,14 +53,11 @@ const ColorPickerToolComponent = ({
       className: "colorPickerActionBtns",
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleClose,
-        className: "secondaryBtn",
-        style: {
-          background: "none"
-        },
+        className: "cancelBtn",
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: handleSave,
-        className: "primaryBtn",
+        className: "confirmBtn",
         children: "Save"
       })]
     })]

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

@@ -41,7 +41,7 @@ function CustomColorPicker(props) {
   const theme = useTheme();
   const colorVars = theme?.vars?.colors || {};
   const onChange = useCallback(color => {
-    onChangeColor(getSelectedColor(color, theme));
+    onChangeColor(getSelectedColor(color, theme, hideThemeColors));
   }, [onChangeColor, theme]);
   const colorTabs = useMemo(() => {
     const otherColors = {
@@ -67,7 +67,7 @@ function CustomColorPicker(props) {
     tabs.push(otherColors);
     return tabs;
   }, [recentColors, defaultColors, onChange, colorVars]);
-  const selectValue = getSelectedColor(color, theme);
+  const selectValue = getSelectedColor(color, theme, hideThemeColors);
   return /*#__PURE__*/_jsxs(Paper, {
     component: "div",
     sx: classes.customColorPickerContainer,

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

@@ -3,12 +3,13 @@ import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/mater
 import ColorPickerButton from "../../ColorPickerButton";
 import { getVariableValue } from "../../../helper/theme";
 import { useButtonStyle } from "../../../hooks/useThemeValues";
+
+// const MAP_STYLE_PROPS = {
+//   bgColor: "background-color",
+//   textColor: "color",
+// };
 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,

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

@@ -9,12 +9,12 @@ const MetaDataMapping = props => {
     elementProps,
     customProps
   } = props;
-  const {
-    translation
-  } = customProps;
   const {
     compType
   } = data;
+  const {
+    translation
+  } = customProps;
   const previousCardRef = useRef(null);
   const [selectedCard, setSelectedCard] = useState(null);
   const updatedData = {

package/dist/Editor/common/iconslist.js

@@ -1655,21 +1655,20 @@ export const CsvIcon = () => /*#__PURE__*/_jsxs("svg", {
   })]
 });
 export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
+  width: "10",
+  height: "10",
+  viewBox: "0 0 10 10",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  ...(props || {}),
   children: [/*#__PURE__*/_jsx("path", {
-    d: "M14.1245 5.875L5.87493 14.1246",
-    stroke: "#64748B",
+    d: "M9.12476 0.875L0.875176 9.12458",
+    stroke: "#8F9CAE",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }), /*#__PURE__*/_jsx("path", {
-    d: "M5.875 5.875L14.1246 14.1246",
-    stroke: "#64748B",
+    d: "M0.875183 0.875L9.12476 9.12458",
+    stroke: "#8F9CAE",
     strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"

package/dist/Editor/commonStyle.js

@@ -212,16 +212,16 @@ const useCommonStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "@media only screen and (max-width: 899px)": {
         width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.background
+        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
       }
     },
     "& .colorpicker": {
@@ -252,14 +252,38 @@ const useCommonStyle = theme => ({
       }
     },
     "& .colorPickerActionBtns": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       display: "flex",
       justifyContent: "end",
       padding: "10px",
       position: "sticky",
       bottom: 0,
       right: 0,
-      boxShadow: "0px -3px 12px 0px #00000017"
+      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: {

package/dist/Editor/plugins/withLinks.js

@@ -11,16 +11,15 @@ const withLinks = editor => {
   // remove empty inline
   editor.normalizeNode = entry => {
     const [node, path] = entry;
-
-    // if (!editor.children.length) {
-    //   Transforms.insertNodes(editor, {
-    //     type: "paragraph",
-    //     children: [{ text: "" }],
-    //   });
-
-    //   return;
-    // }
-
+    if (!editor.children.length && !editor.isChatEditor) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      });
+      return;
+    }
     if (Element.isElement(node) && node.type === "paragraph") {
       const children = Array.from(Node.children(editor, path));
       for (const [child, childPath] of children) {

package/dist/Editor/themeSettings/buttons/index.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from "react";
 import { Accordion, AccordionDetails, AccordionSummary, Button, Fade, Grid, IconButton, Popper, Typography, styled } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 // Style
 import Style from "./style";
@@ -9,6 +8,7 @@ import StyleBuilder from "../../common/StyleBuilder";
 import { fontOptions } from "../../utils/font";
 import { useEditorTheme } from "../../hooks/useEditorTheme";
 import { getBreakPointsValue, getElementProperty, getTRBLBreakPoints } from "../../helper/theme";
+import { KeyboardArrowDownRounded } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const buttonStyle = [{
@@ -210,7 +210,7 @@ const Buttons = props => {
       onChange: () => onSettingsChange(type),
       expanded: openSettings === type,
       children: [/*#__PURE__*/_jsx(AccordionSummary, {
-        expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+        expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
         "aria-controls": "panel1-content",
         id: "panel1-header",
         children: "Buttons"

package/dist/Editor/themeSettings/colorTheme/index.js

@@ -1,12 +1,11 @@
 import React from "react";
 import { Accordion, AccordionDetails, AccordionSummary, Divider, FormControlLabel, Grid, IconButton, Radio, RadioGroup, ToggleButton, ToggleButtonGroup, Typography, styled } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 // Style
 import Style from "./style";
 
 // icons
-import { ChevronLeft } from "@mui/icons-material";
+import { ChevronLeft, KeyboardArrowDownRounded } from "@mui/icons-material";
 import { EditIcon } from "../icons";
 import ColorPickerButton from "../../common/ColorPickerButton";
 import { getContrastColor } from "../../utils/helper";
@@ -86,7 +85,7 @@ const ColorTheme = props => {
       onChange: () => onSettingsChange(type),
       expanded: openSettings === type,
       children: [/*#__PURE__*/_jsx(AccordionSummary, {
-        expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+        expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
         "aria-controls": "panel1-content",
         id: "panel1-header",
         children: "Color Theme"
@@ -184,7 +183,7 @@ const ColorTheme = props => {
                     children: /*#__PURE__*/_jsx(EditIcon, {})
                   }), /*#__PURE__*/_jsx(Typography, {
                     variant: "body2",
-                    className: "fs-12 valyeText",
+                    className: "fs-10 valyeText",
                     style: {
                       color: textColor
                     },

package/dist/Editor/themeSettings/fonts/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import { Accordion, AccordionDetails, AccordionSummary, Checkbox, Divider, Fade, FormControlLabel, Grid, IconButton, Paper, Popper, Typography, styled } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 // Style
 import Style from "./style";
@@ -15,6 +14,7 @@ import PreviewElement from "./PreviewElement";
 import FontFamilyAutocomplete from "../../Toolbar/FormatTools/FontFamilyAutocomplete";
 import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList";
 import { CheckedBoxCheckIcon } from "../../common/iconListV2";
+import { KeyboardArrowDownRounded } from "@mui/icons-material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Fonts = props => {
@@ -126,7 +126,7 @@ const Fonts = props => {
       onChange: () => onSettingsChange(type),
       expanded: openSettings === type,
       children: [/*#__PURE__*/_jsx(AccordionSummary, {
-        expandIcon: /*#__PURE__*/_jsx(ExpandMoreIcon, {}),
+        expandIcon: /*#__PURE__*/_jsx(KeyboardArrowDownRounded, {}),
         "aria-controls": "panel1-content",
         id: "panel1-header",
         children: "Fonts"

package/dist/Editor/themeSettings/fonts/style.js

@@ -42,7 +42,8 @@ const Style = ({
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: `${appTheme?.palette?.editor?.textColor} !important`
+    color: `${appTheme?.palette?.editor?.textColor} !important`,
+    margin: "0px"
   },
   ".MuiAutocomplete-input": {
     color: appTheme?.palette?.editor?.textColor

package/dist/Editor/themeSettings/index.js

@@ -6,7 +6,6 @@ import Style from "./style";
 
 // icons
 import { CloseIcon } from "../common/iconslist";
-import { ChevronLeft } from "@mui/icons-material";
 import { TickIcon } from "./icons";
 import ColorTheme from "./colorTheme";
 import Buttons from "./buttons";
@@ -14,6 +13,7 @@ import Fonts from "./fonts";
 import { useEditorTheme } from "../hooks/useEditorTheme";
 import ActiveTheme from "./ActiveTheme";
 import SaveTheme from "../themeSettingsAI/saveTheme";
+import BackIcon from "../assets/svg/BackIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -57,7 +57,8 @@ const ThemeSettings = props => {
   const {
     id,
     name,
-    mood_name
+    mood_name,
+    template_tag
   } = userSelectedTheme || {};
   const onClose = () => setOpen(false);
   const getThemesList = async themeTabType => {
@@ -66,7 +67,8 @@ const ThemeSettings = props => {
     try {
       const themeType = themeTabType === 0 ? "default" : "";
       const result = await services("getThemes", {
-        type: themeType
+        type: themeType,
+        template_tag
       });
       setThemes(result?.data || []);
     } catch (err) {
@@ -102,6 +104,7 @@ const ThemeSettings = props => {
       const result = await services("saveTheme", {
         type,
         id,
+        template_tag,
         ...formData,
         theme: userSelectedTheme?.theme
       });
@@ -147,19 +150,22 @@ const ThemeSettings = props => {
         className: "themeCard",
         gap: 2,
         children: [/*#__PURE__*/_jsxs(Grid, {
+          style: {
+            width: "90px"
+          },
           children: [/*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             className: "title",
             style: {
               whiteSpace: "nowrap",
-              maxWidth: "100px",
               textOverflow: "ellipsis",
-              overflow: "hidden"
+              overflow: "hidden",
+              fontWeight: "500"
             },
             children: name
           }), /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
-            className: "fs-12 textSecondary",
+            className: "fs-12 textSecondary moodName",
             children: mood_name
           })]
         }), /*#__PURE__*/_jsxs(Grid, {
@@ -206,10 +212,9 @@ const ThemeSettings = props => {
           container: true,
           justifyContent: "space-between",
           wrap: "nowrap",
-          className: "header",
-          sx: {
-            px: 2
-          },
+          className: "header"
+          // sx={{ px: 2 }}
+          ,
           children: [/*#__PURE__*/_jsxs(Grid, {
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
@@ -218,6 +223,9 @@ const ThemeSettings = props => {
             }), /*#__PURE__*/_jsxs(Typography, {
               variant: "body1",
               className: "fs-12 textSecondary",
+              sx: {
+                mt: 0.5
+              },
               children: ["Change the entire style of your website with a single click.", " "]
             })]
           }), /*#__PURE__*/_jsx(IconButton, {
@@ -237,7 +245,7 @@ const ThemeSettings = props => {
               children: [/*#__PURE__*/_jsx(IconButton, {
                 onClick: () => setThemeMoodboard(false),
                 className: "backBtn",
-                children: /*#__PURE__*/_jsx(ChevronLeft, {})
+                children: /*#__PURE__*/_jsx(BackIcon, {})
               }), "Theme Moodboard"]
             }), /*#__PURE__*/_jsx(Box, {
               sx: {
@@ -286,7 +294,7 @@ const ThemeSettings = props => {
           children: [/*#__PURE__*/_jsx(Grid, {
             sx: {
               px: 1,
-              mt: 2
+              mt: 1
             },
             children: /*#__PURE__*/_jsx(ColorTheme, {
               colors: getColors(colors),
@@ -300,7 +308,7 @@ const ThemeSettings = props => {
           }), /*#__PURE__*/_jsx(Grid, {
             sx: {
               px: 1,
-              mt: 2
+              mt: 1
             },
             children: /*#__PURE__*/_jsx(Fonts, {
               appTheme: appTheme,
@@ -312,7 +320,7 @@ const ThemeSettings = props => {
           }), /*#__PURE__*/_jsx(Grid, {
             sx: {
               px: 1,
-              mt: 2
+              mt: 1
             },
             children: /*#__PURE__*/_jsx(Buttons, {
               appTheme: appTheme,
@@ -334,7 +342,8 @@ const ThemeSettings = props => {
             name,
             mood_name
           },
-          addNewTheme: true
+          addNewTheme: true,
+          appTheme: appTheme
         }) : null, /*#__PURE__*/_jsx(SaveTheme, {
           saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
           loading: savingTheme,
@@ -342,7 +351,8 @@ const ThemeSettings = props => {
           defaultFormData: {
             name,
             mood_name
-          }
+          },
+          appTheme: appTheme
         })]
       }) : null]
     })

package/dist/Editor/themeSettings/style.js

@@ -2,14 +2,25 @@ const Style = ({
   appTheme
 }) => {
   const {
-    background,
     textColor,
     tv_text,
     uploadFileBg,
     closeButtonBgColor,
     closeButtonSvgStroke,
-    tv_hover_bg,
-    deviderBgColor
+    deviderBgColor,
+    activeColor,
+    cardOutsetBg,
+    cardBorder,
+    cardBg,
+    selectedCardOutsetBg,
+    cardBorder2,
+    cardShadow,
+    sidebarBorder,
+    cardBg2,
+    miniToolBarBackground,
+    closeButtonBackground,
+    customDialogueCloseBtnColor,
+    customDialogueCloseBtnBorder
   } = appTheme?.palette?.editor || {};
   return {
     ".fs-12": {
@@ -18,6 +29,9 @@ const Style = ({
     ".fs-14": {
       fontSize: "14px"
     },
+    ".fs-10": {
+      fontSize: "10px"
+    },
     ".fw-500": {
       fontWeight: "500"
     },
@@ -31,10 +45,15 @@ const Style = ({
       textTransform: "none"
     },
     "& .MuiDrawer-paper": {
-      background: background,
+      background: cardBg,
       color: textColor,
+      border: `1px solid ${sidebarBorder}`,
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
+      fontFamily: '"Inter", sans-serif'
+    },
+    "& .MuiTypography-root": {
+      fontFamily: '"Inter", sans-serif'
     },
     "& .textSecondary": {
       color: tv_text
@@ -47,20 +66,27 @@ const Style = ({
       flexGrow: 1,
       ".header": {
         borderBottom: `1px solid ${deviderBgColor}`,
-        paddingBottom: "16px",
-        marginBottom: "16px"
+        width: "calc(100% - 32px)",
+        margin: "auto",
+        marginBottom: "16px",
+        paddingBottom: "16px"
       }
     },
     ".title": {
-      fontWeight: "700",
+      fontWeight: "600",
       fontSize: "14px"
     },
+    ".moodName": {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
     ".closeBtn, .backBtn": {
-      width: "26px",
-      height: "26px",
+      width: "20px",
+      height: "20px",
       BorderRadius: "4px",
       flexShrik: "0",
-      padding: "4px",
+      padding: "1px",
       borderRadius: "4px",
       background: closeButtonBgColor,
       color: `${closeButtonSvgStroke} !important`,
@@ -69,7 +95,7 @@ const Style = ({
       }
     },
     ".activeTheme": {
-      background: uploadFileBg,
+      background: cardOutsetBg,
       padding: "14px 10px",
       borderRadius: "4px"
     },
@@ -77,7 +103,8 @@ const Style = ({
       borderRadius: "7px",
       padding: "16px",
       boxShadow: "1px 2px 5px 0px #00000014",
-      background: background
+      background: cardBg,
+      border: `1px solid ${cardBorder}`
     },
     "& .activeThemeTitle": {
       paddingBottom: "6px"
@@ -101,12 +128,14 @@ const Style = ({
       padding: "16px",
       border: `1px solid ${uploadFileBg}`,
       boxShadow: "1px 2px 5px 0px #00000014",
-      background: background,
-      flexWrap: "nowrap"
+      background: cardBg2,
+      flexWrap: "nowrap",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
     },
     ".themeCardWrapper": {
-      padding: "10px",
-      borderRadius: "4px",
+      padding: "6px 10px",
       cursor: "pointer",
       "&.active": {
         background: "#ECF2FF"
@@ -131,13 +160,15 @@ const Style = ({
     },
     ".sectionDetail": {
       borderRadius: "4px",
-      background: background
+      background: cardBg
     },
     ".sectionTitle": {
       borderBottom: `1px solid ${deviderBgColor}`,
       fontWeight: "600",
       fontSize: "14px",
-      padding: "10px",
+      padding: "10px 0px",
+      width: "calc(100% - 20px)",
+      margin: "auto",
       gap: "8px"
     },
     // ".activeThemeInnner": {
@@ -147,26 +178,33 @@ const Style = ({
     //   background: "#fff",
     // },
     ".activeWrapper": {
-      background: tv_hover_bg,
+      background: selectedCardOutsetBg,
       padding: "14px 10px",
       position: "relative",
       ".tickIcon": {
         position: "absolute",
         right: "5px",
-        top: "8px"
+        top: "8px",
+        rect: {
+          stroke: cardBorder2
+        }
       }
     },
+    ".MuiDivider-root": {
+      border: `0.5px solid ${deviderBgColor}`
+    },
     ".settingAccordion": {
-      background: background,
+      background: cardBg2,
       color: textColor,
-      border: `1px solid ${deviderBgColor}`,
-      boxShadow: "none",
+      boxShadow: `1px 2px 8px 0px ${cardShadow}`,
+      border: `1px solid ${uploadFileBg}`,
       borderRadius: "8px !important",
       marginTop: "10px",
       marginBottom: "10px",
       padding: "0px 12px",
       "&.Mui-expanded": {
         border: `1px solid #2563EB`,
+        boxShadow: "1px 2px 14px 0px #2563EB47",
         "& .MuiAccordionSummary-expandIconWrapper": {
           color: "#2563EB !important"
         }
@@ -180,8 +218,9 @@ const Style = ({
       ".MuiAccordionSummary-root ": {
         // minHeight: "20px",
         padding: "0px",
+        minHeight: "42px !important",
         "&.Mui-expanded": {
-          minHeight: "48px !important",
+          // minHeight: "48px !important",
           borderBottom: `1px solid ${deviderBgColor}`
         }
       },
@@ -203,17 +242,50 @@ const Style = ({
       position: "sticky",
       bottom: "0px",
       right: "0px",
-      boxShadow: "0px -3px 12px 0px #00000017",
+      boxShadow: `0px -3px 12px 0px ${cardShadow}`,
       padding: "10px",
       borderRadius: "8px",
       display: "flex",
       justifyContent: "end",
       alignItems: "center",
-      gap: "8px",
-      background: background
+      gap: "6px",
+      background: cardBg,
+      "& .outlineBtn": {
+        background: miniToolBarBackground
+      },
+      "& 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: closeButtonBackground,
+          color: customDialogueCloseBtnColor,
+          border: `1px solid ${customDialogueCloseBtnBorder}`
+        }
+      }
     },
     ".tabWrapper": {
-      borderBottom: `1px solid ${deviderBgColor}`
+      borderBottom: `1px solid ${deviderBgColor}`,
+      marginBottom: "6px",
+      "& .Mui-selected": {
+        color: activeColor
+      },
+      "& .MuiTabs-indicator": {
+        backgroundColor: activeColor
+      }
     }
   };
 };

package/dist/Editor/themeSettingsAI/saveTheme.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Box, Button, CircularProgress, Dialog, Divider, Grid, IconButton, TextField, Typography, styled } from "@mui/material";
 
 // Style
@@ -65,7 +65,7 @@ const SaveTheme = props => {
       children: saveBtnLabel
     }), /*#__PURE__*/_jsx(Dialog, {
       fullWidth: true,
-      maxWidth: "sm",
+      maxWidth: "xs",
       open: saveTheme,
       onClose: onClose,
       className: className,
@@ -155,16 +155,13 @@ const SaveTheme = props => {
           sx: {
             mt: 3
           },
+          className: "saveThemeActionBtns",
           children: [/*#__PURE__*/_jsx(Button, {
-            variant: "outlined",
-            className: "seondaryOutlineBtn",
-            color: "secondary",
+            className: "cancelBtn",
             onClick: onClose,
             children: "Cancel"
           }), /*#__PURE__*/_jsx(Button, {
-            variant: "contained",
-            color: "primary",
-            className: "blueBtn",
+            className: "confirmBtn",
             sx: {
               ml: 1
             },

package/dist/Editor/themeSettingsAI/style.js

@@ -1,4 +1,6 @@
-const style = () => ({
+const style = ({
+  appTheme: theme
+}) => ({
   ".fs-12": {
     fontSize: "12px"
   },
@@ -139,7 +141,7 @@ const style = () => ({
   },
   ".outlineBtn": {
     color: "#2563EB",
-    borderRadius: "8px",
+    borderRadius: "10px",
     boxShadow: "0px 4px 10px 0px #00000026",
     border: "1px solid #2563EB",
     background: "#EBF1F9",
@@ -253,7 +255,70 @@ const style = () => ({
     borderRadius: "126px"
   },
   ".MuiDialog-paper": {
-    borderRadius: "10px"
+    borderRadius: "10px",
+    background: theme?.palette?.editor?.miniToolBarBackground
+  },
+  "& .MuiInputBase-root": {
+    borderRadius: "8px",
+    background: theme?.palette?.editor?.inputFieldBgColor,
+    border: `none`,
+    height: "40px",
+    boxShadow: "0px 4px 16px 0px #0000000D",
+    fontFamily: "Inter, sans-serif",
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+    },
+    "& input::placeholder": {
+      color: "#94A3B8 !important",
+      opacity: "unset",
+      fontFamily: "Inter, sans-serif"
+    },
+    "& .colorPickerButton": {
+      border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+    }
+  },
+  "& .MuiInputBase-root:has(.colorPickerButton)": {
+    "& .MuiInputBase-input": {
+      padding: "8.5px 14px 8.5px 0px",
+      fontFamily: "Inter, sans-serif"
+    }
+  },
+  "& .MuiInputBase-input": {
+    color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+    textTransform: "math-auto",
+    fontFamily: "Inter, sans-serif"
+  },
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+  },
+  "& fieldset": {
+    border: `1px solid transparent`,
+    borderRadius: "8px"
+  },
+  "& .saveThemeActionBtns": {
+    "& 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}`
+      }
+    }
   }
 });
 export default style;

package/dist/Editor/utils/button.js

@@ -1,6 +1,5 @@
 import { Path, Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
-import { windowVar } from "./helper";
 import { getCurrentElementText } from "../plugins/withHTML";
 export const insertButton = editor => {
   const button = {
@@ -11,22 +10,7 @@ export const insertButton = editor => {
     buttonLink: {
       linkType: "webAddress"
     },
-    iconPosition: "start",
-    bgColor: "#2563EB",
-    textColor: "#FFF",
-    borderRadius: {
-      topLeft: 30,
-      topRight: 30,
-      bottomLeft: 30,
-      bottomRight: 30
-    },
-    bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
-    },
-    ...(windowVar.lastButtonProps || {})
+    iconPosition: "start"
   };
   const hasText = getCurrentElementText(editor);
   const insertPath = hasText ? Path.next(Path.parent(editor?.selection.focus.path)) : editor?.selection.focus.path;

package/dist/Editor/utils/freegrid.js

@@ -1,5 +1,4 @@
 import { Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
 import scrollToNewSection from "../helper/RnD/scrollToNewSection";
 const Default_text_Node = {
   type: "paragraph",

package/dist/Editor/utils/helper.js

@@ -904,8 +904,8 @@ function convertColorToRgb(color) {
     return color;
   }
 }
-export const getSelectedColor = (selectedColor, theme) => {
-  const colorVars = theme?.vars?.colors;
+export const getSelectedColor = (selectedColor, theme, hideThemeColors) => {
+  const colorVars = hideThemeColors ? null : theme?.vars?.colors;
   let selectedValue = selectedColor;
   if (colorVars) {
     const convertedColor = convertColorToRgb(selectedColor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.8.4",
+  "version": "9.8.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"