@flozy/editor 10.4.0 → 10.4.1
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/ChatEditor.js +17 -16
- package/dist/Editor/CommonEditor.js +134 -18
- package/dist/Editor/DialogWrapper.js +31 -25
- package/dist/Editor/Editor.css +46 -8
- package/dist/Editor/Elements/AI/PopoverAIInput.js +11 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +46 -9
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +1 -23
- package/dist/Editor/Elements/AppHeader/AppHeader.js +10 -5
- package/dist/Editor/Elements/Button/EditorButton.js +27 -9
- package/dist/Editor/Elements/Carousel/CarouselItem.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +61 -14
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +10 -7
- package/dist/Editor/Elements/Color Picker/Styles.js +15 -13
- package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +4 -2
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +23 -8
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +184 -171
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +40 -32
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +1 -0
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +75 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +3 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- package/dist/Editor/Elements/Signature/Signature.css +2 -1
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +18 -5
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +16 -3
- package/dist/Editor/Elements/SimpleText/index.js +6 -1
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +0 -1
- package/dist/Editor/Elements/Table/Draggable.js +6 -2
- package/dist/Editor/Elements/Table/Styles.js +7 -0
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +31 -8
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +10 -1
- package/dist/Editor/MiniEditor.js +2 -1
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +4 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +10 -13
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +6 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +167 -42
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +7 -4
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +72 -12
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +100 -27
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +439 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -6
- package/dist/Editor/assets/svg/BackIcon.js +18 -0
- package/dist/Editor/assets/svg/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/Checkbox/index.js +46 -0
- package/dist/Editor/common/Checkbox/styles.js +45 -0
- package/dist/Editor/common/ColorPickerButton.js +41 -16
- package/dist/Editor/common/CustomColorPicker/index.js +130 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog2/index.js +94 -0
- package/dist/Editor/common/CustomDialog2/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +43 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +3 -0
- package/dist/Editor/common/Icon.js +31 -1
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +61 -56
- package/dist/Editor/common/LinkSettings/index.js +82 -80
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +209 -74
- package/dist/Editor/common/MentionsPopup/index.js +4 -1
- package/dist/Editor/common/RadioGroup/index.js +48 -0
- package/dist/Editor/common/RadioGroup/styles.js +29 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -15
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +4 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +4 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +146 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +120 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +17 -0
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +6 -3
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +28 -19
- package/dist/Editor/common/RnD/Utils/index.js +3 -1
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +42 -58
- package/dist/Editor/common/RnD/VirtualElement/helper.js +323 -132
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +68 -39
- package/dist/Editor/common/Select/index.js +44 -5
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +65 -11
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +12 -9
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +4 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +5 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +12 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +16 -8
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +36 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +115 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +3 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +177 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +186 -62
- package/dist/Editor/helper/index.js +5 -1
- package/dist/Editor/helper/textIndeces.js +58 -0
- package/dist/Editor/helper/theme.js +203 -2
- package/dist/Editor/hooks/useEditorTheme.js +153 -0
- package/dist/Editor/hooks/useMouseMove.js +8 -5
- package/dist/Editor/hooks/useTable.js +5 -4
- package/dist/Editor/hooks/useThemeValues.js +63 -0
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +3 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +149 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +82 -0
- package/dist/Editor/themeSettings/buttons/index.js +300 -0
- package/dist/Editor/themeSettings/buttons/style.js +23 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +310 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +81 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +121 -0
- package/dist/Editor/themeSettings/fonts/index.js +240 -0
- package/dist/Editor/themeSettings/fonts/style.js +62 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +380 -0
- package/dist/Editor/themeSettings/style.js +299 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +355 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +202 -0
- package/dist/Editor/themeSettingsAI/style.js +332 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +172 -46
- package/dist/Editor/utils/accordion.js +14 -4
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/customHooks/useTableResize.js +49 -9
- package/dist/Editor/utils/draftToSlate.js +3 -2
- package/dist/Editor/utils/events.js +50 -6
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/form.js +4 -4
- package/dist/Editor/utils/formfield.js +9 -2
- package/dist/Editor/utils/helper.js +210 -26
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +2 -9
- package/dist/Editor/utils/updateFormName.js +22 -0
- package/package.json +4 -4
@@ -3,31 +3,138 @@ const useOptionsPopupStyle = ({
|
|
3
3
|
}) => ({
|
4
4
|
root: {
|
5
5
|
zIndex: 1200,
|
6
|
-
background: theme?.palette?.editor?.
|
7
|
-
|
6
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
7
|
+
border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
|
8
|
+
borderRadius: "20px",
|
8
9
|
overflow: "hidden",
|
9
|
-
boxShadow: "
|
10
|
+
boxShadow: "0px 0px 12px 4px #00000014",
|
10
11
|
marginRight: "4px !important",
|
12
|
+
padding: "0px 5px",
|
13
|
+
fontFamily: "'Inter',sans-serif",
|
14
|
+
"& .MuiPaper-root": {
|
15
|
+
background: theme?.palette?.editor?.miniToolBarBackground
|
16
|
+
},
|
17
|
+
"& .sectionOptionTitle": {
|
18
|
+
fontFamily: "'Inter',sans-serif",
|
19
|
+
fontWeight: "700",
|
20
|
+
fontSize: "16px",
|
21
|
+
lineHeight: "25px",
|
22
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
23
|
+
"& button": {
|
24
|
+
background: theme?.palette?.editor?.closeButtonBackground,
|
25
|
+
borderRadius: "8px",
|
26
|
+
"& svg": {
|
27
|
+
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
28
|
+
}
|
29
|
+
}
|
30
|
+
},
|
31
|
+
"& .sectionOptionChild": {
|
32
|
+
background: theme?.palette?.editor?.miniToolBarBackground,
|
33
|
+
"& .MuiBox-root": {
|
34
|
+
maxHeight: "unset"
|
35
|
+
},
|
36
|
+
"& .MuiInputBase-root, fieldset": {
|
37
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
38
|
+
borderRadius: "8px",
|
39
|
+
"& fieldset": {
|
40
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
41
|
+
background: "transparent",
|
42
|
+
borderRadius: "8px"
|
43
|
+
},
|
44
|
+
"& input": {
|
45
|
+
border: `1px solid transparent`,
|
46
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
47
|
+
borderRadius: "8px",
|
48
|
+
fontSize: "12px",
|
49
|
+
color: theme?.palette?.editor?.textColor
|
50
|
+
}
|
51
|
+
},
|
52
|
+
"& p": {
|
53
|
+
color: theme?.palette?.editor?.textColor
|
54
|
+
},
|
55
|
+
"& .sliderInput": {
|
56
|
+
border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
|
57
|
+
background: theme?.palette?.editor?.inputFieldBgColor,
|
58
|
+
borderRadius: "10px"
|
59
|
+
},
|
60
|
+
"& .style-settings-wrpr": {
|
61
|
+
overflow: "hidden",
|
62
|
+
"&:hover": {
|
63
|
+
overflowY: "auto",
|
64
|
+
"&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
|
65
|
+
background: `${theme?.palette?.editor?.brainPopupScroll} !important`
|
66
|
+
},
|
67
|
+
"&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
|
68
|
+
visibility: "hidden"
|
69
|
+
}
|
70
|
+
}
|
71
|
+
},
|
72
|
+
"& svg": {
|
73
|
+
width: "17.5px",
|
74
|
+
height: "17.5px"
|
75
|
+
}
|
76
|
+
},
|
77
|
+
"& .MuiList-root": {
|
78
|
+
"& .MuiButtonBase-root": {
|
79
|
+
padding: "8px 12px",
|
80
|
+
"& .MuiTypography-root": {
|
81
|
+
color: `${theme?.palette?.editor?.textColor} !important`,
|
82
|
+
fontSize: "14px",
|
83
|
+
fontWeight: "500",
|
84
|
+
fontFamily: "'Inter',sans-serif"
|
85
|
+
},
|
86
|
+
"&:hover": {
|
87
|
+
background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
|
88
|
+
"& .MuiTypography-root": {
|
89
|
+
color: `${theme?.palette?.editor?.textColor} !important`
|
90
|
+
},
|
91
|
+
"& .MuiListItemIcon-root": {
|
92
|
+
"& .signatureElementIcon, & .newLineElementIcon": {
|
93
|
+
"& path": {
|
94
|
+
fill: `${theme?.palette?.editor?.textColor}`
|
95
|
+
}
|
96
|
+
},
|
97
|
+
"& .commonSvgStyle, & .commonSvgStyle2": {
|
98
|
+
"& path": {
|
99
|
+
stroke: `${theme?.palette?.editor?.textColor}`
|
100
|
+
}
|
101
|
+
},
|
102
|
+
"& .colorBoxElementIcon": {
|
103
|
+
"& path": {
|
104
|
+
stroke: `${theme?.palette?.editor?.textColor}`,
|
105
|
+
fill: "none"
|
106
|
+
}
|
107
|
+
},
|
108
|
+
"& .gridElementIcon": {
|
109
|
+
"& path": {
|
110
|
+
stroke: `${theme?.palette?.editor?.textColor}`,
|
111
|
+
fill: `${theme?.palette?.editor?.textColor}`
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
}
|
117
|
+
},
|
118
|
+
"& .sectionMoreOption": {
|
119
|
+
"& .MuiButtonBase-root": {
|
120
|
+
padding: "12px 12px",
|
121
|
+
color: `${theme?.palette?.editor?.textColor} !important`,
|
122
|
+
fontSize: "14px",
|
123
|
+
fontWeight: "500",
|
124
|
+
fontFamily: "'Inter',sans-serif"
|
125
|
+
}
|
126
|
+
},
|
11
127
|
"& .papper-root": {
|
12
128
|
width: "344px",
|
13
129
|
boxShadow: "none",
|
14
|
-
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
15
130
|
borderRadius: "7px",
|
16
131
|
background: theme?.palette?.editor?.background,
|
17
132
|
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
18
133
|
color: theme?.palette?.editor?.textColor
|
19
134
|
},
|
20
|
-
"& .MuiInputBase-root, input": {
|
21
|
-
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
22
|
-
},
|
23
135
|
"& .borderInput": {
|
24
136
|
background: theme?.palette?.editor?.background,
|
25
137
|
color: theme?.palette?.editor?.textColor
|
26
|
-
},
|
27
|
-
"& .MuiCheckbox-root": {
|
28
|
-
"& svg": {
|
29
|
-
fill: theme?.palette?.editor?.textColor
|
30
|
-
}
|
31
138
|
}
|
32
139
|
},
|
33
140
|
"& .item-list-wrpr": {
|
@@ -37,13 +144,7 @@ const useOptionsPopupStyle = ({
|
|
37
144
|
"& .MuiListItemButton-root": {
|
38
145
|
borderRadius: "7px",
|
39
146
|
color: theme?.palette?.editor?.textColor,
|
40
|
-
"
|
41
|
-
color: theme?.palette?.editor?.activeColor,
|
42
|
-
background: "rgba(233, 243, 254, 1)",
|
43
|
-
"& .MuiTypography-root": {
|
44
|
-
color: theme?.palette?.editor?.activeColor
|
45
|
-
}
|
46
|
-
}
|
147
|
+
alignItems: "center"
|
47
148
|
}
|
48
149
|
},
|
49
150
|
"& .item-wrapper": {
|
@@ -10,23 +10,27 @@ const SwitchViewport = props => {
|
|
10
10
|
const {
|
11
11
|
breakpoint,
|
12
12
|
onChange,
|
13
|
-
translation
|
13
|
+
translation,
|
14
|
+
show
|
14
15
|
} = props;
|
15
16
|
const classes = useSwitchViewport();
|
16
17
|
const {
|
17
|
-
|
18
|
+
setSelectedElement
|
18
19
|
} = useEditorContext();
|
19
20
|
useEffect(() => {
|
20
|
-
|
21
|
+
// to reset selection on viewport changes - FS-6589
|
22
|
+
setSelectedElement({});
|
21
23
|
}, [breakpoint]);
|
22
24
|
return /*#__PURE__*/_jsxs(Box, {
|
23
25
|
sx: classes.root,
|
26
|
+
style: {
|
27
|
+
display: show ? "block" : "none"
|
28
|
+
},
|
24
29
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
25
30
|
title: translation("Desktop View"),
|
26
31
|
children: /*#__PURE__*/_jsx(IconButton, {
|
27
32
|
className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
|
28
33
|
onClick: () => {
|
29
|
-
setActiveBreakPoint("");
|
30
34
|
onChange("");
|
31
35
|
},
|
32
36
|
children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
|
@@ -36,7 +40,6 @@ const SwitchViewport = props => {
|
|
36
40
|
children: /*#__PURE__*/_jsx(IconButton, {
|
37
41
|
className: `${breakpoint === "xs" ? "active" : ""}`,
|
38
42
|
onClick: () => {
|
39
|
-
setActiveBreakPoint("xs");
|
40
43
|
onChange("xs");
|
41
44
|
},
|
42
45
|
children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
function MainThemeProvider({
|
4
|
+
children,
|
5
|
+
userSelectedTheme,
|
6
|
+
theme = {}
|
7
|
+
}) {
|
8
|
+
const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
|
9
|
+
return /*#__PURE__*/_jsx(CssVarsProvider, {
|
10
|
+
theme: {
|
11
|
+
...themeVars,
|
12
|
+
...theme
|
13
|
+
},
|
14
|
+
children: children
|
15
|
+
});
|
16
|
+
}
|
17
|
+
export default MainThemeProvider;
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { useTheme,
|
2
|
+
import { useTheme, createTheme, useMediaQuery } from "@mui/material";
|
3
3
|
import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
|
4
|
+
import MainThemeProvider from "./MainThemeProvider";
|
4
5
|
|
5
6
|
// Custom breakpoints functions
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
|
|
59
60
|
} : getBreakPoints(prevTheme)
|
60
61
|
});
|
61
62
|
const ViewportStimulator = ({
|
62
|
-
children
|
63
|
+
children,
|
64
|
+
selectedTheme
|
63
65
|
}) => {
|
64
66
|
const theme = useTheme();
|
65
67
|
const isPrintMode = useMediaQuery("print");
|
66
68
|
const viewportTheme = extendedTheme(theme, isPrintMode);
|
67
|
-
return /*#__PURE__*/_jsx(
|
69
|
+
return /*#__PURE__*/_jsx(MainThemeProvider, {
|
68
70
|
theme: viewportTheme,
|
71
|
+
userSelectedTheme: selectedTheme,
|
69
72
|
children: children
|
70
73
|
});
|
71
74
|
};
|
@@ -2,6 +2,7 @@ import { Transforms, Node, Path, Editor } from "slate";
|
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
3
|
import { getNode, handleNegativeInteger } from "../../../utils/helper";
|
4
4
|
import { handleBoxAlignment } from "../VirtualElement/helper";
|
5
|
+
import { convertToGridArea, findMaxYValue } from "../../../Elements/FreeGrid/helper";
|
5
6
|
export const ROW_HEIGHT = 50;
|
6
7
|
|
7
8
|
// const MARGIN_OF = {
|
@@ -22,18 +23,27 @@ export function updateRows() {}
|
|
22
23
|
export function updateCols() {}
|
23
24
|
const handleMoveNode = (editor, path, newPath, {
|
24
25
|
isEmpty
|
25
|
-
}, autoAlign) => {
|
26
|
+
}, autoAlign, moveToNode) => {
|
26
27
|
try {
|
27
28
|
let replaceNode = Node.get(editor, path);
|
29
|
+
let heightDiff = 0;
|
28
30
|
if (autoAlign) {
|
29
|
-
|
31
|
+
const y = findMaxYValue(moveToNode?.children);
|
32
|
+
const {
|
33
|
+
gridArea,
|
34
|
+
marginTop
|
35
|
+
} = convertToGridArea(y);
|
30
36
|
replaceNode = {
|
31
37
|
...replaceNode,
|
32
|
-
gridArea_xs:
|
33
|
-
|
34
|
-
|
38
|
+
gridArea_xs: gridArea,
|
39
|
+
marginTop_xs: marginTop + 12,
|
40
|
+
xs_updatedOn: new Date().getTime()
|
35
41
|
};
|
42
|
+
const newHeight = y + replaceNode?.height_xs + 12;
|
43
|
+
const diffH = newHeight - moveToNode?.height_xs;
|
44
|
+
heightDiff = diffH >= 0 ? diffH : 0;
|
36
45
|
}
|
46
|
+
let rPath;
|
37
47
|
if (isEmpty) {
|
38
48
|
const toPath = [...newPath, 0];
|
39
49
|
Transforms.insertNodes(editor, [{
|
@@ -44,7 +54,7 @@ const handleMoveNode = (editor, path, newPath, {
|
|
44
54
|
Transforms.removeNodes(editor, {
|
45
55
|
at: path
|
46
56
|
});
|
47
|
-
|
57
|
+
rPath = toPath;
|
48
58
|
} else {
|
49
59
|
Transforms.insertNodes(editor, [{
|
50
60
|
...replaceNode
|
@@ -54,8 +64,12 @@ const handleMoveNode = (editor, path, newPath, {
|
|
54
64
|
Transforms.removeNodes(editor, {
|
55
65
|
at: path
|
56
66
|
});
|
57
|
-
|
67
|
+
rPath = newPath;
|
58
68
|
}
|
69
|
+
return {
|
70
|
+
rPath,
|
71
|
+
heightDiff
|
72
|
+
};
|
59
73
|
} catch (err) {
|
60
74
|
console.log(err);
|
61
75
|
console.log("Drop Node error");
|
@@ -210,7 +224,7 @@ export function onDropItem(props, parentClass) {
|
|
210
224
|
at: moveTo,
|
211
225
|
match: n => n.type === "freegrid"
|
212
226
|
});
|
213
|
-
const [
|
227
|
+
const [, sectionPath] = sectionData || [];
|
214
228
|
if (needMove && isInsidePath(from, moveTo)) {
|
215
229
|
reRenderSectionPath = sectionPath;
|
216
230
|
} else {
|
@@ -229,14 +243,6 @@ export function onDropItem(props, parentClass) {
|
|
229
243
|
const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
|
230
244
|
if (isBoxHeader) {
|
231
245
|
// will handle on <BoxHeaderAutoAlignment />
|
232
|
-
} else if (moveTo?.length === 2 && autoAlign) {
|
233
|
-
// auto align in mobile
|
234
|
-
Transforms.setNodes(editor, {
|
235
|
-
xs_updatedOn: null,
|
236
|
-
xs_updatedOn: new Date().getTime()
|
237
|
-
}, {
|
238
|
-
at: moveTo
|
239
|
-
});
|
240
246
|
} else if (autoAlign) {
|
241
247
|
Transforms.setNodes(editor, {
|
242
248
|
autoAlign: true,
|
@@ -245,12 +251,15 @@ export function onDropItem(props, parentClass) {
|
|
245
251
|
at: moveTo
|
246
252
|
});
|
247
253
|
}
|
248
|
-
const
|
254
|
+
const {
|
255
|
+
rPath,
|
256
|
+
heightDiff
|
257
|
+
} = handleMoveNode(editor, path, newPath, {
|
249
258
|
isEmpty
|
250
|
-
}, autoAlign);
|
259
|
+
}, autoAlign, toSectionNode) || {};
|
251
260
|
reRenderChildNodes(editor, reRenderSectionPath || moveTo);
|
252
261
|
if (autoAlign && !isBoxHeader) {
|
253
|
-
handleBoxAlignment(editor,
|
262
|
+
handleBoxAlignment(editor, sectionPath, heightDiff);
|
254
263
|
}
|
255
264
|
return {
|
256
265
|
updated_at: rPath
|
@@ -87,7 +87,9 @@ export function updatePositions(props, closestClass) {
|
|
87
87
|
newPath = [...newPath, toSectionNode?.children?.length];
|
88
88
|
}
|
89
89
|
newPath = newPath.map(m => parseInt(m));
|
90
|
-
const
|
90
|
+
const {
|
91
|
+
rPath
|
92
|
+
} = handleMoveNode(editor, path, newPath, {
|
91
93
|
isEmpty
|
92
94
|
});
|
93
95
|
// to update path index need to re-render items in parent sections
|
@@ -1,69 +1,45 @@
|
|
1
1
|
import { useEffect, useRef } from "react";
|
2
|
-
import { Path, Transforms } from "slate";
|
3
2
|
import { getNode } from "../../../utils/helper";
|
4
3
|
import { ROW_HEIGHT } from "../Utils/gridDropItem";
|
5
|
-
import {
|
4
|
+
import { getGridArea, getNodeValues, handleTextAlignment } from "./helper";
|
6
5
|
import { Box } from "@mui/material";
|
7
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
-
const
|
9
|
-
|
7
|
+
export const getElementOffset = (element, breakpoint) => {
|
8
|
+
const {
|
9
|
+
height,
|
10
|
+
gridArea,
|
11
|
+
marginTop
|
12
|
+
} = getNodeValues(element, breakpoint);
|
13
|
+
const [startRow] = getGridArea(gridArea);
|
14
|
+
const top = (startRow - 1) * ROW_HEIGHT + marginTop;
|
15
|
+
const bottom = top + height;
|
16
|
+
return {
|
17
|
+
top,
|
18
|
+
bottom
|
19
|
+
};
|
20
|
+
};
|
21
|
+
export const updateTextHeight = (editor, path, currHeight, updateBreakpoint) => {
|
22
|
+
if (!currHeight) {
|
10
23
|
return;
|
11
24
|
}
|
12
|
-
const
|
13
|
-
|
14
|
-
const gridItems = currentNode?.children || [];
|
15
|
-
const isNewlyAddedElement = gridItems.some(gridItem => !gridItem.gridArea_xs && gridItem.type !== "paragraph");
|
16
|
-
if (isNewlyAddedElement) {
|
25
|
+
const textItem = getNode(editor, path);
|
26
|
+
if (!textItem) {
|
17
27
|
return;
|
18
28
|
}
|
19
|
-
const textItemIndex = path[parentPath.length];
|
20
|
-
const textItem = gridItems.find((_, index) => textItemIndex === index);
|
21
29
|
const {
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
} = textItem;
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
const
|
34
|
-
|
35
|
-
if (firstOverlappedRow) {
|
36
|
-
const moveRows = endRow - firstOverlappedRow;
|
37
|
-
moveOverlappedItems(editor, moveRows, gridItems, parentPath, textItemIndex, startRow);
|
38
|
-
containerExtraHeight += moveRows * ROW_HEIGHT;
|
39
|
-
}
|
40
|
-
|
41
|
-
// handle containers (box and section)
|
42
|
-
const containerData = handleContainers(editor, parentPath, containerExtraHeight);
|
43
|
-
containerData.forEach(container => {
|
44
|
-
const {
|
45
|
-
moveRows,
|
46
|
-
containerNode,
|
47
|
-
containerPath,
|
48
|
-
newHeight,
|
49
|
-
childIndex,
|
50
|
-
lastChildStartRow
|
51
|
-
} = container;
|
52
|
-
if (moveRows) {
|
53
|
-
moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
|
54
|
-
}
|
55
|
-
Transforms.setNodes(editor, {
|
56
|
-
height_xs: newHeight,
|
57
|
-
xs_updatedOn: new Date().getTime()
|
58
|
-
}, {
|
59
|
-
at: containerPath
|
60
|
-
});
|
61
|
-
});
|
62
|
-
Transforms.setNodes(editor, {
|
63
|
-
height_xs: height
|
64
|
-
}, {
|
65
|
-
at: path
|
66
|
-
});
|
30
|
+
height,
|
31
|
+
gridArea,
|
32
|
+
type
|
33
|
+
} = getNodeValues(textItem, updateBreakpoint);
|
34
|
+
if (!gridArea && type !== "paragraph") {
|
35
|
+
return;
|
36
|
+
}
|
37
|
+
const oldHeight = height;
|
38
|
+
const newHeight = currHeight;
|
39
|
+
const heightDiff = newHeight - oldHeight;
|
40
|
+
if (heightDiff !== 0) {
|
41
|
+
const textNode = [textItem, path];
|
42
|
+
handleTextAlignment(editor, textNode, heightDiff, updateBreakpoint);
|
67
43
|
}
|
68
44
|
};
|
69
45
|
function VirtualTextElement(props) {
|
@@ -83,9 +59,9 @@ function VirtualTextElement(props) {
|
|
83
59
|
height
|
84
60
|
} = entry.contentRect;
|
85
61
|
const currentText = currElement?.innerText;
|
86
|
-
const prevText = prevTextRef
|
62
|
+
const prevText = prevTextRef?.current;
|
87
63
|
if (currentText && currentText !== prevText) {
|
88
|
-
updateTextHeight(editor, path, height);
|
64
|
+
updateTextHeight(editor, path, height, "xs");
|
89
65
|
}
|
90
66
|
prevTextRef.current = currentText;
|
91
67
|
}
|
@@ -122,6 +98,14 @@ function VirtualTextElement(props) {
|
|
122
98
|
},
|
123
99
|
"& .editor-blocker": {
|
124
100
|
display: "none"
|
101
|
+
},
|
102
|
+
"& .fgi_type_text": {
|
103
|
+
"& .edt-headings": {
|
104
|
+
margin: "0px"
|
105
|
+
},
|
106
|
+
"& .edt-paragraphs": {
|
107
|
+
margin: "0px"
|
108
|
+
}
|
125
109
|
}
|
126
110
|
},
|
127
111
|
dangerouslySetInnerHTML: {
|