@flozy/editor 1.3.0 → 1.3.2

package/dist/Editor/CommonEditor.js

@@ -16,7 +16,6 @@ import "./Editor.css";
 import { serialize } from "./utils/serializer";
 import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import { Button } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -57,7 +56,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     h: null
   });
   const {
-    defaultBG
+    defaultBG,
+    needDotsBG,
+    footer
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
@@ -198,12 +199,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ...partialState
     }));
   };
-  const handleChangeViewport = (w, h) => () => {
-    setViewport({
-      w,
-      h
-    });
-  };
   const onKeyDown = useCallback(event => {
     const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
     const isCtrlKey = event.ctrlKey || isMetaKey;
@@ -224,27 +219,25 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [chars, editor, target, mentions, setMentions]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
+  const dotBg = needDotsBG ? {
+    background: "white",
+    backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
+    backgroundSize: "40px 40px",
+    backgroundPosition: "-19px -19px"
+  } : {};
   return /*#__PURE__*/_jsx(DialogWrapper, {
     ...props,
     fullScreen: fullScreen,
-    children: /*#__PURE__*/_jsxs("div", {
+    footer: footer || "",
+    children: /*#__PURE__*/_jsx("div", {
       className: "editor-t-wrapper",
       style: {
         display: "flex",
         flexDirection: "column",
         padding: "0 8px",
-        background: "white",
-        backgroundImage: "radial-gradient(#CCC 2px, transparent 0)",
-        backgroundSize: "40px 40px",
-        backgroundPosition: "-19px -19px"
+        ...dotBg
       },
-      children: [/*#__PURE__*/_jsx(Button, {
-        onClick: handleChangeViewport(414, 736),
-        children: "414 x 736"
-      }), /*#__PURE__*/_jsx(Button, {
-        onClick: handleChangeViewport(375, 812),
-        children: " 375 x 812"
-      }), /*#__PURE__*/_jsxs(Slate, {
+      children: /*#__PURE__*/_jsxs(Slate, {
         editor: editor,
         initialValue: value,
         onChange: handleEditorChange,
@@ -287,7 +280,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           ...htmlAction,
           handleCodeToText: handleCodeToText
         })]
-      }, id)]
+      }, id)
     })
   });
 });

package/dist/Editor/DialogWrapper.js

@@ -33,6 +33,11 @@ const DialogWrapper = props => {
     }), /*#__PURE__*/_jsx(DialogContent, {
       children: children
     }), /*#__PURE__*/_jsx(DialogActions, {
+      style: {
+        justifyContent: "center",
+        color: "#64748B",
+        fontSize: "13px"
+      },
       children: footer
     })]
   }) : children;

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { insertAccordion } from "../../utils/accordion";
 import { AccordionIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,13 +10,16 @@ const AccordionButton = props => {
   const handleInsertAccordion = () => {
     insertAccordion(editor);
   };
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: handleInsertAccordion,
+  return /*#__PURE__*/_jsx(Tooltip, {
     title: "Accordion",
-    style: {
-      marginLeft: "0px"
-    },
-    children: /*#__PURE__*/_jsx(AccordionIcon, {})
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleInsertAccordion,
+      style: {
+        marginLeft: "0px"
+      },
+      children: /*#__PURE__*/_jsx(AccordionIcon, {})
+    })
   });
 };
 export default AccordionButton;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
 import { insertAppHeader } from "../../utils/insertAppHeader";
 import { AppHeader } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,10 +10,13 @@ const AppHeaderButton = props => {
   const handleClick = () => {
     insertAppHeader(editor, {});
   };
-  return /*#__PURE__*/_jsx(IconButton, {
+  return /*#__PURE__*/_jsx(Tooltip, {
     title: "App Header",
-    onClick: handleClick,
-    children: /*#__PURE__*/_jsx(AppHeader, {})
+    arrow: true,
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsx(AppHeader, {})
+    })
   });
 };
 export default AppHeaderButton;

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

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

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

@@ -20,8 +20,12 @@ const Carousel = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
   const [edit, setEdit] = useState(false);
@@ -91,7 +95,7 @@ const Carousel = props => {
     }) : /*#__PURE__*/_jsx(Slider, {
       ...settings,
       children: children
-    }, reload), /*#__PURE__*/_jsx(ToolBar, {})]
+    }, reload), !readOnly && /*#__PURE__*/_jsx(ToolBar, {})]
   });
 };
 export default Carousel;

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

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

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

