@flozy/editor 5.6.9 → 5.7.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/CommonEditor.js +10 -15
- package/dist/Editor/Editor.css +17 -22
- package/dist/Editor/Elements/Button/EditorButton.js +1 -3
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +9 -12
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -1
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +1 -3
- package/dist/Editor/Elements/SimpleText/index.js +1 -8
- package/dist/Editor/Elements/SimpleText/style.js +1 -5
- package/dist/Editor/Elements/Table/DragButton.js +1 -2
- package/dist/Editor/Elements/Table/TableCell.js +2 -4
- package/dist/Editor/Elements/Title/title.js +1 -13
- package/dist/Editor/Elements/Variables/Style.js +2 -20
- package/dist/Editor/Elements/Variables/VariableButton.js +3 -7
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +3 -13
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +0 -5
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +7 -26
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
- package/dist/Editor/common/Uploader.js +0 -8
- package/dist/Editor/commonStyle.js +10 -9
- package/dist/Editor/helper/index.js +2 -2
- package/dist/Editor/helper/theme.js +1 -24
- package/dist/Editor/hooks/useMouseMove.js +2 -5
- package/dist/Editor/plugins/withLayout.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +1 -8
- package/dist/Editor/utils/button.js +4 -4
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/helper.js +24 -30
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/package.json +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
@@ -3,35 +3,24 @@ 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";
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
8
|
const SwitchViewport = props => {
|
10
9
|
const {
|
11
10
|
breakpoint,
|
12
|
-
onChange
|
13
|
-
show
|
11
|
+
onChange
|
14
12
|
} = props;
|
15
13
|
const classes = useSwitchViewport();
|
16
|
-
const {
|
17
|
-
setSelectedElement,
|
18
|
-
setActiveBreakPoint
|
19
|
-
} = useEditorContext();
|
20
14
|
useEffect(() => {
|
21
|
-
|
22
|
-
setSelectedElement({});
|
15
|
+
console.log(breakpoint);
|
23
16
|
}, [breakpoint]);
|
24
17
|
return /*#__PURE__*/_jsxs(Box, {
|
25
18
|
sx: classes.root,
|
26
|
-
style: {
|
27
|
-
display: show ? "block" : "none"
|
28
|
-
},
|
29
19
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
30
20
|
title: "Desktop View",
|
31
21
|
children: /*#__PURE__*/_jsx(IconButton, {
|
32
22
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
33
23
|
onClick: () => {
|
34
|
-
setActiveBreakPoint("");
|
35
24
|
onChange("");
|
36
25
|
},
|
37
26
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -41,7 +30,6 @@ const SwitchViewport = props => {
|
|
41
30
|
children: /*#__PURE__*/_jsx(IconButton, {
|
42
31
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
43
32
|
onClick: () => {
|
44
|
-
setActiveBreakPoint("xs");
|
45
33
|
onChange("xs");
|
46
34
|
},
|
47
35
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import { Transforms, Node, Path } from "slate";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
-
import { handleNegativeInteger } from "../../../utils/helper";
|
4
3
|
export const ROW_HEIGHT = 50;
|
5
4
|
const MARGIN_OF = {
|
6
5
|
xs: 160,
|
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
|
|
76
75
|
console.log(err);
|
77
76
|
}
|
78
77
|
};
|
79
|
-
function isContainerElement(editor, moveTopath, props
|
78
|
+
function isContainerElement(editor, moveTopath, props) {
|
80
79
|
try {
|
81
80
|
const {
|
82
81
|
path,
|
@@ -92,32 +91,21 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
|
|
92
91
|
parentNode = Node.get(editor, Path.parent(dragItemPath));
|
93
92
|
}
|
94
93
|
const moveToNode = Node.get(editor, moveTopath);
|
95
|
-
const leftOfMoveToNode = moveToNode[`left${appenBp}`];
|
96
94
|
if (moveToNode.type === "freegridBox") {
|
97
95
|
if (parentNode.type === "freegridBox") {
|
98
96
|
// same box
|
99
97
|
if (parentPath === dragOver) {
|
100
98
|
return props.calX;
|
101
99
|
} else {
|
102
|
-
const moveToDom = ReactEditor.toDOMNode(editor, moveToNode);
|
103
|
-
const {
|
104
|
-
left
|
105
|
-
} = moveToDom?.getBoundingClientRect() || {};
|
106
|
-
const borderLeftWidth = getBorderWidth(moveToDom, "borderLeftWidth");
|
107
|
-
|
108
100
|
// for different box
|
109
|
-
return parseInt(props.x - props.
|
101
|
+
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
|
110
102
|
}
|
111
103
|
} else {
|
112
|
-
return props.calX -
|
104
|
+
return props.calX - moveToNode?.left;
|
113
105
|
}
|
114
106
|
} else if (moveToNode.type === "freegrid") {
|
115
107
|
if (parentNode.type === "freegridBox") {
|
116
|
-
|
117
|
-
const {
|
118
|
-
left
|
119
|
-
} = boundaryLineEle?.getBoundingClientRect() || {};
|
120
|
-
return parseInt(props.x - props.diffX - left);
|
108
|
+
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
|
121
109
|
} else {
|
122
110
|
return props.calX;
|
123
111
|
}
|
@@ -145,17 +133,14 @@ export function onDropItem(props, parentClass) {
|
|
145
133
|
const from = parentPath.split("|").map(m => parseInt(m));
|
146
134
|
let newPath = [];
|
147
135
|
newPath = moveTo;
|
148
|
-
const
|
149
|
-
const cCalx = isContainerElement(editor, moveTo, props, appenBp);
|
150
|
-
|
136
|
+
const cCalx = isContainerElement(editor, moveTo, props);
|
151
137
|
// const posX = parseInt(
|
152
138
|
// cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
|
153
139
|
// );
|
154
140
|
const toSectionNode = Node.get(editor, newPath);
|
155
141
|
const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
|
156
|
-
const borderTopWidth = getBorderWidth(addToSectionDOM, "borderTopWidth");
|
157
142
|
const rect = addToSectionDOM.getBoundingClientRect();
|
158
|
-
const y =
|
143
|
+
const y = endPosition.y - startPosition.diffY - rect.top;
|
159
144
|
|
160
145
|
// Calculate grid position
|
161
146
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
@@ -165,6 +150,7 @@ export function onDropItem(props, parentClass) {
|
|
165
150
|
|
166
151
|
// Update grid area
|
167
152
|
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
153
|
+
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
168
154
|
Transforms.setNodes(editor, {
|
169
155
|
[`gridArea${appenBp}`]: gridArea,
|
170
156
|
[`left${appenBp}`]: cCalx,
|
@@ -202,9 +188,4 @@ export function onDropItem(props, parentClass) {
|
|
202
188
|
export function calculateGridArea(y) {
|
203
189
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
204
190
|
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;
|
210
191
|
}
|
@@ -73,11 +73,6 @@ 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
|
-
},
|
81
76
|
children: /*#__PURE__*/_jsxs(Button, {
|
82
77
|
component: "label",
|
83
78
|
variant: "text",
|
@@ -1,7 +1,6 @@
|
|
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";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -16,10 +15,7 @@ const RenderCard = ({
|
|
16
15
|
return /*#__PURE__*/_jsx(Card, {
|
17
16
|
sx: {
|
18
17
|
position: 'relative',
|
19
|
-
padding: "10px"
|
20
|
-
'& .MuiCheckbox-root svg': {
|
21
|
-
fill: 'unset !important'
|
22
|
-
}
|
18
|
+
padding: "10px"
|
23
19
|
},
|
24
20
|
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
25
21
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
@@ -85,9 +81,6 @@ const CardsMapping = props => {
|
|
85
81
|
selectedCard,
|
86
82
|
infoIcon
|
87
83
|
} = data;
|
88
|
-
const {
|
89
|
-
theme
|
90
|
-
} = useEditorContext();
|
91
84
|
const activeCard = value === selectedCard;
|
92
85
|
const handleChange = e => {
|
93
86
|
if (selectedCard === data?.value) {
|
@@ -106,8 +99,7 @@ const CardsMapping = props => {
|
|
106
99
|
sx: {
|
107
100
|
marginBottom: "12px",
|
108
101
|
"& .MuiPaper-root": {
|
109
|
-
|
110
|
-
border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
102
|
+
border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
|
111
103
|
borderRadius: "8px",
|
112
104
|
boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
|
113
105
|
}
|
@@ -18,7 +18,6 @@ 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";
|
22
21
|
const FieldMap = {
|
23
22
|
text: Text,
|
24
23
|
bannerSpacing: BannerSpacing,
|
@@ -39,7 +38,6 @@ const FieldMap = {
|
|
39
38
|
fontSize: FontSize,
|
40
39
|
selectSwitch: SelectSwitch,
|
41
40
|
card: CardsMapping,
|
42
|
-
metadatamapping: MetaDataMapping
|
43
|
-
lineSpacing: LineSpacing
|
41
|
+
metadatamapping: MetaDataMapping
|
44
42
|
};
|
45
43
|
export default FieldMap;
|
@@ -4,7 +4,6 @@ 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";
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -19,9 +18,6 @@ const Uploader = props => {
|
|
19
18
|
const [base64, setBase64] = useState(value?.url);
|
20
19
|
const [fileName, setFileName] = useState("");
|
21
20
|
const [uploading, setUploading] = useState(false);
|
22
|
-
const {
|
23
|
-
theme
|
24
|
-
} = useEditorContext();
|
25
21
|
const handleChange = async e => {
|
26
22
|
const uFile = e.target.files[0];
|
27
23
|
const strImage = await convertBase64(uFile);
|
@@ -103,10 +99,6 @@ const Uploader = props => {
|
|
103
99
|
className: "uploadImageSection",
|
104
100
|
children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
|
105
101
|
className: "uploadImageText",
|
106
|
-
sx: {
|
107
|
-
background: `${theme?.palette?.editor?.inputFieldBgColor}`,
|
108
|
-
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
|
109
|
-
},
|
110
102
|
children: /*#__PURE__*/_jsxs(Button, {
|
111
103
|
component: "label",
|
112
104
|
variant: "text",
|
@@ -49,15 +49,16 @@ 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
|
-
},
|
57
52
|
"& p": {
|
58
53
|
marginBottom: "7px",
|
59
54
|
marginTop: "4px"
|
60
55
|
},
|
56
|
+
"& .MuiPaper-root": {
|
57
|
+
border: 'unset !important',
|
58
|
+
borderRadius: '0px',
|
59
|
+
height: 'fit-content',
|
60
|
+
padding: '2px'
|
61
|
+
},
|
61
62
|
"& .muiIconsListParent": {
|
62
63
|
"& svg": {
|
63
64
|
color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
|
@@ -469,6 +470,10 @@ const useCommonStyle = theme => ({
|
|
469
470
|
}
|
470
471
|
}
|
471
472
|
},
|
473
|
+
pageSettingPopUpRoot: {
|
474
|
+
padding: "16px 8px 16px 10px!important",
|
475
|
+
height: "100%"
|
476
|
+
},
|
472
477
|
buttonMoreOption: {
|
473
478
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
474
479
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
@@ -481,10 +486,6 @@ const useCommonStyle = theme => ({
|
|
481
486
|
}
|
482
487
|
}
|
483
488
|
},
|
484
|
-
pageSettingPopUpRoot: {
|
485
|
-
padding: "16px 8px 16px 10px!important",
|
486
|
-
height: "100%"
|
487
|
-
},
|
488
489
|
buttonMoreOption2: {
|
489
490
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
490
491
|
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,27 +161,4 @@ export const groupByBreakpoint = (styleProps, theme) => {
|
|
161
161
|
}
|
162
162
|
};
|
163
163
|
};
|
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
|
-
};
|
164
|
+
export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
|
@@ -35,7 +35,6 @@ export const EditorProvider = ({
|
|
35
35
|
path: null
|
36
36
|
});
|
37
37
|
const [fontFamilies, setFontFamilies] = useState({});
|
38
|
-
const [activeBreakPoint, setActiveBreakPoint] = useState("");
|
39
38
|
useEffect(() => {
|
40
39
|
window.updateSelectedItem = d => {
|
41
40
|
setSelectedElement(d);
|
@@ -98,10 +97,8 @@ export const EditorProvider = ({
|
|
98
97
|
setOpenAI,
|
99
98
|
updateDragging,
|
100
99
|
fontFamilies,
|
101
|
-
setFontFamilies
|
102
|
-
|
103
|
-
setActiveBreakPoint
|
104
|
-
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
|
100
|
+
setFontFamilies
|
101
|
+
}), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
|
105
102
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
106
103
|
value: otherValues,
|
107
104
|
children: children
|
@@ -314,8 +314,7 @@ 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"
|
318
|
-
lineHeight: 1.43
|
317
|
+
borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
|
319
318
|
},
|
320
319
|
children: children
|
321
320
|
});
|
@@ -375,9 +374,6 @@ export const getBlock = props => {
|
|
375
374
|
});
|
376
375
|
case "orderedList":
|
377
376
|
return /*#__PURE__*/_jsx("ol", {
|
378
|
-
style: {
|
379
|
-
lineHeight: 1.43
|
380
|
-
},
|
381
377
|
className: "listItemMargin",
|
382
378
|
type: "1",
|
383
379
|
...attributes,
|
@@ -385,9 +381,6 @@ export const getBlock = props => {
|
|
385
381
|
});
|
386
382
|
case "unorderedList":
|
387
383
|
return /*#__PURE__*/_jsx("ul", {
|
388
|
-
style: {
|
389
|
-
lineHeight: 1.43
|
390
|
-
},
|
391
384
|
className: "listItemMargin",
|
392
385
|
...attributes,
|
393
386
|
children: children
|
@@ -82,8 +82,7 @@ const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
|
|
82
82
|
};
|
83
83
|
export const draftToSlate = props => {
|
84
84
|
const {
|
85
|
-
data
|
86
|
-
needLayout
|
85
|
+
data
|
87
86
|
} = props;
|
88
87
|
if (data?.blocks && data?.blocks?.length > 0) {
|
89
88
|
const converted = data?.blocks?.reduce((a, b) => {
|
@@ -105,7 +104,7 @@ export const draftToSlate = props => {
|
|
105
104
|
return data;
|
106
105
|
} else {
|
107
106
|
return [{
|
108
|
-
type:
|
107
|
+
type: "paragraph",
|
109
108
|
children: [{
|
110
109
|
text: ""
|
111
110
|
}]
|
@@ -593,9 +593,8 @@ export const getPreviousNode = editor => {
|
|
593
593
|
return;
|
594
594
|
}
|
595
595
|
};
|
596
|
-
const
|
597
|
-
|
598
|
-
let isNodeRestricted = false;
|
596
|
+
export const isPageSettings = (event, editor) => {
|
597
|
+
let isPageSettingsNode = false;
|
599
598
|
try {
|
600
599
|
const {
|
601
600
|
selection
|
@@ -608,27 +607,23 @@ export const isRestrictedNode = (event, editor) => {
|
|
608
607
|
previousNode,
|
609
608
|
previousPath
|
610
609
|
} = getPreviousNode(editor) || {};
|
611
|
-
if (
|
610
|
+
if (previousNode?.type === "page-settings") {
|
612
611
|
event.preventDefault(); // stops deleting backward
|
613
612
|
|
614
613
|
// move the cursor to node which is before page-settings node
|
615
614
|
const pathBeforePageSettings = Path.previous(previousPath);
|
616
615
|
const endPath = Editor.end(editor, pathBeforePageSettings);
|
617
616
|
Transforms.select(editor, endPath);
|
618
|
-
|
617
|
+
isPageSettingsNode = true;
|
619
618
|
}
|
620
619
|
}
|
621
|
-
return
|
620
|
+
return isPageSettingsNode;
|
622
621
|
} catch (err) {
|
623
622
|
// if there is no previous node error throws, user reached the starting node and startting position
|
624
|
-
|
625
|
-
return
|
623
|
+
isPageSettingsNode = true;
|
624
|
+
return isPageSettingsNode;
|
626
625
|
}
|
627
626
|
};
|
628
|
-
export function capitalizeFirstLetter(str) {
|
629
|
-
if (!str) return str;
|
630
|
-
return str.charAt(0).toUpperCase() + str.slice(1);
|
631
|
-
}
|
632
627
|
export const insertLineBreakAtEndOfPath = (editor, path) => {
|
633
628
|
try {
|
634
629
|
const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
|
@@ -647,20 +642,12 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
|
|
647
642
|
console.log(err);
|
648
643
|
}
|
649
644
|
};
|
650
|
-
export function isHavingSelection(editor) {
|
651
|
-
try {
|
652
|
-
return editor?.selection && !Range.isCollapsed(editor.selection);
|
653
|
-
} catch (err) {
|
654
|
-
console.log(err);
|
655
|
-
}
|
656
|
-
}
|
657
645
|
const omitNodes = ["site-settings", "page-settings"];
|
658
646
|
export function getInitialValue(value = [], readOnly) {
|
659
647
|
if (readOnly === "readonly" && value?.length) {
|
660
648
|
// remove last empty nodes on readonly mode, to remove empty spaces
|
661
649
|
|
662
650
|
let lastNonEmptyElementIndex;
|
663
|
-
const omittedNodes = [];
|
664
651
|
for (let i = value?.length; i > 0; i--) {
|
665
652
|
const elementIndex = i - 1;
|
666
653
|
const node = value[elementIndex];
|
@@ -673,28 +660,30 @@ export function getInitialValue(value = [], readOnly) {
|
|
673
660
|
const text = node.children[node.children.length - 1]?.text;
|
674
661
|
lastNonEmptyElementIndex = hasOnlyTextChildren ? text ? elementIndex : null : elementIndex;
|
675
662
|
} else if (omitNodes.includes(node?.type)) {
|
676
|
-
omittedNodes.push(node);
|
677
663
|
continue;
|
678
664
|
} else {
|
679
665
|
lastNonEmptyElementIndex = elementIndex;
|
680
666
|
}
|
681
667
|
}
|
682
668
|
const newValue = [...value].slice(0, lastNonEmptyElementIndex + 1);
|
683
|
-
return
|
669
|
+
return newValue;
|
684
670
|
}
|
685
671
|
return value;
|
686
672
|
}
|
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
|
+
}
|
687
684
|
export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
|
688
685
|
return `${defaultCls} ${selected ? selectedClsName : ""}`;
|
689
686
|
}
|
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
|
-
};
|
698
687
|
export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
699
688
|
try {
|
700
689
|
const options = {
|
@@ -708,6 +697,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
|
708
697
|
return [];
|
709
698
|
}
|
710
699
|
};
|
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
|
+
};
|
711
705
|
export const getSlateDom = (editor, range) => {
|
712
706
|
try {
|
713
707
|
const slateDom = ReactEditor.toDOMRange(editor, range);
|
@@ -9,13 +9,7 @@ export const findPageSettings = editor => {
|
|
9
9
|
path: null,
|
10
10
|
element: {
|
11
11
|
pageProps: {
|
12
|
-
pageWidth: "fixed"
|
13
|
-
"lineHeight": {
|
14
|
-
"xs": 1.43,
|
15
|
-
"sm": 1.43,
|
16
|
-
"md": 1.43,
|
17
|
-
"lg": 1.43
|
18
|
-
}
|
12
|
+
pageWidth: "fixed"
|
19
13
|
}
|
20
14
|
}
|
21
15
|
};
|
@@ -40,13 +34,7 @@ export const getPageSettings = editor => {
|
|
40
34
|
path: null,
|
41
35
|
element: {
|
42
36
|
pageProps: {
|
43
|
-
pageWidth: "fixed"
|
44
|
-
"lineHeight": {
|
45
|
-
"xs": 1.43,
|
46
|
-
"sm": 1.43,
|
47
|
-
"md": 1.43,
|
48
|
-
"lg": 1.43
|
49
|
-
}
|
37
|
+
pageWidth: "fixed"
|
50
38
|
}
|
51
39
|
}
|
52
40
|
};
|
package/package.json
CHANGED
@@ -1,79 +0,0 @@
|
|
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;
|