@flozy/editor 1.5.8 → 1.6.0

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);
@@ -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/EditorButton.js

@@ -39,7 +39,7 @@ const EditorButton = props => {
     textColorHover,
     bgColorHover,
     buttonIcon,
-    iconPosition,
+    iconPosition = "start",
     borderStyle,
     borderWidth,
     borderColor
@@ -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,
@@ -187,7 +187,7 @@ const EditorButton = props => {
         })]
       })
     }), /*#__PURE__*/_jsx("div", {
-      contentEditable: true,
+      contentEditable: false,
       style: {
         display: "inline"
       },

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

@@ -1,14 +1,14 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { ReactEditor } from "slate-react";
-import Button from "../../common/Button";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { Transforms } from "slate";
-import usePopup from "../../utils/customHooks/usePopup";
 import { logo } from "./LogoIcon";
 import "./ColorPicker.css";
 import ColorPickerTool from "react-gcolor-picker";
+import { Dialog, IconButton, Tooltip } from "@mui/material";
 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 DEFAULT_COLOR = {
   color: "#000000",
   bgcolor: "#FFFFFF"
@@ -17,16 +17,15 @@ const ColorPicker = ({
   format,
   editor,
   showHex,
-  title,
-  rounded
+  title
 }) => {
   const [selection, setSelection] = useState();
-  const colorPickerRef = useRef(null);
-  const [showOptions, setShowOptions] = usePopup(colorPickerRef);
-  const toggleOption = e => {
+  const [popup, setPopup] = useState(false);
+  const onOpen = e => {
+    e.preventDefault();
     setSelection(editor.selection);
     selection && ReactEditor.focus(editor);
-    setShowOptions(prev => !prev);
+    setPopup(true);
   };
   const handleFormSubmit = color => {
     if (!color) return;
@@ -35,58 +34,30 @@ const ColorPicker = ({
       format,
       value: color
     });
-    setShowOptions(false);
     selection && ReactEditor.focus(editor);
+    handleClose();
   };
-  const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
-  return /*#__PURE__*/_jsxs("div", {
-    className: "",
-    ref: colorPickerRef,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      position: "relative",
-      padding: rounded ? "6px" : "0px"
-    },
-    children: [rounded ? /*#__PURE__*/_jsx(Button, {
-      style: {
-        color: activeColor,
-        opacity: "1",
-        width: "24px",
-        height: "24px",
-        backgroundColor: activeColor,
-        border: "1px solid #ccc",
-        marginRight: "12px"
-      },
-      className: showOptions ? "clicked" : "",
-      onClick: toggleOption,
-      title: title
-    }) : /*#__PURE__*/_jsx(Button, {
-      style: {
-        color: activeColor,
-        opacity: "1"
-      },
-      className: showOptions ? "clicked" : "",
-      onClick: toggleOption,
+  const handleClose = () => {
+    setPopup(false);
+  };
+  const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
+  const Logo = logo[format](activeColor);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Tooltip, {
       title: title,
-      children: logo[format](activeColor)
-    }), showHex ? /*#__PURE__*/_jsx("div", {
-      style: {
-        display: "flex"
-      },
-      children: activeColor
-    }) : null, showOptions && /*#__PURE__*/_jsx("div", {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        margin: "auto",
-        zIndex: 100,
-        width: "300px",
-        height: "300px"
-      },
+      arrow: true,
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: onOpen,
+        children: Logo
+      }), showHex ? /*#__PURE__*/_jsx("div", {
+        style: {
+          display: "inline-flex"
+        },
+        children: activeColor
+      }) : null]
+    }), /*#__PURE__*/_jsx(Dialog, {
+      open: popup,
+      onClose: handleClose,
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
         value: activeColor,

package/dist/Editor/Elements/Embed/Embed.js

@@ -7,16 +7,14 @@ import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
 import usePopup from "../../utils/customHooks/usePopup";
 import { insertEmbed } from "../../utils/embed";
-import Uploader from "../../common/Uploader";
 import "./Embed.css";
-// import commonStyle from "../../commonStyle";
-// import styled from "@emotion/styled";
+import ImageUploader from "../../common/ImageUploader";
 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 EMBED_LABEL = {
   image: "Image",
-  video: "Video"
+  video: "Video or Embed"
 };
 const Embed = ({
   editor,
@@ -29,11 +27,12 @@ const Embed = ({
   const [showInput, setShowInput] = usePopup(urlInputRef);
   const [formData, setFormData] = useState({
     url: "",
-    alt: ""
+    alt: "",
+    images: []
   });
   const [selection, setSelection] = useState();
   const handleFormSubmit = () => {
-    if (formData?.url) {
+    if (formData?.url || formData?.images.length > 0) {
       selection && Transforms.select(editor, selection);
       selection && ReactEditor.focus(editor);
       insertEmbed(editor, {
@@ -92,6 +91,9 @@ const Embed = ({
       open: open,
       fullWidth: true,
       className: `dialogComp`,
+      style: {
+        minWidth: `${window.innerWidth - 100}px`
+      },
       children: /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -128,15 +130,7 @@ const Embed = ({
           },
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
-            children: [format === "image" ? /*#__PURE__*/_jsx(Uploader, {
-              value: formData,
-              data: {
-                key: "url"
-              },
-              customProps: customProps,
-              onUploaded: onUploaded,
-              disableUpload: format === "video"
-            }) : null, /*#__PURE__*/_jsx(Grid, {
+            children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               xs: 12,
               style: {
@@ -150,7 +144,15 @@ const Embed = ({
                 onChange: handleChange,
                 value: imageURL || ""
               })
-            })]
+            }), format === "image" ? /*#__PURE__*/_jsx(ImageUploader, {
+              value: formData,
+              data: {
+                key: "url"
+              },
+              customProps: customProps,
+              onUploaded: onUploaded,
+              disableUpload: format === "video"
+            }) : null]
           })
         }), /*#__PURE__*/_jsxs(DialogActions, {
           sx: {

package/dist/Editor/Elements/Embed/Image.js

@@ -6,6 +6,7 @@ import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import QuiltedImageList from "../../common/ImageList";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -17,11 +18,14 @@ const Image = ({
   const {
     url,
     alt,
+    images = [],
     bannerSpacing,
     alignment,
     bgColor,
     borderColor,
-    borderRadius
+    borderRadius,
+    cols,
+    rowHeight
   } = element;
   const {
     readOnly
@@ -156,7 +160,12 @@ const Image = ({
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
+        itemData: images,
+        readOnly: true,
+        rowHeight: rowHeight,
+        cols: cols
+      }) : /*#__PURE__*/_jsx("img", {
         style: {
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
         },

package/dist/Editor/Elements/Embed/Video.js

@@ -18,7 +18,8 @@ const Video = ({
 }) => {
   const {
     url,
-    alt
+    alt,
+    alignment
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -28,6 +29,10 @@ const Video = ({
   const {
     readOnly
   } = customProps;
+  const {
+    vertical,
+    horizantal
+  } = alignment || {};
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
@@ -100,7 +105,9 @@ const Video = ({
       display: "flex",
       width: "100%",
       maxWidth: "100%",
-      boxShadow: selected && focused && "0 0 3px 3px lightgray"
+      boxShadow: selected && focused && "0 0 3px 3px lightgray",
+      justifyContent: horizantal,
+      alignContent: vertical
     },
     ...element.attr,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
@@ -136,6 +143,7 @@ const Video = ({
         className: "embedd-iframe",
         style: {
           border: "none",
+          position: "absolute",
           width: "100%",
           height: "100%"
         },

package/dist/Editor/Elements/Form/Form.js

@@ -229,7 +229,6 @@ const Form = props => {
         className: "form-grid",
         item: true,
         xs: 12,
-        spacing: 2,
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,

package/dist/Editor/Elements/Form/FormButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSlateStatic } from "slate-react";
 import { IconButton, Tooltip } from "@mui/material";
-import FeedIcon from "@mui/icons-material/Feed";
+import { FormIcon } from "../../common/iconslist";
 import { insertForm } from "../../utils/form";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FormButton = props => {
@@ -14,7 +14,7 @@ const FormButton = props => {
     arrow: true,
     children: /*#__PURE__*/_jsx(IconButton, {
       onClick: onClick,
-      children: /*#__PURE__*/_jsx(FeedIcon, {})
+      children: /*#__PURE__*/_jsx(FormIcon, {})
     })
   });
 };