@@ -18,7 +18,8 @@ const DEFAULT_COLOR = {
 const ColorPicker = ({
   format,
   editor,
-  showHex
+  showHex,
+  title
 }) => {
   const [selection, setSelection] = useState();
   const [hexValue, setHexValue] = useState("");
@@ -81,6 +82,7 @@ const ColorPicker = ({
       },
       className: showOptions ? "clicked" : "",
       onClick: toggleOption,
+      title: title,
       children: logo[format](activeColor)
     }), showOptions && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {

package/dist/Editor/Elements/Embed/Embed.css

@@ -9,8 +9,8 @@
 }
 .embed button.resize{
     position: absolute;
-    bottom: -6px;
-    right: 0;
+    bottom: 2px;
+    right: 2px;
 }
 
 .image-text-wrapper {

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography } from "@mui/material";
+import { Grid, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, IconButton, Typography, Tooltip } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import Icon from "../../common/Icon";
 import { isBlockActive } from "../../utils/SlateUtilityFunctions";
@@ -73,16 +73,20 @@ const Embed = ({
   };
   const imageURL = formData?.url === "none" || !formData?.url ? "" : formData?.url;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      className: isBlockActive(editor, format) ? "active" : "",
-      style: {
-        border: showInput ? "1px solid lightgray" : "",
-        borderBottom: "none"
-      },
-      format: format,
-      onClick: onToggle,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: format
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: EMBED_LABEL[format],
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: isBlockActive(editor, format) ? "active" : "",
+        style: {
+          border: showInput ? "1px solid lightgray" : "",
+          borderBottom: "none"
+        },
+        format: format,
+        onClick: onToggle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: format
+        })
       })
     }), /*#__PURE__*/_jsx(Dialog, {
       open: open,
@@ -141,7 +145,8 @@ const Embed = ({
                 key: "url"
               },
               customProps: customProps,
-              onUploaded: onUploaded
+              onUploaded: onUploaded,
+              disableUpload: format === "video"
             })]
           })
         }), /*#__PURE__*/_jsxs(DialogActions, {

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
-import { Node, Transforms, Editor, Element, Path } from "slate";
-import Icon from "../../common/Icon";
+import { Node, Transforms, Editor } from "slate";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import { insertImageText } from "../../utils/imageText";
 import EmbedPopup from "./EmbedPopup";
+import { IconButton } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -21,6 +22,9 @@ const Image = ({
     bgColor,
     borderColor
   } = element;
+  const {
+    readOnly
+  } = customProps;
   const {
     left,
     top,
@@ -123,7 +127,7 @@ const Image = ({
       border: `1px solid ${borderColor}`
     },
     ...element.attr,
-    children: [/*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
+    children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,
@@ -135,22 +139,18 @@ const Image = ({
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [/*#__PURE__*/_jsx("img", {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx("img", {
         alt: alt,
         src: url,
         onClick: handleImageClick
-      }), selected && /*#__PURE__*/_jsx("button", {
+      }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
-          width: "15px",
-          height: "15px",
           opacity: 1,
-          background: "transparent"
+          background: "#FFF"
         },
         className: "resize",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "resize"
-        })
+        children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]
   });

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

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
+import { IconButton } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -70,22 +72,23 @@ const Video = ({
         children: /*#__PURE__*/_jsx(Icon, {
           icon: "videoPlayer"
         })
-      }) : /*#__PURE__*/_jsx("iframe", {
+      }) : /*#__PURE__*/_jsx("video", {
+        style: {
+          border: "none",
+          width: "100%",
+          height: "100%"
+        },
         src: url,
-        frameBorder: "0",
-        title: alt
-      }), selected && /*#__PURE__*/_jsx("button", {
+        title: alt,
+        controls: true
+      }), selected && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
-          width: "15px",
-          height: "15px",
           opacity: 1,
-          background: "transparent"
+          background: "#FFF"
         },
         className: "resize",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "resize"
-        })
+        children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]
   });

package/dist/Editor/Elements/Grid/Grid.js

