@flozy/editor 3.8.8 → 3.8.9

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,105 @@
+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"
+  }]
+};
+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;

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Paper, Popover } from "@mui/material";
+import useDragOverStyle from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DragOver = props => {
+  const ref = useRef();
+  const classes = useDragOverStyle();
+  const {
+    status
+  } = props;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  useEffect(() => {
+    if (ref?.current) {
+      const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect,
+        nodeType: 1
+      });
+    }
+  }, [ref?.current]);
+  const handleClose = () => {};
+  return status ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.root,
+      ref: ref
+    }), /*#__PURE__*/_jsx(Popover, {
+      sx: classes.popper,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      children: /*#__PURE__*/_jsx(Paper, {
+        className: "papper-root",
+        children: "Attach to this Section"
+      })
+    })]
+  }) : null;
+};
+export default DragOver;

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

@@ -0,0 +1,23 @@
+const useDragOverStyle = () => ({
+  root: {
+    pointerEvents: "none",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    outline: "2px solid #116dff"
+  },
+  popper: {
+    pointerEvents: "none",
+    zIndex: 1200,
+    "& .papper-root": {
+      padding: "8px 12px",
+      color: "#FFF",
+      fontSize: "14px",
+      left: "12px",
+      background: "#116dff"
+    }
+  }
+});
+export default useDragOverStyle;

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -0,0 +1,82 @@
+import { Button, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import SettingsIcon from "@mui/icons-material/Settings";
+import EditIcon from "@mui/icons-material/Edit";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import AddIcon from "@mui/icons-material/Add";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import LinkIcon from "./Icons/LinkIcon";
+const Actions = {
+  ai: {
+    type: "ai",
+    Button: IconButton,
+    Icon: AutoAwesomeIcon,
+    title: "Auto Generate using AI"
+  },
+  addSection: {
+    type: "addSection",
+    Button: Button,
+    Icon: null,
+    title: "Add Section"
+  },
+  addElement: {
+    type: "addElement",
+    Button: IconButton,
+    Icon: AddIcon,
+    title: "Add Element"
+  },
+  settings: {
+    type: "settings",
+    Button: IconButton,
+    Icon: SettingsIcon,
+    title: "Settings",
+    cb: "settings"
+  },
+  link: {
+    type: "link",
+    Button: IconButton,
+    Icon: LinkIcon,
+    title: "Link"
+  },
+  more: {
+    type: "more",
+    Button: IconButton,
+    Icon: MoreVertIcon,
+    title: "More",
+    cb: "more"
+  },
+  drag: {
+    type: 1,
+    Button: IconButton,
+    Icon: DragIndicatorIcon,
+    title: "Drag"
+  },
+  edit: {
+    type: 2,
+    Button: IconButton,
+    Icon: EditIcon,
+    title: "Edit"
+  },
+  close: {
+    type: 3,
+    Button: IconButton,
+    Icon: CloseIcon,
+    title: "close"
+  },
+  moveUp: {
+    type: "moveUp",
+    Button: IconButton,
+    Icon: ArrowUpwardIcon,
+    title: "Move Up"
+  },
+  moveDown: {
+    type: "moveDown",
+    Button: IconButton,
+    Icon: ArrowDownwardIcon,
+    title: "Move Down"
+  }
+};
+export default Actions;

package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const LinkIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M10.1582 7.84185C9.54389 7.22778 8.71084 6.88281 7.84222 6.88281C6.97361 6.88281 6.14055 7.22778 5.52622 7.84185L3.20947 10.1578C2.59513 10.7722 2.25 11.6054 2.25 12.4742C2.25 13.343 2.59513 14.1763 3.20947 14.7906C3.82381 15.4049 4.65704 15.7501 5.52585 15.7501C6.39466 15.7501 7.22788 15.4049 7.84222 14.7906L9.00022 13.6326",
+      stroke: "#000000",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7.8418 10.1582C8.45613 10.7723 9.28918 11.1173 10.1578 11.1173C11.0264 11.1173 11.8595 10.7723 12.4738 10.1582L14.7905 7.84222C15.4049 7.22788 15.75 6.39466 15.75 5.52585C15.75 4.65704 15.4049 3.82381 14.7905 3.20947C14.1762 2.59513 13.343 2.25 12.4742 2.25C11.6054 2.25 10.7721 2.59513 10.1578 3.20947L8.9998 4.36747",
+      stroke: "#000000",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default LinkIcon;

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

@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+import { Paper, Popper, Tooltip } from "@mui/material";
+import Actions from "./Actions";
+import useElementOptionsStyle from "./styles";
+import OptionsPopup from "../OptionsPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ElementOptions = props => {
+  const {
+    open,
+    anchorEl,
+    enable,
+    handleAction,
+    actions,
+    actionsMap,
+    optionsProps,
+    selectedAction
+  } = props;
+  const classes = useElementOptionsStyle();
+  const [menu, setMenu] = useState({});
+  const openMenu = Boolean(menu.anchorEl);
+  const {
+    MenuComp,
+    menuProps
+  } = menu;
+  const isOpen = Boolean(anchorEl) && open;
+  const handleOptionClick = type => e => {
+    if (actionsMap[type]) {
+      const {
+        title,
+        placement,
+        Component,
+        props
+      } = actionsMap[type];
+      setMenu({
+        title,
+        type,
+        anchorEl: e.currentTarget,
+        placement,
+        isComponent: true,
+        MenuComp: Component,
+        menuProps: props
+      });
+    } else {
+      handleAction(type);
+    }
+  };
+  const renderAction = (action, index) => {
+    const {
+      Button,
+      Icon,
+      type,
+      title
+    } = Actions[action] || {};
+    return type ? /*#__PURE__*/_jsx(Tooltip, {
+      title: title,
+      arrow: true,
+      children: /*#__PURE__*/_jsx(Button, {
+        onClick: handleOptionClick(type),
+        className: enable === type || selectedAction === type ? "active" : "",
+        children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
+      })
+    }, `actions_fgele_${type}_${index}`) : null;
+  };
+  const handleClose = () => {
+    setMenu({});
+  };
+  return isOpen ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: "top-start",
+      sx: classes.root,
+      ...optionsProps,
+      children: /*#__PURE__*/_jsx(Paper, {
+        className: "papper-root",
+        children: actions.map(renderAction)
+      })
+    }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
+      open: openMenu,
+      ...menu,
+      handleClose: handleClose,
+      children: /*#__PURE__*/_jsx(MenuComp, {
+        ...menuProps
+      })
+    }) : null]
+  }) : null;
+};
+ElementOptions.defaultProps = {
+  actions: []
+};
+export default ElementOptions;

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

@@ -0,0 +1,41 @@
+const useElementOptionsStyle = () => ({
+  root: {
+    zIndex: 1200,
+    "& .papper-root": {
+      background: "transparent",
+      boxShadow: "none"
+    },
+    "& .MuiButton-root": {
+      padding: "4px",
+      fontSize: "10px",
+      textTransform: "none",
+      marginRight: "6px",
+      background: "#FFF",
+      boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+      "&.active,&:hover ": {
+        color: "#FFF",
+        background: "#1976d2"
+      }
+    },
+    "& .MuiIconButton-root": {
+      padding: "4px",
+      color: "#000",
+      background: "#FFF",
+      borderRadius: "50%",
+      marginRight: "6px",
+      boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
+      border: "1px solid transparent",
+      "& svg": {
+        width: "16px",
+        height: "16px"
+      },
+      "&.active,&:hover ": {
+        color: "#2563EB",
+        background: "#FFF",
+        border: "1px solid #2563EB",
+        boxShadow: "1px 1px 3px #2563EB"
+      }
+    }
+  }
+});
+export default useElementOptionsStyle;