@flozy/editor 3.8.8 → 3.8.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. package/dist/Editor/ChatEditor.js +31 -57
  2. package/dist/Editor/CommonEditor.js +69 -8
  3. package/dist/Editor/DialogWrapper.js +4 -3
  4. package/dist/Editor/Editor.css +5 -12
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +47 -36
  6. package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
  7. package/dist/Editor/Elements/Accordion/AccordionSummary.js +6 -20
  8. package/dist/Editor/Elements/AppHeader/AppHeader.js +36 -23
  9. package/dist/Editor/Elements/Button/EditorButton.js +23 -16
  10. package/dist/Editor/Elements/Embed/Image.js +15 -14
  11. package/dist/Editor/Elements/Embed/Video.js +12 -8
  12. package/dist/Editor/Elements/Emoji/EmojiButton.js +11 -7
  13. package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
  14. package/dist/Editor/Elements/Form/Form.js +1 -1
  15. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +391 -0
  16. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +193 -0
  17. package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +23 -0
  18. package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +184 -0
  19. package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +36 -0
  20. package/dist/Editor/Elements/FreeGrid/Options/More.js +24 -0
  21. package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +47 -0
  22. package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +11 -0
  23. package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +75 -0
  24. package/dist/Editor/Elements/FreeGrid/styles.js +159 -0
  25. package/dist/Editor/Elements/Grid/Grid.js +12 -8
  26. package/dist/Editor/Elements/Grid/GridItem.js +31 -21
  27. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -5
  28. package/dist/Editor/Elements/SimpleText/index.js +9 -8
  29. package/dist/Editor/Elements/SimpleText/style.js +37 -0
  30. package/dist/Editor/ErrorBoundary.js +30 -0
  31. package/dist/Editor/Styles/EditorStyles.js +23 -0
  32. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -25
  33. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
  34. package/dist/Editor/Toolbar/PopupTool/index.js +8 -0
  35. package/dist/Editor/Toolbar/Toolbar.js +7 -0
  36. package/dist/Editor/Toolbar/toolbarGroups.js +5 -0
  37. package/dist/Editor/common/Icon.js +9 -2
  38. package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
  39. package/dist/Editor/common/MentionsPopup/index.js +12 -8
  40. package/dist/Editor/common/RnD/ContextMenu/CMenus.js +105 -0
  41. package/dist/Editor/common/RnD/ContextMenu/index.js +38 -0
  42. package/dist/Editor/common/RnD/ContextMenu/styles.js +21 -0
  43. package/dist/Editor/common/RnD/DragInfo/index.js +31 -0
  44. package/dist/Editor/common/RnD/DragInfo/styles.js +15 -0
  45. package/dist/Editor/common/RnD/DragOver/index.js +46 -0
  46. package/dist/Editor/common/RnD/DragOver/styles.js +23 -0
  47. package/dist/Editor/common/RnD/ElementOptions/Actions.js +82 -0
  48. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +26 -0
  49. package/dist/Editor/common/RnD/ElementOptions/index.js +93 -0
  50. package/dist/Editor/common/RnD/ElementOptions/styles.js +41 -0
  51. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +153 -0
  52. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +58 -0
  53. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +7 -0
  54. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +46 -0
  55. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +46 -0
  56. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +46 -0
  57. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +30 -0
  58. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +46 -0
  59. package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +13 -0
  60. package/dist/Editor/common/RnD/ElementSettings/index.js +17 -0
  61. package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +14 -0
  62. package/dist/Editor/common/RnD/ElementSettings/styles.js +76 -0
  63. package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +52 -0
  64. package/dist/Editor/common/RnD/GuideLines/index.js +33 -0
  65. package/dist/Editor/common/RnD/GuideLines/styles.js +60 -0
  66. package/dist/Editor/common/RnD/OptionsPopup/index.js +50 -0
  67. package/dist/Editor/common/RnD/OptionsPopup/style.js +36 -0
  68. package/dist/Editor/common/RnD/RnDCopy.js +23 -0
  69. package/dist/Editor/common/RnD/ShadowElement.js +34 -0
  70. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +40 -0
  71. package/dist/Editor/common/RnD/SwitchViewport/styles.js +24 -0
  72. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +63 -0
  73. package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +19 -0
  74. package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +13 -0
  75. package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +18 -0
  76. package/dist/Editor/common/RnD/TransformHandles/index.js +62 -0
  77. package/dist/Editor/common/RnD/Utils/alignmentDetection.js +26 -0
  78. package/dist/Editor/common/RnD/Utils/calculateDropItem.js +98 -0
  79. package/dist/Editor/common/RnD/Utils/collisionDetection.js +52 -0
  80. package/dist/Editor/common/RnD/Utils/gridDropItem.js +148 -0
  81. package/dist/Editor/common/RnD/Utils/index.js +251 -0
  82. package/dist/Editor/common/RnD/VirtualElement/index.js +76 -0
  83. package/dist/Editor/common/RnD/VirtualElement/styles.js +27 -0
  84. package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +28 -0
  85. package/dist/Editor/common/RnD/index.js +503 -0
  86. package/dist/Editor/common/RnD/styles.js +4 -0
  87. package/dist/Editor/common/Section/index.js +21 -12
  88. package/dist/Editor/common/Section/styles.js +6 -1
  89. package/dist/Editor/common/Shorthands/elements.js +12 -0
  90. package/dist/Editor/common/StyleBuilder/boxStyle.js +30 -0
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +32 -31
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +4 -2
  95. package/dist/Editor/common/StyleBuilder/index.js +2 -2
  96. package/dist/Editor/common/StyleBuilder/sectionStyle.js +13 -2
  97. package/dist/Editor/helper/RnD/focusOnNewItem.js +39 -0
  98. package/dist/Editor/helper/RnD/scrollToNewSection.js +24 -0
  99. package/dist/Editor/helper/breakpoint.js +5 -0
  100. package/dist/Editor/helper/index.js +139 -22
  101. package/dist/Editor/helper/theme.js +50 -2
  102. package/dist/Editor/hooks/useBreakpoints.js +34 -0
  103. package/dist/Editor/hooks/useMouseMove.js +36 -8
  104. package/dist/Editor/hooks/withCommon.js +2 -1
  105. package/dist/Editor/hooks/withErrorHandling.js +14 -0
  106. package/dist/Editor/utils/RnD/RnDCtrlCmds.js +168 -0
  107. package/dist/Editor/utils/SlateUtilityFunctions.js +31 -5
  108. package/dist/Editor/utils/draftToSlate.js +1 -1
  109. package/dist/Editor/utils/events.js +5 -0
  110. package/dist/Editor/utils/freegrid.js +49 -0
  111. package/dist/Editor/utils/helper.js +29 -0
  112. package/package.json +5 -2