@@ -12,6 +12,9 @@ const Grid = props => {
     element,
     customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     grid,
@@ -76,6 +79,13 @@ const Grid = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   const GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -83,6 +93,9 @@ const Grid = props => {
       children: [/*#__PURE__*/_jsx("button", {
         onClick: onSettings,
         children: "Settings"
+      }), /*#__PURE__*/_jsx("button", {
+        onClick: onDelete,
+        children: "Delete"
       }), /*#__PURE__*/_jsx("button", {
         onClick: onAddGridItem,
         children: "+ Add Item"
@@ -103,7 +116,7 @@ const Grid = props => {
       backgroundImage: backgroundImage ? `url(${backgroundImage})` : "none",
       border: `1px solid ${borderColor}`
     },
-    children: [/*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+    children: [!readOnly && /*#__PURE__*/_jsx(GridToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose,

package/dist/Editor/Elements/Grid/GridButton.js

@@ -1,19 +1,59 @@
-import React from "react";
-import { IconButton } from "@mui/material";
+import React, { useState } from "react";
+import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
+import { ImageList, ImageListItem } from "@mui/material";
+import GRID_TEMPLATES from "./templates";
 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 GridButton = props => {
   const {
     editor
   } = props;
-  const handleInsertGrid = () => {
+  const [open, setOpen] = useState(false);
+  const onButtonClick = () => {
+    setOpen(true);
+  };
+  const handleInsertGrid = () => () => {
     insertGrid(editor);
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(false);
   };
-  return /*#__PURE__*/_jsx(IconButton, {
-    onClick: handleInsertGrid,
-    title: "Layout",
-    children: /*#__PURE__*/_jsx(GridIcon, {})
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Grid",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        onClick: onButtonClick,
+        children: /*#__PURE__*/_jsx(GridIcon, {})
+      })
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      onClose: handleClose,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "Templates"
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: /*#__PURE__*/_jsx(ImageList, {
+          variant: "quilted",
+          cols: 1,
+          children: GRID_TEMPLATES.map(item => {
+            return /*#__PURE__*/_jsx(ImageListItem, {
+              onClick: handleInsertGrid(item),
+              children: /*#__PURE__*/_jsx("img", {
+                src: item.img,
+                alt: item.title,
+                width: "auto",
+                height: "250px"
+              })
+            }, item.img);
+          })
+        })
+      })]
+    })]
   });
 };
 export default GridButton;

package/dist/Editor/Elements/Grid/GridItem.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Transforms, Element } from "slate";
+import { Transforms } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -8,8 +8,12 @@ const GridItem = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     grid,
@@ -31,24 +35,6 @@ const GridItem = props => {
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
-  const onItemSizeDecrease = () => {
-    Transforms.setNodes(editor, {
-      grid: grid <= 1 ? 1 : grid - 1
-    }, {
-      match: node => {
-        return Element.matches(node, element);
-      }
-    });
-  };
-  const onItemSizeIncrease = () => {
-    Transforms.setNodes(editor, {
-      grid: grid >= 12 ? 12 : grid + 1
-    }, {
-      match: node => {
-        return Element.matches(node, element);
-      }
-    });
-  };
   const GridItemToolbar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
@@ -60,11 +46,8 @@ const GridItem = props => {
         onClick: onSettings,
         children: "Settings"
       }), /*#__PURE__*/_jsx("button", {
-        onClick: onItemSizeDecrease,
-        children: "-"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onItemSizeIncrease,
-        children: "+"
+        onClick: onDelete,
+        children: "Delete"
       })]
     }) : null;
   };
@@ -86,6 +69,13 @@ const GridItem = props => {
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    if (path) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-item xs-${grid}`,
     ...attributes,
@@ -102,7 +92,7 @@ const GridItem = props => {
       width: `${itemWidth}%`,
       margin: "0px"
     },
-    children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
+    children: [children, !readOnly && /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
       onSave: onSave,
       onClose: onClose

package/dist/Editor/Elements/Grid/templates/index.js

@@ -0,0 +1,5 @@
+const GRID_TEMPLATES = [{
+  title: "Image Banner with Text",
+  img: require("./full_grid.png")
+}];
+export default GRID_TEMPLATES;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 import { Transforms } from "slate";
-import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox
+import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox, Tooltip
 // styled,
 } from "@mui/material";
 // import { styled } from "@mui/material/styles";
@@ -49,13 +49,17 @@ const LinkButton = props => {
   return /*#__PURE__*/_jsxs("div", {
     ref: linkInputRef,
     className: "popup-wrapper1",
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      className: showInput ? "clicked" : "",
-      active: isBlockActive(editor, "link") ? "active" : "",
-      format: "link",
-      onClick: toggleLink,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: "link"
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Link",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: showInput ? "clicked" : "",
+        active: isBlockActive(editor, "link") ? "active" : "",
+        format: "link",
+        onClick: toggleLink,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "link"
+        })
       })
     }), showInput && /*#__PURE__*/_jsx(Dialog, {
       open: true,