@flozy/editor 5.5.6 → 5.5.7
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 +3 -7
- package/dist/Editor/Editor.css +15 -17
- package/dist/Editor/Elements/Button/EditorButton.js +1 -3
- 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/SimpleText/index.js +3 -11
- package/dist/Editor/Elements/SimpleText/style.js +1 -5
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +0 -10
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -10
- package/dist/Editor/common/MentionsPopup/Styles.js +0 -1
- 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 +6 -9
- 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 +4 -4
- 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/withCustomDeleteBackward.js +104 -100
- package/dist/Editor/utils/SlateUtilityFunctions.js +1 -8
- package/dist/Editor/utils/button.js +4 -4
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +7 -51
- package/dist/Editor/utils/helper.js +16 -19
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/package.json +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
|
|
26
26
|
import DragAndDrop from "./common/DnD";
|
27
27
|
import Section from "./common/Section";
|
28
28
|
import decorators from "./utils/Decorators";
|
29
|
-
import {
|
29
|
+
import { getTRBLBreakPoints } from "./helper/theme";
|
30
30
|
import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
|
31
31
|
import useWindowResize from "./hooks/useWindowResize";
|
32
32
|
import PopoverAIInput from "./Elements/AI/PopoverAIInput";
|
@@ -139,8 +139,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
139
139
|
pageColor,
|
140
140
|
color: pageTextColor,
|
141
141
|
pageWidth,
|
142
|
-
maxWidth: pageMaxWidth
|
143
|
-
lineHeight
|
142
|
+
maxWidth: pageMaxWidth
|
144
143
|
} = pageSt?.pageProps || {
|
145
144
|
bannerSpacing: {
|
146
145
|
left: 0,
|
@@ -333,7 +332,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
333
332
|
onDrawerOpen: onDrawerOpen,
|
334
333
|
ICON_API: "https://assets.agenciflow.com"
|
335
334
|
};
|
336
|
-
const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
|
337
335
|
const renderElement = useCallback(props => {
|
338
336
|
return /*#__PURE__*/_jsx(Element, {
|
339
337
|
...props,
|
@@ -536,7 +534,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
536
534
|
padding: {
|
537
535
|
...getTRBLBreakPoints(bannerSpacing)
|
538
536
|
},
|
539
|
-
lineHeight: lineH,
|
540
537
|
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
541
538
|
height: viewport.h ? `${viewport.h}px` : `100%`,
|
542
539
|
alignSelf: "center",
|
@@ -597,9 +594,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
597
594
|
setIsTextSelected: setIsTextSelected,
|
598
595
|
customProps: customProps,
|
599
596
|
editorWrapper: editorWrapper
|
600
|
-
}) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
|
597
|
+
}) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
|
601
598
|
breakpoint: breakpoint,
|
602
|
-
show: showViewport,
|
603
599
|
onChange: b => onSwitchBreakpoint(b)
|
604
600
|
}) : null]
|
605
601
|
})
|
package/dist/Editor/Editor.css
CHANGED
@@ -18,10 +18,7 @@
|
|
18
18
|
.ml-1 {
|
19
19
|
margin-left: 10px;
|
20
20
|
}
|
21
|
-
|
22
|
-
{
|
23
|
-
margin: 0px
|
24
|
-
}
|
21
|
+
|
25
22
|
.dflex {
|
26
23
|
display: flex;
|
27
24
|
}
|
@@ -1257,19 +1254,6 @@ blockquote {
|
|
1257
1254
|
pointer-events: auto;
|
1258
1255
|
}
|
1259
1256
|
|
1260
|
-
@media (max-width: 899px) {
|
1261
|
-
.MuiPopover-root {
|
1262
|
-
z-index: 1302 !important;
|
1263
|
-
}
|
1264
|
-
canvas {
|
1265
|
-
max-width: 100% !important;
|
1266
|
-
}
|
1267
|
-
}
|
1268
|
-
|
1269
|
-
.settingsHeader {
|
1270
|
-
font-size: 14px !important;
|
1271
|
-
font-weight: 500 !important;
|
1272
|
-
}
|
1273
1257
|
.hideScroll {
|
1274
1258
|
overflow-anchor: none;
|
1275
1259
|
}
|
@@ -1285,6 +1269,20 @@ blockquote {
|
|
1285
1269
|
.hideScroll::-webkit-scrollbar-thumb:hover {
|
1286
1270
|
background: none !important;
|
1287
1271
|
}
|
1272
|
+
@media (max-width: 899px) {
|
1273
|
+
.MuiPopover-root {
|
1274
|
+
z-index: 1302 !important;
|
1275
|
+
}
|
1276
|
+
|
1277
|
+
canvas {
|
1278
|
+
max-width: 100% !important;
|
1279
|
+
}
|
1280
|
+
}
|
1281
|
+
|
1282
|
+
.settingsHeader {
|
1283
|
+
font-size: 14px !important;
|
1284
|
+
font-weight: 500 !important;
|
1285
|
+
}
|
1288
1286
|
|
1289
1287
|
.custom-scroll::-webkit-scrollbar {
|
1290
1288
|
height: .6rem;
|
@@ -162,7 +162,6 @@ const EditorButton = props => {
|
|
162
162
|
display: "inline-flex",
|
163
163
|
color: "rgba(0, 0, 0, 0.54)",
|
164
164
|
marginBottom: "0px !important",
|
165
|
-
...classes.buttonMoreOption,
|
166
165
|
...classes.buttonMoreOption3
|
167
166
|
},
|
168
167
|
...btnProps,
|
@@ -265,12 +264,11 @@ const EditorButton = props => {
|
|
265
264
|
...btnSp,
|
266
265
|
borderStyle: borderStyle || "solid",
|
267
266
|
color: `${textColor || "#FFFFFF"}`,
|
268
|
-
fontSize: textSize || "
|
267
|
+
fontSize: textSize || "inherit",
|
269
268
|
fontFamily: fontFamily || "PoppinsRegular",
|
270
269
|
display: "inline-flex",
|
271
270
|
alignItems: "center",
|
272
271
|
position: "relative",
|
273
|
-
lineHeight: 1.43,
|
274
272
|
"& .element-toolbar": {
|
275
273
|
display: "none"
|
276
274
|
},
|
@@ -49,7 +49,6 @@ const SearchAttachment = props => {
|
|
49
49
|
background: theme?.palette?.containers?.slashBrainCardBg,
|
50
50
|
cursor: 'pointer',
|
51
51
|
margin: '4px 0px',
|
52
|
-
lineHeight: 1.43,
|
53
52
|
"&.MuiPaper-root.MuiPaper-rounded": {
|
54
53
|
borderRadius: "7px !important",
|
55
54
|
paddingTop: '0px !important'
|
@@ -5,7 +5,6 @@ import { getPageSettings } from "../../utils/pageSettings";
|
|
5
5
|
import { isTextSelected } from "../../utils/helper";
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
|
-
import { getBreakpointLineSpacing } from "../../helper/theme";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -21,8 +20,7 @@ const SimpleText = props => {
|
|
21
20
|
attributes,
|
22
21
|
children,
|
23
22
|
customProps,
|
24
|
-
isEmpty
|
25
|
-
isChatEditor = false
|
23
|
+
isEmpty
|
26
24
|
} = props;
|
27
25
|
const {
|
28
26
|
readOnly,
|
@@ -34,18 +32,12 @@ const SimpleText = props => {
|
|
34
32
|
const {
|
35
33
|
pageColor
|
36
34
|
} = pageSt?.pageProps || {};
|
37
|
-
const {
|
38
|
-
activeBreakPoint
|
39
|
-
} = useEditorContext();
|
40
|
-
const lineHeight = element?.children[0]?.lineHeight;
|
41
|
-
const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
|
42
35
|
const classes = SimpleTextStyle({
|
43
|
-
pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
|
44
|
-
lineHeight: lineH
|
36
|
+
pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
|
45
37
|
});
|
46
38
|
const selected = useSelected();
|
47
39
|
const path = ReactEditor.findPath(editor, element);
|
48
|
-
const showPlaceHolder = !readOnly && path.length === 1 && isEmpty
|
40
|
+
const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
|
49
41
|
const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
|
50
42
|
const opacity = !isTextSelected(editor?.selection);
|
51
43
|
const nextType = element?.children[0]?.type;
|
@@ -1,12 +1,10 @@
|
|
1
1
|
import { invertColor } from "../../helper";
|
2
2
|
const SimpleTextStyle = ({
|
3
|
-
pageColor
|
4
|
-
lineHeight
|
3
|
+
pageColor
|
5
4
|
}) => ({
|
6
5
|
root: {
|
7
6
|
position: "relative",
|
8
7
|
padding: "0px",
|
9
|
-
lineHeight: lineHeight,
|
10
8
|
"&.dataView": {
|
11
9
|
"& .placeholder-simple-text": {
|
12
10
|
opacity: 0
|
@@ -35,8 +33,6 @@ const SimpleTextStyle = ({
|
|
35
33
|
height: "24px",
|
36
34
|
overflow: "hidden",
|
37
35
|
fontSize: "14px",
|
38
|
-
display: "inline-flex",
|
39
|
-
alignItems: "center",
|
40
36
|
"& .bg-pad-sl": {
|
41
37
|
padding: "2px 4px 2px 4px",
|
42
38
|
background: "transparent",
|
@@ -185,11 +185,6 @@ const usePopupStyle = theme => ({
|
|
185
185
|
justifyContent: "start",
|
186
186
|
borderRadius: "10px !important",
|
187
187
|
transition: "background-color 0.3s ease",
|
188
|
-
// "& .colorBoxElementIcon": {
|
189
|
-
// "& path": {
|
190
|
-
// fill: theme?.palette?.type === "dark" ? "none" : "",
|
191
|
-
// },
|
192
|
-
// },
|
193
188
|
"& .signatureElementIcon": {
|
194
189
|
"& path": {
|
195
190
|
fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
|
@@ -416,11 +411,6 @@ const usePopupStyle = theme => ({
|
|
416
411
|
"& .MuiOutlinedInput-notchedOutline": {
|
417
412
|
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
418
413
|
},
|
419
|
-
'& .MuiInputBase-root': {
|
420
|
-
'& input': {
|
421
|
-
border: "none !important"
|
422
|
-
}
|
423
|
-
},
|
424
414
|
"& svg": {
|
425
415
|
width: "20px",
|
426
416
|
height: "24px"
|
@@ -14,8 +14,6 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
|
|
14
14
|
import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
|
15
15
|
import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
|
16
16
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
17
|
-
import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
|
18
|
-
import { getPageSettings } from "../../utils/pageSettings";
|
19
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
20
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
19
|
const allTools = toolbarGroups.flat();
|
@@ -33,18 +31,10 @@ const TextFormat = props => {
|
|
33
31
|
const [anchorEl, setAnchorEl] = useState(null);
|
34
32
|
const [type, setType] = useState(null);
|
35
33
|
const open = Boolean(anchorEl);
|
36
|
-
const {
|
37
|
-
element: pageSt
|
38
|
-
} = getPageSettings(editor) || {};
|
39
|
-
const pageSettingLine = pageSt?.pageProps?.lineHeight;
|
40
34
|
const {
|
41
35
|
fontFamilies,
|
42
36
|
theme
|
43
37
|
} = useEditorContext();
|
44
|
-
const {
|
45
|
-
activeBreakPoint
|
46
|
-
} = useEditorContext();
|
47
|
-
const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
|
48
38
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
49
39
|
const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
|
50
40
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
@@ -61,8 +51,6 @@ const TextFormat = props => {
|
|
61
51
|
color: "",
|
62
52
|
bgColor: ""
|
63
53
|
};
|
64
|
-
let lineSpacingValue = activeMark(editor, 'lineHeight');
|
65
|
-
lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
|
66
54
|
const handleColorPicker = type => e => {
|
67
55
|
setType(type);
|
68
56
|
setAnchorEl(e.currentTarget);
|
@@ -103,13 +91,6 @@ const TextFormat = props => {
|
|
103
91
|
value
|
104
92
|
});
|
105
93
|
};
|
106
|
-
const handleLineSpacing = data => {
|
107
|
-
const [[format, value]] = Object.entries(data);
|
108
|
-
addMarkData(editor, {
|
109
|
-
format,
|
110
|
-
value
|
111
|
-
});
|
112
|
-
};
|
113
94
|
return /*#__PURE__*/_jsxs(Grid, {
|
114
95
|
container: true,
|
115
96
|
sx: classes.textFormatWrapper,
|
@@ -379,32 +360,6 @@ const TextFormat = props => {
|
|
379
360
|
xs: 12,
|
380
361
|
sx: classes.dividerGrid,
|
381
362
|
children: /*#__PURE__*/_jsx(Divider, {})
|
382
|
-
}), /*#__PURE__*/_jsxs(Grid, {
|
383
|
-
item: true,
|
384
|
-
xs: 12,
|
385
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
386
|
-
variant: "body1",
|
387
|
-
color: "primary",
|
388
|
-
sx: classes.typoLabel,
|
389
|
-
children: "Line Spacing"
|
390
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
391
|
-
item: true,
|
392
|
-
xs: 12,
|
393
|
-
className: "typo-icons",
|
394
|
-
sx: classes.evenSpace,
|
395
|
-
children: /*#__PURE__*/_jsx(LineSpacing, {
|
396
|
-
value: lineSpacingValue,
|
397
|
-
onChange: handleLineSpacing,
|
398
|
-
data: {
|
399
|
-
key: 'lineHeight'
|
400
|
-
}
|
401
|
-
})
|
402
|
-
})]
|
403
|
-
}), /*#__PURE__*/_jsx(Grid, {
|
404
|
-
item: true,
|
405
|
-
xs: 12,
|
406
|
-
sx: classes.dividerGrid,
|
407
|
-
children: /*#__PURE__*/_jsx(Divider, {})
|
408
363
|
}), /*#__PURE__*/_jsx(Grid, {
|
409
364
|
item: true,
|
410
365
|
xs: 12,
|
@@ -41,9 +41,9 @@ const FontLoader = props => {
|
|
41
41
|
// Retry loading the same batch
|
42
42
|
loadNextBatch();
|
43
43
|
} else {
|
44
|
-
|
45
|
-
|
46
|
-
|
44
|
+
console.log(
|
45
|
+
// `Max retries reached for batch: ${batch}. Moving to the next batch.`
|
46
|
+
);
|
47
47
|
currentIndex += batchSize;
|
48
48
|
retryCount = 0; // Reset retry count for the next batch
|
49
49
|
loadNextBatch();
|
@@ -67,11 +67,10 @@ const FontLoader = props => {
|
|
67
67
|
});
|
68
68
|
loadFontsInBatches(families);
|
69
69
|
}).catch(err => {
|
70
|
-
|
70
|
+
console.log(err);
|
71
71
|
});
|
72
72
|
} else {
|
73
73
|
function correctFontArray(fontString) {
|
74
|
-
console.log("🚀 ~ correctFontArray ~ fontString:", fontString);
|
75
74
|
let fontsArray = fontString.split(",");
|
76
75
|
let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
|
77
76
|
return cleanedFontsArray;
|
@@ -87,15 +86,10 @@ const FontLoader = props => {
|
|
87
86
|
fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
|
88
87
|
});
|
89
88
|
let families = Array.from(fontSet);
|
90
|
-
console.log("🚀 1~ useEffect ~ families:", families);
|
91
89
|
families = correctFontArray(families.join(", "));
|
92
|
-
console.log("🚀 2 ~ useEffect ~ families:", families);
|
93
90
|
families = families?.map(font => font?.replace(/\"/g, ""));
|
94
|
-
console.log("🚀 3~ useEffect ~ families:", families);
|
95
91
|
families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
|
96
|
-
console.log("🚀 4~ useEffect ~ families:", families);
|
97
92
|
families = families.filter(font => googleFontList.includes(font));
|
98
|
-
console.log("🚀 5~ useEffect ~ families:", families);
|
99
93
|
loadFontsInBatches(families);
|
100
94
|
}
|
101
95
|
}, []);
|
@@ -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,7 +91,6 @@ 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
|
@@ -100,10 +98,10 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
|
|
100
98
|
return props.calX;
|
101
99
|
} else {
|
102
100
|
// for different box
|
103
|
-
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX -
|
101
|
+
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
|
104
102
|
}
|
105
103
|
} else {
|
106
|
-
return props.calX -
|
104
|
+
return props.calX - moveToNode?.left;
|
107
105
|
}
|
108
106
|
} else if (moveToNode.type === "freegrid") {
|
109
107
|
if (parentNode.type === "freegridBox") {
|
@@ -135,16 +133,14 @@ export function onDropItem(props, parentClass) {
|
|
135
133
|
const from = parentPath.split("|").map(m => parseInt(m));
|
136
134
|
let newPath = [];
|
137
135
|
newPath = moveTo;
|
138
|
-
const
|
139
|
-
const cCalx = isContainerElement(editor, moveTo, props, appenBp);
|
140
|
-
|
136
|
+
const cCalx = isContainerElement(editor, moveTo, props);
|
141
137
|
// const posX = parseInt(
|
142
138
|
// cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
|
143
139
|
// );
|
144
140
|
const toSectionNode = Node.get(editor, newPath);
|
145
141
|
const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
|
146
142
|
const rect = addToSectionDOM.getBoundingClientRect();
|
147
|
-
const y =
|
143
|
+
const y = endPosition.y - startPosition.diffY - rect.top;
|
148
144
|
|
149
145
|
// Calculate grid position
|
150
146
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
@@ -154,6 +150,7 @@ export function onDropItem(props, parentClass) {
|
|
154
150
|
|
155
151
|
// Update grid area
|
156
152
|
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
153
|
+
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
157
154
|
Transforms.setNodes(editor, {
|
158
155
|
[`gridArea${appenBp}`]: gridArea,
|
159
156
|
[`left${appenBp}`]: cCalx,
|
@@ -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",
|
@@ -464,6 +464,10 @@ const useCommonStyle = theme => ({
|
|
464
464
|
}
|
465
465
|
}
|
466
466
|
},
|
467
|
+
pageSettingPopUpRoot: {
|
468
|
+
padding: "16px 8px 16px 10px!important",
|
469
|
+
height: "100%"
|
470
|
+
},
|
467
471
|
buttonMoreOption: {
|
468
472
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
469
473
|
border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
|
@@ -476,10 +480,6 @@ const useCommonStyle = theme => ({
|
|
476
480
|
}
|
477
481
|
}
|
478
482
|
},
|
479
|
-
pageSettingPopUpRoot: {
|
480
|
-
padding: "16px 8px 16px 10px!important",
|
481
|
-
height: "100%"
|
482
|
-
},
|
483
483
|
buttonMoreOption2: {
|
484
484
|
background: `${theme?.palette?.editor?.aiInputBackground} !important`,
|
485
485
|
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
|
@@ -6,124 +6,128 @@ const isNodeTextEmpty = node => {
|
|
6
6
|
return nodeText.trim() === "";
|
7
7
|
};
|
8
8
|
const withCustomDeleteBackward = editor => {
|
9
|
-
|
10
|
-
deleteBackward,
|
11
|
-
deleteForward
|
12
|
-
} = editor;
|
13
|
-
|
14
|
-
// Override deleteBackward
|
15
|
-
editor.deleteBackward = (...args) => {
|
9
|
+
try {
|
16
10
|
const {
|
17
|
-
|
11
|
+
deleteBackward,
|
12
|
+
deleteForward
|
18
13
|
} = editor;
|
19
|
-
if (selection) {
|
20
|
-
// get the current node
|
21
|
-
const [freeGridItemNode] = Editor.nodes(editor, {
|
22
|
-
match: n => n.type === "freegridItem" // Adjust based on your list item type
|
23
|
-
});
|
24
14
|
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
15
|
+
// Override deleteBackward
|
16
|
+
editor.deleteBackward = (...args) => {
|
17
|
+
const {
|
18
|
+
selection
|
19
|
+
} = editor;
|
20
|
+
if (selection) {
|
21
|
+
// get the current node
|
22
|
+
const [freeGridItemNode] = Editor.nodes(editor, {
|
23
|
+
match: n => n.type === "freegridItem" // Adjust based on your list item type
|
24
|
+
});
|
25
|
+
|
26
|
+
// if it is freegrid
|
27
|
+
if (freeGridItemNode && freeGridItemNode[0]) {
|
28
|
+
const hasText = Node.string(freeGridItemNode[0]);
|
29
|
+
if (!hasText) {
|
30
|
+
return;
|
31
|
+
}
|
30
32
|
}
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
33
|
+
if (selection && Range.isCollapsed(selection)) {
|
34
|
+
const [currentNode, path] = Editor.node(editor, selection);
|
35
|
+
if (currentNode && typeof currentNode.text === 'string') {
|
36
|
+
const text = currentNode.text;
|
37
|
+
if (containsSurrogatePair(text)) {
|
38
|
+
// Check if the cursor is at the end of a surrogate pair
|
39
|
+
const {
|
40
|
+
offset
|
41
|
+
} = selection.anchor;
|
42
|
+
const beforeCursor = text.slice(0, offset);
|
43
|
+
const afterCursor = text.slice(offset);
|
44
|
+
if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
|
45
|
+
// Delete the entire surrogate pair
|
46
|
+
Transforms.delete(editor, {
|
47
|
+
at: {
|
48
|
+
anchor: {
|
49
|
+
path,
|
50
|
+
offset: offset - 2
|
51
|
+
},
|
52
|
+
// Move back 2 for surrogate pair
|
53
|
+
focus: {
|
54
|
+
path,
|
55
|
+
offset
|
56
|
+
}
|
55
57
|
}
|
56
|
-
}
|
57
|
-
|
58
|
-
|
58
|
+
});
|
59
|
+
return;
|
60
|
+
}
|
59
61
|
}
|
60
62
|
}
|
61
63
|
}
|
62
|
-
}
|
63
64
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
65
|
+
// Check if current node is a list item and is the last one, signature node
|
66
|
+
const [node] = Editor.nodes(editor, {
|
67
|
+
match: n => BACKWARD_BLOCKS.includes(n.type) // Adjust based on your list item type
|
68
|
+
});
|
68
69
|
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
70
|
+
if (node) {
|
71
|
+
// Check if it is the last list item is empty text
|
72
|
+
const parentNodePath = Path.parent(node[1]);
|
73
|
+
const isLastChildren = Node.get(editor, parentNodePath);
|
74
|
+
const isEmpty = isNodeTextEmpty(node[0]) && isLastChildren?.children?.length === 1;
|
75
|
+
if (isEmpty) {
|
76
|
+
Transforms.setNodes(editor, {
|
77
|
+
type: "paragraph"
|
78
|
+
}, {
|
79
|
+
at: parentNodePath
|
80
|
+
});
|
81
|
+
Transforms.removeNodes(editor, {
|
82
|
+
at: node[1]
|
83
|
+
});
|
84
|
+
return;
|
85
|
+
}
|
84
86
|
}
|
85
87
|
}
|
86
|
-
}
|
87
88
|
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
const {
|
93
|
-
selection
|
94
|
-
} = editor;
|
95
|
-
if (selection) {
|
89
|
+
// Fall back to default delete behavior if conditions are not met
|
90
|
+
deleteBackward(...args);
|
91
|
+
};
|
92
|
+
editor.deleteForward = (...args) => {
|
96
93
|
const {
|
97
|
-
|
98
|
-
|
99
|
-
|
94
|
+
selection
|
95
|
+
} = editor;
|
96
|
+
if (selection) {
|
97
|
+
const {
|
98
|
+
nextPath,
|
99
|
+
nextNode
|
100
|
+
} = getNextNode(editor) || {};
|
100
101
|
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
102
|
+
// Restrict deletion of page-settings
|
103
|
+
if (nextNode?.type === "page-settings") {
|
104
|
+
const isEndLine = Point.equals(selection.focus, Editor.end(editor, selection.focus.path));
|
105
|
+
if (isEndLine) {
|
106
|
+
const lastEditorChild = editor?.children?.length;
|
107
|
+
const isLastNode = lastEditorChild - 1 === nextPath[0];
|
108
|
+
if (isLastNode) {
|
109
|
+
return;
|
110
|
+
}
|
110
111
|
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
112
|
+
// move the page-settings node to last
|
113
|
+
Transforms.moveNodes(editor, {
|
114
|
+
at: nextPath,
|
115
|
+
to: [lastEditorChild]
|
116
|
+
});
|
116
117
|
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
118
|
+
// Node present after page-settings, will now merged to current node
|
119
|
+
Transforms.mergeNodes(editor, {
|
120
|
+
at: nextPath
|
121
|
+
});
|
122
|
+
return;
|
123
|
+
}
|
122
124
|
}
|
123
125
|
}
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
126
|
+
deleteForward(...args);
|
127
|
+
};
|
128
|
+
return editor;
|
129
|
+
} catch (err) {
|
130
|
+
console.log(err);
|
131
|
+
}
|
128
132
|
};
|
129
133
|
export default withCustomDeleteBackward;
|
@@ -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
|
@@ -237,30 +237,24 @@ export const getBlock = props => {
|
|
237
237
|
return /*#__PURE__*/_jsx("p", {
|
238
238
|
...attributes,
|
239
239
|
...element.attr,
|
240
|
-
className: `content-editable ${isEmpty ? "empty" : ""}
|
240
|
+
className: `content-editable ${isEmpty ? "empty" : ""}`
|
241
241
|
// placeholder="paragraph"
|
242
242
|
,
|
243
243
|
children: children
|
244
244
|
});
|
245
245
|
case "headingOne":
|
246
|
-
return /*#__PURE__*/_jsx("
|
246
|
+
return /*#__PURE__*/_jsx("h1", {
|
247
247
|
...attributes,
|
248
248
|
...element.attr,
|
249
|
-
style: {
|
250
|
-
margin: "10px 0px"
|
251
|
-
},
|
252
249
|
className: `content-editable ${isEmpty ? "empty" : ""}`
|
253
250
|
// placeholder="Heading 1"
|
254
251
|
,
|
255
252
|
children: children
|
256
253
|
});
|
257
254
|
case "headingTwo":
|
258
|
-
return /*#__PURE__*/_jsx("
|
255
|
+
return /*#__PURE__*/_jsx("h2", {
|
259
256
|
...attributes,
|
260
257
|
...element.attr,
|
261
|
-
style: {
|
262
|
-
margin: "10px 0px"
|
263
|
-
},
|
264
258
|
className: `content-editable ${isEmpty ? "empty" : ""}`
|
265
259
|
// placeholder="Heading 2"
|
266
260
|
,
|
@@ -270,55 +264,18 @@ export const getBlock = props => {
|
|
270
264
|
return /*#__PURE__*/_jsx("h3", {
|
271
265
|
...attributes,
|
272
266
|
...element.attr,
|
273
|
-
|
274
|
-
margin: "10px 0px"
|
275
|
-
},
|
276
|
-
className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
|
267
|
+
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
277
268
|
children: children
|
278
269
|
});
|
279
270
|
case "headingThree":
|
280
271
|
return /*#__PURE__*/_jsx("h3", {
|
281
272
|
...attributes,
|
282
273
|
...element.attr,
|
283
|
-
style: {
|
284
|
-
margin: "10px 0px"
|
285
|
-
},
|
286
274
|
className: `content-editable ${isEmpty ? "empty" : ""}`
|
287
275
|
// placeholder="Heading 3"
|
288
276
|
,
|
289
277
|
children: children
|
290
278
|
});
|
291
|
-
case "headingFour":
|
292
|
-
return /*#__PURE__*/_jsx("h4", {
|
293
|
-
...attributes,
|
294
|
-
...element.attr,
|
295
|
-
style: {
|
296
|
-
margin: "10px 0px"
|
297
|
-
},
|
298
|
-
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
299
|
-
children: children
|
300
|
-
});
|
301
|
-
case "headingFive":
|
302
|
-
return /*#__PURE__*/_jsx("h5", {
|
303
|
-
...attributes,
|
304
|
-
...element.attr,
|
305
|
-
className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
|
306
|
-
children: children
|
307
|
-
});
|
308
|
-
case "headingSix":
|
309
|
-
return /*#__PURE__*/_jsx("h6", {
|
310
|
-
...attributes,
|
311
|
-
...element.attr,
|
312
|
-
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
313
|
-
children: children
|
314
|
-
});
|
315
|
-
case "headingSeven":
|
316
|
-
return /*#__PURE__*/_jsx("h7", {
|
317
|
-
...attributes,
|
318
|
-
...element.attr,
|
319
|
-
className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
|
320
|
-
children: children
|
321
|
-
});
|
322
279
|
case "blockquote":
|
323
280
|
return /*#__PURE__*/_jsx("blockquote", {
|
324
281
|
...attributes,
|
@@ -370,7 +327,7 @@ export const getBlock = props => {
|
|
370
327
|
return /*#__PURE__*/_jsx("li", {
|
371
328
|
...attributes,
|
372
329
|
...element.attr,
|
373
|
-
className: `content-editable ${isEmpty ? "empty" : ""}
|
330
|
+
className: `content-editable ${isEmpty ? "empty" : ""}`,
|
374
331
|
placeholder: "List",
|
375
332
|
style: {
|
376
333
|
color: firstChildren?.color
|
@@ -387,7 +344,7 @@ export const getBlock = props => {
|
|
387
344
|
return /*#__PURE__*/_jsx("p", {
|
388
345
|
...attributes,
|
389
346
|
...element.attr,
|
390
|
-
className: `content-editable ${isEmpty ? "empty" : ""}
|
347
|
+
className: `content-editable ${isEmpty ? "empty" : ""}`
|
391
348
|
// placeholder="paragraph"
|
392
349
|
,
|
393
350
|
children: children
|
@@ -409,8 +366,7 @@ export const getBlock = props => {
|
|
409
366
|
default:
|
410
367
|
return /*#__PURE__*/_jsx(SimpleText, {
|
411
368
|
...props,
|
412
|
-
isEmpty: isEmpty
|
413
|
-
isChatEditor: true
|
369
|
+
isEmpty: isEmpty
|
414
370
|
});
|
415
371
|
}
|
416
372
|
};
|
@@ -624,10 +624,6 @@ export const isPageSettings = (event, editor) => {
|
|
624
624
|
return isPageSettingsNode;
|
625
625
|
}
|
626
626
|
};
|
627
|
-
export function capitalizeFirstLetter(str) {
|
628
|
-
if (!str) return str;
|
629
|
-
return str.charAt(0).toUpperCase() + str.slice(1);
|
630
|
-
}
|
631
627
|
export const insertLineBreakAtEndOfPath = (editor, path) => {
|
632
628
|
try {
|
633
629
|
const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
|
@@ -646,13 +642,6 @@ export const insertLineBreakAtEndOfPath = (editor, path) => {
|
|
646
642
|
console.log(err);
|
647
643
|
}
|
648
644
|
};
|
649
|
-
export function isHavingSelection(editor) {
|
650
|
-
try {
|
651
|
-
return editor?.selection && !Range.isCollapsed(editor.selection);
|
652
|
-
} catch (err) {
|
653
|
-
console.log(err);
|
654
|
-
}
|
655
|
-
}
|
656
645
|
const omitNodes = ["site-settings", "page-settings"];
|
657
646
|
export function getInitialValue(value = [], readOnly) {
|
658
647
|
if (readOnly === "readonly" && value?.length) {
|
@@ -681,17 +670,20 @@ export function getInitialValue(value = [], readOnly) {
|
|
681
670
|
}
|
682
671
|
return value;
|
683
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
|
+
}
|
684
684
|
export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
|
685
685
|
return `${defaultCls} ${selected ? selectedClsName : ""}`;
|
686
686
|
}
|
687
|
-
export function handleNegativeInteger(val) {
|
688
|
-
return val < 0 ? 0 : val;
|
689
|
-
}
|
690
|
-
export const containsSurrogatePair = text => {
|
691
|
-
// Match surrogate pairs (high and low surrogate)
|
692
|
-
const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
|
693
|
-
return surrogatePairRegex.test(text);
|
694
|
-
};
|
695
687
|
export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
696
688
|
try {
|
697
689
|
const options = {
|
@@ -705,6 +697,11 @@ export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
|
|
705
697
|
return [];
|
706
698
|
}
|
707
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
|
+
};
|
708
705
|
export const getSlateDom = (editor, range) => {
|
709
706
|
try {
|
710
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;
|