@flozy/editor 9.3.1 → 9.3.3

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef } from "react";
-import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor, Transforms, Editor } from 'slate';
+import { Editable, Slate, ReactEditor } from "slate-react";
+import { createEditor, Transforms, Editor } from "slate";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
@@ -34,14 +34,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     debounceTimeOut = 10,
     translation,
     isMarkDown = false,
-    markDownContent = ''
+    markDownContent = ""
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
     data: content && content?.length > 0 ? content : [{
-      type: 'paragraph',
+      type: "paragraph",
       children: [{
-        text: ''
+        text: ""
       }]
     }]
   });
@@ -239,7 +239,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
       if (isEmpty) {
         event.preventDefault();
         return;

package/dist/Editor/CommonEditor.js

@@ -723,11 +723,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     open: openTheme,
                     setOpen: setOpenTheme,
                     editor: editor,
-                    services: otherProps?.services
+                    services: otherProps?.services,
+                    appTheme: theme,
+                    customProps: customProps
                   }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
                     openAITheme: openAITheme,
                     setOpenAITheme: setOpenAITheme,
-                    onSaveTheme: otherProps?.onSaveTheme
+                    onSaveTheme: otherProps?.onSaveTheme,
+                    theme: theme
                   })]
                 })
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {

package/dist/Editor/Editor.css

@@ -1017,6 +1017,8 @@ blockquote {
   height: 16px;
   border: 2px solid #fff;
   box-shadow: 0px 1px 6px #aaa;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 .spacingSlider {
   height: 9px !important;
@@ -1358,3 +1360,7 @@ code.markcode {
   right: 20px;
   z-index: 1000;
 }
+
+.hyperLink {
+  word-break: break-all;
+}

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

@@ -36,8 +36,8 @@ const SingleColorButton = ({
       width: "100%",
       display: "flex",
       alignItems: "center",
-      padding: padding || "8px 0px",
-      justifyContent: "center"
+      padding: padding || "8px 0px"
+      // justifyContent: "center",
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
       onClick: handleSelect(m),
@@ -184,6 +184,7 @@ const ColorButtons = props => {
                 Transforms.deselect(editor, {
                   at: editor.selection
                 });
+                handleClose();
                 setOpenTheme("editThemeColor");
               },
               children: "Edit"

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-// import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import ColorButtons from "./ColorButtons";

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

@@ -20,7 +20,7 @@ const ColorPickerStyles = theme => ({
       background: `${theme?.palette?.editor?.miniToolBarBackground}`,
       border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       borderRadius: "7px !important",
-      padding: "0px 5px",
+      padding: "0px 10px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -59,7 +59,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "unset"
+      border: "1.5px solid #DCE4EC"
     }
   },
   colorPickerIcon: {

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -11,7 +11,7 @@ export const getValue = (editor, format) => {
   switch (format) {
     case "fontFamily":
       {
-        const style = getSelectedElementStyle("font-family", editor);
+        const style = getSelectedElementStyle("font-family", editor, format);
         return style || defaultFonts[0];
       }
     case "fontWeight":
@@ -19,7 +19,7 @@ export const getValue = (editor, format) => {
         const {
           options
         } = fontWeight || {};
-        const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
+        const fontWeightStyle = getSelectedElementStyle("font-weight", editor, format);
         const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
         return selected?.value;
       }
@@ -34,7 +34,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = getValue(editor, format);
+  const value = activeMark(editor, format, true) || getValue(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;

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

@@ -164,7 +164,7 @@ const TextFormat = props => {
         children: /*#__PURE__*/_jsx(SelectTypography, {
           editor: editor,
           classes: classes,
-          closeMainPopup: () => {},
+          closeMainPopup: closeMainPopup,
           type: "fullWidth",
           customProps: customProps
         })

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

@@ -291,6 +291,9 @@ function ThemeTextFormat(props) {
         children: [/*#__PURE__*/_jsx(Button, {
           onClick: onClose,
           className: "secondaryBtn",
+          style: {
+            background: "none"
+          },
           children: "Cancel"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: onSaveTextSettings,

package/dist/Editor/common/ColorPickerButton.js

@@ -35,7 +35,13 @@ const ColorPickerToolComponent = ({
   return /*#__PURE__*/_jsxs(Grid, {
     item: true,
     xs: 12,
+    style: {
+      position: "relative"
+    },
     children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        marginBottom: "50px"
+      },
       children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: hideGradient ? false : true,
         color: color,
@@ -50,7 +56,10 @@ const ColorPickerToolComponent = ({
       style: {
         display: "flex",
         justifyContent: "end",
-        margin: "8px"
+        margin: "8px",
+        position: "absolute",
+        bottom: 0,
+        right: 0
       },
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleClose,

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

@@ -2,10 +2,24 @@ import { Box, Button, Paper, Typography, useTheme } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import customColorPickerStyles from "./style";
 import { colors } from "../../Elements/Color Picker/defaultColors";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const getColors = (colors, colorTab, key) => {
+  const newColors = [...new Set(colors)];
+  const solidColors = [];
+  const gradientColors = [];
+  newColors.forEach(color => {
+    if (color && color.includes("gradient")) {
+      gradientColors.push(color);
+    } else {
+      solidColors.push(color);
+    }
+  });
+  const showGradientColors = colorTab === "gradient" && key !== "themeColors";
+  return showGradientColors ? gradientColors : solidColors;
+};
 function CustomColorPicker(props) {
   const {
     gradient,
@@ -17,6 +31,7 @@ function CustomColorPicker(props) {
     hideThemeColors,
     disableEditTheme
   } = props;
+  const [colorTab, setColorTab] = useState("solid");
   const {
     setOpenTheme
   } = useEditorContext();
@@ -27,7 +42,8 @@ function CustomColorPicker(props) {
     const otherColors = {
       title: "Recent colours",
       colors: [...(recentColors || []), ...defaultColors],
-      onChange: onChange
+      onChange: onChange,
+      key: "recentColors"
     };
     const themeColors = Object.values(colorVars);
     const tabs = [];
@@ -39,7 +55,8 @@ function CustomColorPicker(props) {
           closeDrawer();
         },
         colors: Object.values(colorVars),
-        onChange: onChange
+        onChange: onChange,
+        key: "themeColors"
       });
     }
     tabs.push(otherColors);
@@ -53,13 +70,15 @@ function CustomColorPicker(props) {
       value: color?.startsWith("var") ? "" : color,
       onChange: onChange,
       defaultColors: [],
-      popupWidth: "300"
+      popupWidth: "300",
+      onChangeTabs: tab => setColorTab(tab)
     }), colorTabs.map((tab, i) => {
       const {
         title,
         onEdit,
         colors = [],
-        onChange
+        onChange,
+        key
       } = tab;
       return /*#__PURE__*/_jsxs(Box, {
         component: "div",
@@ -79,7 +98,7 @@ function CustomColorPicker(props) {
         }), /*#__PURE__*/_jsx(Box, {
           component: "div",
           className: "colorPickerBtnContainer",
-          children: [...new Set(colors)].map((colorVar, i) => {
+          children: getColors(colors, colorTab, key).map((colorVar, i) => {
             const isSelected = colorVar === color;
             return /*#__PURE__*/_jsx(Box, {
               className: isSelected ? "colorPicketBtnActive" : "",

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

@@ -29,7 +29,7 @@ const styles = () => ({
     ".colorPickerBtnContainer": {
       display: "flex",
       flexWrap: "wrap",
-      gap: "8px"
+      gap: "6px"
     },
     ".colorPicketBtn": {
       width: "26px",

package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js

@@ -9,6 +9,7 @@ const TextSettings = props => {
     editor,
     path,
     theme,
+    onClose,
     customProps
   } = props;
   const item_path = path.split("|").map(m => parseInt(m));
@@ -27,7 +28,8 @@ const TextSettings = props => {
   return /*#__PURE__*/_jsx(TextFormat, {
     classes: classes,
     editor: editor,
-    customProps: customProps
+    customProps: customProps,
+    closeMainPopup: onClose
   });
 };
 export default TextSettings;

package/dist/Editor/helper/theme.js

@@ -199,11 +199,11 @@ export const isTextCustomized = editor => {
       if (!themeElements.includes(type)) {
         return false;
       }
-      if (children?.length > 1) {
+      if (!children?.length) {
         return true;
       }
       const customized = textThemeFields.some(field => {
-        const element = children[0] || {};
+        const element = children.find(child => child.text.trim() !== "") || {};
         const value = element[field];
         if (field === "fontSize") {
           return Object.keys(value || {}).length;
@@ -279,12 +279,12 @@ export const saveToTheme = editor => {
       const {
         children
       } = currentElement;
-      if (children?.length > 1) {
+      if (!children?.length) {
         return true;
       }
       let theme = {};
       textThemeFields.forEach(field => {
-        const element = children[0] || {};
+        const element = children.find(child => child.text.trim() !== "") || {};
         const value = element[field];
         let style = {};
         let isValueExist = false;

package/dist/Editor/themeSettings/ActiveTheme.js

@@ -23,7 +23,7 @@ function ActiveTheme(props) {
     className: "activeThemeInnner",
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
-      className: "title",
+      className: "title activeThemeTitle",
       children: id ? "Active Theme" : "No theme activated"
     }), /*#__PURE__*/_jsxs(Grid, {
       className: "flexAlign",
@@ -33,16 +33,16 @@ function ActiveTheme(props) {
         children: name
       }), /*#__PURE__*/_jsxs(Typography, {
         variant: "body2",
-        color: "textSecondary",
-        className: "fs-12",
+        className: "fs-12 textSecondary",
         style: {
-          marginLeft: "4px"
+          marginLeft: id ? "4px" : "0px"
         },
         children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
       })]
     }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
       justifyContent: "space-between",
+      alignItems: "end",
       sx: {
         mt: 1
       },

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

@@ -185,7 +185,8 @@ function convertThemeToElementProps(button = {}, buttonEl) {
 
 const Buttons = props => {
   const {
-    className
+    className,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState();
   const {
@@ -272,7 +273,8 @@ const Buttons = props => {
             },
             renderTabs: buttonStyle,
             customProps: {
-              disableEditTheme: true
+              disableEditTheme: true,
+              translation: customProps?.translation || (() => {})
             }
           })
         })

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

@@ -1,10 +1,12 @@
-const Style = () => ({
+const Style = ({
+  appTheme
+}) => ({
   ".buttonTypeItem": {
     padding: "8px 10px",
     width: "calc(100% + 20px)",
     margin: "0 -10px",
     "&:hover": {
-      background: "#ECF2FF",
+      background: appTheme?.palette?.editor?.tv_hover_bg,
       ".editIcon": {
         opacity: "1",
         visibility: "visible"

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

@@ -10,6 +10,7 @@ import { ChevronLeft } from "@mui/icons-material";
 import { EditIcon } from "../icons";
 import ColorPickerButton from "../../common/ColorPickerButton";
 import { getContrastColor } from "../../utils/helper";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ColorTheme = props => {
@@ -17,8 +18,10 @@ const ColorTheme = props => {
     className,
     colors,
     onColorChange,
-    openDefault
+    openDefault,
+    appTheme
   } = props;
+  const classes = useCommonStyle(appTheme);
   const {
     primaryColors,
     otherColors = []
@@ -109,6 +112,7 @@ const ColorTheme = props => {
                 },
                 hideThemeColors: true,
                 hideGradient: true,
+                classes: classes,
                 children: /*#__PURE__*/_jsxs(Grid, {
                   className: "pmBox",
                   style: {
@@ -156,6 +160,7 @@ const ColorTheme = props => {
                 },
                 hideThemeColors: true,
                 hideGradient: true,
+                classes: classes,
                 children: /*#__PURE__*/_jsxs(Grid, {
                   className: "sdBox",
                   style: {

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

@@ -34,7 +34,11 @@ const Style = () => ({
   ".valyeText": {
     position: "absolute",
     right: "5px",
-    bottom: "5px"
+    bottom: "5px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "calc(100% - 10px)"
   },
   ".editBtn": {
     position: "absolute",

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

@@ -18,7 +18,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Fonts = props => {
   const {
-    className
+    className,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = React.useState();
   const [selectedField, setSelectedField] = React.useState("");
@@ -205,7 +206,8 @@ const Fonts = props => {
           children: [/*#__PURE__*/_jsx(PopperHeader, {
             title: "Text Settings",
             classes: classes,
-            onClose: onClose
+            onClose: onClose,
+            customProps: customProps
           }), /*#__PURE__*/_jsx(ThemeTextFormat, {
             settings: settings,
             updateSettings: updateSettings,

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

@@ -1,4 +1,6 @@
-const Style = () => ({
+const Style = ({
+  appTheme
+}) => ({
   ".settingAccordion": {
     ".MuiOutlinedInput-root": {
       borderRadius: "8px",
@@ -10,7 +12,7 @@ const Style = () => ({
     width: "calc(100% + 20px)",
     margin: "0 -10px",
     "&:hover": {
-      background: "#ECF2FF",
+      background: appTheme?.palette?.editor?.tv_hover_bg,
       ".editIcon": {
         opacity: "1",
         visibility: "visible"
@@ -39,6 +41,19 @@ const Style = () => ({
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
+  },
+  ".MuiAutocomplete-input": {
+    color: appTheme?.palette?.editor?.textColor
+  },
+  ".MuiCheckbox-root": {
+    "& svg": {
+      fill: appTheme?.palette?.editor?.textColor
+    }
+  },
+  ".MuiCheckbox-root.Mui-checked": {
+    "& svg": {
+      fill: "#1976d2"
+    }
   }
 });
 export default Style;

package/dist/Editor/themeSettings/index.js

@@ -31,7 +31,9 @@ const ThemeSettings = props => {
     className,
     open,
     setOpen,
-    services
+    services,
+    appTheme,
+    customProps
   } = props;
 
   // State
@@ -51,7 +53,8 @@ const ThemeSettings = props => {
   const {
     id,
     name,
-    mood_name
+    mood_name,
+    template_tags
   } = userSelectedTheme || {};
   const onClose = () => setOpen(false);
   const getThemesList = async themeTabType => {
@@ -153,8 +156,7 @@ const ThemeSettings = props => {
             children: name
           }), /*#__PURE__*/_jsx(Typography, {
             variant: "body2",
-            color: "textSecondary",
-            className: "fs-12",
+            className: "fs-12 textSecondary",
             children: mood_name
           })]
         }), /*#__PURE__*/_jsxs(Grid, {
@@ -211,8 +213,7 @@ const ThemeSettings = props => {
               children: "Theme/Brand Setting"
             }), /*#__PURE__*/_jsxs(Typography, {
               variant: "body1",
-              color: "textSecondary",
-              className: "fs-12",
+              className: "fs-12 textSecondary",
               children: ["Change the entire style of your website with a single click.", " "]
             })]
           }), /*#__PURE__*/_jsx(IconButton, {
@@ -231,17 +232,13 @@ const ThemeSettings = props => {
               className: "sectionTitle flexAlign",
               children: [/*#__PURE__*/_jsx(IconButton, {
                 onClick: () => setThemeMoodboard(false),
+                className: "backBtn",
                 children: /*#__PURE__*/_jsx(ChevronLeft, {})
               }), "Theme Moodboard"]
-            }), /*#__PURE__*/_jsxs(Grid, {
-              className: "activeWrapper",
-              children: [/*#__PURE__*/_jsx(TickIcon, {}), /*#__PURE__*/_jsx(ActiveTheme, {
-                explore: false
-              })]
             }), /*#__PURE__*/_jsxs(Tabs, {
               value: themeTabType,
               onChange: handleTabChange,
-              variant: "scrollable",
+              variant: "fullWidth",
               scrollButtons: false,
               "aria-label": "scrollable prevent tabs example",
               children: [/*#__PURE__*/_jsx(Tab, {
@@ -274,26 +271,36 @@ const ThemeSettings = props => {
               }, i);
             })]
           })
-        }), id ? /*#__PURE__*/_jsxs(_Fragment, {
+        }), id && !themeMoodboard ? /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Grid, {
             sx: {
-              px: 1
+              px: 1,
+              mt: 2
             },
             children: /*#__PURE__*/_jsx(ColorTheme, {
               colors: getColors(colors),
               onColorChange: onColorChange,
-              openDefault: open === "editThemeColor"
+              openDefault: open === "editThemeColor",
+              appTheme: appTheme
             })
           }), /*#__PURE__*/_jsx(Grid, {
             sx: {
-              px: 1
+              px: 1,
+              mt: 2
             },
-            children: /*#__PURE__*/_jsx(Fonts, {})
+            children: /*#__PURE__*/_jsx(Fonts, {
+              appTheme: appTheme,
+              customProps: customProps
+            })
           }), /*#__PURE__*/_jsx(Grid, {
             sx: {
-              px: 1
+              px: 1,
+              mt: 2
             },
-            children: /*#__PURE__*/_jsx(Buttons, {})
+            children: /*#__PURE__*/_jsx(Buttons, {
+              appTheme: appTheme,
+              customProps: customProps
+            })
           }), /*#__PURE__*/_jsx("div", {
             style: {
               width: "100%",
@@ -308,7 +315,8 @@ const ThemeSettings = props => {
               onSave: onSaveTheme,
               defaultFormData: {
                 name,
-                mood_name
+                mood_name,
+                template_tags
               }
             })
           })]

package/dist/Editor/themeSettings/style.js

@@ -1,152 +1,193 @@
-const Style = () => ({
-  ".fs-12": {
-    fontSize: "12px"
-  },
-  ".fs-14": {
-    fontSize: "14px"
-  },
-  ".fw-500": {
-    fontWeight: "500"
-  },
-  ".fw-600": {
-    fontWeight: "600"
-  },
-  ".pointer": {
-    cursor: "pointer"
-  },
-  ".transformNone": {
-    textTransform: "none"
-  },
-  ".settingsContainer": {
-    width: "340px",
-    padding: "16px 5px",
-    background: "#fff",
-    ".header": {
-      borderBottom: `1px solid #DCE4EC`,
-      paddingBottom: "16px",
-      marginBottom: "16px"
-    }
-  },
-  ".title": {
-    fontWeight: "700",
-    fontSize: "14px"
-  },
-  ".closeBtn": {
-    width: "26px",
-    height: "26px",
-    BorderRadius: "4px",
-    flexShrik: "0",
-    padding: "4px",
-    background: " #F8FAFC",
-    borderRadius: "4px"
-  },
-  ".activeTheme": {
-    background: "#F4F4F6",
-    padding: "14px 10px",
-    borderRadius: "4px"
-  },
-  ".activeThemeInnner": {
-    borderRadius: "7px",
-    padding: "16px",
-    boxShadow: "1px 2px 5px 0px #00000014",
-    background: "#fff"
-  },
-  ".flexAlign": {
-    display: "flex",
-    alignItems: "center"
-  },
-  ".activeColorBox, .xsColorBox": {
-    width: "24px",
-    height: "24px",
-    borderRadius: "5px",
-    border: `1px solid #929292`
-  },
-  ".themeCard": {
-    borderRadius: "7px",
-    padding: "16px",
-    border: "1px solid #F3F3F3",
-    boxShadow: "1px 2px 5px 0px #00000014",
-    background: "white",
-    flexWrap: "nowrap"
-  },
-  ".themeCardWrapper": {
-    padding: "10px",
-    borderRadius: "4px",
-    cursor: "pointer",
-    "&.active": {
-      background: "#ECF2FF"
-    }
-  },
-  ".primaryCard, .secondaryCard": {
-    width: "44px",
-    height: "44px",
-    borderRadius: "5px",
-    border: `1px solid #929292`
-  },
-  ".otherColors": {
-    display: "flex",
-    flexWrap: "wrap",
-    width: "48px",
-    ".smallCard": {
-      width: "20px",
-      height: "20px",
+const Style = ({
+  appTheme
+}) => {
+  const {
+    background,
+    textColor,
+    tv_text,
+    uploadFileBg,
+    closeButtonBgColor,
+    closeButtonSvgStroke,
+    tv_hover_bg,
+    deviderBgColor
+  } = appTheme?.palette?.editor || {};
+  return {
+    ".fs-12": {
+      fontSize: "12px"
+    },
+    ".fs-14": {
+      fontSize: "14px"
+    },
+    ".fw-500": {
+      fontWeight: "500"
+    },
+    ".fw-600": {
+      fontWeight: "600"
+    },
+    ".pointer": {
+      cursor: "pointer"
+    },
+    ".transformNone": {
+      textTransform: "none"
+    },
+    "& .MuiDrawer-paper": {
+      background: background,
+      color: textColor
+    },
+    "& .textSecondary": {
+      color: tv_text
+    },
+    ".settingsContainer": {
+      width: "340px",
+      padding: "16px 5px",
+      ".header": {
+        borderBottom: `1px solid ${deviderBgColor}`,
+        paddingBottom: "16px",
+        marginBottom: "16px"
+      }
+    },
+    ".title": {
+      fontWeight: "700",
+      fontSize: "14px"
+    },
+    ".closeBtn": {
+      width: "26px",
+      height: "26px",
+      BorderRadius: "4px",
+      flexShrik: "0",
+      padding: "4px",
+      borderRadius: "4px",
+      background: closeButtonBgColor,
+      color: `${closeButtonSvgStroke} !important`,
+      "& svg": {
+        color: `${closeButtonSvgStroke} !important`
+      }
+    },
+    ".backBtn": {
+      color: `${closeButtonSvgStroke} !important`,
+      "& svg": {
+        color: `${closeButtonSvgStroke} !important`
+      }
+    },
+    ".activeTheme": {
+      background: uploadFileBg,
+      padding: "14px 10px",
+      borderRadius: "4px"
+    },
+    ".activeThemeInnner": {
+      borderRadius: "7px",
+      padding: "16px",
+      boxShadow: "1px 2px 5px 0px #00000014",
+      background: background
+    },
+    "& .activeThemeTitle": {
+      paddingBottom: "6px"
+    },
+    ".flexAlign": {
+      display: "flex",
+      alignItems: "center"
+    },
+    ".activeColorBox, .xsColorBox": {
+      width: "24px",
+      height: "24px",
       borderRadius: "5px",
       border: `1px solid #929292`
-    }
-  },
-  ".sectionDetail": {
-    borderRadius: "4px",
-    background: "#fff"
-  },
-  ".sectionTitle": {
-    borderBottom: `1px solid #DCE4EC`,
-    fontWeight: "600",
-    fontSize: "14px"
-  },
-  // ".activeThemeInnner": {
-  //   borderRadius: "7px",
-  //   padding: "16px",
-  //   boxShadow: "1px 2px 5px 0px #00000014",
-  //   background: "#fff",
-  // },
-  ".activeWrapper": {
-    background: "#ECF2FF",
-    padding: "14px 10px",
-    position: "relative",
-    ".tickIcon": {
-      position: "absolute",
-      right: "5px",
-      top: "8px"
-    }
-  },
-  ".settingAccordion": {
-    background: "#fff",
-    border: "1px solid #F3F3F3",
-    boxShadow: "1px 2px 5px 0px #00000014",
-    borderRadius: "7px",
-    marginTop: "10px",
-    marginBottom: "10px",
-    padding: "0px 12px",
-    "&:before": {
-      background: "transparent"
-    },
-    ".MuiAccordionSummary-root ": {
-      minHeight: "45px",
-      padding: "0px",
-      "&.Mui-expanded": {
-        borderBottom: `1px solid #DCE4EC`
+    },
+    ".themeCard": {
+      borderRadius: "7px",
+      padding: "16px",
+      border: `1px solid ${uploadFileBg}`,
+      boxShadow: "1px 2px 5px 0px #00000014",
+      background: background,
+      flexWrap: "nowrap"
+    },
+    ".themeCardWrapper": {
+      padding: "10px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      "&.active": {
+        background: "#ECF2FF"
       }
     },
-    ".MuiAccordionSummary-content ": {
-      padding: "12px 0px !important",
-      margin: "0px !important",
-      minHeight: "45px",
-      fontSize: "14px",
-      fontWeight: "600"
+    ".primaryCard, .secondaryCard": {
+      width: "44px",
+      height: "44px",
+      borderRadius: "5px",
+      border: `1px solid #929292`
+    },
+    ".otherColors": {
+      display: "flex",
+      flexWrap: "wrap",
+      width: "48px",
+      ".smallCard": {
+        width: "20px",
+        height: "20px",
+        borderRadius: "5px",
+        border: `1px solid #929292`
+      }
+    },
+    ".sectionDetail": {
+      borderRadius: "4px",
+      background: background
+    },
+    ".sectionTitle": {
+      borderBottom: `1px solid ${deviderBgColor}`,
+      fontWeight: "600",
+      fontSize: "14px"
+    },
+    // ".activeThemeInnner": {
+    //   borderRadius: "7px",
+    //   padding: "16px",
+    //   boxShadow: "1px 2px 5px 0px #00000014",
+    //   background: "#fff",
+    // },
+    ".activeWrapper": {
+      background: tv_hover_bg,
+      padding: "14px 10px",
+      position: "relative",
+      ".tickIcon": {
+        position: "absolute",
+        right: "5px",
+        top: "8px"
+      }
+    },
+    ".settingAccordion": {
+      background: background,
+      color: textColor,
+      border: `1px solid ${deviderBgColor}`,
+      boxShadow: "1px 2px 5px 0px #00000014",
+      borderRadius: "7px",
+      marginTop: "10px",
+      marginBottom: "10px",
+      padding: "0px 12px",
+      "&:before": {
+        background: "transparent"
+      },
+      ".MuiAccordionSummary-expandIconWrapper": {
+        color: textColor
+      },
+      ".MuiAccordionSummary-root ": {
+        // minHeight: "20px",
+        padding: "0px",
+        "&.Mui-expanded": {
+          minHeight: "48px",
+          borderBottom: `1px solid ${deviderBgColor}`
+        }
+      },
+      ".MuiAccordionSummary-content ": {
+        // padding: "12px 0px !important",
+        margin: "0px !important",
+        // minHeight: "45px",
+        fontSize: "14px",
+        fontWeight: "600"
+      },
+      ".MuiAccordionDetails-root ": {
+        padding: "12px 0px"
+      }
     },
-    ".MuiAccordionDetails-root ": {
-      padding: "12px 0px"
+    ".MuiTab-root": {
+      color: textColor
     }
-  }
-});
+  };
+};
 export default Style;

package/dist/Editor/themeSettingsAI/index.js

@@ -235,8 +235,7 @@ const ThemeSettingsAI = props => {
                 children: "Upload a logo or image"
               }), /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
-                className: "fs-12",
-                color: "textSecondary",
+                className: "fs-12 textSecondary",
                 children: "Click here to upload PDF, PPT, and image files."
               })]
             })]

package/dist/Editor/themeSettingsAI/saveTheme.js

@@ -25,7 +25,8 @@ const SaveTheme = props => {
   const [form, setForm] = useState(defaultFormData);
   const {
     name,
-    mood_name
+    mood_name,
+    template_tags
   } = form;
   const updateForm = update => {
     setForm(prev => ({
@@ -51,7 +52,6 @@ const SaveTheme = props => {
     }
     return err;
   };
-  console.log("className", className);
   return /*#__PURE__*/_jsxs(Box, {
     className: className,
     children: [/*#__PURE__*/_jsx(Button, {
@@ -81,10 +81,11 @@ const SaveTheme = props => {
         children: [/*#__PURE__*/_jsxs(Grid, {
           container: true,
           justifyContent: "space-between",
+          alignItems: "center",
           children: [/*#__PURE__*/_jsx(Typography, {
             variant: "h4",
             sx: {
-              fontSize: "20px"
+              fontSize: "18px"
             },
             className: "fw-600",
             children: "Save Your theme"
@@ -135,6 +136,23 @@ const SaveTheme = props => {
           value: mood_name
         }), /*#__PURE__*/_jsx(Error, {
           error: error?.mood_name
+        }), /*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fw-500",
+          sx: {
+            pt: 2,
+            pb: 1
+          },
+          children: "Template Tags"
+        }), /*#__PURE__*/_jsx(TextField, {
+          variant: "outlined",
+          size: "small",
+          placeholder: "template_tags",
+          fullWidth: true,
+          onChange: e => updateForm({
+            template_tags: e.target.value
+          }),
+          value: template_tags
         }), /*#__PURE__*/_jsxs(Grid, {
           container: true,
           justifyContent: "flex-end",

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -170,7 +170,7 @@ export const isMarkBtnActive = (editor, format) => {
       return isMarkActive(editor, format);
   }
 };
-export const getSelectedElementStyle = (styleProperty, editor) => {
+export const getSelectedElementStyle = (styleProperty, editor, format) => {
   try {
     if (!editor.selection) {
       return "";
@@ -178,6 +178,12 @@ export const getSelectedElementStyle = (styleProperty, editor) => {
     if (Range.isCollapsed(editor.selection)) {
       return "";
     }
+    if (format) {
+      const value = activeMark(editor, format, true);
+      if (value) {
+        return value;
+      }
+    }
     const domRange = ReactEditor.toDOMRange(editor, editor.selection);
     const selectedDomNode = domRange.commonAncestorContainer;
 
@@ -215,7 +221,7 @@ export const upateBlockActive = (editor, format, attr = {}) => {
     });
   }
 };
-export const activeMark = (editor, format) => {
+export const activeMark = (editor, format, noDefaultValue) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
@@ -225,7 +231,7 @@ export const activeMark = (editor, format) => {
   };
   try {
     const marks = Editor.marks(editor);
-    let defaultValue = defaultMarkData[format];
+    let defaultValue = noDefaultValue ? "" : defaultMarkData[format];
     const {
       selection
     } = editor || {};
@@ -371,6 +377,7 @@ export const getMarked = (leaf, children, theme) => {
       rel: "noreferrer",
       target: "_blank",
       href: leaf.text,
+      className: "hyperLink",
       children: children
     });
   }

package/package.json

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