@flozy/editor 5.7.5 → 5.7.6

package/dist/Editor/CommonEditor.js

@@ -543,7 +543,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         transition: "all 0.3s",
                         minHeight: "87%",
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto",
-                        paddingTop: hasTopBanner() ? '20px !important' : isMobile ? '10px !important' : ''
+                        paddingTop: hasTopBanner() ? "20px !important" : isMobile ? "10px !important" : ""
                       },
                       "data-info": outsideEditorClickLabel,
                       children: [/*#__PURE__*/_jsx(Editable, {

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 } from "../../utils/helper";
+import { getSelectedText, getSlateDom, viewSlateSelection } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
 import useEditorScroll from "../../hooks/useEditorScroll";
@@ -286,17 +286,7 @@ function PopoverAIInput({
   };
   useEffect(() => {
     if (openAI && getSelectedText(editor).trim()) {
-      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
-        }
-      }
+      viewSlateSelection();
     }
   }, [editor.selection, openAI]);
   return /*#__PURE__*/_jsxs("div", {

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

@@ -4,6 +4,7 @@ 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,
@@ -46,7 +47,7 @@ const ProgressBar = ({
       alignItems: "center",
       margin: 0,
       padding: 0,
-      height: "50px",
+      height: "300px",
       overflow: "hidden"
     },
     children: /*#__PURE__*/_jsx(CircularProgress, {})
@@ -69,34 +70,32 @@ const AddTemplates = props => {
   const [categories, setCategories] = useState([]);
   const [category, setCategory] = useState("");
   const [templates, setTemplates] = useState([]);
-  const [filteredTemplates, setFilteredTemplates] = useState([]);
   useEffect(() => {
-    getTemplatesList();
+    getCategoryList();
   }, []);
-  const sortCategory = (a, b) => {
-    return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
+  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 getTemplatesList = async () => {
+  const getTemplatesList = async selectedCategory => {
     setLoading(true);
-    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);
+    const result = await services("listTemplates", {
+      category: selectedCategory
+    });
+    setTemplates(result?.data || []);
     setLoading(false);
   };
   const handleChange = (event, newValue) => {
+    setTemplates([]);
     onSearch("");
     setCategory(newValue);
-    setFilteredTemplates(templates.filter(f => f.category === newValue));
+    getTemplatesList(newValue);
   };
   const onSelectTemplate = card => async () => {
     try {
@@ -183,16 +182,16 @@ const AddTemplates = props => {
         data: categories,
         handleChange: handleChange
       })
-    }), /*#__PURE__*/_jsxs(Grid, {
+    }), /*#__PURE__*/_jsx(Grid, {
       container: true,
       spacing: 0,
       className: `${fullScreen ? "fullscreen" : ""}`,
       sx: classes.templateCardsWrpr,
-      children: [/*#__PURE__*/_jsx(ProgressBar, {
+      children: loading ? /*#__PURE__*/_jsx(ProgressBar, {
         loading: loading
-      }), filteredTemplates.filter(filterByTitle).map(m => {
-        return renderTemplate(m);
-      })]
+      }) : /*#__PURE__*/_jsx(_Fragment, {
+        children: templates.filter(filterByTitle).map(renderTemplate)
+      })
     })]
   });
 };

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

@@ -51,7 +51,8 @@ const alignmentOptions = [{
 }];
 function SelectAlignment({
   editor,
-  classes
+  classes,
+  closeMainPopup
 }) {
   const selected = useMemo(() => {
     return alignmentOptions.find(t => isBlockActive(editor, t.value));
@@ -59,6 +60,7 @@ 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 parseInt(size);
+      return isNaN(parseInt(size)) ? 14 : parseInt(size);
     } catch (err) {
       return "";
     }

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

@@ -68,7 +68,8 @@ const listOptions = [{
 }];
 function SelectList({
   editor,
-  classes
+  classes,
+  closeMainPopup
 }) {
   const selectedList = useMemo(() => {
     return listOptions.find(t => isBlockActive(editor, t.value));
@@ -79,6 +80,7 @@ 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,7 +125,6 @@ function SelectTypography({
         ...upData
       }
     });
-    closeMainPopup();
   };
   const selectedBlock = useMemo(() => {
     return typographyOptions.find(t => {
@@ -167,6 +166,7 @@ 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,6 +14,7 @@ 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 = {
@@ -60,13 +61,15 @@ const MiniTextFormat = props => {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
-          editor: editor
+          editor: editor,
+          closeMainPopup: closeMainPopup
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -98,7 +101,10 @@ const MiniTextFormat = props => {
           editor: editor,
           customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(IconButton, {
-          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
+          onClick: e => {
+            viewSlateSelection();
+            setAnchorEl(document.getElementById("mini-text-editor-wrapper"));
+          },
           className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {

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

@@ -9,6 +9,7 @@ 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 {
@@ -83,6 +84,7 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
+      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection]);
   useEffect(() => {

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -147,7 +147,6 @@ export function onDropItem(props, parentClass) {
     newPath = moveTo;
     const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const cCalx = isContainerElement(editor, moveTo, props, appenBp);
-
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );

package/dist/Editor/commonStyle.js

@@ -59,6 +59,10 @@ const useCommonStyle = theme => ({
         marginBottom: "7px",
         marginTop: "4px"
       },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
       "& .muiIconsListParent": {
         "& svg": {
           color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`

package/dist/Editor/utils/SlateUtilityFunctions.js

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

package/dist/Editor/utils/helper.js

@@ -738,4 +738,22 @@ export const focusDynamicTableInput = e => {
       }
     }
   }, 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");
 };

package/package.json

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