@flozy/editor 4.0.3 → 4.0.4

package/dist/Editor/common/Icon.js

@@ -1,17 +1,18 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill, BsCodeSlash } from "react-icons/bs";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { IoIosImage } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
+import { CiGrid32 } from "react-icons/ci";
+import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, CalendarIconNew, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon } from "./iconListV2";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
 import RedoIcon from "../assets/svg/RedoIcon";
@@ -28,11 +29,11 @@ const iconList = {
     size: 20
   }),
   // bold: <MdFormatBold size={20} />,
-  bold: /*#__PURE__*/_jsx(BoldIcon, {
+  bold: /*#__PURE__*/_jsx(BoldTextFormatIcon, {
     size: 20
   }),
   // italic: <MdFormatItalic size={20} />,
-  italic: /*#__PURE__*/_jsx(ItalicIcon, {
+  italic: /*#__PURE__*/_jsx(ItalicTextFormatIcon, {
     size: 20
   }),
   // strikethrough: <MdStrikethroughS size={20} />,
@@ -40,7 +41,7 @@ const iconList = {
     size: 20
   }),
   // underline: <MdFormatUnderlined size={20} />,
-  underline: /*#__PURE__*/_jsx(UnderLineIcon, {
+  underline: /*#__PURE__*/_jsx(UnderlineTextFormatIcon, {
     size: 20
   }),
   headingOne: /*#__PURE__*/_jsx(BsTypeH1, {
@@ -83,31 +84,33 @@ const iconList = {
     size: 18,
     fill: "#64748B"
   }),
-  orderedList: /*#__PURE__*/_jsx(MdFormatListNumbered, {
+  alignJustify: /*#__PURE__*/_jsx(MdFormatAlignJustify, {
     size: 18,
     fill: "#64748B"
   }),
-  unorderedList: /*#__PURE__*/_jsx(MdFormatListBulleted, {
+  orderedList: /*#__PURE__*/_jsx(OrderedListTextFormatIcon, {
+    size: 18,
+    fill: "#64748B"
+  }),
+  unorderedList: /*#__PURE__*/_jsx(BulletedListTextFormatIcon, {
     size: 18,
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(LinkIcon, {
+  link: /*#__PURE__*/_jsx(LinkIconV2, {
     size: 20
   }),
   // image: <MdImage size={20} />,
-  image: /*#__PURE__*/_jsx(ImageIcon, {
+  image: /*#__PURE__*/_jsx(ImageElementIcon, {
     size: 20
   }),
   // video: <MdVideoLibrary size={20} />,
-  video: /*#__PURE__*/_jsx(VideoIcon, {
-    size: 20
-  }),
+  video: /*#__PURE__*/_jsx(VideoElementIcon, {}),
   add: /*#__PURE__*/_jsx(MdAdd, {
     size: 20
   }),
   // table: <AiOutlineTable size={20} />,
-  table: /*#__PURE__*/_jsx(TableIcon, {
+  table: /*#__PURE__*/_jsx(TableElementIcon, {
     size: 20
   }),
   insertRowBelow: /*#__PURE__*/_jsx(AiOutlineInsertRowBelow, {
@@ -149,16 +152,16 @@ const iconList = {
   pen: /*#__PURE__*/_jsx(AiFillEdit, {
     size: 20
   }),
-  emoji: /*#__PURE__*/_jsx(MdEmojiEmotions, {
+  emoji: /*#__PURE__*/_jsx(EmojiElementIcon, {
     size: 20,
     fill: "#64748B"
   }),
-  grid: /*#__PURE__*/_jsx(GridIcon, {}),
-  accordion: /*#__PURE__*/_jsx(AccordionIcon, {}),
-  signature: /*#__PURE__*/_jsx(SignatureIcon, {}),
-  button: /*#__PURE__*/_jsx(ButtonIcon, {}),
-  carousel: /*#__PURE__*/_jsx(Carousal, {}),
-  form: /*#__PURE__*/_jsx(FormIcon, {}),
+  grid: /*#__PURE__*/_jsx(GridElementIcon, {}),
+  accordion: /*#__PURE__*/_jsx(AccordionTextFormatIcon, {}),
+  signature: /*#__PURE__*/_jsx(SignatureElementIcon, {}),
+  button: /*#__PURE__*/_jsx(ButtonElementIcon, {}),
+  carousel: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
+  form: /*#__PURE__*/_jsx(FormElementIcon, {}),
   tableCellResizeLeft: /*#__PURE__*/_jsx(BsArrowBarRight, {
     size: 20
   }),
@@ -177,11 +180,11 @@ const iconList = {
   addRow: /*#__PURE__*/_jsx(FcAddRow, {
     size: 20
   }),
-  "check-list-item": /*#__PURE__*/_jsx(CheckboxIcon, {
+  "check-list-item": /*#__PURE__*/_jsx(CheckListTextFormatIcon, {
     size: 20
   }),
-  embed: /*#__PURE__*/_jsx(LinkIcon, {}),
-  topbanner: /*#__PURE__*/_jsx(IoIosImage, {
+  embed: /*#__PURE__*/_jsx(EmbedElementIcon, {}),
+  topbanner: /*#__PURE__*/_jsx(TopBannerElementIcon, {
     size: 20,
     fill: "#64748B"
   }),
@@ -197,8 +200,8 @@ const iconList = {
   }),
   appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
-  docsUpload: /*#__PURE__*/_jsx(DocsUpload, {}),
-  colorbox: /*#__PURE__*/_jsx(BsFillMenuButtonWideFill, {
+  docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
+  colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
     style: {
       fill: "#64748B"
     },
@@ -210,7 +213,7 @@ const iconList = {
   checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
   excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
   csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
-  divider: /*#__PURE__*/_jsx(DividerIcon, {}),
+  divider: /*#__PURE__*/_jsx(DividerElementIcon, {}),
   SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
@@ -221,6 +224,12 @@ const iconList = {
     }
   }),
   calenderNewIcon: /*#__PURE__*/_jsx(CalendarIconNew, {}),
+  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
+    size: 20,
+    style: {
+      fill: "#64748B"
+    }
+  }),
   text: /*#__PURE__*/_jsx(Text, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),

package/dist/Editor/common/ImageList.js

@@ -45,16 +45,29 @@ const QuiltedImageList = props => {
     }, `img_upload_btn`) : null, (itemData || []).map(item => {
       const isSelected = (selected || []).find(f => f.img === item.img);
       return /*#__PURE__*/_jsxs(ImageListItem, {
+        // cols={item.cols || 1}
+        // rows={item.rows || 1}
+        sx: {
+          padding: "2px",
+          overflow: "hidden"
+          // position: "relative",
+        },
         children: [/*#__PURE__*/_jsx("img", {
           ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
           alt: item.title,
-          loading: "lazy"
+          loading: "lazy",
+          style: {
+            width: "100%",
+            height: "145px",
+            borderRadius: "12px"
+            // display: "block",
+          }
         }), !readOnly ? /*#__PURE__*/_jsx(ImageListItemBar, {
           sx: {
             background: "none"
           },
-          position: "bottom",
-          actionPosition: "left",
+          position: "start",
+          actionPosition: "right",
           actionIcon: /*#__PURE__*/_jsx(IconButton, {
             onClick: onImageSelect(item, !isSelected),
             children: /*#__PURE__*/_jsx(CheckCircleIcon, {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider, Box, IconButton } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
 import Icon from "../Icon";
 import ImageSelectorStyles from "./Styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { CloseIconImageUpload, ImageElementIcon } from "../iconListV2";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,11 +53,28 @@ const ImageSelector = props => {
     fullWidth: true,
     sx: classes.dialogWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
-      children: /*#__PURE__*/_jsxs(Typography, {
-        sx: classes.titleTypo,
-        children: ["Add ", title]
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: classes.titleTypo,
+          children: ["Add ", title]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          sx: {
+            padding: "0px"
+          },
+          onClick: onClose,
+          children: /*#__PURE__*/_jsx(CloseIconImageUpload, {})
+        })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px 4px 8px 0px #0000000A"
+      }
+    }), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
         children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
@@ -84,9 +102,7 @@ const ImageSelector = props => {
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("choose")} ${TAB_SHOW[title].indexOf("choose") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "media"
-              }),
+              icon: /*#__PURE__*/_jsx(ImageElementIcon, {}),
               iconPosition: "start",
               value: "choose",
               label: `Choose ${title}`
@@ -115,7 +131,12 @@ const ImageSelector = props => {
           })
         })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
+    }), /*#__PURE__*/_jsx(Divider, {
+      sx: {
+        boxShadow: "0px -4px 8px 0px #0000000A",
+        borderBottomWidth: "0px"
+      }
+    }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: {
         p: 2
       },

package/dist/Editor/common/ImageSelector/Styles.js

@@ -86,7 +86,8 @@ const ImageSelectorStyles = theme => ({
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
-    color: theme?.palette?.editor?.textColor
+    color: theme?.palette?.editor?.textColor,
+    fontFamily: 'Inter, sans-serif'
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

package/dist/Editor/common/LinkSettings/index.js

@@ -35,11 +35,12 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
+  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles();
+  const classes = LinkSettingsStyles(themeType);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

package/dist/Editor/common/LinkSettings/style.js

@@ -1,32 +1,35 @@
-const ButtonNavSettingsStyles = () => ({
+const ButtonNavSettingsStyles = themeType => ({
   dialogContainer: {
-    '& .MuiDialogContent-root': {
+    "& .MuiPaper-root": {
+      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
+    },
+    "& .MuiDialogContent-root": {
       padding: "0px 20px"
     },
-    '& .MuiDialogActions-root': {
+    "& .MuiDialogActions-root": {
       padding: "10px"
     },
-    '& .MuiTypography-h6': {
+    "& .MuiTypography-h6": {
       fontWeight: 600,
       fontSize: "16px",
       paddingRight: "20px"
     },
     "& .MuiGrid-container": {
-      marginTop: '0px'
+      marginTop: "0px"
     },
     "& .MuiGrid-item": {
       padding: "14px"
     }
   },
   saveBtn: {
-    color: '#fff',
+    color: "#fff",
     background: "#2563EB",
     fontSize: "14px",
     fontWeight: 500,
     padding: "4px 24px",
     textTransform: "none",
     "&:hover": {
-      color: '#fff',
+      color: "#fff",
       background: "#2563EB"
     }
   },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
     }
   },
   closeIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -58,7 +58,7 @@ const usePopupStyles = theme => ({
         borderRadius: "0px",
         justifyContent: "start",
         "& svg": {
-          margin: "8px",
+          margin: "5.5px",
           width: "24px",
           height: "24px"
         },

package/dist/Editor/common/MentionsPopup/index.js

@@ -35,14 +35,18 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     setOpenAI
   } = useEditorContext();
   useEffect(() => {
-    if (target && chars.length > 0) {
-      const domRange = ReactEditor.toDOMRange(editor, target);
-      const rect = domRange.getBoundingClientRect();
-      setAnchorEl({
-        clientWidth: rect.width,
-        clientHeight: rect.height,
-        getBoundingClientRect: () => rect
-      });
+    try {
+      if (target && chars.length > 0) {
+        const domRange = ReactEditor.toDOMRange(editor, target);
+        const rect = domRange?.getBoundingClientRect();
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
+      }
+    } catch (err) {
+      console.log(err);
     }
   }, [chars.length, editor, index, target]);
   useEffect(() => {

package/dist/Editor/common/RnD/ContextMenu/CMenus.js

@@ -0,0 +1,142 @@
+import CMDIcon from "@mui/icons-material/KeyboardCommandKey";
+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 CMenus = {
+  child: [{
+    name: "bringForward",
+    label: "Move to Front",
+    autoClose: false,
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Move to Front", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2191"]
+        })]
+      });
+    }
+  }, {
+    name: "bringBackward",
+    label: "Move to Back",
+    autoClose: false,
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Move to Back", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2193"]
+        })]
+      });
+    }
+  }, {
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }],
+  parent: [{
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }],
+  "parent-container": [{
+    name: "cut",
+    label: "Cut",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
+        })]
+      });
+    }
+  }, {
+    name: "copy",
+    label: "Copy",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
+        })]
+      });
+    }
+  }, {
+    name: "paste",
+    label: "Paste",
+    render: () => {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
+          className: "shortcut-help-info",
+          children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
+        })]
+      });
+    }
+  }, {
+    name: "delete",
+    label: "Delete"
+  }]
+};
+export default CMenus;

package/dist/Editor/common/RnD/ContextMenu/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Popover, MenuItem } from "@mui/material";
+import CMenus from "./CMenus";
+import useContextMenuStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ContextMenu = props => {
+  const classes = useContextMenuStyle();
+  const {
+    open,
+    type,
+    contextMenu,
+    handleClose
+  } = props;
+  const {
+    path,
+    x,
+    y
+  } = contextMenu;
+  const menus = CMenus[type] || [];
+  return open && path ? /*#__PURE__*/_jsx(Popover, {
+    open: contextMenu !== null,
+    sx: classes.root,
+    onClose: handleClose(null),
+    anchorReference: "anchorPosition",
+    anchorPosition: contextMenu !== null ? {
+      top: y,
+      left: x
+    } : undefined,
+    children: menus.map((m, i) => {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        className: "cm-menu-item",
+        onClick: handleClose(m),
+        children: m?.render ? m.render() : m.label
+      }, `cm_${i}`);
+    })
+  }) : null;
+};
+export default ContextMenu;

package/dist/Editor/common/RnD/ContextMenu/styles.js

@@ -0,0 +1,21 @@
+const useContextMenuStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .cm-menu-item": {
+      width: "190px",
+      justifyContent: "space-between",
+      "& .shortcut-help-info": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: "12px",
+        color: "#bbb",
+        "& svg": {
+          width: "12px",
+          marginRight: "4px"
+        }
+      }
+    }
+  }
+});
+export default useContextMenuStyle;

package/dist/Editor/common/RnD/DragInfo/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Paper, Popper } from "@mui/material";
+import useDragInfoStyle from "./styles";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DragInfo = props => {
+  const {
+    open,
+    dragging,
+    anchorEl
+  } = props;
+  const {
+    position
+  } = dragging;
+  const {
+    diffX
+  } = position || {};
+  const classes = useDragInfoStyle();
+  const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
+  return open ? /*#__PURE__*/_jsx(Popper, {
+    open: open,
+    anchorEl: anchorEl,
+    placement: "top-start",
+    sx: classes.root,
+    children: /*#__PURE__*/_jsxs(Paper, {
+      className: "papper-root",
+      children: ["x: ", x, ", y: ", position?.y]
+    })
+  }) : null;
+};
+export default DragInfo;

package/dist/Editor/common/RnD/DragInfo/styles.js

@@ -0,0 +1,15 @@
+const useDragInfoStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .papper-root": {
+      padding: "4px 6px",
+      background: "#2563EB",
+      color: "#FFF",
+      fontSize: "12px",
+      left: "12px",
+      marginLeft: "6px",
+      borderRadius: "2px"
+    }
+  }
+});
+export default useDragInfoStyle;