@flozy/editor 1.5.9 → 1.6.1

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -21,6 +21,7 @@ import { Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const drawerWidth = 240;
 function AppHeader(props) {
   const navWrprRef = useRef(null);
@@ -72,8 +73,8 @@ function AppHeader(props) {
       className: "element-toolbar",
       contentEditable: false,
       style: {
-        top: "-40px",
-        right: "50px"
+        top: "0px",
+        right: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "App Header Settings",
@@ -154,7 +155,7 @@ function AppHeader(props) {
         src: appLogo
       }) : appTitle
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
-      children: menus.map(item => /*#__PURE__*/_jsx(ListItem, {
+      children: menus.map((item, i) => /*#__PURE__*/_jsx(ListItem, {
         disablePadding: true,
         children: /*#__PURE__*/_jsx(ListItemButton, {
           component: "a",
@@ -166,7 +167,7 @@ function AppHeader(props) {
             primary: item.text
           })
         })
-      }, item.text))
+      }, `${item.text}_${i}`))
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;
@@ -179,154 +180,156 @@ function AppHeader(props) {
   const elevateStyle = {
     position: "relative"
   };
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: "flex",
-      position: "relative"
-    },
-    ...attributes,
-    contentEditable: false,
-    onClick: handleFocus,
-    children: [/*#__PURE__*/_jsxs("div", {
-      ref: navWrprRef,
-      style: {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
         display: "flex",
-        width: "100%"
+        position: "relative"
       },
-      children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
-        component: "nav",
+      ...attributes,
+      contentEditable: false,
+      onClick: handleFocus,
+      children: [/*#__PURE__*/_jsxs("div", {
+        ref: navWrprRef,
         style: {
-          ...elevateStyle,
-          background: bgColor,
-          boxShadow: "none",
-          paddingLeft: `${left}px`,
-          paddingRight: `${right}px`,
-          paddingTop: `${top}px`,
-          paddingBottom: `${bottom}px`
+          display: "flex",
+          width: "100%"
         },
-        children: /*#__PURE__*/_jsxs(Toolbar, {
+        children: [/*#__PURE__*/_jsx(CssBaseline, {}), /*#__PURE__*/_jsx(AppBar, {
+          component: "nav",
           style: {
-            flexDirection: isLogoRight ? "row-reverse" : "row"
+            ...elevateStyle,
+            background: bgColor,
+            boxShadow: "none",
+            paddingLeft: `${left}px`,
+            paddingRight: `${right}px`,
+            paddingTop: `${top}px`,
+            paddingBottom: `${bottom}px`
           },
-          children: [/*#__PURE__*/_jsx(IconButton, {
-            color: "inherit",
-            "aria-label": "open drawer",
-            edge: "start",
-            onClick: handleDrawerToggle,
-            sx: {
-              mr: 2,
-              display: {
-                sm: "none"
-              }
-            },
-            children: /*#__PURE__*/_jsx(MenuIcon, {})
-          }), /*#__PURE__*/_jsxs(Typography, {
-            variant: "h6",
-            component: "div",
-            color: "primary",
+          children: /*#__PURE__*/_jsxs(Toolbar, {
             style: {
-              display: "inline-flex",
-              alignItems: "center",
-              color: textColor,
-              fontSize: logoFontSize,
-              fontFamily: titleFontFamily,
-              justifyContent: isLogoRight ? "end" : "start"
+              flexDirection: isLogoRight ? "row-reverse" : "row"
             },
-            sx: {
-              flexGrow: 1,
-              display: {
-                xs: "none",
-                sm: "block"
-              }
-            },
-            className: "app-logo",
-            children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
-              alt: `${appTitle} Logo`,
-              style: {
-                height: "40px",
-                width: "auto"
-              },
-              src: appLogo
-            }) : null, "\xA0", appTitle]
-          }), /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              display: {
-                xs: "none",
-                sm: "block"
-              }
-            },
-            children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
+            children: [/*#__PURE__*/_jsx(IconButton, {
               color: "inherit",
               "aria-label": "open drawer",
               edge: "start",
               onClick: handleDrawerToggle,
+              sx: {
+                mr: 2,
+                display: {
+                  sm: "none"
+                }
+              },
               children: /*#__PURE__*/_jsx(MenuIcon, {})
-            }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
-              component: "a",
-              href: item.url,
+            }), /*#__PURE__*/_jsxs(Typography, {
+              variant: "h6",
+              component: "div",
+              color: "primary",
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                color: textColor,
+                fontSize: logoFontSize,
+                fontFamily: titleFontFamily,
+                justifyContent: isLogoRight ? "end" : "start"
+              },
               sx: {
-                position: "relative",
-                fontFamily: fontFamily,
-                textTransform: "none",
-                fontSize: fontSize || "16px",
-                color: textColor || "#FFF",
-                background: bgColor || "none",
-                "& .m-settings": {
-                  display: "none",
-                  position: "absolute",
-                  top: 0,
-                  bottom: 0,
-                  left: 0,
-                  right: 0,
-                  margin: "auto",
-                  width: "42px",
-                  height: "42px",
-                  background: "#FFF"
+                flexGrow: 1,
+                display: {
+                  xs: "none",
+                  sm: "block"
+                }
+              },
+              className: "app-logo",
+              children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
+                alt: `${appTitle} Logo`,
+                style: {
+                  height: "40px",
+                  width: "auto"
                 },
-                "&:hover": {
-                  color: textColorHover || textColor || "#FFF",
-                  background: bgColorHover || bgColor || "none",
-                  "& .m-settings": {
-                    display: "block"
-                  }
+                src: appLogo
+              }) : null, "\xA0", appTitle]
+            }), /*#__PURE__*/_jsxs(Box, {
+              sx: {
+                display: {
+                  xs: "none",
+                  sm: "block"
                 }
               },
-              children: item.text
-            }, item)) : null]
-          })]
-        })
-      }), /*#__PURE__*/_jsx("nav", {
-        children: /*#__PURE__*/_jsx(Drawer, {
-          container: container,
-          variant: "temporary",
-          open: mobileOpen,
-          onClose: handleDrawerToggle,
-          ModalProps: {
-            keepMounted: true // Better open performance on mobile.
-          },
+              children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
+                color: "inherit",
+                "aria-label": "open drawer",
+                edge: "start",
+                onClick: handleDrawerToggle,
+                children: /*#__PURE__*/_jsx(MenuIcon, {})
+              }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
+                component: "a",
+                href: item.url,
+                sx: {
+                  position: "relative",
+                  fontFamily: fontFamily,
+                  textTransform: "none",
+                  fontSize: fontSize || "16px",
+                  color: textColor || "#FFF",
+                  background: bgColor || "none",
+                  "& .m-settings": {
+                    display: "none",
+                    position: "absolute",
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    margin: "auto",
+                    width: "42px",
+                    height: "42px",
+                    background: "#FFF"
+                  },
+                  "&:hover": {
+                    color: textColorHover || textColor || "#FFF",
+                    background: bgColorHover || bgColor || "none",
+                    "& .m-settings": {
+                      display: "block"
+                    }
+                  }
+                },
+                children: item.text
+              }, `${item.url}_${i}_no_drawer`)) : null]
+            })]
+          })
+        }), /*#__PURE__*/_jsx("nav", {
+          children: /*#__PURE__*/_jsx(Drawer, {
+            container: container,
+            variant: "temporary",
+            open: mobileOpen,
+            onClose: handleDrawerToggle,
+            ModalProps: {
+              keepMounted: true // Better open performance on mobile.
+            },
 
-          sx: {
-            display: {
-              xs: "block",
-              sm: isDrawer ? "block" : "none"
+            sx: {
+              display: {
+                xs: "block",
+                sm: isDrawer ? "block" : "none"
+              },
+              "& .MuiDrawer-paper": {
+                boxSizing: "border-box",
+                width: drawerWidth
+              }
             },
-            "& .MuiDrawer-paper": {
-              boxSizing: "border-box",
-              width: drawerWidth
-            }
-          },
-          children: drawer
-        })
-      }), /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
-        element: element,
-        onSave: onSave,
-        onClose: onClose,
-        customProps: customProps
-      }) : null]
-    }), /*#__PURE__*/_jsx("div", {
-      contentEditable: true,
-      children: children
-    })]
+            children: drawer
+          })
+        }), /*#__PURE__*/_jsx(ToolBar, {})]
+      }), /*#__PURE__*/_jsx("div", {
+        contentEditable: false,
+        children: children
+      })]
+    }), openSetttings ? /*#__PURE__*/_jsx(AppHeaderPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
   });
 }
 export default AppHeader;

