@flozy/editor 5.6.7 → 5.6.9
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/CommonEditor.js +15 -10
- package/dist/Editor/Editor.css +22 -17
- package/dist/Editor/Elements/Button/EditorButton.js +3 -1
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +12 -9
- package/dist/Editor/Elements/Form/Form.js +1 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +1 -0
- package/dist/Editor/Elements/List/CheckList.js +2 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +1 -0
- package/dist/Editor/Elements/Signature/SignaturePopup.js +3 -1
- package/dist/Editor/Elements/SimpleText/index.js +8 -1
- package/dist/Editor/Elements/SimpleText/style.js +5 -1
- package/dist/Editor/Elements/Table/DragButton.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +4 -2
- package/dist/Editor/Elements/Title/title.js +13 -1
- package/dist/Editor/Elements/Variables/Style.js +20 -2
- package/dist/Editor/Elements/Variables/VariableButton.js +7 -3
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +13 -3
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +5 -0
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +45 -0
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +1 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +14 -2
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +26 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +10 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +79 -0
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +4 -0
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/commonStyle.js +9 -4
- package/dist/Editor/helper/index.js +2 -2
- package/dist/Editor/helper/theme.js +24 -1
- package/dist/Editor/hooks/useMouseMove.js +5 -2
- package/dist/Editor/plugins/withLayout.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +8 -1
- package/dist/Editor/utils/button.js +4 -4
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/helper.js +30 -24
- package/dist/Editor/utils/pageSettings.js +14 -2
- package/package.json +1 -1
@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
|
|
3
3
|
import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
|
4
4
|
import useSwitchViewport from "./styles";
|
5
5
|
import { useEffect } from "react";
|
6
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const SwitchViewport = props => {
|
9
10
|
const {
|
10
11
|
breakpoint,
|
11
|
-
onChange
|
12
|
+
onChange,
|
13
|
+
show
|
12
14
|
} = props;
|
13
15
|
const classes = useSwitchViewport();
|
16
|
+
const {
|
17
|
+
setSelectedElement,
|
18
|
+
setActiveBreakPoint
|
19
|
+
} = useEditorContext();
|
14
20
|
useEffect(() => {
|
15
|
-
|
21
|
+
// to reset selection on viewport changes - FS-6589
|
22
|
+
setSelectedElement({});
|
16
23
|
}, [breakpoint]);
|
17
24
|
return /*#__PURE__*/_jsxs(Box, {
|
18
25
|
sx: classes.root,
|
26
|
+
style: {
|
27
|
+
display: show ? "block" : "none"
|
28
|
+
},
|
19
29
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
20
30
|
title: "Desktop View",
|
21
31
|
children: /*#__PURE__*/_jsx(IconButton, {
|
22
32
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
23
33
|
onClick: () => {
|
34
|
+
setActiveBreakPoint("");
|
24
35
|
onChange("");
|
25
36
|
},
|
26
37
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
|
|
30
41
|
children: /*#__PURE__*/_jsx(IconButton, {
|
31
42
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
32
43
|
onClick: () => {
|
44
|
+
setActiveBreakPoint("xs");
|
33
45
|
onChange("xs");
|
34
46
|
},
|
35
47
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Transforms, Node, Path } from "slate";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
+
import { handleNegativeInteger } from "../../../utils/helper";
|
3
4
|
export const ROW_HEIGHT = 50;
|
4
5
|
const MARGIN_OF = {
|
5
6
|
xs: 160,
|
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
|
|
75
76
|
console.log(err);
|
76
77
|
}
|
77
78
|
};
|
78
|
-
function isContainerElement(editor, moveTopath, props) {
|
79
|
+
function isContainerElement(editor, moveTopath, props, appenBp) {
|
79
80
|
try {
|
80
81
|
const {
|
81
82
|
path,
|
@@ -91,21 +92,32 @@ function isContainerElement(editor, moveTopath, props) {
|
|
91
92
|
parentNode = Node.get(editor, Path.parent(dragItemPath));
|
92
93
|
}
|
93
94
|
const moveToNode = Node.get(editor, moveTopath);
|
95
|
+
const leftOfMoveToNode = moveToNode[`left${appenBp}`];
|
94
96
|
if (moveToNode.type === "freegridBox") {
|
95
97
|
if (parentNode.type === "freegridBox") {
|
96
98
|
// same box
|
97
99
|
if (parentPath === dragOver) {
|
98
100
|
return props.calX;
|
99
101
|
} else {
|
102
|
+
const moveToDom = ReactEditor.toDOMNode(editor, moveToNode);
|
103
|
+
const {
|
104
|
+
left
|
105
|
+
} = moveToDom?.getBoundingClientRect() || {};
|
106
|
+
const borderLeftWidth = getBorderWidth(moveToDom, "borderLeftWidth");
|
107
|
+
|
100
108
|
// for different box
|
101
|
-
return parseInt(props.x -
|
109
|
+
return parseInt(props.x - props.diffX - left - borderLeftWidth);
|
102
110
|
}
|
103
111
|
} else {
|
104
|
-
return props.calX -
|
112
|
+
return props.calX - leftOfMoveToNode;
|
105
113
|
}
|
106
114
|
} else if (moveToNode.type === "freegrid") {
|
107
115
|
if (parentNode.type === "freegridBox") {
|
108
|
-
|
116
|
+
const boundaryLineEle = document.querySelector(".rnd-guideline-lv");
|
117
|
+
const {
|
118
|
+
left
|
119
|
+
} = boundaryLineEle?.getBoundingClientRect() || {};
|
120
|
+
return parseInt(props.x - props.diffX - left);
|
109
121
|
} else {
|
110
122
|
return props.calX;
|
111
123
|
}
|
@@ -133,14 +145,17 @@ export function onDropItem(props, parentClass) {
|
|
133
145
|
const from = parentPath.split("|").map(m => parseInt(m));
|
134
146
|
let newPath = [];
|
135
147
|
newPath = moveTo;
|
136
|
-
const
|
148
|
+
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
149
|
+
const cCalx = isContainerElement(editor, moveTo, props, appenBp);
|
150
|
+
|
137
151
|
// const posX = parseInt(
|
138
152
|
// cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
|
139
153
|
// );
|
140
154
|
const toSectionNode = Node.get(editor, newPath);
|
141
155
|
const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
|
156
|
+
const borderTopWidth = getBorderWidth(addToSectionDOM, "borderTopWidth");
|
142
157
|
const rect = addToSectionDOM.getBoundingClientRect();
|
143
|
-
const y = endPosition.y - startPosition.diffY - rect.top;
|
158
|
+
const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top - borderTopWidth);
|
144
159
|
|
145
160
|
// Calculate grid position
|
146
161
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
@@ -150,7 +165,6 @@ export function onDropItem(props, parentClass) {
|
|
150
165
|
|
151
166
|
// Update grid area
|
152
167
|
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
153
|
-
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
154
168
|
Transforms.setNodes(editor, {
|
155
169
|
[`gridArea${appenBp}`]: gridArea,
|
156
170
|
[`left${appenBp}`]: cCalx,
|
@@ -188,4 +202,9 @@ export function onDropItem(props, parentClass) {
|
|
188
202
|
export function calculateGridArea(y) {
|
189
203
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
190
204
|
return `${row} / 1 / ${row + 1} / 2`;
|
205
|
+
}
|
206
|
+
export function getBorderWidth(dom, property) {
|
207
|
+
const styles = getComputedStyle(dom);
|
208
|
+
const borderWidth = parseFloat(styles[property]);
|
209
|
+
return borderWidth;
|
191
210
|
}
|
@@ -73,6 +73,11 @@ const BackgroundImage = props => {
|
|
73
73
|
children: "REMOVE"
|
74
74
|
}) : /*#__PURE__*/_jsx(Grid, {
|
75
75
|
className: "uploadImageText",
|
76
|
+
sx: {
|
77
|
+
padding: 0,
|
78
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor}`,
|
79
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
|
80
|
+
},
|
76
81
|
children: /*#__PURE__*/_jsxs(Button, {
|
77
82
|
component: "label",
|
78
83
|
variant: "text",
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
|
2
2
|
import React from "react";
|
3
3
|
import Icon from "../../Icon";
|
4
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -15,7 +16,10 @@ const RenderCard = ({
|
|
15
16
|
return /*#__PURE__*/_jsx(Card, {
|
16
17
|
sx: {
|
17
18
|
position: 'relative',
|
18
|
-
padding: "10px"
|
19
|
+
padding: "10px",
|
20
|
+
'& .MuiCheckbox-root svg': {
|
21
|
+
fill: 'unset !important'
|
22
|
+
}
|
19
23
|
},
|
20
24
|
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
21
25
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
@@ -81,6 +85,9 @@ const CardsMapping = props => {
|
|
81
85
|
selectedCard,
|
82
86
|
infoIcon
|
83
87
|
} = data;
|
88
|
+
const {
|
89
|
+
theme
|
90
|
+
} = useEditorContext();
|
84
91
|
const activeCard = value === selectedCard;
|
85
92
|
const handleChange = e => {
|
86
93
|
if (selectedCard === data?.value) {
|
@@ -99,7 +106,8 @@ const CardsMapping = props => {
|
|
99
106
|
sx: {
|
100
107
|
marginBottom: "12px",
|
101
108
|
"& .MuiPaper-root": {
|
102
|
-
|
109
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
110
|
+
border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
103
111
|
borderRadius: "8px",
|
104
112
|
boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
|
105
113
|
}
|
@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
|
|
18
18
|
import SelectSwitch from "./selectSwitch";
|
19
19
|
import CardsMapping from "./card";
|
20
20
|
import MetaDataMapping from "./metaDataMapping";
|
21
|
+
import LineSpacing from "./lineSpacing";
|
21
22
|
const FieldMap = {
|
22
23
|
text: Text,
|
23
24
|
bannerSpacing: BannerSpacing,
|
@@ -38,6 +39,7 @@ const FieldMap = {
|
|
38
39
|
fontSize: FontSize,
|
39
40
|
selectSwitch: SelectSwitch,
|
40
41
|
card: CardsMapping,
|
41
|
-
metadatamapping: MetaDataMapping
|
42
|
+
metadatamapping: MetaDataMapping,
|
43
|
+
lineSpacing: LineSpacing
|
42
44
|
};
|
43
45
|
export default FieldMap;
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Grid, Slider, Typography, Box } from "@mui/material";
|
3
|
+
import { getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const LineSpacing = props => {
|
9
|
+
const {
|
10
|
+
value: val,
|
11
|
+
data,
|
12
|
+
onChange
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
theme
|
16
|
+
} = useEditorContext();
|
17
|
+
const {
|
18
|
+
key
|
19
|
+
} = data;
|
20
|
+
const [size] = useWindowResize();
|
21
|
+
const pro_value = getBreakPointsValue(val, size?.device);
|
22
|
+
const [value, setValue] = useState(pro_value);
|
23
|
+
let breakpointValue = getBreakPointsValue(val, null);
|
24
|
+
breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
|
25
|
+
useState(() => {
|
26
|
+
setValue(pro_value);
|
27
|
+
}, [pro_value]);
|
28
|
+
const handleChange = e => {
|
29
|
+
onChange({
|
30
|
+
[key]: {
|
31
|
+
...breakpointValue,
|
32
|
+
[size?.device]: e.target.value
|
33
|
+
}
|
34
|
+
});
|
35
|
+
};
|
36
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
37
|
+
item: true,
|
38
|
+
xs: 12,
|
39
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
40
|
+
variant: "body1",
|
41
|
+
color: "primary",
|
42
|
+
style: {
|
43
|
+
fontSize: "14px",
|
44
|
+
fontWeight: 500
|
45
|
+
},
|
46
|
+
children: data?.label
|
47
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
48
|
+
container: true,
|
49
|
+
wrap: "nowrap",
|
50
|
+
className: "sld-wrpr",
|
51
|
+
children: [/*#__PURE__*/_jsx(Slider, {
|
52
|
+
className: "spacingSlider",
|
53
|
+
defaultValue: value || 1.43,
|
54
|
+
"aria-label": "Default",
|
55
|
+
valueLabelDisplay: "auto",
|
56
|
+
min: 0.5,
|
57
|
+
max: 3.0,
|
58
|
+
step: 0.1,
|
59
|
+
name: "lineHeight",
|
60
|
+
onChange: handleChange
|
61
|
+
}), /*#__PURE__*/_jsx(Box, {
|
62
|
+
component: "input",
|
63
|
+
sx: {
|
64
|
+
background: theme?.palette?.editor?.background,
|
65
|
+
color: theme?.palette?.editor?.textColor
|
66
|
+
},
|
67
|
+
name: "lineHeight",
|
68
|
+
value: pro_value,
|
69
|
+
className: "sliderInput",
|
70
|
+
onChange: handleChange,
|
71
|
+
type: "number",
|
72
|
+
placeholder: "0",
|
73
|
+
disabled: true,
|
74
|
+
defaultValue: pro_value || 1.43
|
75
|
+
})]
|
76
|
+
})]
|
77
|
+
});
|
78
|
+
};
|
79
|
+
export default LineSpacing;
|
@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
|
|
4
4
|
import { uploadFile } from "../service/fileupload";
|
5
5
|
import Icon from "./Icon";
|
6
6
|
import UploadStyles from "../common/ImageSelector/UploadStyles";
|
7
|
+
import { useEditorContext } from "../hooks/useMouseMove";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -18,6 +19,9 @@ const Uploader = props => {
|
|
18
19
|
const [base64, setBase64] = useState(value?.url);
|
19
20
|
const [fileName, setFileName] = useState("");
|
20
21
|
const [uploading, setUploading] = useState(false);
|
22
|
+
const {
|
23
|
+
theme
|
24
|
+
} = useEditorContext();
|
21
25
|
const handleChange = async e => {
|
22
26
|
const uFile = e.target.files[0];
|
23
27
|
const strImage = await convertBase64(uFile);
|
@@ -99,6 +103,10 @@ const Uploader = props => {
|
|
99
103
|
className: "uploadImageSection",
|
100
104
|
children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
|
101
105
|
className: "uploadImageText",
|
106
|
+
sx: {
|
107
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor}`,
|
108
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
|
109
|
+
},
|
102
110
|
children: /*#__PURE__*/_jsxs(Button, {
|
103
111
|
component: "label",
|
104
112
|
variant: "text",
|
@@ -49,6 +49,11 @@ const useCommonStyle = theme => ({
|
|
49
49
|
fontWeight: "500",
|
50
50
|
fontFamily: "Inter, sans-serif"
|
51
51
|
},
|
52
|
+
"& .MuiPaper-root": {
|
53
|
+
border: `unset !important`,
|
54
|
+
borderRadius: '0px',
|
55
|
+
height: 'fit-content'
|
56
|
+
},
|
52
57
|
"& p": {
|
53
58
|
marginBottom: "7px",
|
54
59
|
marginTop: "4px"
|
@@ -464,10 +469,6 @@ const useCommonStyle = theme => ({
|
|
464
469
|
}
|
465
470
|
}
|
466
471
|
},
|
467
|
-
pageSettingPopUpRoot: {
|
468
|
-
padding: "16px 8px 16px 10px!important",
|
469
|
-
height: "100%"
|
470
|
-
},
|
471
472
|
buttonMoreOption: {
|
472
473
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
473
474
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
@@ -480,6 +481,10 @@ const useCommonStyle = theme => ({
|
|
480
481
|
}
|
481
482
|
}
|
482
483
|
},
|
484
|
+
pageSettingPopUpRoot: {
|
485
|
+
padding: "16px 8px 16px 10px!important",
|
486
|
+
height: "100%"
|
487
|
+
},
|
483
488
|
buttonMoreOption2: {
|
484
489
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
485
490
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
@@ -337,14 +337,14 @@ export const isCarouselSelected = editor => {
|
|
337
337
|
return false;
|
338
338
|
}
|
339
339
|
const [nodeEntry] = Editor.nodes(editor, {
|
340
|
-
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type ===
|
340
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
|
341
341
|
});
|
342
342
|
if (!nodeEntry) {
|
343
343
|
return false;
|
344
344
|
}
|
345
345
|
const [node] = nodeEntry;
|
346
346
|
const carouselDom = ReactEditor.toDOMNode(editor, node);
|
347
|
-
const isEdit = carouselDom.classList.contains(
|
347
|
+
const isEdit = carouselDom.classList.contains("carousel_slider_edit");
|
348
348
|
return !isEdit;
|
349
349
|
} catch (err) {
|
350
350
|
console.log(err);
|
@@ -161,4 +161,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
|
|
161
161
|
}
|
162
162
|
};
|
163
163
|
};
|
164
|
-
export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
|
164
|
+
export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
|
165
|
+
export const getBreakpointLineSpacing = (value, breakpoint) => {
|
166
|
+
try {
|
167
|
+
const values = getBreakPointsValue(value, breakpoint);
|
168
|
+
const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
|
169
|
+
if (values[b] || values["lg"]) {
|
170
|
+
const value = values[b] || values["lg"];
|
171
|
+
return {
|
172
|
+
...a,
|
173
|
+
[b]: value
|
174
|
+
};
|
175
|
+
} else {
|
176
|
+
return a;
|
177
|
+
}
|
178
|
+
}, {});
|
179
|
+
if (breakpoint) {
|
180
|
+
return value[breakpoint] || value["lg"] || value;
|
181
|
+
} else {
|
182
|
+
return cssVal["lg"];
|
183
|
+
}
|
184
|
+
} catch (err) {
|
185
|
+
// console.log(err);
|
186
|
+
}
|
187
|
+
};
|
@@ -35,6 +35,7 @@ export const EditorProvider = ({
|
|
35
35
|
path: null
|
36
36
|
});
|
37
37
|
const [fontFamilies, setFontFamilies] = useState({});
|
38
|
+
const [activeBreakPoint, setActiveBreakPoint] = useState("");
|
38
39
|
useEffect(() => {
|
39
40
|
window.updateSelectedItem = d => {
|
40
41
|
setSelectedElement(d);
|
@@ -97,8 +98,10 @@ export const EditorProvider = ({
|
|
97
98
|
setOpenAI,
|
98
99
|
updateDragging,
|
99
100
|
fontFamilies,
|
100
|
-
setFontFamilies
|
101
|
-
|
101
|
+
setFontFamilies,
|
102
|
+
activeBreakPoint,
|
103
|
+
setActiveBreakPoint
|
104
|
+
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
|
102
105
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
103
106
|
value: otherValues,
|
104
107
|
children: children
|
@@ -314,7 +314,8 @@ export const getBlock = props => {
|
|
314
314
|
borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
|
315
315
|
margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
|
316
316
|
width: element?.bgColor ? "calc(100% - 16px)" : "100%",
|
317
|
-
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
|
317
|
+
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
|
318
|
+
lineHeight: 1.43
|
318
319
|
},
|
319
320
|
children: children
|
320
321
|
});
|
@@ -374,6 +375,9 @@ export const getBlock = props => {
|
|
374
375
|
});
|
375
376
|
case "orderedList":
|
376
377
|
return /*#__PURE__*/_jsx("ol", {
|
378
|
+
style: {
|
379
|
+
lineHeight: 1.43
|
380
|
+
},
|
377
381
|
className: "listItemMargin",
|
378
382
|
type: "1",
|
379
383
|
...attributes,
|
@@ -381,6 +385,9 @@ export const getBlock = props => {
|
|
381
385
|
});
|
382
386
|
case "unorderedList":
|
383
387
|
return /*#__PURE__*/_jsx("ul", {
|
388
|
+
style: {
|
389
|
+
lineHeight: 1.43
|
390
|
+
},
|
384
391
|
className: "listItemMargin",
|
385
392
|
...attributes,
|
386
393
|
children: children
|
@@ -82,7 +82,8 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
|
|
82
82
|
};
|
83
83
|
export const draftToSlate = props => {
|
84
84
|
const {
|
85
|
-
data
|
85
|
+
data,
|
86
|
+
needLayout
|
86
87
|
} = props;
|
87
88
|
if (data?.blocks && data?.blocks?.length > 0) {
|
88
89
|
const converted = data?.blocks?.reduce((a, b) => {
|
@@ -104,7 +105,7 @@ export const draftToSlate = props => {
|
|
104
105
|
return data;
|
105
106
|
} else {
|
106
107
|
return [{
|
107
|
-
type: "paragraph",
|
108
|
+
type: needLayout ? "title" : "paragraph",
|
108
109
|
children: [{
|
109
110
|
text: ""
|
110
111
|
}]
|
@@ -593,8 +593,9 @@ export const getPreviousNode = editor => {
|
|
593
593
|
return;
|
594
594
|
}
|
595
595
|
};
|
596
|
-
|
597
|
-
|
596
|
+
const isRestricted = node => node?.type === "page-settings" || node?.type === "site-settings" || node?.children?.some(child => child.type === "dataView");
|
597
|
+
export const isRestrictedNode = (event, editor) => {
|
598
|
+
let isNodeRestricted = false;
|
598
599
|
try {
|
599
600
|
const {
|
600
601
|
selection
|
@@ -607,23 +608,27 @@ export const isPageSettings = (event, editor) => {
|
|
607
608
|
previousNode,
|
608
609
|
previousPath
|
609
610
|
} = getPreviousNode(editor) || {};
|
610
|
-
if (previousNode
|
611
|
+
if (isRestricted(previousNode)) {
|
611
612
|
event.preventDefault(); // stops deleting backward
|
612
613
|
|
613
614
|
// move the cursor to node which is before page-settings node
|
614
615
|
const pathBeforePageSettings = Path.previous(previousPath);
|
615
616
|
const endPath = Editor.end(editor, pathBeforePageSettings);
|
616
617
|
Transforms.select(editor, endPath);
|
617
|
-
|
618
|
+
isNodeRestricted = true;
|
618
619
|
}
|
619
620
|
}
|
620
|
-
return
|
621
|
+
return isNodeRestricted;
|
621
622
|
} catch (err) {
|
622
623
|
// if there is no previous node error throws, user reached the starting node and startting position
|
623
|
-
|
624
|
-
return
|
624
|
+
isNodeRestricted = true;
|
625
|
+
return isNodeRestricted;
|
625
626
|
}
|
626
627
|
};
|
628
|
+
export function capitalizeFirstLetter(str) {
|
629
|
+
if (!str) return str;
|
630
|
+
return str.charAt(0).toUpperCase() + str.slice(1);
|
631
|
+
}
|
627
632
|
export const insertLineBreakAtEndOfPath = (editor, path) => {
|
628
633
|
try {
|
629
634
|
const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
|
@@ -642,12 +647,20 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
|
|
642
647
|
console.log(err);
|
643
648
|
}
|
644
649
|
};
|
650
|
+
export function isHavingSelection(editor) {
|
651
|
+
try {
|
652
|
+
return editor?.selection && !Range.isCollapsed(editor.selection);
|
653
|
+
} catch (err) {
|
654
|
+
console.log(err);
|
655
|
+
}
|
656
|
+
}
|
645
657
|
const omitNodes = ["site-settings", "page-settings"];
|
646
658
|
export function getInitialValue(value = [], readOnly) {
|
647
659
|
if (readOnly === "readonly" && value?.length) {
|
648
660
|
// remove last empty nodes on readonly mode, to remove empty spaces
|
649
661
|
|
650
662
|
let lastNonEmptyElementIndex;
|
663
|
+
const omittedNodes = [];
|
651
664
|
for (let i = value?.length; i > 0; i--) {
|
652
665
|
const elementIndex = i - 1;
|
653
666
|
const node = value[elementIndex];
|
@@ -660,30 +673,28 @@ export function getInitialValue(value = [], readOnly) {
|
|
660
673
|
const text = node.children[node.children.length - 1]?.text;
|
661
674
|
lastNonEmptyElementIndex = hasOnlyTextChildren ? text ? elementIndex : null : elementIndex;
|
662
675
|
} else if (omitNodes.includes(node?.type)) {
|
676
|
+
omittedNodes.push(node);
|
663
677
|
continue;
|
664
678
|
} else {
|
665
679
|
lastNonEmptyElementIndex = elementIndex;
|
666
680
|
}
|
667
681
|
}
|
668
682
|
const newValue = [...value].slice(0, lastNonEmptyElementIndex + 1);
|
669
|
-
return newValue;
|
683
|
+
return [...newValue, ...omittedNodes];
|
670
684
|
}
|
671
685
|
return value;
|
672
686
|
}
|
673
|
-
export function capitalizeFirstLetter(str) {
|
674
|
-
if (!str) return str;
|
675
|
-
return str.charAt(0).toUpperCase() + str.slice(1);
|
676
|
-
}
|
677
|
-
export function isHavingSelection(editor) {
|
678
|
-
try {
|
679
|
-
return editor?.selection && !Range.isCollapsed(editor.selection);
|
680
|
-
} catch (err) {
|
681
|
-
console.log(err);
|
682
|
-
}
|
683
|
-
}
|
684
687
|
export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
|
685
688
|
return `${defaultCls} ${selected ? selectedClsName : ""}`;
|
686
689
|
}
|
690
|
+
export function handleNegativeInteger(val) {
|
691
|
+
return val < 0 ? 0 : val;
|
692
|
+
}
|
693
|
+
export const containsSurrogatePair = text => {
|
694
|
+
// Match surrogate pairs (high and low surrogate)
|
695
|
+
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
696
|
+
return surrogatePairRegex.test(text);
|
697
|
+
};
|
687
698
|
export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
688
699
|
try {
|
689
700
|
const options = {
|
@@ -697,11 +708,6 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
|
697
708
|
return [];
|
698
709
|
}
|
699
710
|
};
|
700
|
-
export const containsSurrogatePair = text => {
|
701
|
-
// Match surrogate pairs (high and low surrogate)
|
702
|
-
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
703
|
-
return surrogatePairRegex.test(text);
|
704
|
-
};
|
705
711
|
export const getSlateDom = (editor, range) => {
|
706
712
|
try {
|
707
713
|
const slateDom = ReactEditor.toDOMRange(editor, range);
|
@@ -9,7 +9,13 @@ export const findPageSettings = editor => {
|
|
9
9
|
path: null,
|
10
10
|
element: {
|
11
11
|
pageProps: {
|
12
|
-
pageWidth: "fixed"
|
12
|
+
pageWidth: "fixed",
|
13
|
+
"lineHeight": {
|
14
|
+
"xs": 1.43,
|
15
|
+
"sm": 1.43,
|
16
|
+
"md": 1.43,
|
17
|
+
"lg": 1.43
|
18
|
+
}
|
13
19
|
}
|
14
20
|
}
|
15
21
|
};
|
@@ -34,7 +40,13 @@ export const getPageSettings = editor => {
|
|
34
40
|
path: null,
|
35
41
|
element: {
|
36
42
|
pageProps: {
|
37
|
-
pageWidth: "fixed"
|
43
|
+
pageWidth: "fixed",
|
44
|
+
"lineHeight": {
|
45
|
+
"xs": 1.43,
|
46
|
+
"sm": 1.43,
|
47
|
+
"md": 1.43,
|
48
|
+
"lg": 1.43
|
49
|
+
}
|
38
50
|
}
|
39
51
|
}
|
40
52
|
};
|