@flozy/editor 5.3.0 → 5.3.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +25 -34
- package/dist/Editor/CommonEditor.js +20 -12
- package/dist/Editor/Editor.css +14 -16
- package/dist/Editor/Elements/AI/AIInput.js +0 -3
- package/dist/Editor/Elements/AppHeader/AppHeader.js +6 -6
- package/dist/Editor/Elements/Button/EditorButton.js +8 -2
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +4 -2
- package/dist/Editor/Elements/DataView/DataView.js +124 -0
- package/dist/Editor/Elements/DataView/DataViewButton.js +23 -0
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +67 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js +33 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js +162 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/SimpleSelect.js +40 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/styles.js +67 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/DateType.js +35 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +39 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/PersonType.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/SelectType.js +35 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/index.js +17 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseField.js +29 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/ChooseSort.js +38 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/SortOptions/index.js +74 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js +64 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js +106 -0
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +174 -0
- package/dist/Editor/Elements/DataView/Layouts/Formula.js +29 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +113 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AddProperty.js +37 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/AllProperties.js +111 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ChangeProperty.js +60 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/ColumnsList.js +36 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js +101 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +160 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js +190 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js +42 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js +30 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +110 -0
- package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +179 -0
- package/dist/Editor/Elements/DataView/Layouts/TableStyles.js +112 -0
- package/dist/Editor/Elements/DataView/Layouts/TableView.js +227 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +80 -0
- package/dist/Editor/Elements/DataView/Layouts/colStyles.js +10 -0
- package/dist/Editor/Elements/DataView/Layouts/index.js +25 -0
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +281 -0
- package/dist/Editor/Elements/DataView/Utils/globalSearch.js +15 -0
- package/dist/Editor/Elements/DataView/Utils/multiSortRows.js +74 -0
- package/dist/Editor/Elements/DataView/styles.js +154 -0
- package/dist/Editor/Elements/Form/Form.js +1 -0
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +4 -4
- package/dist/Editor/Elements/FreeGrid/styles.js +2 -1
- package/dist/Editor/Elements/List/CheckList.js +2 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +1 -0
- package/dist/Editor/Elements/SimpleText/index.js +8 -1
- package/dist/Editor/Elements/SimpleText/style.js +10 -1
- package/dist/Editor/Elements/Table/Table.js +1 -1
- package/dist/Editor/Elements/TopBanner/TopBanner.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -0
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +10 -0
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +45 -0
- package/dist/Editor/Toolbar/Toolbar.js +6 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +4 -0
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -4
- package/dist/Editor/common/Icon.js +6 -0
- package/dist/Editor/common/MentionsPopup/Styles.js +2 -5
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +1 -0
- package/dist/Editor/common/RnD/GuideLines/styles.js +3 -3
- package/dist/Editor/common/RnD/ShadowElement.js +1 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +14 -2
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +9 -6
- package/dist/Editor/common/RnD/index.js +1 -1
- package/dist/Editor/common/Shorthands/elements.js +13 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +10 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +79 -0
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +4 -0
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +53 -53
- package/dist/Editor/common/iconslist.js +6 -3
- package/dist/Editor/commonStyle.js +9 -0
- package/dist/Editor/helper/enforceDateFormat.js +41 -0
- package/dist/Editor/helper/index.js +2 -2
- package/dist/Editor/helper/theme.js +24 -1
- package/dist/Editor/hooks/useMouseMove.js +5 -2
- package/dist/Editor/plugins/withEmbeds.js +30 -26
- package/dist/Editor/plugins/withHTML.js +47 -12
- package/dist/Editor/plugins/withLayout.js +42 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +25 -2
- package/dist/Editor/utils/button.js +4 -4
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +26 -1
- package/dist/Editor/utils/dataView.js +43 -0
- package/dist/Editor/utils/events.js +0 -1
- package/dist/Editor/utils/helper.js +51 -1
- package/dist/Editor/utils/pageSettings.js +14 -2
- package/dist/Editor/utils/serializeToText.js +2 -0
- package/package.json +1 -1
@@ -177,6 +177,11 @@ const usePopupStyle = theme => ({
|
|
177
177
|
justifyContent: "start",
|
178
178
|
borderRadius: "10px !important",
|
179
179
|
transition: "background-color 0.3s ease",
|
180
|
+
// "& .colorBoxElementIcon": {
|
181
|
+
// "& path": {
|
182
|
+
// fill: theme?.palette?.type === "dark" ? "none" : "",
|
183
|
+
// },
|
184
|
+
// },
|
180
185
|
"& .signatureElementIcon": {
|
181
186
|
"& path": {
|
182
187
|
fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
|
@@ -389,6 +394,11 @@ const usePopupStyle = theme => ({
|
|
389
394
|
},
|
390
395
|
"& .MuiOutlinedInput-notchedOutline": {
|
391
396
|
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
|
397
|
+
},
|
398
|
+
'& .MuiInputBase-root': {
|
399
|
+
'& input': {
|
400
|
+
border: "none !important"
|
401
|
+
}
|
392
402
|
}
|
393
403
|
},
|
394
404
|
textFormatSelect: {
|
@@ -14,6 +14,8 @@ 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";
|
17
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
18
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
19
21
|
const allTools = toolbarGroups.flat();
|
@@ -31,10 +33,18 @@ const TextFormat = props => {
|
|
31
33
|
const [anchorEl, setAnchorEl] = useState(null);
|
32
34
|
const [type, setType] = useState(null);
|
33
35
|
const open = Boolean(anchorEl);
|
36
|
+
const {
|
37
|
+
element: pageSt
|
38
|
+
} = getPageSettings(editor) || {};
|
39
|
+
const pageSettingLine = pageSt?.pageProps?.lineHeight;
|
34
40
|
const {
|
35
41
|
fontFamilies,
|
36
42
|
theme
|
37
43
|
} = useEditorContext();
|
44
|
+
const {
|
45
|
+
activeBreakPoint
|
46
|
+
} = useEditorContext();
|
47
|
+
const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
|
38
48
|
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
39
49
|
const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
|
40
50
|
const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
|
@@ -51,6 +61,8 @@ const TextFormat = props => {
|
|
51
61
|
color: "",
|
52
62
|
bgColor: ""
|
53
63
|
};
|
64
|
+
let lineSpacingValue = activeMark(editor, 'lineHeight');
|
65
|
+
lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
|
54
66
|
const handleColorPicker = type => e => {
|
55
67
|
setType(type);
|
56
68
|
setAnchorEl(e.currentTarget);
|
@@ -90,6 +102,13 @@ const TextFormat = props => {
|
|
90
102
|
value
|
91
103
|
});
|
92
104
|
};
|
105
|
+
const handleLineSpacing = data => {
|
106
|
+
const [[format, value]] = Object.entries(data);
|
107
|
+
addMarkData(editor, {
|
108
|
+
format,
|
109
|
+
value
|
110
|
+
});
|
111
|
+
};
|
93
112
|
return /*#__PURE__*/_jsxs(Grid, {
|
94
113
|
container: true,
|
95
114
|
sx: classes.textFormatWrapper,
|
@@ -357,6 +376,32 @@ const TextFormat = props => {
|
|
357
376
|
xs: 12,
|
358
377
|
sx: classes.dividerGrid,
|
359
378
|
children: /*#__PURE__*/_jsx(Divider, {})
|
379
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
380
|
+
item: true,
|
381
|
+
xs: 12,
|
382
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
383
|
+
variant: "body1",
|
384
|
+
color: "primary",
|
385
|
+
sx: classes.typoLabel,
|
386
|
+
children: "Line Spacing"
|
387
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
388
|
+
item: true,
|
389
|
+
xs: 12,
|
390
|
+
className: "typo-icons",
|
391
|
+
sx: classes.evenSpace,
|
392
|
+
children: /*#__PURE__*/_jsx(LineSpacing, {
|
393
|
+
value: lineSpacingValue,
|
394
|
+
onChange: handleLineSpacing,
|
395
|
+
data: {
|
396
|
+
key: 'lineHeight'
|
397
|
+
}
|
398
|
+
})
|
399
|
+
})]
|
400
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
401
|
+
item: true,
|
402
|
+
xs: 12,
|
403
|
+
sx: classes.dividerGrid,
|
404
|
+
children: /*#__PURE__*/_jsx(Divider, {})
|
360
405
|
}), /*#__PURE__*/_jsx(Grid, {
|
361
406
|
item: true,
|
362
407
|
xs: 12,
|
@@ -32,6 +32,7 @@ import ColorboxButton from "../Elements/Colorbox/ColorboxButton.js";
|
|
32
32
|
import DividerButton from "../Elements/Divider/DividerButton.js";
|
33
33
|
import EmbedScript from "../Elements/EmbedScript/EmbedScript.js";
|
34
34
|
import FreeGridButton from "../Elements/FreeGrid/FreeGridButton.js";
|
35
|
+
import DataViewButton from "../Elements/DataView/DataViewButton.js";
|
35
36
|
import SearchButton from "../Elements/Search/SearchButton.js";
|
36
37
|
import { jsx as _jsx } from "react/jsx-runtime";
|
37
38
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -118,6 +119,11 @@ export const RenderToolbarIcon = props => {
|
|
118
119
|
editor: editor,
|
119
120
|
icoBtnType: icoBtnType
|
120
121
|
}, element.id);
|
122
|
+
case "dataView":
|
123
|
+
return /*#__PURE__*/_jsx(DataViewButton, {
|
124
|
+
editor: editor,
|
125
|
+
icoBtnType: icoBtnType
|
126
|
+
}, element.id);
|
121
127
|
case "id":
|
122
128
|
return /*#__PURE__*/_jsx(Id, {
|
123
129
|
editor: editor
|
@@ -41,9 +41,9 @@ const FontLoader = props => {
|
|
41
41
|
// Retry loading the same batch
|
42
42
|
loadNextBatch();
|
43
43
|
} else {
|
44
|
-
console.log(
|
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,7 +67,7 @@ const FontLoader = props => {
|
|
67
67
|
});
|
68
68
|
loadFontsInBatches(families);
|
69
69
|
}).catch(err => {
|
70
|
-
console.log(err);
|
70
|
+
// console.log(err);
|
71
71
|
});
|
72
72
|
} else {
|
73
73
|
function correctFontArray(fontString) {
|
@@ -11,6 +11,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
|
11
11
|
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
|
12
12
|
import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
|
13
13
|
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
14
|
+
import GridOnIcon from "@mui/icons-material/GridOn";
|
14
15
|
import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
|
15
16
|
import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
|
16
17
|
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
@@ -271,6 +272,11 @@ const iconList = {
|
|
271
272
|
addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
|
272
273
|
addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
|
273
274
|
openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
|
275
|
+
dataView: /*#__PURE__*/_jsx(GridOnIcon, {
|
276
|
+
sx: {
|
277
|
+
fill: "#64748B"
|
278
|
+
}
|
279
|
+
}),
|
274
280
|
editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
|
275
281
|
deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
|
276
282
|
brain: /*#__PURE__*/_jsx(BrainIcon, {}),
|
@@ -3,6 +3,7 @@ const usePopupStyles = theme => ({
|
|
3
3
|
position: "absolute",
|
4
4
|
zIndex: 1300,
|
5
5
|
borderRadius: "10px",
|
6
|
+
// padding: "0px",
|
6
7
|
boxShadow: "0px 4px 10px 0px #00000029",
|
7
8
|
overflow: "hidden",
|
8
9
|
padding: "8px 0px !important",
|
@@ -27,12 +28,8 @@ const usePopupStyles = theme => ({
|
|
27
28
|
"&:hover": {
|
28
29
|
borderRadius: "10px",
|
29
30
|
background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
|
30
|
-
// "& svg": {
|
31
|
-
// fill: "#007bff",
|
32
|
-
// },
|
33
31
|
}
|
34
32
|
},
|
35
|
-
|
36
33
|
"& .active": {
|
37
34
|
border: "unset !important",
|
38
35
|
"& .MuiPaper-root": {
|
@@ -51,7 +48,7 @@ const usePopupStyles = theme => ({
|
|
51
48
|
borderRadius: "7px",
|
52
49
|
"& svg": {
|
53
50
|
"& path": {
|
54
|
-
stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}
|
51
|
+
stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
|
55
52
|
}
|
56
53
|
},
|
57
54
|
"& span": {
|
@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
|
|
22
22
|
backgroundColor: "#FFF",
|
23
23
|
pointerEvents: "none",
|
24
24
|
zIndex: 1,
|
25
|
-
[theme
|
25
|
+
[theme?.breakpoints?.between("xs", "md")]: {
|
26
26
|
left: "calc(50% - 160px)"
|
27
27
|
}
|
28
28
|
},
|
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
|
|
35
35
|
backgroundColor: "#FFF",
|
36
36
|
pointerEvents: "none",
|
37
37
|
zIndex: 1,
|
38
|
-
[theme
|
38
|
+
[theme?.breakpoints?.between("xs", "md")]: {
|
39
39
|
left: "calc(50% + 160px)"
|
40
40
|
}
|
41
41
|
},
|
42
42
|
"& .white-wrapper": {
|
43
43
|
overflowX: "hidden",
|
44
|
-
[theme
|
44
|
+
[theme?.breakpoints?.between("xs", "md")]: {
|
45
45
|
position: "absolute",
|
46
46
|
width: "calc(50% - 162px)",
|
47
47
|
height: "calc(100% - 2px)",
|
@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
|
|
10
10
|
position: "relative",
|
11
11
|
backgroundColor: "rgba(0,0,0,0)",
|
12
12
|
marginLeft: `calc((100% - 980px) * 0.5)`,
|
13
|
-
[theme
|
13
|
+
[theme?.breakpoints?.between("xs", "md")]: {
|
14
14
|
marginLeft: `calc((100% - 320px) * 0.5)`
|
15
15
|
}
|
16
16
|
}
|
@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
|
|
3
3
|
import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
|
4
4
|
import useSwitchViewport from "./styles";
|
5
5
|
import { useEffect } from "react";
|
6
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const SwitchViewport = props => {
|
9
10
|
const {
|
10
11
|
breakpoint,
|
11
|
-
onChange
|
12
|
+
onChange,
|
13
|
+
show
|
12
14
|
} = props;
|
13
15
|
const classes = useSwitchViewport();
|
16
|
+
const {
|
17
|
+
setSelectedElement,
|
18
|
+
setActiveBreakPoint
|
19
|
+
} = useEditorContext();
|
14
20
|
useEffect(() => {
|
15
|
-
|
21
|
+
// to reset selection on viewport changes - FS-6589
|
22
|
+
setSelectedElement({});
|
16
23
|
}, [breakpoint]);
|
17
24
|
return /*#__PURE__*/_jsxs(Box, {
|
18
25
|
sx: classes.root,
|
26
|
+
style: {
|
27
|
+
display: show ? "block" : "none"
|
28
|
+
},
|
19
29
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
20
30
|
title: "Desktop View",
|
21
31
|
children: /*#__PURE__*/_jsx(IconButton, {
|
22
32
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
23
33
|
onClick: () => {
|
34
|
+
setActiveBreakPoint("");
|
24
35
|
onChange("");
|
25
36
|
},
|
26
37
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
|
|
30
41
|
children: /*#__PURE__*/_jsx(IconButton, {
|
31
42
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
32
43
|
onClick: () => {
|
44
|
+
setActiveBreakPoint("xs");
|
33
45
|
onChange("xs");
|
34
46
|
},
|
35
47
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { Transforms, Node, Path } from "slate";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
+
import { handleNegativeInteger } from "../../../utils/helper";
|
3
4
|
export const ROW_HEIGHT = 50;
|
4
5
|
const MARGIN_OF = {
|
5
6
|
xs: 160,
|
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
|
|
75
76
|
console.log(err);
|
76
77
|
}
|
77
78
|
};
|
78
|
-
function isContainerElement(editor, moveTopath, props) {
|
79
|
+
function isContainerElement(editor, moveTopath, props, appenBp) {
|
79
80
|
try {
|
80
81
|
const {
|
81
82
|
path,
|
@@ -91,6 +92,7 @@ function isContainerElement(editor, moveTopath, props) {
|
|
91
92
|
parentNode = Node.get(editor, Path.parent(dragItemPath));
|
92
93
|
}
|
93
94
|
const moveToNode = Node.get(editor, moveTopath);
|
95
|
+
const leftOfMoveToNode = moveToNode[`left${appenBp}`];
|
94
96
|
if (moveToNode.type === "freegridBox") {
|
95
97
|
if (parentNode.type === "freegridBox") {
|
96
98
|
// same box
|
@@ -98,10 +100,10 @@ function isContainerElement(editor, moveTopath, props) {
|
|
98
100
|
return props.calX;
|
99
101
|
} else {
|
100
102
|
// for different box
|
101
|
-
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX -
|
103
|
+
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
|
102
104
|
}
|
103
105
|
} else {
|
104
|
-
return props.calX -
|
106
|
+
return props.calX - leftOfMoveToNode;
|
105
107
|
}
|
106
108
|
} else if (moveToNode.type === "freegrid") {
|
107
109
|
if (parentNode.type === "freegridBox") {
|
@@ -133,14 +135,16 @@ export function onDropItem(props, parentClass) {
|
|
133
135
|
const from = parentPath.split("|").map(m => parseInt(m));
|
134
136
|
let newPath = [];
|
135
137
|
newPath = moveTo;
|
136
|
-
const
|
138
|
+
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
139
|
+
const cCalx = handleNegativeInteger(isContainerElement(editor, moveTo, props, appenBp));
|
140
|
+
|
137
141
|
// const posX = parseInt(
|
138
142
|
// cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
|
139
143
|
// );
|
140
144
|
const toSectionNode = Node.get(editor, newPath);
|
141
145
|
const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
|
142
146
|
const rect = addToSectionDOM.getBoundingClientRect();
|
143
|
-
const y = endPosition.y - startPosition.diffY - rect.top;
|
147
|
+
const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
|
144
148
|
|
145
149
|
// Calculate grid position
|
146
150
|
const row = Math.floor(y / ROW_HEIGHT) + 1;
|
@@ -150,7 +154,6 @@ export function onDropItem(props, parentClass) {
|
|
150
154
|
|
151
155
|
// Update grid area
|
152
156
|
const gridArea = `${row} / 1 / ${row + 1} / 2`;
|
153
|
-
const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
|
154
157
|
Transforms.setNodes(editor, {
|
155
158
|
[`gridArea${appenBp}`]: gridArea,
|
156
159
|
[`left${appenBp}`]: cCalx,
|
@@ -13,6 +13,7 @@ import { insertDivider } from "../../utils/divider";
|
|
13
13
|
import { insertFreeGrid } from "../../utils/freegrid";
|
14
14
|
import { Transforms } from "slate";
|
15
15
|
import { insertInfinityAI } from "../../utils/infinityAI";
|
16
|
+
import { insertDataView } from "../../utils/dataView";
|
16
17
|
import SearchButton from "../../Elements/Search/SearchButton";
|
17
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
18
19
|
const ELEMENTS_LIST = [{
|
@@ -158,7 +159,7 @@ const ELEMENTS_LIST = [{
|
|
158
159
|
renderComponent: rest => /*#__PURE__*/_jsx(SearchButton, {
|
159
160
|
...rest,
|
160
161
|
element: {
|
161
|
-
name:
|
162
|
+
name: "Brain"
|
162
163
|
},
|
163
164
|
icoBtnType: "cmd"
|
164
165
|
})
|
@@ -262,6 +263,17 @@ const ELEMENTS_LIST = [{
|
|
262
263
|
onInsert: editor => {
|
263
264
|
insertInfinityAI(editor);
|
264
265
|
}
|
266
|
+
}, {
|
267
|
+
name: "Dynamic Table",
|
268
|
+
group: "Dynamic Table",
|
269
|
+
desc: "",
|
270
|
+
type: "dataView",
|
271
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
272
|
+
icon: "dataView"
|
273
|
+
}),
|
274
|
+
onInsert: editor => {
|
275
|
+
insertDataView(editor);
|
276
|
+
}
|
265
277
|
}];
|
266
278
|
const elements = props => {
|
267
279
|
const {
|
@@ -72,6 +72,11 @@ const BackgroundImage = props => {
|
|
72
72
|
children: "REMOVE"
|
73
73
|
}) : /*#__PURE__*/_jsx(Grid, {
|
74
74
|
className: "uploadImageText",
|
75
|
+
sx: {
|
76
|
+
padding: 0,
|
77
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor}`,
|
78
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
|
79
|
+
},
|
75
80
|
children: /*#__PURE__*/_jsxs(Button, {
|
76
81
|
component: "label",
|
77
82
|
variant: "text",
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
|
2
2
|
import React from "react";
|
3
3
|
import Icon from "../../Icon";
|
4
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
6
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -15,7 +16,10 @@ const RenderCard = ({
|
|
15
16
|
return /*#__PURE__*/_jsx(Card, {
|
16
17
|
sx: {
|
17
18
|
position: 'relative',
|
18
|
-
padding: "10px"
|
19
|
+
padding: "10px",
|
20
|
+
'& .MuiCheckbox-root svg': {
|
21
|
+
fill: 'unset !important'
|
22
|
+
}
|
19
23
|
},
|
20
24
|
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
21
25
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
@@ -81,6 +85,9 @@ const CardsMapping = props => {
|
|
81
85
|
selectedCard,
|
82
86
|
infoIcon
|
83
87
|
} = data;
|
88
|
+
const {
|
89
|
+
theme
|
90
|
+
} = useEditorContext();
|
84
91
|
const activeCard = value === selectedCard;
|
85
92
|
const handleChange = e => {
|
86
93
|
if (selectedCard === data?.value) {
|
@@ -99,7 +106,8 @@ const CardsMapping = props => {
|
|
99
106
|
sx: {
|
100
107
|
marginBottom: "12px",
|
101
108
|
"& .MuiPaper-root": {
|
102
|
-
|
109
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
110
|
+
border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
103
111
|
borderRadius: "8px",
|
104
112
|
boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
|
105
113
|
}
|
@@ -18,6 +18,7 @@ import FontSize from "./fontSize";
|
|
18
18
|
import SelectSwitch from "./selectSwitch";
|
19
19
|
import CardsMapping from "./card";
|
20
20
|
import MetaDataMapping from "./metaDataMapping";
|
21
|
+
import LineSpacing from "./lineSpacing";
|
21
22
|
const FieldMap = {
|
22
23
|
text: Text,
|
23
24
|
bannerSpacing: BannerSpacing,
|
@@ -38,6 +39,7 @@ const FieldMap = {
|
|
38
39
|
fontSize: FontSize,
|
39
40
|
selectSwitch: SelectSwitch,
|
40
41
|
card: CardsMapping,
|
41
|
-
metadatamapping: MetaDataMapping
|
42
|
+
metadatamapping: MetaDataMapping,
|
43
|
+
lineSpacing: LineSpacing
|
42
44
|
};
|
43
45
|
export default FieldMap;
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Grid, Slider, Typography, Box } from "@mui/material";
|
3
|
+
import { getBreakPointsValue } from "../../../helper/theme";
|
4
|
+
import useWindowResize from "../../../hooks/useWindowResize";
|
5
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const LineSpacing = props => {
|
9
|
+
const {
|
10
|
+
value: val,
|
11
|
+
data,
|
12
|
+
onChange
|
13
|
+
} = props;
|
14
|
+
const {
|
15
|
+
theme
|
16
|
+
} = useEditorContext();
|
17
|
+
const {
|
18
|
+
key
|
19
|
+
} = data;
|
20
|
+
const [size] = useWindowResize();
|
21
|
+
const pro_value = getBreakPointsValue(val, size?.device);
|
22
|
+
const [value, setValue] = useState(pro_value);
|
23
|
+
let breakpointValue = getBreakPointsValue(val, null);
|
24
|
+
breakpointValue = typeof breakpointValue['lg'] === 'object' ? breakpointValue['lg'] : breakpointValue;
|
25
|
+
useState(() => {
|
26
|
+
setValue(pro_value);
|
27
|
+
}, [pro_value]);
|
28
|
+
const handleChange = e => {
|
29
|
+
onChange({
|
30
|
+
[key]: {
|
31
|
+
...breakpointValue,
|
32
|
+
[size?.device]: e.target.value
|
33
|
+
}
|
34
|
+
});
|
35
|
+
};
|
36
|
+
return /*#__PURE__*/_jsxs(Grid, {
|
37
|
+
item: true,
|
38
|
+
xs: 12,
|
39
|
+
children: [/*#__PURE__*/_jsx(Typography, {
|
40
|
+
variant: "body1",
|
41
|
+
color: "primary",
|
42
|
+
style: {
|
43
|
+
fontSize: "14px",
|
44
|
+
fontWeight: 500
|
45
|
+
},
|
46
|
+
children: data?.label
|
47
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
48
|
+
container: true,
|
49
|
+
wrap: "nowrap",
|
50
|
+
className: "sld-wrpr",
|
51
|
+
children: [/*#__PURE__*/_jsx(Slider, {
|
52
|
+
className: "spacingSlider",
|
53
|
+
defaultValue: value || 1.43,
|
54
|
+
"aria-label": "Default",
|
55
|
+
valueLabelDisplay: "auto",
|
56
|
+
min: 0.5,
|
57
|
+
max: 3.0,
|
58
|
+
step: 0.1,
|
59
|
+
name: "lineHeight",
|
60
|
+
onChange: handleChange
|
61
|
+
}), /*#__PURE__*/_jsx(Box, {
|
62
|
+
component: "input",
|
63
|
+
sx: {
|
64
|
+
background: theme?.palette?.editor?.background,
|
65
|
+
color: theme?.palette?.editor?.textColor
|
66
|
+
},
|
67
|
+
name: "lineHeight",
|
68
|
+
value: pro_value,
|
69
|
+
className: "sliderInput",
|
70
|
+
onChange: handleChange,
|
71
|
+
type: "number",
|
72
|
+
placeholder: "0",
|
73
|
+
disabled: true,
|
74
|
+
defaultValue: pro_value || 1.43
|
75
|
+
})]
|
76
|
+
})]
|
77
|
+
});
|
78
|
+
};
|
79
|
+
export default LineSpacing;
|
@@ -4,6 +4,7 @@ import { convertBase64 } from "../utils/helper";
|
|
4
4
|
import { uploadFile } from "../service/fileupload";
|
5
5
|
import Icon from "./Icon";
|
6
6
|
import UploadStyles from "../common/ImageSelector/UploadStyles";
|
7
|
+
import { useEditorContext } from "../hooks/useMouseMove";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -18,6 +19,9 @@ const Uploader = props => {
|
|
18
19
|
const [base64, setBase64] = useState(value?.url);
|
19
20
|
const [fileName, setFileName] = useState("");
|
20
21
|
const [uploading, setUploading] = useState(false);
|
22
|
+
const {
|
23
|
+
theme
|
24
|
+
} = useEditorContext();
|
21
25
|
const handleChange = async e => {
|
22
26
|
const uFile = e.target.files[0];
|
23
27
|
const strImage = await convertBase64(uFile);
|
@@ -98,6 +102,10 @@ const Uploader = props => {
|
|
98
102
|
className: "uploadImageSection",
|
99
103
|
children: base64 ? renderThumb() : /*#__PURE__*/_jsx(Grid, {
|
100
104
|
className: "uploadImageText",
|
105
|
+
sx: {
|
106
|
+
background: `${theme?.palette?.editor?.inputFieldBgColor}`,
|
107
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
|
108
|
+
},
|
101
109
|
children: /*#__PURE__*/_jsxs(Button, {
|
102
110
|
component: "label",
|
103
111
|
variant: "text",
|