@flozy/editor 1.8.5 → 1.8.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +4 -2
- package/dist/Editor/Editor.css +4 -0
- package/dist/Editor/Elements/Embed/Image.js +1 -1
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -1
- package/dist/Editor/Styles/EditorStyles.js +9 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +5 -1
- package/dist/Editor/Toolbar/PopupTool/AddElements.js +5 -1
- package/dist/Editor/Toolbar/Toolbar.js +0 -8
- package/dist/Editor/common/DnD/DragHandle.js +2 -3
- package/dist/Editor/common/DnD/DragHandleButton.js +100 -0
- package/dist/Editor/common/DnD/Droppable.js +2 -2
- package/dist/Editor/common/Section/index.js +16 -2
- package/dist/Editor/common/Shorthands/elements.js +23 -2
- package/dist/Editor/common/StyleBuilder/index.js +5 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +5 -0
- package/dist/Editor/utils/events.js +6 -1
- package/package.json +1 -1
@@ -100,7 +100,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
100
100
|
CHARACTERS = [],
|
101
101
|
editorClass,
|
102
102
|
fixedWidth = "60%",
|
103
|
-
fullWidth = "80%"
|
103
|
+
fullWidth = "80%",
|
104
|
+
hideTools
|
104
105
|
} = otherProps || {};
|
105
106
|
const [drag, setDrag] = useState(null);
|
106
107
|
const editor = useMemo(() => {
|
@@ -243,7 +244,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
243
244
|
} = mentions;
|
244
245
|
const chars = type ? Shorthands[type]({
|
245
246
|
...mentions,
|
246
|
-
CHARACTERS
|
247
|
+
CHARACTERS,
|
248
|
+
hideTools: hideTools || []
|
247
249
|
}) : [];
|
248
250
|
const handleEditorChange = newValue => {
|
249
251
|
setValue(newValue);
|
package/dist/Editor/Editor.css
CHANGED
@@ -63,7 +63,7 @@ const Image = ({
|
|
63
63
|
const selected = hoverPath === path.join(",");
|
64
64
|
useEffect(() => {
|
65
65
|
if (editor && ele && ele[1] !== undefined) {
|
66
|
-
const dom = ReactEditor.toDOMNode(editor,
|
66
|
+
const dom = ReactEditor.toDOMNode(editor, element);
|
67
67
|
setParentDOM(dom);
|
68
68
|
onLoad(element?.size || {});
|
69
69
|
}
|
@@ -58,7 +58,7 @@ const Video = ({
|
|
58
58
|
bottomRight
|
59
59
|
} = borderRadius || {};
|
60
60
|
useEffect(() => {
|
61
|
-
if (editor && ele[1] !== undefined) {
|
61
|
+
if (editor && ele && ele[1] !== undefined) {
|
62
62
|
const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
|
63
63
|
setParentDOM(dom);
|
64
64
|
onLoad(element?.size || {});
|
@@ -333,7 +333,7 @@ const SignaturePopup = props => {
|
|
333
333
|
return /*#__PURE__*/_jsx(IconButton, {
|
334
334
|
onClick: onBrushSize(m),
|
335
335
|
disableRipple: true,
|
336
|
-
className: brush.size === m ? "
|
336
|
+
className: brush.size === m ? "activeBrush" : "",
|
337
337
|
children: /*#__PURE__*/_jsx("span", {
|
338
338
|
style: {
|
339
339
|
width: 20 + m,
|
@@ -103,7 +103,15 @@ const editorStyles = ({
|
|
103
103
|
display: "block",
|
104
104
|
left: "8px",
|
105
105
|
top: "8px",
|
106
|
-
width: "fit-content"
|
106
|
+
width: "fit-content",
|
107
|
+
"& button": {
|
108
|
+
boxShadow: "none",
|
109
|
+
color: "rgb(85, 85, 85)",
|
110
|
+
background: "rgb(221, 221, 221, 0.1)",
|
111
|
+
"&:hover": {
|
112
|
+
background: "rgb(221, 221, 221, 0.8)"
|
113
|
+
}
|
114
|
+
}
|
107
115
|
}
|
108
116
|
},
|
109
117
|
"&.hselect:before": {
|
@@ -37,6 +37,10 @@ const MiniToolbar = props => {
|
|
37
37
|
const PopupComponent = POPUP_TYPES[popper] || null;
|
38
38
|
const open = Boolean(PopupComponent);
|
39
39
|
const DialogComp = !fullScreen ? Popper : Dialog;
|
40
|
+
const {
|
41
|
+
hideTools
|
42
|
+
} = customProps;
|
43
|
+
const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
|
40
44
|
useEffect(() => {
|
41
45
|
if (popper) {
|
42
46
|
setPopper(null);
|
@@ -58,7 +62,7 @@ const MiniToolbar = props => {
|
|
58
62
|
component: "div",
|
59
63
|
className: "mini-tool-wrpr-ei",
|
60
64
|
sx: classes.root,
|
61
|
-
children:
|
65
|
+
children: UPDATED_MENU_OPTIONS.map(({
|
62
66
|
type,
|
63
67
|
label,
|
64
68
|
icon: Icon
|
@@ -11,6 +11,10 @@ const AddElements = props => {
|
|
11
11
|
editor,
|
12
12
|
customProps
|
13
13
|
} = props;
|
14
|
+
const {
|
15
|
+
hideTools
|
16
|
+
} = customProps;
|
17
|
+
const filteredElements = elements.filter(f => hideTools.indexOf(f.type) === -1);
|
14
18
|
return /*#__PURE__*/_jsx(Grid, {
|
15
19
|
container: true,
|
16
20
|
sx: classes.textFormatWrapper,
|
@@ -18,7 +22,7 @@ const AddElements = props => {
|
|
18
22
|
style: {
|
19
23
|
margin: 0
|
20
24
|
},
|
21
|
-
children:
|
25
|
+
children: filteredElements.map(m => {
|
22
26
|
return /*#__PURE__*/_jsx(Grid, {
|
23
27
|
item: true,
|
24
28
|
xs: 6,
|
@@ -157,14 +157,6 @@ export const RenderToolbarIcon = props => {
|
|
157
157
|
editor: editor,
|
158
158
|
customProps: customProps
|
159
159
|
}, element.id);
|
160
|
-
// case "drawer":
|
161
|
-
// return (
|
162
|
-
// <DrawerMenuButton
|
163
|
-
// key={element.id}
|
164
|
-
// editor={editor}
|
165
|
-
// customProps={customProps}
|
166
|
-
// />
|
167
|
-
// );
|
168
160
|
case "app-header":
|
169
161
|
return /*#__PURE__*/_jsx(AppHeaderButton, {
|
170
162
|
editor: editor,
|
@@ -12,7 +12,7 @@ const DragHandleStyle = () => ({
|
|
12
12
|
root: {
|
13
13
|
position: "relative",
|
14
14
|
"&:hover": {
|
15
|
-
"& > .dh-para:first-
|
15
|
+
"& > .dh-para:first-of-type": {
|
16
16
|
opacity: 1
|
17
17
|
}
|
18
18
|
},
|
@@ -74,7 +74,6 @@ const DragHandle = props => {
|
|
74
74
|
if (moved) {
|
75
75
|
const upPath = ReactEditor.findPath(editor, element);
|
76
76
|
try {
|
77
|
-
alert(upPath);
|
78
77
|
Transforms.removeNodes(editor, {
|
79
78
|
at: upPath
|
80
79
|
});
|
@@ -89,7 +88,7 @@ const DragHandle = props => {
|
|
89
88
|
return canDraggable ? /*#__PURE__*/_jsxs(Box, {
|
90
89
|
...attributes,
|
91
90
|
component: "div",
|
92
|
-
className:
|
91
|
+
className: `drag-wrpr ${dragging ? "dragging" : ""}`,
|
93
92
|
sx: classes.root,
|
94
93
|
children: [/*#__PURE__*/_jsx(Droppable, {
|
95
94
|
id: id,
|
@@ -0,0 +1,100 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
3
|
+
import { Box } from "@mui/material";
|
4
|
+
import Draggable from "./Draggable";
|
5
|
+
import Droppable from "./Droppable";
|
6
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
|
+
import { Transforms } from "slate";
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
|
+
const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headinTwo", "headingThree", "grid"];
|
11
|
+
const DragHandleStyle = () => ({
|
12
|
+
dragHandle: {
|
13
|
+
opacity: 0,
|
14
|
+
content: '" "',
|
15
|
+
position: "absolute",
|
16
|
+
top: "2px",
|
17
|
+
left: "-52px",
|
18
|
+
borderRadius: "0px",
|
19
|
+
padding: "0px",
|
20
|
+
width: "20px",
|
21
|
+
height: "20px",
|
22
|
+
border: 0,
|
23
|
+
display: "flex",
|
24
|
+
alignItems: "center",
|
25
|
+
justifyContent: "center",
|
26
|
+
cursor: "grab",
|
27
|
+
color: "rgb(85, 85, 85)",
|
28
|
+
background: "rgb(221, 221, 221, 0.1)",
|
29
|
+
"& svg": {
|
30
|
+
width: "20px"
|
31
|
+
},
|
32
|
+
"&:hover": {
|
33
|
+
opacity: 1,
|
34
|
+
background: "rgb(221, 221, 221, 0.8)"
|
35
|
+
},
|
36
|
+
"&.active": {
|
37
|
+
opacity: 1,
|
38
|
+
cursor: "grabbing"
|
39
|
+
}
|
40
|
+
},
|
41
|
+
dropArea: {
|
42
|
+
position: "absolute",
|
43
|
+
left: 0,
|
44
|
+
top: 0,
|
45
|
+
width: "100%",
|
46
|
+
height: "100%",
|
47
|
+
"&.dragging": {
|
48
|
+
backgroundColor: "#def4ff"
|
49
|
+
}
|
50
|
+
},
|
51
|
+
dropAreaOver: {
|
52
|
+
height: "4px"
|
53
|
+
}
|
54
|
+
});
|
55
|
+
const DragHandle = props => {
|
56
|
+
const classes = DragHandleStyle();
|
57
|
+
const editor = useSlateStatic();
|
58
|
+
const [dragging, setDragging] = useState(false);
|
59
|
+
const {
|
60
|
+
element
|
61
|
+
} = props;
|
62
|
+
const path = ReactEditor.findPath(editor, element);
|
63
|
+
const canDraggable = DRAGGABLE_TYPES.indexOf(element?.type) > -1;
|
64
|
+
const id = `${element.type}_${[...path].join("|")}`;
|
65
|
+
const {
|
66
|
+
moved
|
67
|
+
} = element;
|
68
|
+
const {
|
69
|
+
drop
|
70
|
+
} = useEditorContext();
|
71
|
+
useEffect(() => {
|
72
|
+
if (moved) {
|
73
|
+
const upPath = ReactEditor.findPath(editor, element);
|
74
|
+
try {
|
75
|
+
Transforms.removeNodes(editor, {
|
76
|
+
at: upPath
|
77
|
+
});
|
78
|
+
} catch (err) {
|
79
|
+
console.log(err, upPath);
|
80
|
+
}
|
81
|
+
}
|
82
|
+
}, [moved]);
|
83
|
+
const handleOnDrag = isDragging => {
|
84
|
+
setDragging(isDragging);
|
85
|
+
};
|
86
|
+
return canDraggable ? /*#__PURE__*/_jsxs("div", {
|
87
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
88
|
+
className: dragging ? "dragging" : "",
|
89
|
+
sx: classes.dropArea
|
90
|
+
}), /*#__PURE__*/_jsx(Droppable, {
|
91
|
+
id: id,
|
92
|
+
classes: classes
|
93
|
+
}), /*#__PURE__*/_jsx(Draggable, {
|
94
|
+
id: id,
|
95
|
+
classes: classes,
|
96
|
+
onDrag: handleOnDrag
|
97
|
+
})]
|
98
|
+
}, `${id}_${drop}`) : null;
|
99
|
+
};
|
100
|
+
export default DragHandle;
|
@@ -14,7 +14,7 @@ const Droppable = props => {
|
|
14
14
|
id: id
|
15
15
|
});
|
16
16
|
const dropStyle = {
|
17
|
-
backgroundColor: isOver ? "
|
17
|
+
backgroundColor: isOver ? "#47bbf5" : undefined
|
18
18
|
};
|
19
19
|
return /*#__PURE__*/_jsx(Box, {
|
20
20
|
ref: setNodeRef,
|
@@ -22,7 +22,7 @@ const Droppable = props => {
|
|
22
22
|
className: `droppable-para`,
|
23
23
|
contentEditable: false,
|
24
24
|
style: dropStyle,
|
25
|
-
sx: classes.
|
25
|
+
sx: classes.dropAreaOver
|
26
26
|
});
|
27
27
|
};
|
28
28
|
export default Droppable;
|
@@ -5,9 +5,20 @@ import { Box, IconButton, Tooltip } from "@mui/material";
|
|
5
5
|
import TuneIcon from "@mui/icons-material/Tune";
|
6
6
|
import SectionPopup from "../../Elements/Grid/SectionPopup";
|
7
7
|
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
8
|
+
import DragHandle from "../DnD/DragHandleButton";
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
|
+
const SectionStyle = () => ({
|
12
|
+
root: {
|
13
|
+
"&:hover": {
|
14
|
+
"& .dh-para": {
|
15
|
+
opacity: 1
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
19
|
+
});
|
10
20
|
const Section = props => {
|
21
|
+
const classes = SectionStyle();
|
11
22
|
const {
|
12
23
|
children,
|
13
24
|
element,
|
@@ -47,7 +58,7 @@ const Section = props => {
|
|
47
58
|
className: "element-toolbar no-border-button ss hr section-tw",
|
48
59
|
style: {
|
49
60
|
left: "-28px",
|
50
|
-
top: "
|
61
|
+
top: "2px"
|
51
62
|
},
|
52
63
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
53
64
|
title: "Section Settings",
|
@@ -86,6 +97,7 @@ const Section = props => {
|
|
86
97
|
component: "section",
|
87
98
|
className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
|
88
99
|
sx: {
|
100
|
+
...classes.root,
|
89
101
|
background: sectionBgColor,
|
90
102
|
...sectionBgImage,
|
91
103
|
padding: {
|
@@ -104,7 +116,9 @@ const Section = props => {
|
|
104
116
|
...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
|
105
117
|
}
|
106
118
|
},
|
107
|
-
children: [
|
119
|
+
children: [/*#__PURE__*/_jsx(DragHandle, {
|
120
|
+
...props
|
121
|
+
}), children, /*#__PURE__*/_jsx(Toolbar, {})]
|
108
122
|
}), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
|
109
123
|
element: {
|
110
124
|
...element,
|
@@ -14,6 +14,7 @@ const ELEMENTS_LIST = [{
|
|
14
14
|
name: "Heading 1",
|
15
15
|
desc: "",
|
16
16
|
group: "Text",
|
17
|
+
type: "headingOne",
|
17
18
|
icon: /*#__PURE__*/_jsx(Icon, {
|
18
19
|
icon: "headingOne"
|
19
20
|
}),
|
@@ -22,6 +23,7 @@ const ELEMENTS_LIST = [{
|
|
22
23
|
name: "Heading 2",
|
23
24
|
desc: "",
|
24
25
|
group: "Text",
|
26
|
+
type: "headingTwo",
|
25
27
|
icon: /*#__PURE__*/_jsx(Icon, {
|
26
28
|
icon: "headingTwo"
|
27
29
|
}),
|
@@ -30,6 +32,7 @@ const ELEMENTS_LIST = [{
|
|
30
32
|
name: "Heading 3",
|
31
33
|
desc: "",
|
32
34
|
group: "Text",
|
35
|
+
type: "headingThree",
|
33
36
|
icon: /*#__PURE__*/_jsx(Icon, {
|
34
37
|
icon: "headingThree"
|
35
38
|
}),
|
@@ -38,6 +41,7 @@ const ELEMENTS_LIST = [{
|
|
38
41
|
name: "Quote",
|
39
42
|
desc: "",
|
40
43
|
group: "Text",
|
44
|
+
type: "blockquote",
|
41
45
|
icon: /*#__PURE__*/_jsx(Icon, {
|
42
46
|
icon: "blockquote"
|
43
47
|
}),
|
@@ -48,6 +52,7 @@ const ELEMENTS_LIST = [{
|
|
48
52
|
name: "Colorbox",
|
49
53
|
desc: "",
|
50
54
|
group: "Text",
|
55
|
+
type: "colorbox",
|
51
56
|
icon: /*#__PURE__*/_jsx(Icon, {
|
52
57
|
icon: "colorbox"
|
53
58
|
}),
|
@@ -58,6 +63,7 @@ const ELEMENTS_LIST = [{
|
|
58
63
|
name: "Ordered List",
|
59
64
|
desc: "",
|
60
65
|
group: "List",
|
66
|
+
type: "orderedList",
|
61
67
|
icon: /*#__PURE__*/_jsx(Icon, {
|
62
68
|
icon: "orderedList"
|
63
69
|
}),
|
@@ -66,6 +72,7 @@ const ELEMENTS_LIST = [{
|
|
66
72
|
name: "Bulleted List",
|
67
73
|
desc: "",
|
68
74
|
group: "List",
|
75
|
+
type: "unorderedList",
|
69
76
|
icon: /*#__PURE__*/_jsx(Icon, {
|
70
77
|
icon: "unorderedList"
|
71
78
|
}),
|
@@ -74,6 +81,7 @@ const ELEMENTS_LIST = [{
|
|
74
81
|
name: "Check List",
|
75
82
|
desc: "",
|
76
83
|
group: "List",
|
84
|
+
type: "check-list-item",
|
77
85
|
icon: /*#__PURE__*/_jsx(Icon, {
|
78
86
|
icon: "check-list-item"
|
79
87
|
}),
|
@@ -82,6 +90,7 @@ const ELEMENTS_LIST = [{
|
|
82
90
|
name: "Image",
|
83
91
|
desc: "",
|
84
92
|
group: "Media",
|
93
|
+
type: "embed",
|
85
94
|
icon: /*#__PURE__*/_jsx(Icon, {
|
86
95
|
icon: "image"
|
87
96
|
}),
|
@@ -90,6 +99,7 @@ const ELEMENTS_LIST = [{
|
|
90
99
|
name: "Video",
|
91
100
|
desc: "",
|
92
101
|
group: "Media",
|
102
|
+
type: "embed",
|
93
103
|
icon: /*#__PURE__*/_jsx(Icon, {
|
94
104
|
icon: "video"
|
95
105
|
}),
|
@@ -98,6 +108,7 @@ const ELEMENTS_LIST = [{
|
|
98
108
|
name: "Embed",
|
99
109
|
desc: "",
|
100
110
|
group: "Media",
|
111
|
+
type: "embed",
|
101
112
|
icon: /*#__PURE__*/_jsx(Icon, {
|
102
113
|
icon: "embed"
|
103
114
|
}),
|
@@ -106,6 +117,7 @@ const ELEMENTS_LIST = [{
|
|
106
117
|
name: "Emoji",
|
107
118
|
group: "Elements",
|
108
119
|
desc: "",
|
120
|
+
type: "emoji",
|
109
121
|
renderComponent: rest => /*#__PURE__*/_jsx(EmojiButton, {
|
110
122
|
...rest,
|
111
123
|
icoBtnType: "cmd"
|
@@ -114,6 +126,7 @@ const ELEMENTS_LIST = [{
|
|
114
126
|
name: "Table",
|
115
127
|
group: "Elements",
|
116
128
|
desc: "",
|
129
|
+
type: "table",
|
117
130
|
icon: /*#__PURE__*/_jsx(Icon, {
|
118
131
|
icon: "table"
|
119
132
|
}),
|
@@ -125,6 +138,7 @@ const ELEMENTS_LIST = [{
|
|
125
138
|
name: "Grid",
|
126
139
|
group: "Elements",
|
127
140
|
desc: "",
|
141
|
+
type: "grid",
|
128
142
|
icon: /*#__PURE__*/_jsx(Icon, {
|
129
143
|
icon: "grid"
|
130
144
|
}),
|
@@ -135,6 +149,7 @@ const ELEMENTS_LIST = [{
|
|
135
149
|
name: "Accordion",
|
136
150
|
group: "Elements",
|
137
151
|
desc: "",
|
152
|
+
type: "accordion",
|
138
153
|
icon: /*#__PURE__*/_jsx(Icon, {
|
139
154
|
icon: "accordion"
|
140
155
|
}),
|
@@ -145,6 +160,7 @@ const ELEMENTS_LIST = [{
|
|
145
160
|
name: "Button",
|
146
161
|
group: "Elements",
|
147
162
|
desc: "",
|
163
|
+
type: "button",
|
148
164
|
icon: /*#__PURE__*/_jsx(Icon, {
|
149
165
|
icon: "button"
|
150
166
|
}),
|
@@ -155,6 +171,7 @@ const ELEMENTS_LIST = [{
|
|
155
171
|
name: "Signature",
|
156
172
|
group: "Elements",
|
157
173
|
desc: "",
|
174
|
+
type: "signature",
|
158
175
|
icon: /*#__PURE__*/_jsx(Icon, {
|
159
176
|
icon: "signature"
|
160
177
|
}),
|
@@ -165,6 +182,7 @@ const ELEMENTS_LIST = [{
|
|
165
182
|
name: "Carousel",
|
166
183
|
group: "Elements",
|
167
184
|
desc: "",
|
185
|
+
type: "carousel",
|
168
186
|
icon: /*#__PURE__*/_jsx(Icon, {
|
169
187
|
icon: "carousel"
|
170
188
|
}),
|
@@ -175,6 +193,7 @@ const ELEMENTS_LIST = [{
|
|
175
193
|
name: "Form",
|
176
194
|
group: "Elements",
|
177
195
|
desc: "",
|
196
|
+
type: "form",
|
178
197
|
icon: /*#__PURE__*/_jsx(Icon, {
|
179
198
|
icon: "form"
|
180
199
|
}),
|
@@ -184,8 +203,10 @@ const ELEMENTS_LIST = [{
|
|
184
203
|
}];
|
185
204
|
const elements = props => {
|
186
205
|
const {
|
187
|
-
search
|
206
|
+
search,
|
207
|
+
hideTools
|
188
208
|
} = props;
|
189
|
-
|
209
|
+
const filteredElements = ELEMENTS_LIST.filter(f => hideTools.indexOf(f.type) === -1);
|
210
|
+
return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
|
190
211
|
};
|
191
212
|
export default elements;
|
@@ -15,17 +15,21 @@ const StyleContent = props => {
|
|
15
15
|
customProps,
|
16
16
|
handleClose
|
17
17
|
} = props;
|
18
|
+
const {
|
19
|
+
hideTools
|
20
|
+
} = customProps;
|
18
21
|
const tabContent = renderTabs.find(f => f.value === value);
|
19
22
|
const {
|
20
23
|
fields
|
21
24
|
} = tabContent || {
|
22
25
|
fields: []
|
23
26
|
};
|
27
|
+
const filteredFields = hideTools?.length > 0 ? fields.filter(f => hideTools.indexOf(f.key) === -1) : fields;
|
24
28
|
return /*#__PURE__*/_jsx(Grid, {
|
25
29
|
container: true,
|
26
30
|
spacing: 2,
|
27
31
|
className: "sidebar-wrpr-eds",
|
28
|
-
children: [...
|
32
|
+
children: [...filteredFields].map((m, i) => {
|
29
33
|
const FieldComponent = FieldMap[m.type];
|
30
34
|
return FieldComponent ? /*#__PURE__*/_jsx(FieldComponent, {
|
31
35
|
data: m,
|
@@ -37,6 +37,7 @@ import { isEmptyTextNode } from "../helper";
|
|
37
37
|
import Attachments from "../Elements/Attachments/Attachments";
|
38
38
|
import { getBreakPointsValue } from "../helper/theme";
|
39
39
|
import Variables from "../Elements/Variables/Variable";
|
40
|
+
import insertNewLine from "./insertNewLine";
|
40
41
|
import { jsx as _jsx } from "react/jsx-runtime";
|
41
42
|
const alignment = ["alignLeft", "alignRight", "alignCenter"];
|
42
43
|
const list_types = ["orderedList", "unorderedList"];
|
@@ -44,6 +45,7 @@ const LIST_FORMAT_TYPE = {
|
|
44
45
|
orderedList: "list-item",
|
45
46
|
unorderedList: "list-item"
|
46
47
|
};
|
48
|
+
const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
|
47
49
|
export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
48
50
|
const isActive = isBlockActive(editor, format);
|
49
51
|
const isList = list_types.includes(format);
|
@@ -86,6 +88,9 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
|
|
86
88
|
children: []
|
87
89
|
});
|
88
90
|
}
|
91
|
+
if (NEWLINESAFTER.indexOf(format) > -1) {
|
92
|
+
insertNewLine(editor);
|
93
|
+
}
|
89
94
|
};
|
90
95
|
export const addMarkData = (editor, data) => {
|
91
96
|
try {
|
@@ -127,7 +127,12 @@ export const escapeEvent = props => {
|
|
127
127
|
};
|
128
128
|
export const enterEvent = (e, editor, ele) => {
|
129
129
|
try {
|
130
|
-
|
130
|
+
// on shift enter break line in same node
|
131
|
+
if (e.shiftKey) {
|
132
|
+
console.log("shif enter");
|
133
|
+
e.preventDefault();
|
134
|
+
Transforms.insertText(editor, "\n");
|
135
|
+
} else if (ele && ele[0]) {
|
131
136
|
const {
|
132
137
|
type
|
133
138
|
} = ele[0];
|