@flozy/editor 5.5.5 → 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/FontList.js +3 -1
- 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 +16 -25
- 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,
|
@@ -1,4 +1,6 @@
|
|
1
|
-
export const defaultFonts = [
|
1
|
+
export const defaultFonts = [
|
2
|
+
// "EB Garamond",
|
3
|
+
"Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Dancing Script", "Gaegu", "Kite One", "Merriweather"];
|
2
4
|
export const otherFonts = ["PoppinsRegular", "PoppinsBold", "Monaco", "Qwitcher Grypen", "Bulgarian Garamond", "Redacted Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Engagement", "Ingrid Darling", "La Belle Aurore", "Mea Culpa", "The Girl Next Door", "Helvetica", "Georgia", "Times New Roman", "Courier New", "Impact"];
|
3
5
|
export const googleFontList = ["Roboto", "Noto Sans JP", "Poppins", "Lato", "Inter", "Roboto Condensed", "Roboto Mono", "Oswald", "Noto Sans", "Nunito", "Nunito Sans", "Ubuntu", "Rubik", "Playfair Display", "Noto Sans KR", "Roboto Slab", "PT Sans", "Kanit", "Work Sans", "Lora", "DM Sans", "Mulish", "Quicksand", "Fira Sans", "Noto Sans TC", "Inconsolata", "Barlow", "Manrope", "IBM Plex Sans", "PT Serif", "Karla", "Titillium Web", "Heebo", "Noto Serif", "Nanum Gothic", "Noto Color Emoji", "Agdasima", "Bebas Neue", "Libre Franklin", "Mukta", "Outfit", "Josefin Sans", "Source Code Pro", "Jost", "Space Grotesk", "Hind Siliguri", "Arimo", "Cabin", "Barlow Condensed", "Dosis", "Fira Sans Condensed", "Bitter", "Archivo", "Figtree", "Noto Serif JP", "PT Sans Narrow", "Abel", "Noto Sans SC",
|
4
6
|
// "Source Sans 3",
|
@@ -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);
|