@flozy/editor 1.6.4 → 1.6.5

package/dist/Editor/Editor.css

@@ -855,4 +855,42 @@ blockquote {
 /** to avoid line space **/
 .page-settings {
   height: 0px;
+}
+
+/* HTML: <div class="loader"></div> */
+.img-loader-wrapper {
+  width:28px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #F10C49;
+  animation: l9 2s infinite;
+}
+@keyframes l9 {
+  0%   {box-shadow: 
+          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
+  12.5%   {box-shadow: 
+          0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
+  25%   {box-shadow: 
+          0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
+  37.5% {box-shadow: 
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
+          0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
+  50%   {box-shadow: 
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
+  62.5% {box-shadow: 
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
+  75%   {box-shadow: 
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
+  87.5% {box-shadow: 
+          0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
+  100% {box-shadow: 
+          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
+          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
 }

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box } from "@mui/material";
+import { Grid, Tabs, Tab, Card, CardMedia, CardContent, Box, CircularProgress } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Categories = props => {
@@ -23,6 +23,24 @@ const Categories = props => {
     }, m))
   });
 };
+const ProgressBar = ({
+  loading
+}) => {
+  return loading ? /*#__PURE__*/_jsx(Grid, {
+    item: true,
+    xs: 12,
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      margin: 0,
+      padding: 0,
+      height: "50px",
+      overflow: "hidden"
+    },
+    children: /*#__PURE__*/_jsx(CircularProgress, {})
+  }) : null;
+};
 const AddTemplates = props => {
   const {
     classes,
@@ -33,6 +51,7 @@ const AddTemplates = props => {
   const {
     services
   } = customProps;
+  const [loading, setLoading] = useState(false);
   const [categories, setCategories] = useState([]);
   const [category, setCategory] = useState("");
   const [templates, setTemplates] = useState([]);
@@ -41,6 +60,7 @@ const AddTemplates = props => {
     getTemplatesList();
   }, []);
   const getTemplatesList = async () => {
+    setLoading(true);
     const result = await services("listTemplates", {});
     const tempList = result?.data?.filter(f => f.type === "Template");
     const lic = tempList?.reduce((a, b) => {
@@ -54,6 +74,7 @@ const AddTemplates = props => {
     setCategories(lic);
     setCategory(lic[0]);
     setFilteredTemplates(ft);
+    setLoading(false);
   };
   const handleChange = (event, newValue) => {
     setCategory(newValue);
@@ -79,27 +100,31 @@ const AddTemplates = props => {
         data: categories,
         handleChange: handleChange
       })
-    }), /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
-      spacing: 1,
+      spacing: 0,
       className: `${fullScreen ? "fullscreen" : ""}`,
       sx: classes.templateCardsWrpr,
-      children: filteredTemplates.map(m => {
+      children: [/*#__PURE__*/_jsx(ProgressBar, {
+        loading: loading
+      }), filteredTemplates.map(m => {
         return /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 4,
           children: /*#__PURE__*/_jsxs(Card, {
             sx: classes.templateCard,
             onClick: onSelectTemplate(m),
-            children: [/*#__PURE__*/_jsx(Box, {
+            children: [/*#__PURE__*/_jsxs(Box, {
               sx: classes.templateCardMediaWrpr,
-              children: /*#__PURE__*/_jsx(CardMedia, {
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "img-loader-wrapper"
+              }), /*#__PURE__*/_jsx(CardMedia, {
                 className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
                 component: "div",
                 image: m?.thumbnail,
                 alt: m?.title,
                 sx: classes.templateCardMedia
-              })
+              })]
             }), /*#__PURE__*/_jsx(CardContent, {
               style: {
                 height: "30px"
@@ -108,7 +133,7 @@ const AddTemplates = props => {
             })]
           })
         }, `template_${m.id}`);
-      })
+      })]
     })]
   });
 };

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

@@ -21,7 +21,8 @@ const usePopupStyle = () => ({
     "&.templates": {
       width: "500px",
       "&.fullscreen": {
-        width: "100%"
+        width: "100%",
+        maxHeight: "fit-content"
       }
     },
     "& .headerContainer": {},
@@ -130,18 +131,33 @@ const usePopupStyle = () => ({
     backgroundSize: "100% auto",
     borderRadius: "10px",
     boxShadow: "0px 1px 3px 3px rgba(0,0,0,0.12)",
+    zIndex: 1,
+    position: "relative",
     "&.fullscreen": {
       height: "280px"
     }
   },
   templateCardMediaWrpr: {
-    padding: "8px",
+    position: "relative",
+    padding: "4px",
+    margin: "8px",
     border: "1px solid rgba(0, 0, 0, 0.1)",
     borderRadius: "10px",
-    background: "#FEFEFE",
+    backgroundColor: "#FEFEFE",
     overflow: "hidden",
     "&:hover": {
       border: "1px solid #2563EB"
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
     }
   },
   templateCardsWrpr: {

package/dist/Editor/utils/accordion.js

@@ -1,27 +1,33 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
 export const insertAccordion = editor => {
-  const accordion = {
-    type: "accordion",
-    children: [{
-      type: "accordion-summary",
+  try {
+    const accordion = {
+      type: "accordion",
       children: [{
-        type: "paragraph",
+        type: "accordion-summary",
         children: [{
-          text: ""
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
         }]
-      }]
-    }, {
-      type: "accordion-details",
-      children: [{
-        type: "paragraph",
+      }, {
+        type: "accordion-details",
         children: [{
-          text: ""
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
         }]
       }]
-    }]
-  };
-  Transforms.insertNodes(editor, accordion);
-  Transforms.move(editor);
-  insertNewLine(editor);
+    };
+    Transforms.insertNodes(editor, accordion);
+    Transforms.move(editor, {
+      at: editor.selection.anchor.path
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

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