@flozy/editor 1.3.1 → 1.3.3

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,11 +56,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     h: null
   });
   const {
-    defaultBG
+    defaultBG,
+    needDotsBG,
+    footer,
+    needLayout = true,
+    CHARACTERS = []
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
-    return withCommon(createEditor());
+    return withCommon(createEditor(), {
+      needLayout
+    });
   }, [collaborativeEditor]);
   const pageSettings = editor?.children?.find(f => f.type === "page-settings");
   const {
@@ -168,7 +173,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     target,
     index
   } = mentions;
-  const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
+  const chars = CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
   const handleEditorChange = newValue => {
     setValue(newValue);
     if (!isInteracted) {
@@ -218,19 +223,23 @@ 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,
+    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__*/_jsxs(Slate, {
         editor: editor,
@@ -280,5 +289,4 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 CommonEditor.displayName = "CommonEditor";
-const CHARACTERS = ["Aayla Secura", "Adi Gallia"];
 export default CommonEditor;

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/Editor.css

@@ -86,9 +86,9 @@ blockquote{
 
 .grid-container {
     display: flex;
-    border-radius: 12px;
-    background-color: #F3F6F9;
-    border: 1px solid #E5EAF2;
+    border-radius: 0px;
+    background-color: transparent;
+    border: 0px solid #E5EAF2;
     padding: 16px;
     position: relative;
     flex-wrap: wrap;
@@ -438,4 +438,26 @@ blockquote{
 
 .MuiIconButton-root.btnActive {
     background-color: #ccc;
+}
+
+.embed .element-toolbar {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+}
+
+.resize-br {
+    position: absolute !important;
+    bottom: 2px;
+    right: 2px;
+}
+.visible-on-hover {
+    display: none !important;
+}
+.has-hover:hover .visible-on-hover {
+    display: flex !important;
 }

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/Button/EditorButton.js

@@ -106,6 +106,12 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
+  const borderStyle = borderColor?.indexOf("linear") >= 0 ? {
+    borderImageSource: borderColor,
+    borderImageSlice: 1
+  } : {
+    borderColor: borderColor || "none"
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: "editor-btn-wrapper",
     ...attributes,
@@ -116,7 +122,9 @@ const EditorButton = props => {
         className: "editor-btn",
         style: {
           background: bgColor || "rgb(30, 75, 122)",
-          border: borderColor ? `1px solid ${borderColor}` : "none",
+          borderWidth: "1px",
+          borderBlockStyle: "solid",
+          ...borderStyle,
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
           paddingLeft: `${left || 8}px`,
           paddingRight: `${right || 8}px`,

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/EmbedPopup.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import embedImageStyle from "../../common/StyleBuilder/embedImageStyle";
+import embedVideoStyle from "../../common/StyleBuilder/embedVideoStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const EmbedPopup = props => {
   const {
@@ -11,12 +12,12 @@ const EmbedPopup = props => {
     format
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Image",
-    type: format === "image" ? "embedImageStyle" : "embedImageStyle",
+    title: format === "image" ? "Image" : "Video",
+    type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: format === "image" ? embedImageStyle : embedImageStyle,
+    renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
     customProps: customProps
   });
 };

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

@@ -1,10 +1,14 @@
 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, Tooltip } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SettingsIcon from "@mui/icons-material/Settings";
+import AddIcon from "@mui/icons-material/Add";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -19,14 +23,24 @@ const Image = ({
     bannerSpacing,
     alignment,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius
   } = element;
+  const {
+    readOnly
+  } = customProps;
   const {
     left,
     top,
     right,
     bottom
   } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const {
     vertical,
     horizantal
@@ -85,6 +99,11 @@ const Image = ({
   const onClose = () => {
     setOpenSettings(false);
   };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   const onAddText = () => {
     Transforms.wrapNodes(editor, {
       type: "image-text-wrapper",
@@ -96,19 +115,34 @@ const Image = ({
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar",
       contentEditable: false,
-      children: [/*#__PURE__*/_jsx("button", {
-        onClick: onAddText,
-        children: "Add Text"
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: onSettings,
-        children: "Settings"
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Text",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddText,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
       })]
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "embed",
+    className: "embed has-hover",
     style: {
       display: "flex",
       width: `calc(100% - ${totalMinus}px)`,
@@ -123,11 +157,12 @@ 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,
-      customProps: customProps
+      customProps: customProps,
+      format: "image"
     }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
@@ -135,22 +170,21 @@ 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", {
+        style: {
+          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
+        },
         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"
-        })
+        className: "resize-br visible-on-hover",
+        children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]
   });

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

@@ -1,14 +1,21 @@
 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, Tooltip } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import SettingsIcon from "@mui/icons-material/Settings";
+import AddIcon from "@mui/icons-material/Add";
+import EmbedPopup from "./EmbedPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
   attributes,
   element,
-  children
+  children,
+  customProps
 }) => {
   const {
     url,
@@ -17,13 +24,18 @@ const Video = ({
   const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
+  const {
+    readOnly
+  } = customProps;
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const path = ReactEditor.findPath(editor, element);
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -38,9 +50,53 @@ const Video = ({
       });
     }
   }, [resizing]);
+  const ToolBar = () => {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar visible-on-hover",
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Delete",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onDelete,
+          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+        })
+      })]
+    });
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "embed",
+    className: "embed has-hover",
     style: {
       display: "flex",
       width: "100%",
@@ -48,14 +104,20 @@ const Video = ({
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
     },
     ...element.attr,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps,
+      format: "video"
+    }) : null, /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
         position: "relative",
         width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
-      children: [
+      children: [/*#__PURE__*/_jsx(ToolBar, {}),
       // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
       // So during resize replace the iframe with a simple div
       resizing ? /*#__PURE__*/_jsx("div", {
@@ -71,21 +133,21 @@ const Video = ({
           icon: "videoPlayer"
         })
       }) : /*#__PURE__*/_jsx("iframe", {
+        className: "embedd-iframe",
+        style: {
+          border: "none",
+          width: "100%",
+          height: "100%"
+        },
         src: url,
-        frameBorder: "0",
         title: alt
-      }), selected && /*#__PURE__*/_jsx("button", {
+      }), /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
-          width: "15px",
-          height: "15px",
-          opacity: 1,
-          background: "transparent"
+          background: "#FFF"
         },
-        className: "resize",
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "resize"
-        })
+        className: "resize-br visible-on-hover",
+        children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), children]
   });