@flozy/editor 3.9.6 → 3.9.8
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +45 -55
- package/dist/Editor/CommonEditor.js +2 -3
- package/dist/Editor/Editor.css +3 -14
- package/dist/Editor/Elements/Accordion/Accordion.js +8 -76
- package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js +2 -3
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +64 -24
- package/dist/Editor/Elements/Embed/Image.js +21 -29
- package/dist/Editor/Elements/Embed/Video.js +11 -15
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Grid/Grid.js +13 -6
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +1 -5
- package/dist/Editor/Elements/Table/Table.js +1 -1
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -25
- package/dist/Editor/common/ColorPickerButton.js +4 -12
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +1 -6
- package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +8 -9
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +16 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +20 -26
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +16 -18
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +3 -14
- package/dist/Editor/helper/deserialize/index.js +9 -14
- package/dist/Editor/helper/index.js +0 -22
- package/dist/Editor/helper/theme.js +1 -2
- package/dist/Editor/hooks/useMouseMove.js +1 -0
- package/dist/Editor/plugins/withHTML.js +4 -46
- package/dist/Editor/plugins/withLayout.js +10 -15
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +8 -2
- package/dist/Editor/utils/draftToSlate.js +1 -1
- package/dist/Editor/utils/events.js +4 -11
- package/dist/Editor/utils/helper.js +12 -43
- package/package.json +2 -2
- package/dist/Editor/common/EditorCmds.js +0 -35
@@ -9,7 +9,6 @@ import miniToolbarStyles from "./Styles";
|
|
9
9
|
import usePopupStyle from "../PopupTool/PopupToolStyle";
|
10
10
|
import PopperHeader from "../PopupTool/PopperHeader";
|
11
11
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
12
|
-
import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
|
13
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
14
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -48,23 +47,12 @@ const MiniToolbar = props => {
|
|
48
47
|
const {
|
49
48
|
popupType
|
50
49
|
} = useEditorContext();
|
51
|
-
const [toolTip, setToolTip] = useState(false);
|
52
|
-
const [data, setData] = useState(null);
|
53
|
-
useEffect(() => {
|
54
|
-
if (data) {
|
55
|
-
setToolTip(false);
|
56
|
-
setData(null);
|
57
|
-
}
|
58
|
-
}, [data]);
|
59
50
|
useEffect(() => {
|
60
51
|
if (popper) {
|
61
52
|
setPopper(null);
|
62
53
|
}
|
63
54
|
}, [editor.selection]);
|
64
55
|
const handleClick = type => e => {
|
65
|
-
if (type === "page-settings") {
|
66
|
-
setToolTip(true);
|
67
|
-
}
|
68
56
|
setPopper(type);
|
69
57
|
setAnchorEl(e.currentTarget);
|
70
58
|
};
|
@@ -78,10 +66,6 @@ const MiniToolbar = props => {
|
|
78
66
|
const onSearch = e => {
|
79
67
|
setSearch(e?.target?.value || "");
|
80
68
|
};
|
81
|
-
const closePopper = data => {
|
82
|
-
setData(data);
|
83
|
-
setToolTip("false");
|
84
|
-
};
|
85
69
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
86
70
|
children: [/*#__PURE__*/_jsx(Box, {
|
87
71
|
component: "div",
|
@@ -97,19 +81,11 @@ const MiniToolbar = props => {
|
|
97
81
|
return /*#__PURE__*/_jsx(Tooltip, {
|
98
82
|
arrow: true,
|
99
83
|
title: label,
|
100
|
-
disableHoverListener: toolTip,
|
101
84
|
children: /*#__PURE__*/_jsx(IconButton, {
|
102
85
|
className: type === popper ? "active" : "",
|
103
86
|
onClick: handleClick(type),
|
104
87
|
disabled: isDisabled,
|
105
|
-
children:
|
106
|
-
from: "miniToolBar",
|
107
|
-
icoBtnType: "mini",
|
108
|
-
customProps: customProps,
|
109
|
-
editor: editor,
|
110
|
-
closePopper: closePopper,
|
111
|
-
setToolTip: setToolTip
|
112
|
-
}) : /*#__PURE__*/_jsx(Icon, {
|
88
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
113
89
|
from: "miniToolBar",
|
114
90
|
icoBtnType: "mini",
|
115
91
|
customProps: customProps,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, {
|
1
|
+
import React, { useState } from "react";
|
2
2
|
import { Grid, Button, Popover } from "@mui/material";
|
3
3
|
import ColorPickerTool from "react-gcolor-picker";
|
4
4
|
import { colors } from "../Elements/Color Picker/defaultColors";
|
@@ -11,8 +11,7 @@ const ColorPickerButton = props => {
|
|
11
11
|
onSave,
|
12
12
|
defaultColors = [],
|
13
13
|
classes = {},
|
14
|
-
recentColors = []
|
15
|
-
hideGradient
|
14
|
+
recentColors = []
|
16
15
|
} = props;
|
17
16
|
const [anchorEl, setAnchorEl] = useState(null);
|
18
17
|
const [color, setColor] = useState(value);
|
@@ -30,13 +29,6 @@ const ColorPickerButton = props => {
|
|
30
29
|
const handleColorChange = color => {
|
31
30
|
setColor(color);
|
32
31
|
};
|
33
|
-
const initialColors = useMemo(() => {
|
34
|
-
let colors = [...recentColors, ...defaultColors];
|
35
|
-
if (hideGradient) {
|
36
|
-
colors = colors.filter(c => c && !c.includes("gradient"));
|
37
|
-
}
|
38
|
-
return colors;
|
39
|
-
}, [recentColors, defaultColors, hideGradient]);
|
40
32
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
41
33
|
children: [/*#__PURE__*/_jsx(Button, {
|
42
34
|
style: {
|
@@ -69,10 +61,10 @@ const ColorPickerButton = props => {
|
|
69
61
|
xs: 12,
|
70
62
|
children: [/*#__PURE__*/_jsx("div", {
|
71
63
|
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
72
|
-
gradient:
|
64
|
+
gradient: true,
|
73
65
|
value: color,
|
74
66
|
onChange: handleColorChange,
|
75
|
-
defaultColors:
|
67
|
+
defaultColors: [...recentColors, ...defaultColors] || []
|
76
68
|
})
|
77
69
|
}), /*#__PURE__*/_jsxs("div", {
|
78
70
|
style: {
|
@@ -39,12 +39,7 @@ const MentionsListCard = props => {
|
|
39
39
|
},
|
40
40
|
alt: name,
|
41
41
|
children: /*#__PURE__*/_jsx(Avatar, {
|
42
|
-
|
43
|
-
background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
|
44
|
-
},
|
45
|
-
alt: name,
|
46
|
-
src: avatar_filename,
|
47
|
-
children: !avatar_filename && name && name.charAt(0).toUpperCase()
|
42
|
+
src: avatar_filename
|
48
43
|
})
|
49
44
|
}), /*#__PURE__*/_jsx(Box, {
|
50
45
|
sx: {
|
@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
|
|
39
39
|
color: theme?.palette?.editor?.textColor
|
40
40
|
},
|
41
41
|
"&.active": {
|
42
|
-
background:
|
43
|
-
"& .MuiTypography-root": {
|
44
|
-
color: `${theme?.palette?.editor?.activeColor} !important`
|
45
|
-
}
|
42
|
+
background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
|
46
43
|
},
|
47
44
|
"&:hover": {
|
48
|
-
background: theme?.palette?.
|
45
|
+
background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
|
49
46
|
},
|
50
47
|
"&.renderComp": {
|
51
48
|
padding: "0px",
|
@@ -1,19 +1,18 @@
|
|
1
1
|
const accordionTitleBtnStyle = [{
|
2
2
|
tab: "Colors",
|
3
|
-
value: "
|
3
|
+
value: "colors",
|
4
4
|
fields: [{
|
5
|
-
label: "
|
6
|
-
key: "
|
5
|
+
label: "Text Color",
|
6
|
+
key: "textColor",
|
7
7
|
type: "color",
|
8
|
-
needPreview: true
|
9
|
-
hideGradient: true
|
8
|
+
needPreview: true
|
10
9
|
}, {
|
11
|
-
label: "
|
12
|
-
key: "
|
10
|
+
label: "Background Color",
|
11
|
+
key: "bgColor",
|
13
12
|
type: "color"
|
14
13
|
}, {
|
15
|
-
label: "
|
16
|
-
key: "
|
14
|
+
label: "Border Color",
|
15
|
+
key: "borderColor",
|
17
16
|
type: "color"
|
18
17
|
}]
|
19
18
|
}];
|
@@ -1,4 +1,20 @@
|
|
1
1
|
const accordionTitleStyle = [{
|
2
|
+
tab: "Banner Spacing",
|
3
|
+
value: "bannerSpacing",
|
4
|
+
fields: [{
|
5
|
+
label: "Banner Spacing",
|
6
|
+
key: "bannerSpacing",
|
7
|
+
type: "bannerSpacing"
|
8
|
+
}]
|
9
|
+
}, {
|
10
|
+
tab: "Border Radius",
|
11
|
+
value: "borderRadius",
|
12
|
+
fields: [{
|
13
|
+
label: "Border Radius",
|
14
|
+
key: "borderRadius",
|
15
|
+
type: "borderRadius"
|
16
|
+
}]
|
17
|
+
}, {
|
2
18
|
tab: "Colors",
|
3
19
|
value: "colors",
|
4
20
|
fields: [{
|
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
|
|
15
31
|
key: "borderColor",
|
16
32
|
type: "color"
|
17
33
|
}]
|
18
|
-
}, {
|
19
|
-
tab: "Banner Spacing",
|
20
|
-
value: "bannerSpacing",
|
21
|
-
fields: [{
|
22
|
-
label: "Banner Spacing",
|
23
|
-
key: "bannerSpacing",
|
24
|
-
type: "bannerSpacing"
|
25
|
-
}]
|
26
|
-
}, {
|
27
|
-
tab: "Border Radius",
|
28
|
-
value: "borderRadius",
|
29
|
-
fields: [{
|
30
|
-
label: "Border Radius",
|
31
|
-
key: "borderRadius",
|
32
|
-
type: "borderRadius"
|
33
|
-
}]
|
34
34
|
}];
|
35
35
|
export default accordionTitleStyle;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
|
3
3
|
import { squreStyle } from "./radiusStyle";
|
4
|
-
import { getBreakPointsValue
|
4
|
+
import { getBreakPointsValue } from "../../../helper/theme";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -78,12 +78,10 @@ const BannerSpacing = props => {
|
|
78
78
|
component: "input",
|
79
79
|
sx: classes.sapcingInput,
|
80
80
|
name: "top",
|
81
|
-
value: !lockSpacing ? "" :
|
82
|
-
className: "sliderInput
|
81
|
+
value: !lockSpacing ? "" : value?.top || 0,
|
82
|
+
className: "sliderInput",
|
83
83
|
disabled: !lockSpacing,
|
84
|
-
onChange: handleChange
|
85
|
-
type: "number",
|
86
|
-
placeholder: "0"
|
84
|
+
onChange: handleChange
|
87
85
|
})]
|
88
86
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
89
87
|
className: "ccheckbox-primary",
|
@@ -125,54 +123,50 @@ const BannerSpacing = props => {
|
|
125
123
|
children: [/*#__PURE__*/_jsx("div", {
|
126
124
|
className: "bannerSpaceBoxTop",
|
127
125
|
children: /*#__PURE__*/_jsx("input", {
|
128
|
-
type: "
|
126
|
+
type: "text",
|
129
127
|
name: "top",
|
130
|
-
value:
|
131
|
-
className: "borderInput
|
128
|
+
value: value?.top,
|
129
|
+
className: "borderInput",
|
132
130
|
style: {
|
133
131
|
...squreStyle.topRight
|
134
132
|
},
|
135
|
-
onChange: handleChange
|
136
|
-
placeholder: "0"
|
133
|
+
onChange: handleChange
|
137
134
|
})
|
138
135
|
}), /*#__PURE__*/_jsx("div", {
|
139
136
|
className: "bannerSpaceBoxRight",
|
140
137
|
children: /*#__PURE__*/_jsx("input", {
|
141
|
-
type: "
|
138
|
+
type: "text",
|
142
139
|
name: "right",
|
143
|
-
value:
|
144
|
-
className: "borderInput
|
140
|
+
value: value?.right,
|
141
|
+
className: "borderInput",
|
145
142
|
style: {
|
146
143
|
...squreStyle.bottomLeft
|
147
144
|
},
|
148
|
-
onChange: handleChange
|
149
|
-
placeholder: "0"
|
145
|
+
onChange: handleChange
|
150
146
|
})
|
151
147
|
}), /*#__PURE__*/_jsx("div", {
|
152
148
|
className: "bannerSpaceBoxBottom",
|
153
149
|
children: /*#__PURE__*/_jsx("input", {
|
154
|
-
type: "
|
150
|
+
type: "text",
|
155
151
|
name: "bottom",
|
156
|
-
value:
|
157
|
-
className: "borderInput
|
152
|
+
value: value?.bottom,
|
153
|
+
className: "borderInput",
|
158
154
|
style: {
|
159
155
|
...squreStyle.bottomRight
|
160
156
|
},
|
161
|
-
onChange: handleChange
|
162
|
-
placeholder: "0"
|
157
|
+
onChange: handleChange
|
163
158
|
})
|
164
159
|
}), /*#__PURE__*/_jsx("div", {
|
165
160
|
className: "bannerSpaceBoxLeft",
|
166
161
|
children: /*#__PURE__*/_jsx("input", {
|
167
|
-
type: "
|
162
|
+
type: "text",
|
168
163
|
name: "left",
|
169
|
-
className: "borderInput
|
170
|
-
value:
|
164
|
+
className: "borderInput",
|
165
|
+
value: value?.left,
|
171
166
|
style: {
|
172
167
|
...squreStyle.topLeft
|
173
168
|
},
|
174
|
-
onChange: handleChange
|
175
|
-
placeholder: "0"
|
169
|
+
onChange: handleChange
|
176
170
|
})
|
177
171
|
})]
|
178
172
|
})
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
2
2
|
import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
-
import { getBreakPointsValue
|
5
|
+
import { getBreakPointsValue } from "../../../helper/theme";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
8
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
@@ -80,13 +80,11 @@ const BorderRadius = props => {
|
|
80
80
|
}), /*#__PURE__*/_jsx(Box, {
|
81
81
|
sx: classes.sapcingInput,
|
82
82
|
component: "input",
|
83
|
-
value: !lockRadius ? "" :
|
84
|
-
className: "sliderInput
|
83
|
+
value: !lockRadius ? "" : value?.topLeft || 0,
|
84
|
+
className: "sliderInput",
|
85
85
|
name: "topLeft",
|
86
86
|
disabled: !lockRadius,
|
87
|
-
onChange: handleChange
|
88
|
-
type: "number",
|
89
|
-
placeholder: "0"
|
87
|
+
onChange: handleChange
|
90
88
|
})]
|
91
89
|
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
92
90
|
className: "ccheckbox-primary",
|
@@ -127,10 +125,10 @@ const BorderRadius = props => {
|
|
127
125
|
borderRadius: `${value?.topLeft}px ${value?.topRight}px ${value?.bottomLeft}px ${value?.bottomRight}px`
|
128
126
|
},
|
129
127
|
children: [/*#__PURE__*/_jsx("input", {
|
130
|
-
type: "
|
128
|
+
type: "text",
|
131
129
|
name: "topLeft",
|
132
|
-
value:
|
133
|
-
className: "borderInput
|
130
|
+
value: value?.topLeft,
|
131
|
+
className: "borderInput",
|
134
132
|
placeholder: "0",
|
135
133
|
style: {
|
136
134
|
...radiusStyle.topLeft,
|
@@ -138,10 +136,10 @@ const BorderRadius = props => {
|
|
138
136
|
},
|
139
137
|
onChange: handleChange
|
140
138
|
}), /*#__PURE__*/_jsx("input", {
|
141
|
-
type: "
|
139
|
+
type: "text",
|
142
140
|
name: "topRight",
|
143
|
-
value:
|
144
|
-
className: "borderInput
|
141
|
+
value: value?.topRight,
|
142
|
+
className: "borderInput",
|
145
143
|
placeholder: "0",
|
146
144
|
style: {
|
147
145
|
...radiusStyle.topRight,
|
@@ -150,10 +148,10 @@ const BorderRadius = props => {
|
|
150
148
|
},
|
151
149
|
onChange: handleChange
|
152
150
|
}), /*#__PURE__*/_jsx("input", {
|
153
|
-
type: "
|
151
|
+
type: "text",
|
154
152
|
name: "bottomLeft",
|
155
|
-
value:
|
156
|
-
className: "borderInput
|
153
|
+
value: value?.bottomLeft,
|
154
|
+
className: "borderInput",
|
157
155
|
placeholder: "0",
|
158
156
|
style: {
|
159
157
|
...radiusStyle.bottomLeft,
|
@@ -162,10 +160,10 @@ const BorderRadius = props => {
|
|
162
160
|
},
|
163
161
|
onChange: handleChange
|
164
162
|
}), /*#__PURE__*/_jsx("input", {
|
165
|
-
type: "
|
163
|
+
type: "text",
|
166
164
|
name: "bottomRight",
|
167
|
-
value:
|
168
|
-
className: "borderInput
|
165
|
+
value: value?.bottomRight,
|
166
|
+
className: "borderInput",
|
169
167
|
placeholder: "0",
|
170
168
|
style: {
|
171
169
|
...radiusStyle.bottomRight,
|
@@ -12,12 +12,11 @@ const Color = props => {
|
|
12
12
|
} = props;
|
13
13
|
const {
|
14
14
|
key,
|
15
|
-
label
|
16
|
-
hideGradient
|
15
|
+
label
|
17
16
|
} = data;
|
18
17
|
const [recentColors, setRecentColors] = useState({});
|
19
18
|
useEffect(() => {
|
20
|
-
const storedColors = JSON.parse(localStorage.getItem(
|
19
|
+
const storedColors = JSON.parse(localStorage.getItem('recentColors'));
|
21
20
|
if (storedColors) {
|
22
21
|
setRecentColors(storedColors);
|
23
22
|
}
|
@@ -40,7 +39,7 @@ const Color = props => {
|
|
40
39
|
[key]: updatedColors
|
41
40
|
};
|
42
41
|
setRecentColors(updatedColors);
|
43
|
-
localStorage.setItem(
|
42
|
+
localStorage.setItem('recentColors', JSON.stringify(updatedColors));
|
44
43
|
};
|
45
44
|
return /*#__PURE__*/_jsxs(Grid, {
|
46
45
|
item: true,
|
@@ -69,8 +68,7 @@ const Color = props => {
|
|
69
68
|
classes: classes,
|
70
69
|
value: value,
|
71
70
|
onSave: onSave,
|
72
|
-
recentColors: recentColors[key]
|
73
|
-
hideGradient: hideGradient
|
71
|
+
recentColors: recentColors[key]
|
74
72
|
})
|
75
73
|
})
|
76
74
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React
|
1
|
+
import React from "react";
|
2
2
|
import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -6,23 +6,12 @@ const SelectBox = props => {
|
|
6
6
|
const {
|
7
7
|
value,
|
8
8
|
data,
|
9
|
-
onChange
|
10
|
-
elementProps
|
9
|
+
onChange
|
11
10
|
} = props;
|
12
11
|
const {
|
13
12
|
key,
|
14
13
|
placeholder
|
15
14
|
} = data;
|
16
|
-
const [checkedValue, setCheckedValue] = useState(false);
|
17
|
-
const isFirstRender = useRef(true);
|
18
|
-
useEffect(() => {
|
19
|
-
if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
|
20
|
-
setCheckedValue(true);
|
21
|
-
isFirstRender.current = false;
|
22
|
-
} else {
|
23
|
-
setCheckedValue(value);
|
24
|
-
}
|
25
|
-
}, [elementProps.element, value]);
|
26
15
|
const handleChange = e => {
|
27
16
|
onChange({
|
28
17
|
[key]: e.target.checked
|
@@ -37,7 +26,7 @@ const SelectBox = props => {
|
|
37
26
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
38
27
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
39
28
|
value: value,
|
40
|
-
checked:
|
29
|
+
checked: value,
|
41
30
|
onChange: handleChange
|
42
31
|
}),
|
43
32
|
label: placeholder
|
@@ -72,20 +72,15 @@ const ELEMENT_TAGS = {
|
|
72
72
|
type: "paragraph"
|
73
73
|
}),
|
74
74
|
TABLE: (el, children = []) => {
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
columns: firstRowChildren?.length
|
85
|
-
};
|
86
|
-
} catch (err) {
|
87
|
-
console.log(err);
|
88
|
-
}
|
75
|
+
const bodyChild = children[0]?.children || [];
|
76
|
+
const firstRowChildren = bodyChild[0]?.children || [];
|
77
|
+
return {
|
78
|
+
type: "table",
|
79
|
+
overwriteChild: bodyChild,
|
80
|
+
// we are not having table-body in our json format, just we are wrapping table-row's inside the table
|
81
|
+
rows: bodyChild?.length,
|
82
|
+
columns: firstRowChildren?.length
|
83
|
+
};
|
89
84
|
},
|
90
85
|
THEAD: () => ({
|
91
86
|
type: "table-head"
|
@@ -154,26 +154,4 @@ export const debounce = function (func, wait, immediate) {
|
|
154
154
|
timeout = setTimeout(later, wait);
|
155
155
|
if (callNow) func.apply(context, args);
|
156
156
|
};
|
157
|
-
};
|
158
|
-
export const getTextColor = (color = "") => {
|
159
|
-
return color?.indexOf("gradient") >= 0 ? {
|
160
|
-
background: color?.concat("text"),
|
161
|
-
WebkitBackgroundClip: "text",
|
162
|
-
WebkitTextFillColor: "transparent",
|
163
|
-
color: "transparent",
|
164
|
-
caretColor: "black"
|
165
|
-
} : {
|
166
|
-
color
|
167
|
-
};
|
168
|
-
};
|
169
|
-
export const getBorderColor = (borderColor = "") => {
|
170
|
-
const borderStyle = borderColor ? {
|
171
|
-
border: "1px solid"
|
172
|
-
} : {};
|
173
|
-
if (borderColor?.indexOf("gradient") >= 0) {
|
174
|
-
borderStyle.borderImage = `${borderColor} 1`;
|
175
|
-
} else {
|
176
|
-
borderStyle.borderColor = borderColor;
|
177
|
-
}
|
178
|
-
return borderStyle;
|
179
157
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { Transforms, Editor, Element, Node
|
1
|
+
import { Transforms, Editor, Element, Node } from "slate";
|
2
2
|
import deserialize from "../helper/deserialize";
|
3
3
|
import { decodeAndParseBase64 } from "../utils/helper";
|
4
4
|
const avoidDefaultInsert = ["table", "grid"];
|
@@ -26,48 +26,6 @@ const getCurrentElement = editor => {
|
|
26
26
|
return null;
|
27
27
|
}
|
28
28
|
};
|
29
|
-
const getCurrentElementText = editor => {
|
30
|
-
try {
|
31
|
-
if (editor.selection) {
|
32
|
-
return Editor.string(editor, editor?.selection?.anchor?.path);
|
33
|
-
} else {
|
34
|
-
return null;
|
35
|
-
}
|
36
|
-
} catch (err) {
|
37
|
-
return null;
|
38
|
-
}
|
39
|
-
};
|
40
|
-
const insertAtNextNode = (editor, formattedFragment) => {
|
41
|
-
try {
|
42
|
-
const {
|
43
|
-
selection
|
44
|
-
} = editor;
|
45
|
-
if (selection) {
|
46
|
-
const parentPath = Path.parent(editor?.selection?.anchor?.path);
|
47
|
-
const nextPath = Path.next(parentPath);
|
48
|
-
Transforms.insertNodes(editor, {
|
49
|
-
type: "paragraph",
|
50
|
-
children: [{
|
51
|
-
text: ""
|
52
|
-
}]
|
53
|
-
}, {
|
54
|
-
at: nextPath
|
55
|
-
});
|
56
|
-
Transforms.insertFragment(editor, formattedFragment, {
|
57
|
-
at: nextPath
|
58
|
-
});
|
59
|
-
}
|
60
|
-
} catch (err) {
|
61
|
-
console.log(err);
|
62
|
-
}
|
63
|
-
};
|
64
|
-
const handleInsert = (editor, defaultInsert, fragment = []) => {
|
65
|
-
if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
|
66
|
-
insertAtNextNode(editor, fragment);
|
67
|
-
} else {
|
68
|
-
defaultInsert();
|
69
|
-
}
|
70
|
-
};
|
71
29
|
const formatFragment = {
|
72
30
|
"list-item": fragment => {
|
73
31
|
let refactorFragment = [];
|
@@ -106,11 +64,11 @@ const withHtml = editor => {
|
|
106
64
|
const currentEl = getCurrentElement(editor);
|
107
65
|
const eltype = currentEl?.type;
|
108
66
|
if (slateHTML && !formatFragment[eltype]) {
|
109
|
-
const decoded = decodeAndParseBase64(slateHTML);
|
110
67
|
const [tableNode] = Editor.nodes(editor, {
|
111
68
|
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
|
112
69
|
});
|
113
70
|
if (tableNode && tableNode[0]) {
|
71
|
+
const decoded = decodeAndParseBase64(slateHTML);
|
114
72
|
const defaultInsert = loopChildren(decoded, true);
|
115
73
|
if (defaultInsert) {
|
116
74
|
insertData(data);
|
@@ -121,7 +79,7 @@ const withHtml = editor => {
|
|
121
79
|
Transforms.insertText(editor, text);
|
122
80
|
}
|
123
81
|
} else {
|
124
|
-
|
82
|
+
insertData(data);
|
125
83
|
}
|
126
84
|
} else if (html) {
|
127
85
|
const parsed = new DOMParser().parseFromString(html, "text/html");
|
@@ -138,7 +96,7 @@ const withHtml = editor => {
|
|
138
96
|
}
|
139
97
|
const fragment = deserialize(parsed.body);
|
140
98
|
const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
|
141
|
-
|
99
|
+
Transforms.insertFragment(editor, formattedFragment);
|
142
100
|
return;
|
143
101
|
} else {
|
144
102
|
insertData(data);
|
@@ -32,21 +32,16 @@ const withLayout = editor => {
|
|
32
32
|
editor.normalizeNode = ([node, path]) => {
|
33
33
|
if (path.length === 0) {
|
34
34
|
if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
|
35
|
-
const {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
Transforms.insertNodes(editor, title, {
|
46
|
-
at: path.concat(0),
|
47
|
-
select: true
|
48
|
-
});
|
49
|
-
}
|
35
|
+
const title = {
|
36
|
+
type: "title",
|
37
|
+
children: [{
|
38
|
+
text: "Untitled"
|
39
|
+
}]
|
40
|
+
};
|
41
|
+
Transforms.insertNodes(editor, title, {
|
42
|
+
at: path.concat(0),
|
43
|
+
select: true
|
44
|
+
});
|
50
45
|
}
|
51
46
|
if (editor.children.length === 0) {
|
52
47
|
const paragraph = {
|
@@ -8,7 +8,7 @@ const withTable = editor => {
|
|
8
8
|
delete: slateDelete
|
9
9
|
} = editor;
|
10
10
|
editor.delete = arg => {
|
11
|
-
if (arg
|
11
|
+
if (arg.reverse) {
|
12
12
|
const table = new TableUtil(editor);
|
13
13
|
const cellsSelected = table.isCellSelected(editor.selection);
|
14
14
|
if (cellsSelected && cellsSelected.length > 1) {
|