@flozy/editor 2.1.0 → 2.1.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +35 -5
- package/dist/Editor/Elements/Button/EditorButton.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +21 -7
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +18 -10
- package/dist/Editor/Elements/Color Picker/colorPicker.svg +14 -0
- package/dist/Editor/Elements/Embed/Image.js +13 -2
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +20 -5
- package/dist/Editor/Elements/Form/Workflow/ListWorkflow.js +132 -129
- package/dist/Editor/Elements/Form/Workflow/Styles.js +16 -10
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +21 -180
- package/dist/Editor/Elements/Form/Workflow/index.js +25 -6
- package/dist/Editor/Elements/Grid/Grid.js +13 -6
- package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js} +5 -43
- package/dist/Editor/Elements/SimpleText/style.js +40 -0
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/Elements/Variables/Style.js +29 -4
- package/dist/Editor/Elements/Variables/VariableButton.js +4 -4
- package/dist/Editor/Styles/EditorStyles.js +18 -0
- package/dist/Editor/Toolbar/Basic/index.js +54 -25
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +46 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +41 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +72 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +92 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +172 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +124 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +73 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +34 -33
- package/dist/Editor/assets/svg/DownArrowIcon.js +16 -0
- package/dist/Editor/assets/svg/PaintIcon.js +15 -0
- package/dist/Editor/assets/svg/TextToolIcon.js +32 -0
- package/dist/Editor/common/Section/index.js +1 -43
- package/dist/Editor/common/Section/styles.js +44 -0
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +10 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +3 -1
- package/dist/Editor/common/StyleBuilder/gridStyle.js +7 -5
- package/dist/Editor/common/StyleBuilder/index.js +8 -0
- package/dist/Editor/helper/deserialize/index.js +10 -6
- package/dist/Editor/plugins/withEmbeds.js +0 -1
- package/dist/Editor/plugins/withHTML.js +36 -4
- package/dist/Editor/service/formSubmit.js +2 -1
- package/dist/Editor/utils/button.js +3 -1
- package/dist/Editor/utils/formfield.js +2 -0
- package/dist/Editor/utils/helper.js +40 -1
- package/package.json +1 -1
@@ -441,6 +441,79 @@ const usePopupStyle = theme => ({
|
|
441
441
|
background: "transparent",
|
442
442
|
boxShadow: "none"
|
443
443
|
}
|
444
|
+
},
|
445
|
+
miniTextFormatWrapper: {
|
446
|
+
maxWidth: "100%",
|
447
|
+
padding: "4px 8px",
|
448
|
+
overflowX: "auto",
|
449
|
+
"& .customSelectTool": {
|
450
|
+
padding: "8px",
|
451
|
+
color: theme.palette.secondary.main,
|
452
|
+
gap: "4px"
|
453
|
+
},
|
454
|
+
"& .verticalLine": {
|
455
|
+
borderLeft: "1px solid #E0E0E0",
|
456
|
+
minHeight: "35px",
|
457
|
+
height: "100%"
|
458
|
+
},
|
459
|
+
"& .toolWrapper": {
|
460
|
+
display: "flex",
|
461
|
+
alignItems: "center",
|
462
|
+
"& .mr-1": {
|
463
|
+
marginRight: "8px"
|
464
|
+
},
|
465
|
+
"& .ml-1": {
|
466
|
+
marginLeft: "8px"
|
467
|
+
}
|
468
|
+
},
|
469
|
+
"& button": {
|
470
|
+
minWidth: "0px !important",
|
471
|
+
textTransform: "none"
|
472
|
+
},
|
473
|
+
"& .fontColorBtn": {
|
474
|
+
color: theme.palette.secondary.main,
|
475
|
+
borderRadius: "unset",
|
476
|
+
fontSize: "17px",
|
477
|
+
padding: "0px",
|
478
|
+
margin: "0px 8px",
|
479
|
+
paddingBottom: "5px",
|
480
|
+
lineHeight: "16px",
|
481
|
+
position: "relative",
|
482
|
+
"& .selectedColor": {
|
483
|
+
height: "3px",
|
484
|
+
position: "absolute",
|
485
|
+
bottom: 0,
|
486
|
+
left: 0,
|
487
|
+
width: "100%"
|
488
|
+
}
|
489
|
+
},
|
490
|
+
"& .textSettingsIcon": {
|
491
|
+
minWidth: "auto !important"
|
492
|
+
}
|
493
|
+
},
|
494
|
+
customSelectPopoverWrapper: {
|
495
|
+
"& .customSelectOptionLabel": {
|
496
|
+
color: "black",
|
497
|
+
margin: "0px",
|
498
|
+
width: "100%",
|
499
|
+
justifyContent: "start",
|
500
|
+
paddingRight: "20px",
|
501
|
+
"& :hover": {
|
502
|
+
background: "#F0F5FA !important"
|
503
|
+
},
|
504
|
+
"&.selected": {
|
505
|
+
background: "#F0F5FA !important"
|
506
|
+
}
|
507
|
+
},
|
508
|
+
"& .menuOptions": {
|
509
|
+
display: "flex",
|
510
|
+
alignItems: "center",
|
511
|
+
gap: "6px"
|
512
|
+
},
|
513
|
+
"& button": {
|
514
|
+
minWidth: "0px !important",
|
515
|
+
textTransform: "none"
|
516
|
+
}
|
444
517
|
}
|
445
518
|
});
|
446
519
|
export default usePopupStyle;
|
@@ -8,12 +8,14 @@ import useDrag from "../../hooks/useDrag";
|
|
8
8
|
import PopperHeader from "./PopperHeader";
|
9
9
|
import { TableUtil } from "../../utils/table";
|
10
10
|
import useWindowResize from "../../hooks/useWindowResize";
|
11
|
-
import
|
11
|
+
// import MiniTextFormat from "./MiniTextFormat";
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
14
15
|
const PopupTool = props => {
|
15
16
|
const {
|
16
|
-
theme
|
17
|
+
theme,
|
18
|
+
setIsTextSelected
|
17
19
|
} = props;
|
18
20
|
const classes = usePopupStyle(theme);
|
19
21
|
const [anchorEl, setAnchorEl] = useState(null);
|
@@ -27,23 +29,19 @@ const PopupTool = props => {
|
|
27
29
|
const id = open ? "popup-edit-tool" : "";
|
28
30
|
const table = new TableUtil(editor);
|
29
31
|
const [size] = useWindowResize();
|
30
|
-
const [eventKey] = useEvent();
|
31
32
|
useEffect(() => {
|
32
33
|
if (event === "end" && anchorEl && !open) {
|
33
34
|
// for table cell selection
|
34
35
|
const isCellsSelected = table.isCellSelected(editor.selection);
|
35
36
|
if (!isCellsSelected) {
|
36
37
|
setOpen(true);
|
38
|
+
setIsTextSelected(true);
|
37
39
|
}
|
38
40
|
} else if (!anchorEl) {
|
39
41
|
setOpen(false);
|
42
|
+
setIsTextSelected(false);
|
40
43
|
}
|
41
44
|
}, [event, anchorEl]);
|
42
|
-
useEffect(() => {
|
43
|
-
if (eventKey) {
|
44
|
-
setOpen(false);
|
45
|
-
}
|
46
|
-
}, [eventKey]);
|
47
45
|
useEffect(() => {
|
48
46
|
if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
|
49
47
|
setAnchorEl(null);
|
@@ -71,31 +69,34 @@ const PopupTool = props => {
|
|
71
69
|
setAnchorEl(null);
|
72
70
|
setOpen(false);
|
73
71
|
};
|
74
|
-
return open ? /*#__PURE__*/_jsx(
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
72
|
+
return open ? /*#__PURE__*/_jsx(_Fragment, {
|
73
|
+
children: /*#__PURE__*/_jsx(Popper, {
|
74
|
+
id: id,
|
75
|
+
open: open,
|
76
|
+
anchorEl: anchorEl,
|
77
|
+
transition: true,
|
78
|
+
placement: "auto-end",
|
79
|
+
sx: classes.popupWrapper,
|
80
|
+
className: `tools-drawer ${size?.device}`,
|
81
|
+
children: ({
|
82
|
+
TransitionProps
|
83
|
+
}) => /*#__PURE__*/_jsx(Fade, {
|
84
|
+
...TransitionProps,
|
85
|
+
timeout: 350,
|
86
|
+
children: /*#__PURE__*/_jsxs(Paper, {
|
87
|
+
style: {
|
88
|
+
borderRadius: "10px"
|
89
|
+
},
|
90
|
+
className: size.device === "xs" ? "mobileMiniTextWrapper" : "",
|
91
|
+
children: [/*#__PURE__*/_jsx(PopperHeader, {
|
92
|
+
title: "Text Settings",
|
93
|
+
classes: classes,
|
94
|
+
onClose: handleClose
|
95
|
+
}), /*#__PURE__*/_jsx(TextFormat, {
|
96
|
+
editor: editor,
|
97
|
+
classes: classes
|
98
|
+
})]
|
99
|
+
})
|
99
100
|
})
|
100
101
|
})
|
101
102
|
}) : null;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
const DownArrowIcon = () => {
|
3
|
+
return /*#__PURE__*/_jsx("svg", {
|
4
|
+
width: "7",
|
5
|
+
height: "5",
|
6
|
+
viewBox: "0 0 7 5",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
9
|
+
children: /*#__PURE__*/_jsx("path", {
|
10
|
+
d: "M1 1L3.43323 3.37902L5.86646 1",
|
11
|
+
stroke: "#64748B",
|
12
|
+
strokeLinecap: "round"
|
13
|
+
})
|
14
|
+
});
|
15
|
+
};
|
16
|
+
export default DownArrowIcon;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
function PaintIcon() {
|
3
|
+
return /*#__PURE__*/_jsx("svg", {
|
4
|
+
width: "14",
|
5
|
+
height: "14",
|
6
|
+
viewBox: "0 0 14 14",
|
7
|
+
fill: "none",
|
8
|
+
xmlns: "http://www.w3.org/2000/svg",
|
9
|
+
children: /*#__PURE__*/_jsx("path", {
|
10
|
+
d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76688 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
|
11
|
+
fill: "#64748B"
|
12
|
+
})
|
13
|
+
});
|
14
|
+
}
|
15
|
+
export default PaintIcon;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
+
function TextToolIcon(props = {}) {
|
4
|
+
return /*#__PURE__*/_jsxs("svg", {
|
5
|
+
width: "14",
|
6
|
+
height: "14",
|
7
|
+
viewBox: "0 0 14 14",
|
8
|
+
fill: "none",
|
9
|
+
xmlns: "http://www.w3.org/2000/svg",
|
10
|
+
...props,
|
11
|
+
children: [/*#__PURE__*/_jsx("path", {
|
12
|
+
d: "M1.55762 4.18323V3.12156C1.55762 2.45073 2.10012 1.91406 2.76512 1.91406H11.2351C11.906 1.91406 12.4426 2.45656 12.4426 3.12156V4.18323",
|
13
|
+
stroke: "#64748B",
|
14
|
+
strokeWidth: "1.5",
|
15
|
+
strokeLinecap: "round",
|
16
|
+
strokeLinejoin: "round"
|
17
|
+
}), /*#__PURE__*/_jsx("path", {
|
18
|
+
d: "M7 12.0876V2.39844",
|
19
|
+
stroke: "#64748B",
|
20
|
+
strokeWidth: "1.5",
|
21
|
+
strokeLinecap: "round",
|
22
|
+
strokeLinejoin: "round"
|
23
|
+
}), /*#__PURE__*/_jsx("path", {
|
24
|
+
d: "M4.70166 12.0859H9.29833",
|
25
|
+
stroke: "#64748B",
|
26
|
+
strokeWidth: "1.5",
|
27
|
+
strokeLinecap: "round",
|
28
|
+
strokeLinejoin: "round"
|
29
|
+
})]
|
30
|
+
});
|
31
|
+
}
|
32
|
+
export default TextToolIcon;
|
@@ -7,51 +7,9 @@ import SectionPopup from "../../Elements/Grid/SectionPopup";
|
|
7
7
|
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
8
8
|
import DragHandle from "../DnD/DragHandleButton";
|
9
9
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
10
|
+
import SectionStyle from "./styles";
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
|
-
const SectionStyle = () => ({
|
13
|
-
root: {
|
14
|
-
"&:hover": {
|
15
|
-
"& .dh-para": {
|
16
|
-
opacity: 1
|
17
|
-
},
|
18
|
-
"& .sectionIcon": {
|
19
|
-
opacity: 1
|
20
|
-
}
|
21
|
-
},
|
22
|
-
"& .element-toolbar": {
|
23
|
-
"&:hover": {
|
24
|
-
display: "block"
|
25
|
-
}
|
26
|
-
},
|
27
|
-
"& .sectionIcon": {
|
28
|
-
opacity: 0,
|
29
|
-
padding: "0px",
|
30
|
-
background: "transparent",
|
31
|
-
border: "none",
|
32
|
-
width: "20px",
|
33
|
-
height: "20px",
|
34
|
-
"& button": {
|
35
|
-
boxShadow: "none",
|
36
|
-
background: "transparent",
|
37
|
-
width: "20px",
|
38
|
-
height: "20px"
|
39
|
-
},
|
40
|
-
"& svg": {
|
41
|
-
fill: "#ccc",
|
42
|
-
width: "20px",
|
43
|
-
marginTop: '-5px'
|
44
|
-
},
|
45
|
-
"&:hover": {
|
46
|
-
opacity: 1,
|
47
|
-
background: "#eee"
|
48
|
-
},
|
49
|
-
"&.active": {
|
50
|
-
opacity: 1
|
51
|
-
}
|
52
|
-
}
|
53
|
-
}
|
54
|
-
});
|
55
13
|
const Section = props => {
|
56
14
|
const classes = SectionStyle();
|
57
15
|
const {
|
@@ -0,0 +1,44 @@
|
|
1
|
+
const SectionStyle = () => ({
|
2
|
+
root: {
|
3
|
+
"&:hover": {
|
4
|
+
"& .dh-para": {
|
5
|
+
opacity: 1
|
6
|
+
},
|
7
|
+
"& .sectionIcon": {
|
8
|
+
opacity: 1
|
9
|
+
}
|
10
|
+
},
|
11
|
+
"& .element-toolbar": {
|
12
|
+
"&:hover": {
|
13
|
+
display: "block"
|
14
|
+
}
|
15
|
+
},
|
16
|
+
"& .sectionIcon": {
|
17
|
+
opacity: 0,
|
18
|
+
padding: "0px",
|
19
|
+
background: "transparent",
|
20
|
+
border: "none",
|
21
|
+
width: "20px",
|
22
|
+
height: "20px",
|
23
|
+
"& button": {
|
24
|
+
boxShadow: "none",
|
25
|
+
background: "transparent",
|
26
|
+
width: "20px",
|
27
|
+
height: "20px"
|
28
|
+
},
|
29
|
+
"& svg": {
|
30
|
+
fill: "#ccc",
|
31
|
+
width: "20px",
|
32
|
+
marginTop: "-5px"
|
33
|
+
},
|
34
|
+
"&:hover": {
|
35
|
+
opacity: 1,
|
36
|
+
background: "#eee"
|
37
|
+
},
|
38
|
+
"&.active": {
|
39
|
+
opacity: 1
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
});
|
44
|
+
export default SectionStyle;
|
@@ -39,6 +39,16 @@ const embedImageStyle = [{
|
|
39
39
|
value: "RoundedLightB2",
|
40
40
|
label: "Rounded Light B2 Frame"
|
41
41
|
}]
|
42
|
+
}, {
|
43
|
+
label: "Add web address here",
|
44
|
+
key: "webAddress",
|
45
|
+
type: "text",
|
46
|
+
placeholder: "https://"
|
47
|
+
}, {
|
48
|
+
label: "Open in new tab",
|
49
|
+
key: "isNewTab",
|
50
|
+
type: "selectBox",
|
51
|
+
placeholder: "Open in new tab"
|
42
52
|
}]
|
43
53
|
}, {
|
44
54
|
tab: "Banner Spacing",
|
@@ -31,12 +31,14 @@ const BorderRadius = props => {
|
|
31
31
|
BORDER_RADIUS_KEYS.forEach(m => {
|
32
32
|
changeAll[m] = e.target.value;
|
33
33
|
});
|
34
|
+
} else {
|
35
|
+
changeAll = val ? val[size?.device] : {};
|
34
36
|
}
|
35
37
|
onChange({
|
36
38
|
[key]: {
|
37
39
|
...getBreakPointsValue(val, null),
|
38
40
|
[size?.device]: {
|
39
|
-
...changeAll,
|
41
|
+
...(changeAll || {}),
|
40
42
|
[e.target.name]: e.target.value
|
41
43
|
}
|
42
44
|
}
|
@@ -94,11 +94,13 @@ const gridStyle = [{
|
|
94
94
|
}, {
|
95
95
|
tab: "Size",
|
96
96
|
value: "gridSize",
|
97
|
-
fields: [
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
97
|
+
fields: [
|
98
|
+
// {
|
99
|
+
// label: "Width Size",
|
100
|
+
// key: "gridSize",
|
101
|
+
// type: "gridSize",
|
102
|
+
// },
|
103
|
+
{
|
102
104
|
label: "Wrap",
|
103
105
|
key: "flexWrap",
|
104
106
|
type: "textOptions",
|
@@ -85,6 +85,14 @@ const StyleBuilder = props => {
|
|
85
85
|
...data,
|
86
86
|
field_type: data?.element
|
87
87
|
});
|
88
|
+
if (data?.hasOwnProperty('name')) {
|
89
|
+
setElementProps({
|
90
|
+
...elementProps,
|
91
|
+
...data,
|
92
|
+
key: data?.name,
|
93
|
+
label: data?.name
|
94
|
+
});
|
95
|
+
}
|
88
96
|
};
|
89
97
|
const handleSave = () => {
|
90
98
|
onSave(elementProps);
|
@@ -53,9 +53,13 @@ const ELEMENT_TAGS = {
|
|
53
53
|
"GOOGLE-SHEETS-HTML-ORIGIN": () => ({
|
54
54
|
type: "paragraph"
|
55
55
|
}),
|
56
|
-
TABLE: () =>
|
57
|
-
|
58
|
-
|
56
|
+
TABLE: (el, bodyChildren = []) => {
|
57
|
+
return {
|
58
|
+
type: "table",
|
59
|
+
rows: bodyChildren?.length,
|
60
|
+
columns: bodyChildren[0]?.children?.length
|
61
|
+
};
|
62
|
+
},
|
59
63
|
THEAD: () => ({
|
60
64
|
type: "table-head"
|
61
65
|
}),
|
@@ -105,7 +109,8 @@ const TEXT_TAGS = {
|
|
105
109
|
};
|
106
110
|
const deserialize = el => {
|
107
111
|
if (el.nodeType === 3) {
|
108
|
-
|
112
|
+
const match = /\r|\n/.exec(el.textContent);
|
113
|
+
return match ? null : el.textContent;
|
109
114
|
} else if (el.nodeType !== 1) {
|
110
115
|
return null;
|
111
116
|
} else if (el.nodeName === "BR") {
|
@@ -115,7 +120,6 @@ const deserialize = el => {
|
|
115
120
|
nodeName
|
116
121
|
} = el;
|
117
122
|
let parent = el;
|
118
|
-
console.log(nodeName);
|
119
123
|
if (nodeName === "PRE" && el.childNodes[0] && el.childNodes[0].nodeName === "CODE") {
|
120
124
|
parent = el.childNodes[0];
|
121
125
|
}
|
@@ -129,7 +133,7 @@ const deserialize = el => {
|
|
129
133
|
return jsx("fragment", {}, children);
|
130
134
|
}
|
131
135
|
if (ELEMENT_TAGS[nodeName]) {
|
132
|
-
const attrs = ELEMENT_TAGS[nodeName](el);
|
136
|
+
const attrs = ELEMENT_TAGS[nodeName](el, children);
|
133
137
|
return jsx("element", attrs, children);
|
134
138
|
}
|
135
139
|
if (TEXT_TAGS[nodeName]) {
|
@@ -17,7 +17,6 @@ const withEmbeds = editor => {
|
|
17
17
|
editor.insertBreak = (...args) => {
|
18
18
|
const parentPath = Path.parent(editor.selection.focus.path);
|
19
19
|
const parentNode = Node.get(editor, parentPath);
|
20
|
-
console.log(parentNode);
|
21
20
|
if (editor.isVoid(parentNode)) {
|
22
21
|
const nextPath = Path.next(parentPath);
|
23
22
|
Transforms.insertNodes(editor, {
|
@@ -1,5 +1,36 @@
|
|
1
|
-
import { Transforms, Editor, Element } from "slate";
|
1
|
+
import { Transforms, Editor, Element, Node } from "slate";
|
2
2
|
import deserialize from "../helper/deserialize";
|
3
|
+
const getCurrentElement = editor => {
|
4
|
+
try {
|
5
|
+
if (editor.selection) {
|
6
|
+
return Node.parent(editor, editor?.selection?.anchor?.path);
|
7
|
+
} else {
|
8
|
+
return null;
|
9
|
+
}
|
10
|
+
} catch (err) {
|
11
|
+
return null;
|
12
|
+
}
|
13
|
+
};
|
14
|
+
const formatFragment = {
|
15
|
+
"list-item": fragment => {
|
16
|
+
let refactorFragment = [];
|
17
|
+
fragment.forEach(a => {
|
18
|
+
if (a.type === "orderedList") {
|
19
|
+
refactorFragment = [...refactorFragment, ...(a.children || [])];
|
20
|
+
} else {
|
21
|
+
a.type = "list-item";
|
22
|
+
refactorFragment.push(a);
|
23
|
+
}
|
24
|
+
});
|
25
|
+
return refactorFragment;
|
26
|
+
},
|
27
|
+
"check-list-item": fragment => {
|
28
|
+
return fragment.map(a => {
|
29
|
+
a.type = "check-list-item";
|
30
|
+
return a;
|
31
|
+
});
|
32
|
+
}
|
33
|
+
};
|
3
34
|
const withHtml = editor => {
|
4
35
|
const {
|
5
36
|
insertData,
|
@@ -15,7 +46,7 @@ const withHtml = editor => {
|
|
15
46
|
editor.insertData = data => {
|
16
47
|
const slateHTML = data?.getData("application/x-slate-fragment");
|
17
48
|
const html = data?.getData("text/html");
|
18
|
-
|
49
|
+
const currentEl = getCurrentElement(editor);
|
19
50
|
if (slateHTML) {
|
20
51
|
const [tableNode] = Editor.nodes(editor, {
|
21
52
|
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
|
@@ -30,9 +61,10 @@ const withHtml = editor => {
|
|
30
61
|
}
|
31
62
|
} else if (html) {
|
32
63
|
const parsed = new DOMParser().parseFromString(html, "text/html");
|
33
|
-
console.log(parsed.body);
|
34
64
|
const fragment = deserialize(parsed.body);
|
35
|
-
|
65
|
+
const eltype = currentEl?.type;
|
66
|
+
const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
|
67
|
+
Transforms.insertFragment(editor, formattedFragment);
|
36
68
|
return;
|
37
69
|
} else {
|
38
70
|
insertData(data);
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export const formSubmit = async (formData, props) => {
|
2
2
|
try {
|
3
|
-
const
|
3
|
+
const pageApiHost = props.PAGES_API_HOST || "api/v1";
|
4
|
+
const response = await fetch(`${pageApiHost}/form/submit`, {
|
4
5
|
method: "POST",
|
5
6
|
headers: {
|
6
7
|
"Content-Type": "application/json"
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Transforms } from "slate";
|
2
2
|
import insertNewLine from "./insertNewLine";
|
3
|
+
import { windowVar } from "./helper";
|
3
4
|
export const insertButton = editor => {
|
4
5
|
const button = {
|
5
6
|
type: "button",
|
@@ -23,7 +24,8 @@ export const insertButton = editor => {
|
|
23
24
|
top: 8,
|
24
25
|
right: 16,
|
25
26
|
bottom: 8
|
26
|
-
}
|
27
|
+
},
|
28
|
+
...(windowVar.lastButtonProps || {})
|
27
29
|
};
|
28
30
|
Transforms.insertNodes(editor, button);
|
29
31
|
Transforms.move(editor);
|
@@ -1,4 +1,6 @@
|
|
1
|
-
import { Editor, Node } from "slate";
|
1
|
+
import { Editor, Node, Transforms } from "slate";
|
2
|
+
import { ReactEditor } from "slate-react";
|
3
|
+
export const windowVar = {};
|
2
4
|
export const formatDate = (date, format = "MM/DD/YYYY") => {
|
3
5
|
if (!date) return "";
|
4
6
|
var d = new Date(date),
|
@@ -103,4 +105,41 @@ export const isEmptyNode = (editor, children, path) => {
|
|
103
105
|
console.log(err);
|
104
106
|
return "";
|
105
107
|
}
|
108
|
+
};
|
109
|
+
export const outsideEditorClickLabel = "handle-outside-editor-click";
|
110
|
+
export const handleInsertLastElement = (event, editor) => {
|
111
|
+
if (event.target.dataset.info !== outsideEditorClickLabel) {
|
112
|
+
return;
|
113
|
+
}
|
114
|
+
const lastElement = editor.children[editor.children?.length - 1];
|
115
|
+
const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
|
116
|
+
if (!ReactEditor.isFocused(editor)) {
|
117
|
+
if (isLastElementEmpty) {
|
118
|
+
// just focus on the last empty element
|
119
|
+
const path = [editor.children.length - 1, 0];
|
120
|
+
const move = {
|
121
|
+
path: path,
|
122
|
+
offset: 0
|
123
|
+
};
|
124
|
+
Transforms.insertNodes(editor, {
|
125
|
+
text: ''
|
126
|
+
}, {
|
127
|
+
at: path
|
128
|
+
});
|
129
|
+
Transforms.move(editor, move);
|
130
|
+
Transforms.select(editor, move);
|
131
|
+
} else {
|
132
|
+
// insert an new empty element and focus
|
133
|
+
Transforms.insertNodes(editor, [{
|
134
|
+
type: "paragraph",
|
135
|
+
children: [{
|
136
|
+
text: ""
|
137
|
+
}]
|
138
|
+
}], {
|
139
|
+
at: [editor.children.length],
|
140
|
+
select: true
|
141
|
+
});
|
142
|
+
}
|
143
|
+
ReactEditor.focus(editor);
|
144
|
+
}
|
106
145
|
};
|