@flozy/editor 5.7.6 → 5.7.7

package/dist/Editor/CommonEditor.js

@@ -96,8 +96,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content,
-    needLayout: otherProps?.needLayout
+    data: content
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -168,11 +167,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const debounced = useDebouncedCallback(
   // function
   value => {
-    debouncedValue.current = value;
     const {
       value: strVal,
       ...restVal
     } = getOnSaveData(value);
+    debouncedValue.current = value;
     onSave(strVal, restVal);
   },
   // delay in ms
@@ -183,7 +182,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || ""
+      title: serializeToText(title?.children) || "Untitled"
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -597,9 +596,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                show: showViewport,
                 onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })

package/dist/Editor/Editor.css

@@ -1263,19 +1263,6 @@ blockquote {
   pointer-events: auto;
 }
 
-@media (max-width: 899px) {
-  .MuiPopover-root {
-    z-index: 1302 !important;
-  }
-  canvas {
-    max-width: 100% !important;
-  }
-}
-
-.settingsHeader {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-}
 .hideScroll {
   overflow-anchor: none;
 }
@@ -1291,6 +1278,20 @@ blockquote {
 .hideScroll::-webkit-scrollbar-thumb:hover {
   background: none !important;
 }
+@media (max-width: 899px) {
+  .MuiPopover-root {
+    z-index: 1302 !important;
+  }
+
+  canvas {
+    max-width: 100% !important;
+  }
+}
+
+.settingsHeader {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+}
 
 .custom-scroll::-webkit-scrollbar {
   height: .6rem; 

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -6,7 +6,7 @@ import AIInput from "./AIInput";
 import { ReactEditor, useSlate } from "slate-react";
 import { Node, Range, Transforms } from "slate";
 import { MODES } from "./helper";
-import { getSelectedText, getSlateDom, viewSlateSelection } from "../../utils/helper";
+import { getSelectedText, getSlateDom } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
 import useEditorScroll from "../../hooks/useEditorScroll";
@@ -286,7 +286,17 @@ function PopoverAIInput({
   };
   useEffect(() => {
     if (openAI && getSelectedText(editor).trim()) {
-      viewSlateSelection();
+      const customSelection = document.querySelectorAll(".slate-highlight");
+      const selectionBg = "rgba(35, 131, 226, 0.35)";
+      if (customSelection?.length) {
+        customSelection?.forEach(el => el.style.background = selectionBg);
+
+        // if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges(); // Clears the selection
+        }
+      }
     }
   }, [editor.selection, openAI]);
   return /*#__PURE__*/_jsxs("div", {

package/dist/Editor/Elements/Button/EditorButton.js

@@ -162,7 +162,6 @@ const EditorButton = props => {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
                 marginBottom: "0px !important",
-                ...classes.buttonMoreOption,
                 ...classes.buttonMoreOption3
               },
               ...btnProps,
@@ -265,7 +264,7 @@ const EditorButton = props => {
             ...btnSp,
             borderStyle: borderStyle || "solid",
             color: `${textColor || "#FFFFFF"}`,
-            fontSize: textSize || "12px",
+            fontSize: textSize || "inherit",
             fontFamily: fontFamily || "PoppinsRegular",
             display: "inline-flex",
             alignItems: "center",

package/dist/Editor/Elements/DataView/DataView.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Node, Path, Transforms } from "slate";
-import { ReactEditor, useSlate } from "slate-react";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
 import { DataViewProvider } from "./Providers/DataViewProvider";
 import useDataViewStyles from "./styles";
@@ -15,7 +15,7 @@ const DataView = props => {
     theme: appTheme
   } = useEditorContext();
   const theme = useTheme();
-  const editor = useSlate();
+  const editor = useSlateStatic();
   const {
     attributes,
     children,
@@ -113,8 +113,7 @@ const DataView = props => {
         onDuplicate: onDuplicate,
         readOnly: readOnly,
         title: title,
-        onTitleChange: onTitleChange,
-        path: path
+        onTitleChange: onTitleChange
       }), /*#__PURE__*/_jsx(LayoutView, {
         readOnly: readOnly,
         children: children

package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { TextField } from "@mui/material";
 import { useDataView } from "../../Providers/DataViewProvider";
-import { focusDynamicTableInput } from "../../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NumberType = props => {
   const {
@@ -17,7 +16,6 @@ const NumberType = props => {
     onChange(rowIndex, {
       [property]: e?.target?.value
     });
-    focusDynamicTableInput(e);
   };
   return /*#__PURE__*/_jsx(TextField, {
     type: "number",
@@ -26,9 +24,7 @@ const NumberType = props => {
     value: value,
     size: "small",
     onChange: handleChange,
-    disabled: readOnly,
-    id: `tv-number-input-${rowIndex}-${property}` // * should be unique
+    disabled: readOnly
   });
 };
-
 export default NumberType;

package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { TextField } from "@mui/material";
 import { useDataView } from "../../Providers/DataViewProvider";
-import { focusDynamicTableInput } from "../../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TextType = props => {
   const {
@@ -17,7 +16,6 @@ const TextType = props => {
     onChange(rowIndex, {
       [property]: e?.target?.value
     });
-    focusDynamicTableInput(e);
   };
   const formatValue = () => {
     if (typeof value === "string") {
@@ -32,9 +30,7 @@ const TextType = props => {
     value: formatValue(value),
     size: "small",
     onChange: handleChange,
-    disabled: readOnly,
-    id: `tv-text-input-${rowIndex}-${property}` // * should be unique
+    disabled: readOnly
   });
 };
-
 export default TextType;

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -5,7 +5,6 @@ import FilterSort from "./FilterSort";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import Icon from "../../../common/Icon";
 import { useEditorContext } from "../../../hooks/useMouseMove";
-import { focusDynamicTableInput } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FilterView = props => {
@@ -16,8 +15,7 @@ const FilterView = props => {
     onEnter,
     readOnly,
     title,
-    onTitleChange,
-    path
+    onTitleChange
   } = props;
   const {
     sort,
@@ -72,7 +70,6 @@ const FilterView = props => {
   };
   const handleTitleChange = e => {
     onTitleChange(e?.target?.value);
-    focusDynamicTableInput(e);
   };
   const handleEnter = e => {
     if (e?.key === "Enter") {
@@ -99,25 +96,24 @@ const FilterView = props => {
         },
         value: title,
         onChange: handleTitleChange,
-        onKeyUp: handleEnter,
-        id: `tv-title-input-${path.join("|")}`
+        onKeyUp: handleEnter
       }) : title || "Untitled"
     }), /*#__PURE__*/_jsxs(Box, {
       className: "tv-fi-wrpr",
       sx: {
-        alignItems: "center"
+        alignItems: 'center'
       },
       children: [/*#__PURE__*/_jsxs(Box, {
         className: `tv-sb mr ${toggle ? "open" : ""}`,
         sx: {
-          minHeight: "32px"
+          minHeight: '32px'
         },
         children: [/*#__PURE__*/_jsx(IconButton, {
           type: "button",
           sx: {
-            "& svg": {
-              width: "14px",
-              height: "14px"
+            '& svg': {
+              width: '14px',
+              height: '14px'
             }
           },
           "aria-label": "search",
@@ -141,12 +137,12 @@ const FilterView = props => {
         className: ` ${sort?.length > 0 ? "active" : ""}`,
         onClick: handleSortClick,
         sx: {
-          "& svg": {
+          '& svg': {
             strokeWidth: 1.2
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "sortBy"
+          icon: 'sortBy'
         })
       }), /*#__PURE__*/_jsx(FilterSort, {
         open: open,
@@ -156,7 +152,7 @@ const FilterView = props => {
       }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
         className: "mr",
         sx: {
-          "& svg": {
+          '& svg': {
             fill: theme?.palette?.editor?.tv_stroke
           }
         },
@@ -166,7 +162,7 @@ const FilterView = props => {
         className: "mr",
         onClick: handleDeleteRow,
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "trashIcon"
+          icon: 'trashIcon'
         })
       }) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
         sx: classes.basicMenu,
@@ -189,24 +185,24 @@ const FilterView = props => {
           onClick: onMenuClick("Duplicate"),
           children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              marginRight: "5px",
-              display: " flex",
-              alignItems: "center"
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
             },
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: "duplicateIcon"
+              icon: 'duplicateIcon'
             })
           }), "Duplicate"]
         }), /*#__PURE__*/_jsxs(MenuItem, {
           onClick: onMenuClick("Delete"),
           children: [" ", /*#__PURE__*/_jsx(Box, {
             sx: {
-              marginRight: "5px",
-              display: " flex",
-              alignItems: "center"
+              marginRight: '5px',
+              display: ' flex',
+              alignItems: 'center'
             },
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: "trashIcon"
+              icon: 'trashIcon'
             })
           }), "Delete"]
         })]

package/dist/Editor/Elements/Search/SearchList.js

@@ -185,9 +185,6 @@ const SearchAndDocList = ({
             gap: 1,
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
-              sx: {
-                maxWidth: 'calc(100% - 45px)'
-              },
               children: /*#__PURE__*/_jsxs(Grid, {
                 container: true,
                 alignItems: "center",
@@ -210,9 +207,6 @@ const SearchAndDocList = ({
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
                   item: true,
-                  sx: {
-                    maxWidth: '100%'
-                  },
                   children: /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       fontSize: "12px",
@@ -225,8 +219,7 @@ const SearchAndDocList = ({
                       maxWidth: '230px',
                       textAlign: 'left',
                       '@media only screen and (min-width: 350px) and (max-width: 899px)': {
-                        maxWidth: '100%',
-                        width: '100%'
+                        maxWidth: '100%'
                       }
                     },
                     children: title

package/dist/Editor/Elements/SimpleText/style.js

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: "inline-flex",
-      alignItems: "center",
+      display: 'inline-flex',
+      alignItems: 'center',
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Title/title.js

@@ -1,24 +1,12 @@
 import React from "react";
-import { Text } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
-const isEmptyTextNode = node => {
-  if (Text.isText(node)) {
-    return !node.text.trim();
-  }
-  return false;
-};
 const Title = props => {
   const {
-    element,
     attributes,
-    children,
-    customProps
+    children
   } = props;
-  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
-    placeholder: "Title",
-    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = theme => ({
+const VariableStyles = () => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,26 +37,8 @@ const VariableStyles = theme => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
-    "& .MuiPaper-root": {
-      borderRadius: '8px',
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`
-    },
-    "& .MuiList-root": {
-      padding: '0px'
-    },
-    "& .MuiButtonBase-root": {
-      margin: '6px',
-      borderRadius: '8px',
-      padding: '6px 14px',
-      fontSize: '14px',
-      fontWeight: '400',
-      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
-      "&:hover": {
-        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-      }
-    },
     "& .Mui-selected": {
-      backgroundColor: 'unset !important'
+      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,15 +3,11 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
-import { useEditorContext } from "../../hooks/useMouseMove";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const {
-    theme
-  } = useEditorContext();
-  const classes = VariableStyles(theme);
+  const classes = VariableStyles();
   const editor = useSlateStatic();
   const {
     options
@@ -28,7 +24,7 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {

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

@@ -4,7 +4,6 @@ import TemplateCard from "./TemplateCard";
 import FullViewCard from "./FullViewCard";
 import ButtonTemplateCard from "./ButtonTemplatesCard";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CATEGORIES_SORT_INDEX = {
   Brief: 1,
@@ -47,7 +46,7 @@ const ProgressBar = ({
       alignItems: "center",
       margin: 0,
       padding: 0,
-      height: "300px",
+      height: "50px",
       overflow: "hidden"
     },
     children: /*#__PURE__*/_jsx(CircularProgress, {})
@@ -70,32 +69,34 @@ const AddTemplates = props => {
   const [categories, setCategories] = useState([]);
   const [category, setCategory] = useState("");
   const [templates, setTemplates] = useState([]);
+  const [filteredTemplates, setFilteredTemplates] = useState([]);
   useEffect(() => {
-    getCategoryList();
+    getTemplatesList();
   }, []);
-  const getCategoryList = async () => {
-    setLoading(true);
-    const categoryDB = await services("listCategory");
-    if (categoryDB?.data?.Template?.length > 0) {
-      setCategories(categoryDB.data.Template);
-      setCategory(categoryDB.data.Template[0]);
-      getTemplatesList(categoryDB.data.Template[0]);
-    }
-    setLoading(false);
+  const sortCategory = (a, b) => {
+    return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
   };
-  const getTemplatesList = async selectedCategory => {
+  const getTemplatesList = async () => {
     setLoading(true);
-    const result = await services("listTemplates", {
-      category: selectedCategory
-    });
-    setTemplates(result?.data || []);
+    const result = await services("listTemplates", {});
+    const tempList = result?.data?.filter(f => f.type === "Template");
+    const lic = tempList?.reduce((a, b) => {
+      if (a.indexOf(b.category) < 0) {
+        a.push(b.category);
+      }
+      return a;
+    }, []).sort(sortCategory);
+    const ft = tempList?.filter(f => f.category === lic[0]);
+    setTemplates(tempList);
+    setCategories(lic);
+    setCategory(lic[0]);
+    setFilteredTemplates(ft);
     setLoading(false);
   };
   const handleChange = (event, newValue) => {
-    setTemplates([]);
     onSearch("");
     setCategory(newValue);
-    getTemplatesList(newValue);
+    setFilteredTemplates(templates.filter(f => f.category === newValue));
   };
   const onSelectTemplate = card => async () => {
     try {
@@ -182,16 +183,16 @@ const AddTemplates = props => {
         data: categories,
         handleChange: handleChange
       })
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
       spacing: 0,
       className: `${fullScreen ? "fullscreen" : ""}`,
       sx: classes.templateCardsWrpr,
-      children: loading ? /*#__PURE__*/_jsx(ProgressBar, {
+      children: [/*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
-      }) : /*#__PURE__*/_jsx(_Fragment, {
-        children: templates.filter(filterByTitle).map(renderTemplate)
-      })
+      }), filteredTemplates.filter(filterByTitle).map(m => {
+        return renderTemplate(m);
+      })]
     })]
   });
 };

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js

@@ -51,8 +51,7 @@ const alignmentOptions = [{
 }];
 function SelectAlignment({
   editor,
-  classes,
-  closeMainPopup
+  classes
 }) {
   const selected = useMemo(() => {
     return alignmentOptions.find(t => isBlockActive(editor, t.value));
@@ -60,7 +59,6 @@ function SelectAlignment({
   const onChange = (format, option) => {
     if (option.type === "block") {
       toggleBlock(editor, format);
-      closeMainPopup();
     }
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -59,7 +59,7 @@ function SelectFontSize({
           size = value;
         }
       });
-      return isNaN(parseInt(size)) ? 14 : parseInt(size);
+      return parseInt(size);
     } catch (err) {
       return "";
     }

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js

@@ -68,8 +68,7 @@ const listOptions = [{
 }];
 function SelectList({
   editor,
-  classes,
-  closeMainPopup
+  classes
 }) {
   const selectedList = useMemo(() => {
     return listOptions.find(t => isBlockActive(editor, t.value));
@@ -80,7 +79,6 @@ function SelectList({
     } else if (option.type === "accordion") {
       insertAccordion(editor);
     }
-    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: listOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -125,6 +125,7 @@ function SelectTypography({
         ...upData
       }
     });
+    closeMainPopup();
   };
   const selectedBlock = useMemo(() => {
     return typographyOptions.find(t => {
@@ -166,7 +167,6 @@ function SelectTypography({
       const [sizeInNumber] = size.split("px");
       updateMarkData(Number(sizeInNumber));
     }
-    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: typographyOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -14,7 +14,6 @@ import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
 import InfinityAITool from "./InfinityAITool";
-import { viewSlateSelection } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -61,15 +60,13 @@ const MiniTextFormat = props => {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup
+          editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup
+          editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -101,10 +98,7 @@ const MiniTextFormat = props => {
           editor: editor,
           customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(IconButton, {
-          onClick: e => {
-            viewSlateSelection();
-            setAnchorEl(document.getElementById("mini-text-editor-wrapper"));
-          },
+          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
           className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {

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

@@ -416,11 +416,6 @@ const usePopupStyle = theme => ({
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
-    '& .MuiInputBase-root': {
-      '& input': {
-        border: "none !important"
-      }
-    },
     "& svg": {
       width: "20px",
       height: "24px"

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

@@ -9,7 +9,6 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
-import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -84,7 +83,6 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
-      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection]);
   useEffect(() => {

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,11 +1,7 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { defaultFonts, googleFontList, otherFonts } from "./FontList";
-import CircularProgress from '@mui/material/CircularProgress';
-import Box from "@mui/material/Box";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -14,14 +10,12 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
-  const [loading, setLoading] = useState(false);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
-        console.log("All fonts have been loaded");
-        setLoading(false);
+        // console.log("All fonts have been loaded");
         return;
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
@@ -33,7 +27,7 @@ const FontLoader = props => {
         classes: false,
         timeout: 2000,
         active: () => {
-          console.log(`Fonts loaded successfully: ${batch}`);
+          // console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;
           retryCount = 0; // Reset retry count for the next batch
           loadNextBatch();
@@ -43,7 +37,7 @@ const FontLoader = props => {
 
           if (retryCount < maxRetries) {
             retryCount++;
-            console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
+            // console.log(`Retrying batch (${retryCount}/${maxRetries})...`);
             // Retry loading the same batch
             loadNextBatch();
           } else {
@@ -75,7 +69,6 @@ const FontLoader = props => {
       }).catch(err => {
         // console.log(err);
       });
-      // setLoading(true);
     } else {
       function correctFontArray(fontString) {
         let fontsArray = fontString.split(",");
@@ -97,25 +90,9 @@ const FontLoader = props => {
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
       families = families.filter(font => googleFontList.includes(font));
-      // setLoading(true);
       loadFontsInBatches(families);
     }
   }, []);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: loading ? /*#__PURE__*/_jsx(Box, {
-      sx: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 99999,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/_jsx(CircularProgress, {})
-    }) : null
-  });
+  return null;
 };
 export default FontLoader;

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

@@ -62,7 +62,6 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
-            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js

@@ -9,23 +9,17 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange,
-    show
+    onChange
   } = props;
   const classes = useSwitchViewport();
   const {
-    setSelectedElement,
     setActiveBreakPoint
   } = useEditorContext();
   useEffect(() => {
-    // to reset selection on viewport changes - FS-6589
-    setSelectedElement({});
+    console.log(breakpoint);
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
-    style: {
-      display: show ? "block" : "none"
-    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Desktop View",
       children: /*#__PURE__*/_jsx(IconButton, {

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

@@ -73,11 +73,6 @@ const BackgroundImage = props => {
             children: "REMOVE"
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              padding: 0,
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

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

@@ -1,7 +1,6 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,10 +15,7 @@ const RenderCard = ({
   return /*#__PURE__*/_jsx(Card, {
     sx: {
       position: 'relative',
-      padding: "10px",
-      '& .MuiCheckbox-root svg': {
-        fill: 'unset !important'
-      }
+      padding: "10px"
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
@@ -85,9 +81,6 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
-  const {
-    theme
-  } = useEditorContext();
   const activeCard = value === selectedCard;
   const handleChange = e => {
     if (selectedCard === data?.value) {
@@ -106,8 +99,7 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        background: theme?.palette?.editor?.miniToolBarBackground,
-        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

package/dist/Editor/common/Uploader.js

@@ -4,7 +4,6 @@ import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
-import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,9 +18,6 @@ const Uploader = props => {
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
   const [uploading, setUploading] = useState(false);
-  const {
-    theme
-  } = useEditorContext();
   const handleChange = async e => {
     const uFile = e.target.files[0];
     const strImage = await convertBase64(uFile);
@@ -103,10 +99,6 @@ const Uploader = props => {
           className: "uploadImageSection",
           children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/commonStyle.js

@@ -49,19 +49,15 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& .MuiPaper-root": {
-        border: `unset !important`,
-        borderRadius: '0px',
-        height: 'fit-content',
-        padding: '2px'
-      },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"
       },
-      "& p": {
-        marginBottom: "7px",
-        marginTop: "4px"
+      "& .MuiPaper-root": {
+        border: 'unset !important',
+        borderRadius: '0px',
+        height: 'fit-content',
+        padding: '2px'
       },
       "& .muiIconsListParent": {
         "& svg": {
@@ -75,6 +71,9 @@ const useCommonStyle = theme => ({
         },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
@@ -471,6 +470,10 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
@@ -483,10 +486,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  pageSettingPopUpRoot: {
-    padding: "16px 8px 16px 10px!important",
-    height: "100%"
-  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

package/dist/Editor/helper/index.js

@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
+    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/plugins/withLayout.js

@@ -39,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: ""
+              text: "Untitled"
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -173,9 +173,10 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        color: "inherit",
-        background: "var(--slate-highlight-bg)"
+        color: "inherit"
       },
+      className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
+      ,
       children: children
     });
   }

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 24,
-      top: 10,
-      right: 24,
-      bottom: 10
+      left: 16,
+      top: 8,
+      right: 16,
+      bottom: 8
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/draftToSlate.js

@@ -82,8 +82,7 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
 };
 export const draftToSlate = props => {
   const {
-    data,
-    needLayout
+    data
   } = props;
   if (data?.blocks && data?.blocks?.length > 0) {
     const converted = data?.blocks?.reduce((a, b) => {
@@ -105,7 +104,7 @@ export const draftToSlate = props => {
     return data;
   } else {
     return [{
-      type: needLayout ? "title" : "paragraph",
+      type: "paragraph",
       children: [{
         text: ""
       }]

package/dist/Editor/utils/helper.js

@@ -625,10 +625,6 @@ export const isRestrictedNode = (event, editor) => {
     return isNodeRestricted;
   }
 };
-export function capitalizeFirstLetter(str) {
-  if (!str) return str;
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
 export const insertLineBreakAtEndOfPath = (editor, path) => {
   try {
     const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
@@ -647,13 +643,6 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
     console.log(err);
   }
 };
-export function isHavingSelection(editor) {
-  try {
-    return editor?.selection && !Range.isCollapsed(editor.selection);
-  } catch (err) {
-    console.log(err);
-  }
-}
 const omitNodes = ["site-settings", "page-settings"];
 export function getInitialValue(value = [], readOnly) {
   if (readOnly === "readonly" && value?.length) {
@@ -684,17 +673,20 @@ export function getInitialValue(value = [], readOnly) {
   }
   return value;
 }
+export function capitalizeFirstLetter(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export function isHavingSelection(editor) {
+  try {
+    return editor?.selection && !Range.isCollapsed(editor.selection);
+  } catch (err) {
+    console.log(err);
+  }
+}
 export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
   return `${defaultCls} ${selected ? selectedClsName : ""}`;
 }
-export function handleNegativeInteger(val) {
-  return val < 0 ? 0 : val;
-}
-export const containsSurrogatePair = text => {
-  // Match surrogate pairs (high and low surrogate)
-  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
-  return surrogatePairRegex.test(text);
-};
 export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
   try {
     const options = {
@@ -708,6 +700,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
     return [];
   }
 };
+export const containsSurrogatePair = text => {
+  // Match surrogate pairs (high and low surrogate)
+  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+  return surrogatePairRegex.test(text);
+};
 export const getSlateDom = (editor, range) => {
   try {
     const slateDom = ReactEditor.toDOMRange(editor, range);
@@ -716,44 +713,6 @@ export const getSlateDom = (editor, range) => {
     console.log(err);
   }
 };
-
-// The inputs inside the dynamic table lose focus after calling `setNodes` on the first `onChange` event.
-// To replicate this issue, insert some paragraph nodes above the dynamic table, then type something in the title.
-// After typing the first word, the input loses focus.
-export const focusDynamicTableInput = e => {
-  setTimeout(() => {
-    const input = document.getElementById(e.target.id);
-    if (input) {
-      // Check if the input is not already focused
-      if (document.activeElement !== input) {
-        const length = input.value.length;
-        // Focus on the input
-        input.focus();
-
-        // number input not supports selection
-        if (e.target.type !== "number") {
-          // Set the cursor to the end
-          input.setSelectionRange(length, length);
-        }
-      }
-    }
-  }, 0);
-};
-export const clearWindowSelection = () => {
-  const selection = window.getSelection();
-  if (selection) {
-    selection.removeAllRanges(); // Clears the selection
-  }
-};
-
-export const viewSlateSelection = () => {
-  // if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
-  clearWindowSelection();
-  const selectionBg = "rgba(35, 131, 226, 0.35)";
-  const root = document.documentElement;
-  root.style.setProperty("--slate-highlight-bg", selectionBg);
-};
-export const hideSlateSelection = () => {
-  const root = document.documentElement;
-  root.style.setProperty("--slate-highlight-bg", "none");
-};
+export function handleNegativeInteger(val) {
+  return val < 0 ? 0 : val;
+}

package/package.json

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