@@ -35,14 +35,18 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
35
35
  setOpenAI
36
36
  } = useEditorContext();
37
37
  useEffect(() => {
38
- if (target && chars.length > 0) {
39
- const domRange = ReactEditor.toDOMRange(editor, target);
40
- const rect = domRange.getBoundingClientRect();
41
- setAnchorEl({
42
- clientWidth: rect.width,
43
- clientHeight: rect.height,
44
- getBoundingClientRect: () => rect
45
- });
38
+ try {
39
+ if (target && chars.length > 0) {
40
+ const domRange = ReactEditor.toDOMRange(editor, target);
41
+ const rect = domRange?.getBoundingClientRect();
42
+ setAnchorEl({
43
+ clientWidth: rect.width,
44
+ clientHeight: rect.height,
45
+ getBoundingClientRect: () => rect
46
+ });
47
+ }
48
+ } catch (err) {
49
+ console.log(err);
46
50
  }
47
51
  }, [chars.length, editor, index, target]);
48
52
  useEffect(() => {
@@ -0,0 +1,105 @@
1
+ import CMDIcon from "@mui/icons-material/KeyboardCommandKey";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+ import { Fragment as _Fragment } from "react/jsx-runtime";
5
+ const CMenus = {
6
+ child: [{
7
+ name: "bringForward",
8
+ label: "Move to Front",
9
+ autoClose: false,
10
+ render: () => {
11
+ return /*#__PURE__*/_jsxs(_Fragment, {
12
+ children: ["Move to Front", " ", /*#__PURE__*/_jsxs("span", {
13
+ className: "shortcut-help-info",
14
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2191"]
15
+ })]
16
+ });
17
+ }
18
+ }, {
19
+ name: "bringBackward",
20
+ label: "Move to Back",
21
+ autoClose: false,
22
+ render: () => {
23
+ return /*#__PURE__*/_jsxs(_Fragment, {
24
+ children: ["Move to Back", " ", /*#__PURE__*/_jsxs("span", {
25
+ className: "shortcut-help-info",
26
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " \u2193"]
27
+ })]
28
+ });
29
+ }
30
+ }, {
31
+ name: "cut",
32
+ label: "Cut",
33
+ render: () => {
34
+ return /*#__PURE__*/_jsxs(_Fragment, {
35
+ children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
36
+ className: "shortcut-help-info",
37
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
38
+ })]
39
+ });
40
+ }
41
+ }, {
42
+ name: "copy",
43
+ label: "Copy",
44
+ render: () => {
45
+ return /*#__PURE__*/_jsxs(_Fragment, {
46
+ children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
47
+ className: "shortcut-help-info",
48
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
49
+ })]
50
+ });
51
+ }
52
+ }, {
53
+ name: "paste",
54
+ label: "Paste",
55
+ render: () => {
56
+ return /*#__PURE__*/_jsxs(_Fragment, {
57
+ children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
58
+ className: "shortcut-help-info",
59
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
60
+ })]
61
+ });
62
+ }
63
+ }, {
64
+ name: "delete",
65
+ label: "Delete"
66
+ }],
67
+ parent: [{
68
+ name: "cut",
69
+ label: "Cut",
70
+ render: () => {
71
+ return /*#__PURE__*/_jsxs(_Fragment, {
72
+ children: ["Cut", " ", /*#__PURE__*/_jsxs("span", {
73
+ className: "shortcut-help-info",
74
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
75
+ })]
76
+ });
77
+ }
78
+ }, {
79
+ name: "copy",
80
+ label: "Copy",
81
+ render: () => {
82
+ return /*#__PURE__*/_jsxs(_Fragment, {
83
+ children: ["Copy", " ", /*#__PURE__*/_jsxs("span", {
84
+ className: "shortcut-help-info",
85
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
86
+ })]
87
+ });
88
+ }
89
+ }, {
90
+ name: "paste",
91
+ label: "Paste",
92
+ render: () => {
93
+ return /*#__PURE__*/_jsxs(_Fragment, {
94
+ children: ["Paste", " ", /*#__PURE__*/_jsxs("span", {
95
+ className: "shortcut-help-info",
96
+ children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
97
+ })]
98
+ });
99
+ }
100
+ }, {
101
+ name: "delete",
102
+ label: "Delete"
103
+ }]
104
+ };
105
+ export default CMenus;
@@ -0,0 +1,38 @@
1
+ import React from "react";
2
+ import { Popover, MenuItem } from "@mui/material";
3
+ import CMenus from "./CMenus";
4
+ import useContextMenuStyle from "./styles";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const ContextMenu = props => {
7
+ const classes = useContextMenuStyle();
8
+ const {
9
+ open,
10
+ type,
11
+ contextMenu,
12
+ handleClose
13
+ } = props;
14
+ const {
15
+ path,
16
+ x,
17
+ y
18
+ } = contextMenu;
19
+ const menus = CMenus[type] || [];
20
+ return open && path ? /*#__PURE__*/_jsx(Popover, {
21
+ open: contextMenu !== null,
22
+ sx: classes.root,
23
+ onClose: handleClose(null),
24
+ anchorReference: "anchorPosition",
25
+ anchorPosition: contextMenu !== null ? {
26
+ top: y,
27
+ left: x
28
+ } : undefined,
29
+ children: menus.map((m, i) => {
30
+ return /*#__PURE__*/_jsx(MenuItem, {
31
+ className: "cm-menu-item",
32
+ onClick: handleClose(m),
33
+ children: m?.render ? m.render() : m.label
34
+ }, `cm_${i}`);
35
+ })
36
+ }) : null;
37
+ };
38
+ export default ContextMenu;
@@ -0,0 +1,21 @@
1
+ const useContextMenuStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .cm-menu-item": {
5
+ width: "190px",
6
+ justifyContent: "space-between",
7
+ "& .shortcut-help-info": {
8
+ display: "flex",
9
+ justifyContent: "center",
10
+ alignItems: "center",
11
+ fontSize: "12px",
12
+ color: "#bbb",
13
+ "& svg": {
14
+ width: "12px",
15
+ marginRight: "4px"
16
+ }
17
+ }
18
+ }
19
+ }
20
+ });
21
+ export default useContextMenuStyle;
@@ -0,0 +1,31 @@
1
+ import React from "react";
2
+ import { Paper, Popper } from "@mui/material";
3
+ import useDragInfoStyle from "./styles";
4
+ import { jsxs as _jsxs } from "react/jsx-runtime";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const DragInfo = props => {
7
+ const {
8
+ open,
9
+ dragging,
10
+ anchorEl
11
+ } = props;
12
+ const {
13
+ position
14
+ } = dragging;
15
+ const {
16
+ diffX
17
+ } = position || {};
18
+ const classes = useDragInfoStyle();
19
+ const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
20
+ return open ? /*#__PURE__*/_jsx(Popper, {
21
+ open: open,
22
+ anchorEl: anchorEl,
23
+ placement: "top-start",
24
+ sx: classes.root,
25
+ children: /*#__PURE__*/_jsxs(Paper, {
26
+ className: "papper-root",
27
+ children: ["x: ", x, ", y: ", position?.y]
28
+ })
29
+ }) : null;
30
+ };
31
+ export default DragInfo;
@@ -0,0 +1,15 @@
1
+ const useDragInfoStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .papper-root": {
5
+ padding: "4px 6px",
6
+ background: "#2563EB",
7
+ color: "#FFF",
8
+ fontSize: "12px",
9
+ left: "12px",
10
+ marginLeft: "6px",
11
+ borderRadius: "2px"
12
+ }
13
+ }
14
+ });
15
+ export default useDragInfoStyle;
@@ -0,0 +1,46 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { Box, Paper, Popover } from "@mui/material";
3
+ import useDragOverStyle from "./styles";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { Fragment as _Fragment } from "react/jsx-runtime";
6
+ import { jsxs as _jsxs } from "react/jsx-runtime";
7
+ const DragOver = props => {
8
+ const ref = useRef();
9
+ const classes = useDragOverStyle();
10
+ const {
11
+ status
12
+ } = props;
13
+ const [anchorEl, setAnchorEl] = useState(null);
14
+ const open = Boolean(anchorEl);
15
+ useEffect(() => {
16
+ if (ref?.current) {
17
+ const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
18
+ setAnchorEl({
19
+ getBoundingClientRect,
20
+ nodeType: 1
21
+ });
22
+ }
23
+ }, [ref?.current]);
24
+ const handleClose = () => {};
25
+ return status ? /*#__PURE__*/_jsxs(_Fragment, {
26
+ children: [/*#__PURE__*/_jsx(Box, {
27
+ component: "div",
28
+ sx: classes.root,
29
+ ref: ref
30
+ }), /*#__PURE__*/_jsx(Popover, {
31
+ sx: classes.popper,
32
+ open: open,
33
+ anchorEl: anchorEl,
34
+ onClose: handleClose,
35
+ anchorOrigin: {
36
+ vertical: "top",
37
+ horizontal: "center"
38
+ },
39
+ children: /*#__PURE__*/_jsx(Paper, {
40
+ className: "papper-root",
41
+ children: "Attach to this Section"
42
+ })
43
+ })]
44
+ }) : null;
45
+ };
46
+ export default DragOver;
@@ -0,0 +1,23 @@
1
+ const useDragOverStyle = () => ({
2
+ root: {
3
+ pointerEvents: "none",
4
+ position: "absolute",
5
+ left: 0,
6
+ top: 0,
7
+ width: "100%",
8
+ height: "100%",
9
+ outline: "2px solid #116dff"
10
+ },
11
+ popper: {
12
+ pointerEvents: "none",
13
+ zIndex: 1200,
14
+ "& .papper-root": {
15
+ padding: "8px 12px",
16
+ color: "#FFF",
17
+ fontSize: "14px",
18
+ left: "12px",
19
+ background: "#116dff"
20
+ }
21
+ }
22
+ });
23
+ export default useDragOverStyle;
@@ -0,0 +1,82 @@
1
+ import { Button, IconButton } from "@mui/material";
2
+ import CloseIcon from "@mui/icons-material/Close";
3
+ import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
4
+ import SettingsIcon from "@mui/icons-material/Settings";
5
+ import EditIcon from "@mui/icons-material/Edit";
6
+ import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
7
+ import MoreVertIcon from "@mui/icons-material/MoreVert";
8
+ import AddIcon from "@mui/icons-material/Add";
9
+ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
10
+ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
11
+ import LinkIcon from "./Icons/LinkIcon";
12
+ const Actions = {
13
+ ai: {
14
+ type: "ai",
15
+ Button: IconButton,
16
+ Icon: AutoAwesomeIcon,
17
+ title: "Auto Generate using AI"
18
+ },
19
+ addSection: {
20
+ type: "addSection",
21
+ Button: Button,
22
+ Icon: null,
23
+ title: "Add Section"
24
+ },
25
+ addElement: {
26
+ type: "addElement",
27
+ Button: IconButton,
28
+ Icon: AddIcon,
29
+ title: "Add Element"
30
+ },
31
+ settings: {
32
+ type: "settings",
33
+ Button: IconButton,
34
+ Icon: SettingsIcon,
35
+ title: "Settings",
36
+ cb: "settings"
37
+ },
38
+ link: {
39
+ type: "link",
40
+ Button: IconButton,
41
+ Icon: LinkIcon,
42
+ title: "Link"
43
+ },
44
+ more: {
45
+ type: "more",
46
+ Button: IconButton,
47
+ Icon: MoreVertIcon,
48
+ title: "More",
49
+ cb: "more"
50
+ },
51
+ drag: {
52
+ type: 1,
53
+ Button: IconButton,
54
+ Icon: DragIndicatorIcon,
55
+ title: "Drag"
56
+ },
57
+ edit: {
58
+ type: 2,
59
+ Button: IconButton,
60
+ Icon: EditIcon,
61
+ title: "Edit"
62
+ },
63
+ close: {
64
+ type: 3,
65
+ Button: IconButton,
66
+ Icon: CloseIcon,
67
+ title: "close"
68
+ },
69
+ moveUp: {
70
+ type: "moveUp",
71
+ Button: IconButton,
72
+ Icon: ArrowUpwardIcon,
73
+ title: "Move Up"
74
+ },
75
+ moveDown: {
76
+ type: "moveDown",
77
+ Button: IconButton,
78
+ Icon: ArrowDownwardIcon,
79
+ title: "Move Down"
80
+ }
81
+ };
82
+ export default Actions;
@@ -0,0 +1,26 @@
1
+ import React from "react";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { jsxs as _jsxs } from "react/jsx-runtime";
4
+ const LinkIcon = () => {
5
+ return /*#__PURE__*/_jsxs("svg", {
6
+ xmlns: "http://www.w3.org/2000/svg",
7
+ width: "18",
8
+ height: "18",
9
+ viewBox: "0 0 18 18",
10
+ fill: "none",
11
+ children: [/*#__PURE__*/_jsx("path", {
12
+ 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",
13
+ stroke: "#000000",
14
+ strokeWidth: "1.5",
15
+ strokeLinecap: "round",
16
+ strokeLinejoin: "round"
17
+ }), /*#__PURE__*/_jsx("path", {
18
+ 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",
19
+ stroke: "#000000",
20
+ strokeWidth: "1.5",
21
+ strokeLinecap: "round",
22
+ strokeLinejoin: "round"
23
+ })]
24
+ });
25
+ };
26
+ export default LinkIcon;
@@ -0,0 +1,93 @@
1
+ import React, { useState } from "react";
2
+ import { Paper, Popper, Tooltip } from "@mui/material";
3
+ import Actions from "./Actions";
4
+ import useElementOptionsStyle from "./styles";
5
+ import OptionsPopup from "../OptionsPopup";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { Fragment as _Fragment } from "react/jsx-runtime";
8
+ import { jsxs as _jsxs } from "react/jsx-runtime";
9
+ const ElementOptions = props => {
10
+ const {
11
+ open,
12
+ anchorEl,
13
+ enable,
14
+ handleAction,
15
+ actions,
16
+ actionsMap,
17
+ optionsProps,
18
+ selectedAction
19
+ } = props;
20
+ const classes = useElementOptionsStyle();
21
+ const [menu, setMenu] = useState({});
22
+ const openMenu = Boolean(menu.anchorEl);
23
+ const {
24
+ MenuComp,
25
+ menuProps
26
+ } = menu;
27
+ const isOpen = Boolean(anchorEl) && open;
28
+ const handleOptionClick = type => e => {
29
+ if (actionsMap[type]) {
30
+ const {
31
+ title,
32
+ placement,
33
+ Component,
34
+ props
35
+ } = actionsMap[type];
36
+ setMenu({
37
+ title,
38
+ type,
39
+ anchorEl: e.currentTarget,
40
+ placement,
41
+ isComponent: true,
42
+ MenuComp: Component,
43
+ menuProps: props
44
+ });
45
+ } else {
46
+ handleAction(type);
47
+ }
48
+ };
49
+ const renderAction = (action, index) => {
50
+ const {
51
+ Button,
52
+ Icon,
53
+ type,
54
+ title
55
+ } = Actions[action] || {};
56
+ return type ? /*#__PURE__*/_jsx(Tooltip, {
57
+ title: title,
58
+ arrow: true,
59
+ children: /*#__PURE__*/_jsx(Button, {
60
+ onClick: handleOptionClick(type),
61
+ className: enable === type || selectedAction === type ? "active" : "",
62
+ children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
63
+ })
64
+ }, `actions_fgele_${type}_${index}`) : null;
65
+ };
66
+ const handleClose = () => {
67
+ setMenu({});
68
+ };
69
+ return isOpen ? /*#__PURE__*/_jsxs(_Fragment, {
70
+ children: [/*#__PURE__*/_jsx(Popper, {
71
+ open: open,
72
+ anchorEl: anchorEl,
73
+ placement: "top-start",
74
+ sx: classes.root,
75
+ ...optionsProps,
76
+ children: /*#__PURE__*/_jsx(Paper, {
77
+ className: "papper-root",
78
+ children: actions.map(renderAction)
79
+ })
80
+ }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
81
+ open: openMenu,
82
+ ...menu,
83
+ handleClose: handleClose,
84
+ children: /*#__PURE__*/_jsx(MenuComp, {
85
+ ...menuProps
86
+ })
87
+ }) : null]
88
+ }) : null;
89
+ };
90
+ ElementOptions.defaultProps = {
91
+ actions: []
92
+ };
93
+ export default ElementOptions;
@@ -0,0 +1,41 @@
1
+ const useElementOptionsStyle = () => ({
2
+ root: {
3
+ zIndex: 1200,
4
+ "& .papper-root": {
5
+ background: "transparent",
6
+ boxShadow: "none"
7
+ },
8
+ "& .MuiButton-root": {
9
+ padding: "4px",
10
+ fontSize: "10px",
11
+ textTransform: "none",
12
+ marginRight: "6px",
13
+ background: "#FFF",
14
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
15
+ "&.active,&:hover ": {
16
+ color: "#FFF",
17
+ background: "#1976d2"
18
+ }
19
+ },
20
+ "& .MuiIconButton-root": {
21
+ padding: "4px",
22
+ color: "#000",
23
+ background: "#FFF",
24
+ borderRadius: "50%",
25
+ marginRight: "6px",
26
+ boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
27
+ border: "1px solid transparent",
28
+ "& svg": {
29
+ width: "16px",
30
+ height: "16px"
31
+ },
32
+ "&.active,&:hover ": {
33
+ color: "#2563EB",
34
+ background: "#FFF",
35
+ border: "1px solid #2563EB",
36
+ boxShadow: "1px 1px 3px #2563EB"
37
+ }
38
+ }
39
+ }
40
+ });
41
+ export default useElementOptionsStyle;