@flozy/editor 3.8.9 → 3.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +55 -45
- package/dist/Editor/CommonEditor.js +8 -69
- package/dist/Editor/DialogWrapper.js +3 -4
- package/dist/Editor/Editor.css +12 -5
- package/dist/Editor/Elements/AI/PopoverAIInput.js +36 -47
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +15 -4
- package/dist/Editor/Elements/AppHeader/AppHeader.js +23 -36
- package/dist/Editor/Elements/Button/EditorButton.js +16 -23
- package/dist/Editor/Elements/Embed/Image.js +14 -15
- package/dist/Editor/Elements/Embed/Video.js +8 -12
- package/dist/Editor/Elements/Emoji/EmojiButton.js +7 -11
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Grid/Grid.js +8 -12
- package/dist/Editor/Elements/Grid/GridItem.js +21 -31
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +5 -1
- package/dist/Editor/Elements/SimpleText/index.js +8 -9
- package/dist/Editor/Elements/SimpleText/style.js +0 -37
- package/dist/Editor/Styles/EditorStyles.js +0 -23
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +25 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +0 -8
- package/dist/Editor/Toolbar/Toolbar.js +0 -7
- package/dist/Editor/Toolbar/toolbarGroups.js +0 -5
- package/dist/Editor/common/Icon.js +2 -9
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
- package/dist/Editor/common/MentionsPopup/index.js +8 -12
- package/dist/Editor/common/Section/index.js +12 -21
- package/dist/Editor/common/Section/styles.js +1 -6
- package/dist/Editor/common/Shorthands/elements.js +0 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +31 -32
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +18 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +2 -4
- package/dist/Editor/common/StyleBuilder/index.js +2 -2
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -13
- package/dist/Editor/helper/index.js +0 -139
- package/dist/Editor/helper/theme.js +2 -50
- package/dist/Editor/hooks/useMouseMove.js +8 -36
- package/dist/Editor/hooks/withCommon.js +1 -2
- package/dist/Editor/utils/SlateUtilityFunctions.js +3 -23
- package/dist/Editor/utils/draftToSlate.js +1 -1
- package/dist/Editor/utils/events.js +0 -5
- package/dist/Editor/utils/helper.js +0 -29
- package/package.json +2 -5
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -391
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -193
- package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +0 -23
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -184
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -36
- package/dist/Editor/Elements/FreeGrid/Options/More.js +0 -24
- package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +0 -47
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +0 -11
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +0 -75
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -159
- package/dist/Editor/ErrorBoundary.js +0 -30
- package/dist/Editor/common/RnD/ContextMenu/CMenus.js +0 -105
- package/dist/Editor/common/RnD/ContextMenu/index.js +0 -38
- package/dist/Editor/common/RnD/ContextMenu/styles.js +0 -21
- package/dist/Editor/common/RnD/DragInfo/index.js +0 -31
- package/dist/Editor/common/RnD/DragInfo/styles.js +0 -15
- package/dist/Editor/common/RnD/DragOver/index.js +0 -46
- package/dist/Editor/common/RnD/DragOver/styles.js +0 -23
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +0 -82
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -26
- package/dist/Editor/common/RnD/ElementOptions/index.js +0 -93
- package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -41
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +0 -153
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +0 -58
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +0 -7
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -30
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +0 -13
- package/dist/Editor/common/RnD/ElementSettings/index.js +0 -17
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +0 -14
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -76
- package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +0 -52
- package/dist/Editor/common/RnD/GuideLines/index.js +0 -33
- package/dist/Editor/common/RnD/GuideLines/styles.js +0 -60
- package/dist/Editor/common/RnD/OptionsPopup/index.js +0 -50
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -36
- package/dist/Editor/common/RnD/RnDCopy.js +0 -23
- package/dist/Editor/common/RnD/ShadowElement.js +0 -34
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -40
- package/dist/Editor/common/RnD/SwitchViewport/styles.js +0 -24
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +0 -63
- package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +0 -19
- package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +0 -13
- package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +0 -18
- package/dist/Editor/common/RnD/TransformHandles/index.js +0 -62
- package/dist/Editor/common/RnD/Utils/alignmentDetection.js +0 -26
- package/dist/Editor/common/RnD/Utils/calculateDropItem.js +0 -98
- package/dist/Editor/common/RnD/Utils/collisionDetection.js +0 -52
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +0 -148
- package/dist/Editor/common/RnD/Utils/index.js +0 -251
- package/dist/Editor/common/RnD/VirtualElement/index.js +0 -76
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -27
- package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +0 -28
- package/dist/Editor/common/RnD/index.js +0 -503
- package/dist/Editor/common/RnD/styles.js +0 -4
- package/dist/Editor/common/StyleBuilder/boxStyle.js +0 -30
- package/dist/Editor/helper/RnD/focusOnNewItem.js +0 -39
- package/dist/Editor/helper/RnD/scrollToNewSection.js +0 -24
- package/dist/Editor/helper/breakpoint.js +0 -5
- package/dist/Editor/hooks/useBreakpoints.js +0 -34
- package/dist/Editor/hooks/withErrorHandling.js +0 -14
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +0 -168
- package/dist/Editor/utils/freegrid.js +0 -49
|
@@ -1,38 +0,0 @@
|
|
|
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;
|
|
@@ -1,21 +0,0 @@
|
|
|
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;
|
|
@@ -1,31 +0,0 @@
|
|
|
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;
|
|
@@ -1,15 +0,0 @@
|
|
|
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;
|
|
@@ -1,46 +0,0 @@
|
|
|
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;
|
|
@@ -1,23 +0,0 @@
|
|
|
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;
|
|
@@ -1,82 +0,0 @@
|
|
|
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;
|
|
@@ -1,26 +0,0 @@
|
|
|
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;
|
|
@@ -1,93 +0,0 @@
|
|
|
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;
|
|
@@ -1,41 +0,0 @@
|
|
|
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;
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { Node, Transforms, Editor } from "slate";
|
|
3
|
-
import { ReactEditor } from "slate-react";
|
|
4
|
-
import LinkSettings from "../../../LinkSettings";
|
|
5
|
-
import { insertLink, removeLink } from "../../../../utils/link";
|
|
6
|
-
import { getBlockActive, isBlockActive, upateBlockActive } from "../../../../utils/SlateUtilityFunctions";
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const Link = props => {
|
|
9
|
-
const {
|
|
10
|
-
onClose,
|
|
11
|
-
customProps,
|
|
12
|
-
editor,
|
|
13
|
-
path,
|
|
14
|
-
childType
|
|
15
|
-
} = props;
|
|
16
|
-
const pPath = path?.split("|")?.map(m => parseInt(m));
|
|
17
|
-
const element_path = [...pPath, 0];
|
|
18
|
-
const element = Node.get(editor, element_path);
|
|
19
|
-
const {
|
|
20
|
-
actionTrigger
|
|
21
|
-
} = element?.buttonLink || {};
|
|
22
|
-
const {
|
|
23
|
-
onClick
|
|
24
|
-
} = actionTrigger || {
|
|
25
|
-
options: []
|
|
26
|
-
};
|
|
27
|
-
const [blockProps, setBlockProps] = useState();
|
|
28
|
-
const [isActiveTextLink, setIsActiveTextLink] = useState(false);
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (childType === "text") {
|
|
31
|
-
selectTextNode();
|
|
32
|
-
const p = getBlockActive(editor, "link")?.props || {};
|
|
33
|
-
const bp = {
|
|
34
|
-
name: Editor.string(editor, editor.selection),
|
|
35
|
-
navType: "webAddress",
|
|
36
|
-
navValue: p?.href,
|
|
37
|
-
openInNewTab: p?.target === "_blank"
|
|
38
|
-
};
|
|
39
|
-
setIsActiveTextLink(isBlockActive(editor, "link"));
|
|
40
|
-
setBlockProps(bp);
|
|
41
|
-
} else {
|
|
42
|
-
setBlockProps(getProps());
|
|
43
|
-
}
|
|
44
|
-
}, []);
|
|
45
|
-
const selectTextNode = () => {
|
|
46
|
-
try {
|
|
47
|
-
ReactEditor.focus(editor);
|
|
48
|
-
const range = Editor.range(editor, element_path);
|
|
49
|
-
Transforms.select(editor, range);
|
|
50
|
-
} catch (err) {
|
|
51
|
-
console.log(err);
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const getProps = () => {
|
|
55
|
-
switch (childType) {
|
|
56
|
-
case "button":
|
|
57
|
-
return {
|
|
58
|
-
navType: element?.buttonLink?.linkType,
|
|
59
|
-
navValue: element?.url,
|
|
60
|
-
openInNewTab: element?.openInNewTab
|
|
61
|
-
};
|
|
62
|
-
case "image":
|
|
63
|
-
return {
|
|
64
|
-
navType: element?.linkType,
|
|
65
|
-
navValue: element?.webAddress,
|
|
66
|
-
openInNewTab: element?.isNewTab
|
|
67
|
-
};
|
|
68
|
-
default:
|
|
69
|
-
return {};
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const getTransformedData = d => {
|
|
73
|
-
switch (childType) {
|
|
74
|
-
case "text":
|
|
75
|
-
selectTextNode();
|
|
76
|
-
return {
|
|
77
|
-
name: Editor.string(editor, editor.selection),
|
|
78
|
-
url: d?.navValue,
|
|
79
|
-
showInNewTab: d?.openInNewTab
|
|
80
|
-
};
|
|
81
|
-
case "image":
|
|
82
|
-
return {
|
|
83
|
-
linkType: d?.linkType,
|
|
84
|
-
webAddress: d?.navValue,
|
|
85
|
-
isNewTab: d?.openInNewTab
|
|
86
|
-
};
|
|
87
|
-
case "button":
|
|
88
|
-
return {
|
|
89
|
-
buttonLink: {
|
|
90
|
-
linkType: d?.linkType,
|
|
91
|
-
onClick
|
|
92
|
-
},
|
|
93
|
-
url: d?.navValue,
|
|
94
|
-
openInNewTab: d?.openInNewTab
|
|
95
|
-
};
|
|
96
|
-
default:
|
|
97
|
-
return {};
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
const updateTextLink = data => {
|
|
101
|
-
// remove link
|
|
102
|
-
if (!data?.url && isActiveTextLink) {
|
|
103
|
-
removeLink(editor);
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
const upData = isActiveTextLink ? {
|
|
107
|
-
href: data?.url,
|
|
108
|
-
target: data?.showInNewTab ? "_blank" : "_self",
|
|
109
|
-
name: data?.name
|
|
110
|
-
} : data;
|
|
111
|
-
if (isActiveTextLink) {
|
|
112
|
-
// update text link
|
|
113
|
-
upateBlockActive(editor, "link", upData);
|
|
114
|
-
} else {
|
|
115
|
-
insertLink(editor, upData);
|
|
116
|
-
}
|
|
117
|
-
};
|
|
118
|
-
const onSave = data => {
|
|
119
|
-
try {
|
|
120
|
-
const updateData = {
|
|
121
|
-
...data
|
|
122
|
-
};
|
|
123
|
-
delete updateData.children;
|
|
124
|
-
|
|
125
|
-
// for text we have defined method already
|
|
126
|
-
// to update leaf data
|
|
127
|
-
if (childType === "text") {
|
|
128
|
-
updateTextLink(data);
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
Transforms.setNodes(editor, {
|
|
132
|
-
...updateData
|
|
133
|
-
}, {
|
|
134
|
-
at: element_path
|
|
135
|
-
});
|
|
136
|
-
} catch (err) {
|
|
137
|
-
console.log(err);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
return blockProps?.navType !== undefined ? /*#__PURE__*/_jsx(LinkSettings, {
|
|
141
|
-
handleClose: onClose,
|
|
142
|
-
onSave: d => {
|
|
143
|
-
const upData = getTransformedData(d);
|
|
144
|
-
onSave({
|
|
145
|
-
...upData
|
|
146
|
-
});
|
|
147
|
-
onClose();
|
|
148
|
-
},
|
|
149
|
-
...(blockProps || {}),
|
|
150
|
-
customProps: customProps
|
|
151
|
-
}) : null;
|
|
152
|
-
};
|
|
153
|
-
export default Link;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Paper, Popper, Tooltip, Typography, Box, Divider, IconButton } from "@mui/material";
|
|
3
|
-
import CloseIcon from "@mui/icons-material/Close";
|
|
4
|
-
import { settingsLabel } from "../settingsConstants";
|
|
5
|
-
import SettingsComponents from "../Settings";
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
|
-
const Settings = props => {
|
|
10
|
-
const {
|
|
11
|
-
path,
|
|
12
|
-
childType,
|
|
13
|
-
open,
|
|
14
|
-
anchorEl,
|
|
15
|
-
placement,
|
|
16
|
-
onClose,
|
|
17
|
-
editor,
|
|
18
|
-
classes
|
|
19
|
-
} = props;
|
|
20
|
-
const title = settingsLabel[childType] || "Settings";
|
|
21
|
-
const Settings = SettingsComponents[childType];
|
|
22
|
-
return /*#__PURE__*/_jsx(_Fragment, {
|
|
23
|
-
children: /*#__PURE__*/_jsx(Popper, {
|
|
24
|
-
open: open,
|
|
25
|
-
anchorEl: anchorEl,
|
|
26
|
-
placement: placement,
|
|
27
|
-
sx: classes.root,
|
|
28
|
-
children: /*#__PURE__*/_jsxs(Paper, {
|
|
29
|
-
className: "papper-root",
|
|
30
|
-
children: [/*#__PURE__*/_jsxs(Typography, {
|
|
31
|
-
variant: "h6",
|
|
32
|
-
className: "item-wrapper title",
|
|
33
|
-
children: [title, /*#__PURE__*/_jsx(Box, {
|
|
34
|
-
component: "div",
|
|
35
|
-
children: /*#__PURE__*/_jsx(Tooltip, {
|
|
36
|
-
title: "Close",
|
|
37
|
-
arrow: true,
|
|
38
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
|
39
|
-
className: "closeBtn",
|
|
40
|
-
onClick: onClose,
|
|
41
|
-
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
|
42
|
-
})
|
|
43
|
-
})
|
|
44
|
-
})]
|
|
45
|
-
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Box, {
|
|
46
|
-
component: "div",
|
|
47
|
-
className: "item-wrapper",
|
|
48
|
-
children: Settings ? /*#__PURE__*/_jsx(Settings, {
|
|
49
|
-
editor: editor,
|
|
50
|
-
path: path
|
|
51
|
-
}) : null
|
|
52
|
-
})]
|
|
53
|
-
})
|
|
54
|
-
})
|
|
55
|
-
});
|
|
56
|
-
};
|
|
57
|
-
Settings.defaultProps = {};
|
|
58
|
-
export default Settings;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Transforms, Node } from "slate";
|
|
3
|
-
import { Box } from "@mui/material";
|
|
4
|
-
import { StyleContent } from "../../../StyleBuilder";
|
|
5
|
-
import boxStyle from "../../../StyleBuilder/boxStyle";
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
const BoxSettings = props => {
|
|
8
|
-
const {
|
|
9
|
-
editor,
|
|
10
|
-
path
|
|
11
|
-
} = props;
|
|
12
|
-
const item_path = path?.split("|").map(m => parseInt(m));
|
|
13
|
-
const element_path = [...item_path];
|
|
14
|
-
const element = Node.get(editor, element_path);
|
|
15
|
-
const onChange = data => {
|
|
16
|
-
const updated_props = {
|
|
17
|
-
...element,
|
|
18
|
-
...data,
|
|
19
|
-
field_type: data?.element
|
|
20
|
-
};
|
|
21
|
-
delete updated_props.children;
|
|
22
|
-
Transforms.setNodes(editor, {
|
|
23
|
-
...updated_props
|
|
24
|
-
}, {
|
|
25
|
-
at: element_path
|
|
26
|
-
});
|
|
27
|
-
};
|
|
28
|
-
const handleClose = () => {
|
|
29
|
-
console.log("close");
|
|
30
|
-
};
|
|
31
|
-
return /*#__PURE__*/_jsx(Box, {
|
|
32
|
-
component: "div",
|
|
33
|
-
className: "item-w",
|
|
34
|
-
children: boxStyle?.map((m, i) => {
|
|
35
|
-
return /*#__PURE__*/_jsx(StyleContent, {
|
|
36
|
-
renderTabs: boxStyle,
|
|
37
|
-
value: m.value,
|
|
38
|
-
element: element,
|
|
39
|
-
onChange: onChange,
|
|
40
|
-
customProps: {},
|
|
41
|
-
handleClose: handleClose
|
|
42
|
-
}, `tab_${m.value}_$${i}`);
|
|
43
|
-
})
|
|
44
|
-
});
|
|
45
|
-
};
|
|
46
|
-
export default BoxSettings;
|