package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js

@@ -6,7 +6,8 @@ const AppHeaderPopup = props => {
   const {
     element,
     onSave,
-    onClose
+    onClose,
+    customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "App Header",
@@ -14,7 +15,8 @@ const AppHeaderPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: appHeaderStyle
+    renderTabs: appHeaderStyle,
+    customProps: customProps
   });
 };
 export default AppHeaderPopup;

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

@@ -1,22 +1,23 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertButton } from "../../utils/button";
-import { ButtonIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ButtonToolIcon = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertButton = () => {
     insertButton(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Button",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertButton,
-      children: /*#__PURE__*/_jsx(ButtonIcon, {})
-    })
+    onClick: handleInsertButton,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "button"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default ButtonToolIcon;

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

@@ -39,7 +39,7 @@ const EditorButton = props => {
     textColorHover,
     bgColorHover,
     buttonIcon,
-    iconPosition,
+    iconPosition = "start",
     borderStyle,
     borderWidth,
     borderColor
@@ -63,10 +63,10 @@ const EditorButton = props => {
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
-      if (metadata?.buttonLink?.handler) {
-        metadata.buttonLink.handler("click");
-      } else if (linkType === "actionTrigger") {
-        if (redirectOnURLResult) {
+      if (linkType === "actionTrigger") {
+        if (metadata?.buttonLink?.handler) {
+          metadata.buttonLink.handler("click");
+        } else if (redirectOnURLResult) {
           // call api and redirect based on api result
           const apiResult = await actionButtonRedirect({}, {
             url: buttonLink?.url
@@ -124,12 +124,12 @@ const EditorButton = props => {
     className: "editor-btn-wrapper",
     ...attributes,
     style: {
-      display: "inline"
+      display: "inline",
+      textAlign: textAlign || "left"
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: "editor-btn-wrapper-inner",
       style: {
-        textAlign: textAlign || "left",
         display: "inline"
       },
       contentEditable: false,
@@ -168,26 +168,10 @@ const EditorButton = props => {
             paddingLeft: "4px",
             paddingRight: "4px"
           }
-        }), !readOnly && /*#__PURE__*/_jsxs("div", {
-          className: `element-selector ${anchorEl ? "selected" : ""}`,
-          contentEditable: false,
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots tl",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots tr",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots bl",
-            children: " "
-          }), /*#__PURE__*/_jsx("div", {
-            className: "element-selector-dots br",
-            children: " "
-          })]
         })]
       })
     }), /*#__PURE__*/_jsx("div", {
-      contentEditable: true,
+      contentEditable: false,
       style: {
         display: "inline"
       },

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -1,18 +1,18 @@
-import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import React, { useEffect, useState } from "react";
+import { Transforms, Editor } from "slate";
 import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
 import Slider from "react-slick";
 import "./slick-theme.min.css";
 import "./slick.min.css";
 import { PrevArrow, NextArrow } from "./Arrows";
 import { carouselItem } from "../../utils/carouselItem";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
-import AddIcon from "@mui/icons-material/Add";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { GridAddSectionIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 const Empty = ({
   children
 }) => {
@@ -32,8 +32,9 @@ const Carousel = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const selected = useSelected();
+  const [showOptions, setShowOptions] = useState(false);
   const [edit, setEdit] = useState(false);
+  const path = ReactEditor.findPath(editor, element);
   const settings = {
     dots: true,
     infinite: true,
@@ -43,13 +44,15 @@ const Carousel = props => {
     nextArrow: /*#__PURE__*/_jsx(NextArrow, {}),
     prevArrow: /*#__PURE__*/_jsx(PrevArrow, {})
   };
+  useEffect(() => {
+    if (!edit) {
+      ReactEditor.focus(editor);
+      Transforms.select(editor, Editor.end(editor, []));
+    }
+  }, [edit]);
   const onAddSlide = () => {
-    const currentPath = editor.selection?.anchor?.path;
-    const ancestorsPath = Path.ancestors(currentPath, {
-      reverse: true
-    });
-    const insertPath = ancestorsPath[1];
-    if (insertPath) {
+    const insertPath = [path[0], children.length];
+    if (insertPath[0] !== undefined) {
       insertPath[insertPath.length - 1] = element.children.length;
       Transforms.insertNodes(editor, [{
         ...carouselItem()
@@ -67,29 +70,36 @@ const Carousel = props => {
       at: [...path]
     });
   };
+  const onMouseOver = () => {
+    setShowOptions(true);
+  };
+  const onMouseLeave = () => {
+    setShowOptions(false);
+  };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsxs("div", {
+    return !readOnly && showOptions ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       contentEditable: false,
       style: {
-        top: "-42px"
+        top: "-32px",
+        left: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: edit ? "Save" : "Edit",
+        title: edit ? "Save Carousel" : "Edit Carousel",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onEdit,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
+          children: !edit ? /*#__PURE__*/_jsx(EditIcon, {}) : /*#__PURE__*/_jsx(CheckCircleIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Slide",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddSlide,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
+        title: "Delete Carousel",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,
@@ -102,20 +112,29 @@ const Carousel = props => {
     ...attributes,
     className: "sliderBg",
     style: {
-      padding: "32px",
       backgroundColor: "transparent",
-      position: "relative"
+      position: "relative",
+      minHeight: "300px"
     },
+    contentEditable: edit,
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
     children: [edit ? /*#__PURE__*/_jsx(Empty, {
       children: children
-    }) : /*#__PURE__*/_createElement(Slider, {
-      ...settings,
-      key: children.length
-    }, children.map((m, i) => {
-      return /*#__PURE__*/_jsx("div", {
-        children: m
-      }, i);
-    })), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
+    }) : /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      style: {
+        padding: "12px"
+      },
+      children: /*#__PURE__*/_jsx(Slider, {
+        ...settings,
+        children: children.map((m, i) => {
+          return /*#__PURE__*/_jsx("div", {
+            children: m
+          }, i);
+        })
+      })
+    }, `slider_${children.length}`), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -1,22 +1,21 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertCarousel } from "../../utils/carousel";
 import { Carousal } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleClick = () => {
     insertCarousel(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Carousel",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleClick,
-      children: /*#__PURE__*/_jsx(Carousal, {})
-    })
+    onClick: handleClick,
+    icon: /*#__PURE__*/_jsx(Carousal, {}),
+    icoBtnType: icoBtnType
   });
 };
 export default CarouselButton;