@flozy/editor 1.6.4 → 1.6.6

package/dist/Editor/CommonEditor.js

@@ -4,7 +4,6 @@ import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
-// import Toolbar from "./Toolbar/Toolbar";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
@@ -21,7 +20,6 @@ import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
 import { Box } from "@mui/material";
-import { KeyboardDoubleArrowDown, KeyboardDoubleArrowLeft, KeyboardDoubleArrowRight, KeyboardDoubleArrowUp } from "@mui/icons-material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -361,65 +359,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundSize: "40px 40px",
     backgroundPosition: "-19px -19px"
   } : {};
-  const handleToolbarSwitch = () => {
-    if (ref) {
-      ref?.current?.toggleToolbarShow();
-    } else {
-      setToolbarShow(!toolbarShow);
-    }
-  };
-  const getToolbarShowOpenIcon = type => {
-    switch (toolbarOptions?.toolbarPosition) {
-      case "top-left":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
-      case "top-right":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
-      case "left-top":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
-      case "left-bottom":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
-      case "right-top":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
-      case "right-bottom":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowUp, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowDown, {});
-      case "bottom-left":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
-      case "bottom-right":
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
-      default:
-        if (type === "open") {
-          return /*#__PURE__*/_jsx(KeyboardDoubleArrowRight, {});
-        }
-        return /*#__PURE__*/_jsx(KeyboardDoubleArrowLeft, {});
-    }
+  const hasTopBanner = () => {
+    const tb = editor.children[0];
+    return tb?.type === "topbanner" ? tb : null;
   };
   const renderTopBanner = () => {
-    const tb = editor.children[0];
-    return tb?.type === "topbanner" ? /*#__PURE__*/_jsx(TopBanner, {
+    const tb = hasTopBanner();
+    return tb ? /*#__PURE__*/_jsx(TopBanner, {
       element: tb,
       editor: editor,
       customProps: customProps
@@ -446,51 +392,59 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             onDragStart: handleDragStart,
             onDragEnd: handleDragEnd,
             children: [/*#__PURE__*/_jsx(Overlay, {
-              children: /*#__PURE__*/_jsxs(Box, {
+              children: /*#__PURE__*/_jsx(Box, {
+                className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
-                  className: "scroll-area",
-                  children: /*#__PURE__*/_jsxs("div", {
-                    ref: editorWrapper,
-                    className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
+                children: /*#__PURE__*/_jsxs(Box, {
+                  component: "div",
+                  className: "max-content",
+                  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
+                    className: "scroll-area",
                     style: {
-                      backgroundColor: pageColor || "#FFF",
-                      paddingLeft: `${bannerSpacing?.left || 12}px`,
-                      paddingRight: `${bannerSpacing?.right || 12}px`,
-                      paddingTop: `${bannerSpacing?.top}px`,
-                      paddingBottom: `${bannerSpacing?.bottom}px`,
-                      width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
-                      // width: viewport.w ? `${viewport.w}px` : "100%",
-                      height: viewport.h ? `${viewport.h}px` : `100%`,
-                      alignSelf: "center",
-                      transformOrigin: "left top",
-                      transition: "all 0.3s",
-                      minHeight: "87%"
+                      backgroundColor: pageColor || "#FFF"
                     },
-                    children: [/*#__PURE__*/_jsx(PopupTool, {
-                      onDrawerOpen: onDrawerOpen
-                    }), /*#__PURE__*/_jsx(Editable, {
-                      className: "innert-editor-textbox",
-                      readOnly: isReadOnly,
-                      renderElement: renderElement,
-                      renderLeaf: renderLeaf,
-                      onKeyDown: onKeyDown
-                    }), /*#__PURE__*/_jsx(MentionsPopup, {
-                      ref: mentionsRef,
-                      mentions: mentions,
-                      setMentions: setMentions,
-                      editor: editor,
-                      target: target,
-                      index: index,
-                      chars: chars,
-                      type: type
-                    })]
-                  })
-                }), /*#__PURE__*/_jsx(MiniToolbar, {
-                  customProps: customProps,
-                  toolbarOptions: toolbarOptions
-                })]
+                    children: /*#__PURE__*/_jsxs("div", {
+                      ref: editorWrapper,
+                      className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
+                      style: {
+                        backgroundColor: "transparent",
+                        paddingLeft: `${bannerSpacing?.left || 12}px`,
+                        paddingRight: `${bannerSpacing?.right || 12}px`,
+                        paddingTop: `${bannerSpacing?.top}px`,
+                        paddingBottom: `${bannerSpacing?.bottom}px`,
+                        width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
+                        // width: viewport.w ? `${viewport.w}px` : "100%",
+                        height: viewport.h ? `${viewport.h}px` : `100%`,
+                        alignSelf: "center",
+                        transformOrigin: "left top",
+                        transition: "all 0.3s",
+                        minHeight: "87%"
+                      },
+                      children: [/*#__PURE__*/_jsx(PopupTool, {
+                        onDrawerOpen: onDrawerOpen
+                      }), /*#__PURE__*/_jsx(Editable, {
+                        className: "innert-editor-textbox",
+                        readOnly: isReadOnly,
+                        renderElement: renderElement,
+                        renderLeaf: renderLeaf,
+                        onKeyDown: onKeyDown
+                      }), /*#__PURE__*/_jsx(MentionsPopup, {
+                        ref: mentionsRef,
+                        mentions: mentions,
+                        setMentions: setMentions,
+                        editor: editor,
+                        target: target,
+                        index: index,
+                        chars: chars,
+                        type: type
+                      })]
+                    })
+                  }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
+                    customProps: customProps,
+                    toolbarOptions: toolbarOptions
+                  }) : null]
+                })
               })
             }), /*#__PURE__*/_jsx(DragOverlay, {
               className: "drag-overlay",

package/dist/Editor/DialogWrapper.js

@@ -34,6 +34,9 @@ const DialogWrapper = props => {
         })
       })
     }), /*#__PURE__*/_jsx(DialogContent, {
+      style: {
+        padding: "0px"
+      },
       children: children
     }), /*#__PURE__*/_jsx(DialogActions, {
       style: {

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/Elements/Color Picker/ColorButtons.js

@@ -46,25 +46,41 @@ const SingleColorButton = ({
 export const AllColors = props => {
   const {
     classes,
+    open,
+    anchorEl,
+    onClose,
     onSelect,
     activeColor
   } = props;
   const all = ColorChunks([]);
-  return /*#__PURE__*/_jsx(Box, {
-    component: "div",
-    sx: classes.allColor,
+  return /*#__PURE__*/_jsx(Popover, {
+    open: open,
+    anchorEl: anchorEl,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "center"
+    },
+    onClose: onClose,
     children: /*#__PURE__*/_jsx(Box, {
-      sx: classes.allColorInner,
+      component: "div",
+      sx: classes.allColor,
       children: /*#__PURE__*/_jsx(Box, {
-        className: "buttonsWrpr",
-        children: all.map((m, i) => {
-          return /*#__PURE__*/_jsx(SingleColorButton, {
-            crs: m,
-            index: i,
-            handleSelect: onSelect,
-            classes: classes,
-            activeColor: activeColor
-          }, `si_btn_row1_${m}_${i}`);
+        sx: classes.allColorInner,
+        children: /*#__PURE__*/_jsx(Box, {
+          className: "buttonsWrpr",
+          children: all.map((m, i) => {
+            return /*#__PURE__*/_jsx(SingleColorButton, {
+              crs: m,
+              index: i,
+              handleSelect: onSelect,
+              classes: classes,
+              activeColor: activeColor
+            }, `si_btn_row1_${m}_${i}`);
+          })
         })
       })
     })

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

@@ -16,8 +16,8 @@ const ColorPickerStyles = () => ({
       "&:before": {
         content: '" "',
         position: "absolute",
-        top: "-5px",
-        left: "-5px",
+        top: "-2px",
+        left: "-2px",
         width: "calc(100% + 4px)",
         height: "calc(100% + 4px)",
         border: "3px solid blue",

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -14,7 +14,7 @@ const DrawSignature = props => {
   } = props;
   const [uploading, setUploading] = useState(false);
   const onSigned = async () => {
-    const strImage = canvasRef.toDataURL();
+    const strImage = canvasRef.getTrimmedCanvas().toDataURL();
     setUploading(true);
     const result = await services("uploadFile", {
       image: strImage

package/dist/Editor/Elements/Signature/Signed.js

@@ -37,8 +37,9 @@ const Signed = props => {
         src: signature,
         alt: "signature",
         style: {
-          width: "150px",
-          height: "auto"
+          width: "200px",
+          height: "auto",
+          marginBottom: "4px"
         }
       });
     } else if (signedText) {
@@ -65,12 +66,22 @@ const Signed = props => {
       }) : null, /*#__PURE__*/_jsxs("button", {
         className: "signed-btn",
         onClick: onSelect,
+        style: {
+          background: "transparent",
+          border: "none",
+          textAlign: "left"
+        },
         children: [renderSign(), /*#__PURE__*/_jsx("div", {
           style: {
             fontWeight: "bold"
           },
           children: signedBy || ""
         }), /*#__PURE__*/_jsx("div", {
+          style: {
+            fontSize: "10px",
+            color: "#ccc",
+            marginTop: "4px"
+          },
           children: formatDate(signedOn, "MM/DD/YYYY")
         })]
       })]

package/dist/Editor/Elements/SimpleText.js

@@ -32,7 +32,11 @@ const SimpleText = props => {
   const {
     element,
     attributes,
-    children
+    children,
+    customProps
+  } = props;
+  const {
+    readOnly
   } = props;
   const classes = SimpleTextStyle();
   const editor = useSlateStatic();
@@ -47,13 +51,13 @@ const SimpleText = props => {
     ...attributes,
     className: `simple-text`,
     sx: classes.root,
-    children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
+    children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
       className: "placeholder-simple-text",
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         className: "bg-pad-sl",
         children: "/"
       }), " for browse elements"]
-    }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
+    }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
       children: "Write Something..."
     }) : null]

package/dist/Editor/Styles/EditorStyles.js

@@ -3,19 +3,30 @@ const editorStyles = ({
 }) => ({
   root: {
     display: "flex",
-    flexDirection: "column",
     position: "relative",
-    padding: "0 8px"
+    padding: "0px",
+    alignItems: "center",
+    justifyContent: "center"
   },
   slateWrapper: {
     height: `${window.innerHeight - padHeight}px`,
-    overflow: "auto",
+    width: "100%",
+    overflowY: "auto",
+    overflowX: "hidden",
     display: "flex",
     flexDirection: "column",
+    alignItems: "center",
+    "& .max-content": {
+      maxWidth: "1280px",
+      width: "100%",
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      paddingBottom: "18px"
+    },
     "& .scroll-area": {
       display: "flex",
       justifyContent: "center",
-      // minHeight: "100vh",
       flex: 1
     },
     "& .editor-wrapper": {

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -5,7 +5,7 @@ const miniToolbarStyles = () => ({
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",
-    bottom: "-12px",
+    bottom: "-25px",
     left: 0,
     right: 0,
     margin: "auto",

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: {
@@ -189,8 +205,8 @@ const usePopupStyle = () => ({
           "&:before": {
             content: '" "',
             position: "absolute",
-            top: "-5px",
-            left: "-5px",
+            top: "-2px",
+            left: "-2px",
             width: "calc(100% + 4px)",
             height: "calc(100% + 4px)",
             border: "3px solid blue",

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

@@ -327,22 +327,12 @@ const TextFormat = props => {
         },
         children: "Full width"
       })]
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(AllColors, {
       open: open,
       anchorEl: anchorEl,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
       onClose: onClosePicker,
-      children: /*#__PURE__*/_jsx(AllColors, {
-        classes: classes,
-        onSelect: onSelectColor
-      })
+      classes: classes,
+      onSelect: onSelectColor
     })]
   });
 };

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.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -59,7 +59,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files && rm -rf /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist &&  babel dist -d /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [