@flozy/editor 3.8.9 → 3.9.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +55 -45
- package/dist/Editor/CommonEditor.js +175 -168
- package/dist/Editor/DialogWrapper.js +3 -4
- package/dist/Editor/Editor.css +7 -4
- package/dist/Editor/Elements/AI/AIInput.js +17 -18
- package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
- package/dist/Editor/Elements/AI/PopoverAIInput.js +58 -74
- package/dist/Editor/Elements/AI/Styles.js +2 -1
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
- package/dist/Editor/Elements/AI/VoiceToText/index.js +177 -0
- package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
- package/dist/Editor/Elements/AppHeader/AppHeader.js +49 -40
- package/dist/Editor/Elements/Button/EditorButton.js +38 -33
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -17
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +2 -1
- package/dist/Editor/Elements/Embed/Image.js +14 -15
- package/dist/Editor/Elements/Embed/Video.js +8 -12
- package/dist/Editor/Elements/Emoji/EmojiButton.js +7 -11
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
- package/dist/Editor/Elements/Form/Form.js +1 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +34 -14
- package/dist/Editor/Elements/Grid/GridItem.js +23 -31
- package/dist/Editor/Elements/Link/Link.js +6 -1
- package/dist/Editor/Elements/Link/LinkButton.js +4 -2
- package/dist/Editor/Elements/Link/LinkPopup.js +10 -3
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +8 -4
- package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
- package/dist/Editor/Elements/Signature/SignaturePopup.js +14 -3
- package/dist/Editor/Elements/SimpleText/index.js +8 -9
- package/dist/Editor/Elements/SimpleText/style.js +0 -37
- package/dist/Editor/Elements/Table/Styles.js +23 -1
- package/dist/Editor/Elements/Table/Table.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +69 -7
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
- package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
- package/dist/Editor/MiniEditor.js +3 -1
- package/dist/Editor/Styles/EditorStyles.js +1 -24
- package/dist/Editor/Toolbar/Basic/index.js +4 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +26 -2
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +29 -18
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +29 -3
- package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -16
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +52 -8
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +7 -25
- package/dist/Editor/Toolbar/Toolbar.js +0 -7
- package/dist/Editor/Toolbar/toolbarGroups.js +48 -11
- package/dist/Editor/assets/svg/AIIcons.js +153 -1
- package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
- package/dist/Editor/assets/svg/RedoIcon.js +27 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
- package/dist/Editor/assets/svg/TextIcon.js +8 -5
- package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
- package/dist/Editor/assets/svg/UndoIcon.js +27 -0
- package/dist/Editor/common/ColorPickerButton.js +25 -9
- package/dist/Editor/common/CustomColorPicker/index.js +106 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog/index.js +94 -0
- package/dist/Editor/common/CustomDialog/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +33 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
- package/dist/Editor/common/Icon.js +41 -8
- package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
- package/dist/Editor/common/LinkSettings/index.js +4 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
- package/dist/Editor/common/LinkSettings/style.js +11 -8
- package/dist/Editor/common/MentionsPopup/MentionsListCard.js +6 -1
- package/dist/Editor/common/MentionsPopup/index.js +8 -12
- package/dist/Editor/common/Section/index.js +69 -28
- package/dist/Editor/common/Section/styles.js +12 -6
- package/dist/Editor/common/Shorthands/elements.js +54 -12
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +19 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +31 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +14 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +2 -13
- package/dist/Editor/common/iconslist.js +0 -31
- package/dist/Editor/helper/index.js +0 -139
- package/dist/Editor/helper/theme.js +185 -48
- package/dist/Editor/hooks/useEditorTheme.js +139 -0
- package/dist/Editor/hooks/useMouseMove.js +12 -37
- package/dist/Editor/hooks/useWindowMessage.js +10 -7
- package/dist/Editor/hooks/withCommon.js +1 -2
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +50 -173
- package/dist/Editor/theme/index.js +144 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
- package/dist/Editor/themeSettings/buttons/index.js +290 -0
- package/dist/Editor/themeSettings/buttons/style.js +21 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
- package/dist/Editor/themeSettings/fonts/index.js +213 -0
- package/dist/Editor/themeSettings/fonts/style.js +44 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +320 -0
- package/dist/Editor/themeSettings/style.js +152 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +356 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
- package/dist/Editor/themeSettingsAI/style.js +247 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +163 -47
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/draftToSlate.js +1 -1
- package/dist/Editor/utils/events.js +54 -7
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +31 -31
- package/dist/Editor/utils/table.js +51 -43
- package/package.json +4 -6
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +0 -391
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -193
- package/dist/Editor/Elements/FreeGrid/FreeGridButton.js +0 -23
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -184
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +0 -36
- package/dist/Editor/Elements/FreeGrid/Options/More.js +0 -24
- package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js +0 -47
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +0 -11
- package/dist/Editor/Elements/FreeGrid/breakpointConstants.js +0 -75
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -159
- package/dist/Editor/ErrorBoundary.js +0 -30
- package/dist/Editor/common/RnD/ContextMenu/CMenus.js +0 -105
- package/dist/Editor/common/RnD/ContextMenu/index.js +0 -38
- package/dist/Editor/common/RnD/ContextMenu/styles.js +0 -21
- package/dist/Editor/common/RnD/DragInfo/index.js +0 -31
- package/dist/Editor/common/RnD/DragInfo/styles.js +0 -15
- package/dist/Editor/common/RnD/DragOver/index.js +0 -46
- package/dist/Editor/common/RnD/DragOver/styles.js +0 -23
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +0 -82
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -26
- package/dist/Editor/common/RnD/ElementOptions/index.js +0 -93
- package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -41
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +0 -153
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +0 -58
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +0 -7
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -30
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +0 -46
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +0 -13
- package/dist/Editor/common/RnD/ElementSettings/index.js +0 -17
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +0 -14
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -76
- package/dist/Editor/common/RnD/GuideLines/BoundaryLine.js +0 -52
- package/dist/Editor/common/RnD/GuideLines/index.js +0 -33
- package/dist/Editor/common/RnD/GuideLines/styles.js +0 -60
- package/dist/Editor/common/RnD/OptionsPopup/index.js +0 -50
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -36
- package/dist/Editor/common/RnD/RnDCopy.js +0 -23
- package/dist/Editor/common/RnD/ShadowElement.js +0 -34
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -40
- package/dist/Editor/common/RnD/SwitchViewport/styles.js +0 -24
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +0 -63
- package/dist/Editor/common/RnD/TransformHandles/CornerHandle.js +0 -19
- package/dist/Editor/common/RnD/TransformHandles/Icons/BottomRightIcon.js +0 -13
- package/dist/Editor/common/RnD/TransformHandles/SizeHandle.js +0 -18
- package/dist/Editor/common/RnD/TransformHandles/index.js +0 -62
- package/dist/Editor/common/RnD/Utils/alignmentDetection.js +0 -26
- package/dist/Editor/common/RnD/Utils/calculateDropItem.js +0 -98
- package/dist/Editor/common/RnD/Utils/collisionDetection.js +0 -52
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +0 -148
- package/dist/Editor/common/RnD/Utils/index.js +0 -251
- package/dist/Editor/common/RnD/VirtualElement/index.js +0 -76
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -27
- package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js +0 -28
- package/dist/Editor/common/RnD/index.js +0 -503
- package/dist/Editor/common/RnD/styles.js +0 -4
- package/dist/Editor/common/StyleBuilder/boxStyle.js +0 -30
- package/dist/Editor/helper/RnD/focusOnNewItem.js +0 -39
- package/dist/Editor/helper/RnD/scrollToNewSection.js +0 -24
- package/dist/Editor/helper/breakpoint.js +0 -5
- package/dist/Editor/hooks/useBreakpoints.js +0 -34
- package/dist/Editor/hooks/withErrorHandling.js +0 -14
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +0 -168
- package/dist/Editor/utils/freegrid.js +0 -49
@@ -1,32 +1,35 @@
|
|
1
|
-
const ButtonNavSettingsStyles =
|
1
|
+
const ButtonNavSettingsStyles = themeType => ({
|
2
2
|
dialogContainer: {
|
3
|
-
|
3
|
+
"& .MuiPaper-root": {
|
4
|
+
background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
|
5
|
+
},
|
6
|
+
"& .MuiDialogContent-root": {
|
4
7
|
padding: "0px 20px"
|
5
8
|
},
|
6
|
-
|
9
|
+
"& .MuiDialogActions-root": {
|
7
10
|
padding: "10px"
|
8
11
|
},
|
9
|
-
|
12
|
+
"& .MuiTypography-h6": {
|
10
13
|
fontWeight: 600,
|
11
14
|
fontSize: "16px",
|
12
15
|
paddingRight: "20px"
|
13
16
|
},
|
14
17
|
"& .MuiGrid-container": {
|
15
|
-
marginTop:
|
18
|
+
marginTop: "0px"
|
16
19
|
},
|
17
20
|
"& .MuiGrid-item": {
|
18
21
|
padding: "14px"
|
19
22
|
}
|
20
23
|
},
|
21
24
|
saveBtn: {
|
22
|
-
color:
|
25
|
+
color: "#fff",
|
23
26
|
background: "#2563EB",
|
24
27
|
fontSize: "14px",
|
25
28
|
fontWeight: 500,
|
26
29
|
padding: "4px 24px",
|
27
30
|
textTransform: "none",
|
28
31
|
"&:hover": {
|
29
|
-
color:
|
32
|
+
color: "#fff",
|
30
33
|
background: "#2563EB"
|
31
34
|
}
|
32
35
|
},
|
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
|
|
43
46
|
}
|
44
47
|
},
|
45
48
|
closeIcon: {
|
46
|
-
position:
|
49
|
+
position: "absolute",
|
47
50
|
right: 8,
|
48
51
|
top: 8,
|
49
52
|
color: theme => theme.palette.grey[500]
|
@@ -39,7 +39,12 @@ const MentionsListCard = props => {
|
|
39
39
|
},
|
40
40
|
alt: name,
|
41
41
|
children: /*#__PURE__*/_jsx(Avatar, {
|
42
|
-
|
42
|
+
sx: {
|
43
|
+
background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
|
44
|
+
},
|
45
|
+
alt: name,
|
46
|
+
src: avatar_filename,
|
47
|
+
children: !avatar_filename && name && name.charAt(0).toUpperCase()
|
43
48
|
})
|
44
49
|
}), /*#__PURE__*/_jsx(Box, {
|
45
50
|
sx: {
|
@@ -35,18 +35,14 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
|
|
35
35
|
setOpenAI
|
36
36
|
} = useEditorContext();
|
37
37
|
useEffect(() => {
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
});
|
47
|
-
}
|
48
|
-
} catch (err) {
|
49
|
-
console.log(err);
|
38
|
+
if (target && chars.length > 0) {
|
39
|
+
const domRange = ReactEditor.toDOMRange(editor, target);
|
40
|
+
const rect = domRange.getBoundingClientRect();
|
41
|
+
setAnchorEl({
|
42
|
+
clientWidth: rect.width,
|
43
|
+
clientHeight: rect.height,
|
44
|
+
getBoundingClientRect: () => rect
|
45
|
+
});
|
50
46
|
}
|
51
47
|
}, [chars.length, editor, index, target]);
|
52
48
|
useEffect(() => {
|
@@ -1,20 +1,20 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import { useTheme } from "@mui/material";
|
1
|
+
import React, { useRef, useState } from "react";
|
3
2
|
import { Transforms } from "slate";
|
4
3
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
5
|
-
import { Box, IconButton, Tooltip } from "@mui/material";
|
4
|
+
import { Box, IconButton, Popper, Tooltip } from "@mui/material";
|
6
5
|
import TuneIcon from "@mui/icons-material/Tune";
|
7
6
|
import SectionPopup from "../../Elements/Grid/SectionPopup";
|
8
|
-
import { getBreakPointsValue, getTRBLBreakPoints
|
7
|
+
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
9
8
|
import DragHandle from "../DnD/DragHandleButton";
|
10
9
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
11
10
|
import SectionStyle from "./styles";
|
11
|
+
import useWindowResize from "../../hooks/useWindowResize";
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
14
15
|
const list_types = ["orderedList", "unorderedList"];
|
15
16
|
const Section = props => {
|
16
|
-
const
|
17
|
-
const classes = SectionStyle(theme);
|
17
|
+
const classes = SectionStyle();
|
18
18
|
const {
|
19
19
|
children,
|
20
20
|
element,
|
@@ -40,14 +40,33 @@ const Section = props => {
|
|
40
40
|
flexDirection
|
41
41
|
} = sectionAlignment || {};
|
42
42
|
const path = ReactEditor.findPath(editor, element);
|
43
|
+
const anchorEl = useRef(null);
|
44
|
+
const popperEl = useRef(null);
|
45
|
+
const [size] = useWindowResize();
|
46
|
+
const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
|
47
|
+
const [isHovering, setIsHovering] = useState(false);
|
48
|
+
const onMouseEnter = () => {
|
49
|
+
setIsHovering(true);
|
50
|
+
};
|
51
|
+
const onMouseLeave = () => {
|
52
|
+
setIsHovering(false);
|
53
|
+
};
|
43
54
|
const onSettings = () => {
|
44
55
|
setOpenSettings(true);
|
45
56
|
};
|
46
|
-
const Toolbar = (
|
57
|
+
const Toolbar = ({
|
58
|
+
fromPopper
|
59
|
+
}) => {
|
47
60
|
return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
|
48
61
|
component: "div",
|
49
62
|
className: `element-toolbar no-border-button hr section-tw sectionIcon`,
|
50
|
-
style: {
|
63
|
+
style: fromPopper ? {
|
64
|
+
position: "unset",
|
65
|
+
marginLeft: "28px",
|
66
|
+
paddingTop: "4px",
|
67
|
+
marginRight: "10px",
|
68
|
+
height: "100%"
|
69
|
+
} : {
|
51
70
|
left: "-28px",
|
52
71
|
top: "3px"
|
53
72
|
},
|
@@ -80,45 +99,67 @@ const Section = props => {
|
|
80
99
|
at: path
|
81
100
|
});
|
82
101
|
};
|
83
|
-
const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
|
84
102
|
const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
|
85
103
|
const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
|
86
104
|
backgroundImage: `url(${sectionBackgroundImage})`
|
87
105
|
} : {};
|
88
|
-
|
89
|
-
padding: {
|
90
|
-
...getTRBLBreakPoints(sectionBannerSpacing)
|
91
|
-
},
|
92
|
-
borderRadius: {
|
93
|
-
...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
|
94
|
-
}
|
95
|
-
}, theme);
|
96
|
-
const edInnerSp = groupByBreakpoint({
|
97
|
-
width: {
|
98
|
-
...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
|
99
|
-
}
|
100
|
-
}, theme);
|
101
|
-
return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
|
106
|
+
return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
|
102
107
|
component: "div",
|
103
108
|
className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
|
104
109
|
sx: {
|
105
110
|
...classes.root,
|
106
111
|
background: sectionBgColor,
|
107
112
|
...sectionBgImage,
|
108
|
-
|
113
|
+
padding: {
|
114
|
+
...getTRBLBreakPoints(sectionBannerSpacing)
|
115
|
+
},
|
116
|
+
borderRadius: {
|
117
|
+
...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
|
118
|
+
},
|
109
119
|
flexDirection: flexDirection || "column",
|
110
120
|
alignItems: horizantal,
|
111
121
|
justifyContent: vertical
|
112
122
|
},
|
123
|
+
onMouseEnter: onMouseEnter,
|
124
|
+
onMouseLeave: onMouseLeave,
|
113
125
|
children: [/*#__PURE__*/_jsxs(Box, {
|
114
126
|
className: "ed-section-inner",
|
115
127
|
sx: {
|
116
128
|
position: "relative",
|
117
|
-
|
129
|
+
width: {
|
130
|
+
...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
|
131
|
+
}
|
118
132
|
},
|
119
|
-
|
120
|
-
|
121
|
-
|
133
|
+
ref: anchorEl,
|
134
|
+
children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
|
135
|
+
open: isHovering && isSectionFullWidth,
|
136
|
+
anchorEl: anchorEl?.current,
|
137
|
+
placement: "top-start",
|
138
|
+
sx: {
|
139
|
+
zIndex: 9999
|
140
|
+
},
|
141
|
+
disablePortal: true,
|
142
|
+
ref: popperEl,
|
143
|
+
className: "sectionPopper",
|
144
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
145
|
+
sx: {
|
146
|
+
bgcolor: "background.paper",
|
147
|
+
background: "#F6F6F6",
|
148
|
+
height: "30px",
|
149
|
+
position: "relative"
|
150
|
+
},
|
151
|
+
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
152
|
+
...props,
|
153
|
+
fromPopper: true
|
154
|
+
}) : null, /*#__PURE__*/_jsx(Toolbar, {
|
155
|
+
fromPopper: true
|
156
|
+
})]
|
157
|
+
})
|
158
|
+
}) : /*#__PURE__*/_jsxs(_Fragment, {
|
159
|
+
children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
|
160
|
+
...props
|
161
|
+
}) : null, /*#__PURE__*/_jsx(Toolbar, {})]
|
162
|
+
}), children]
|
122
163
|
}), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
|
123
164
|
element: {
|
124
165
|
...element,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const SectionStyle =
|
1
|
+
const SectionStyle = () => ({
|
2
2
|
root: {
|
3
3
|
"&:hover": {
|
4
4
|
"& .dh-para": {
|
@@ -6,6 +6,9 @@ const SectionStyle = theme => ({
|
|
6
6
|
},
|
7
7
|
"& .sectionIcon": {
|
8
8
|
opacity: 1
|
9
|
+
},
|
10
|
+
"& .sectionPopper": {
|
11
|
+
opacity: 1
|
9
12
|
}
|
10
13
|
},
|
11
14
|
"& .element-toolbar": {
|
@@ -13,6 +16,14 @@ const SectionStyle = theme => ({
|
|
13
16
|
display: "block"
|
14
17
|
}
|
15
18
|
},
|
19
|
+
"& .sectionPopper": {
|
20
|
+
"&:hover": {
|
21
|
+
opacity: 1
|
22
|
+
}
|
23
|
+
},
|
24
|
+
"& .sectionPopper": {
|
25
|
+
opacity: 0
|
26
|
+
},
|
16
27
|
"& .sectionIcon": {
|
17
28
|
opacity: 0,
|
18
29
|
padding: "0px",
|
@@ -38,11 +49,6 @@ const SectionStyle = theme => ({
|
|
38
49
|
"&.active": {
|
39
50
|
opacity: 1
|
40
51
|
}
|
41
|
-
},
|
42
|
-
"& .ed-section-inner": {
|
43
|
-
[theme.breakpoints.between("xs", "md")]: {
|
44
|
-
maxWidth: `320px !important`
|
45
|
-
}
|
46
52
|
}
|
47
53
|
}
|
48
54
|
});
|
@@ -10,7 +10,6 @@ import { TableUtil } from "../../utils/table";
|
|
10
10
|
import Icon from "../Icon";
|
11
11
|
import EmojiButton from "../../Elements/Emoji/EmojiButton";
|
12
12
|
import { insertDivider } from "../../utils/divider";
|
13
|
-
import { insertFreeGrid } from "../../utils/freegrid";
|
14
13
|
import { Transforms } from "slate";
|
15
14
|
import { insertInfinityAI } from "../../utils/infinityAI";
|
16
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -41,6 +40,60 @@ const ELEMENTS_LIST = [{
|
|
41
40
|
icon: "headingThree"
|
42
41
|
}),
|
43
42
|
onInsert: editor => toggleBlock(editor, "headingThree", false)
|
43
|
+
}, {
|
44
|
+
name: "Heading 4",
|
45
|
+
desc: "",
|
46
|
+
group: "Text",
|
47
|
+
type: "headingFour",
|
48
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
49
|
+
icon: "headingFour"
|
50
|
+
}),
|
51
|
+
onInsert: editor => toggleBlock(editor, "headingFour", false)
|
52
|
+
}, {
|
53
|
+
name: "Heading 5",
|
54
|
+
desc: "",
|
55
|
+
group: "Text",
|
56
|
+
type: "headingFive",
|
57
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
58
|
+
icon: "headingFive"
|
59
|
+
}),
|
60
|
+
onInsert: editor => toggleBlock(editor, "headingFive", false)
|
61
|
+
}, {
|
62
|
+
name: "Heading 6",
|
63
|
+
desc: "",
|
64
|
+
group: "Text",
|
65
|
+
type: "headingSix",
|
66
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
67
|
+
icon: "headingSix"
|
68
|
+
}),
|
69
|
+
onInsert: editor => toggleBlock(editor, "headingSix", false)
|
70
|
+
}, {
|
71
|
+
name: "Paragraph 1",
|
72
|
+
desc: "",
|
73
|
+
group: "Text",
|
74
|
+
type: "paragraphOne",
|
75
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
76
|
+
icon: "paragraphOne"
|
77
|
+
}),
|
78
|
+
onInsert: editor => toggleBlock(editor, "paragraphOne", false)
|
79
|
+
}, {
|
80
|
+
name: "Paragraph 2",
|
81
|
+
desc: "",
|
82
|
+
group: "Text",
|
83
|
+
type: "paragraphTwo",
|
84
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
85
|
+
icon: "paragraphTwo"
|
86
|
+
}),
|
87
|
+
onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
|
88
|
+
}, {
|
89
|
+
name: "Paragraph 3",
|
90
|
+
desc: "",
|
91
|
+
group: "Text",
|
92
|
+
type: "paragraphThree",
|
93
|
+
icon: /*#__PURE__*/_jsx(Icon, {
|
94
|
+
icon: "paragraphThree"
|
95
|
+
}),
|
96
|
+
onInsert: editor => toggleBlock(editor, "paragraphThree", false)
|
44
97
|
}, {
|
45
98
|
name: "Quote",
|
46
99
|
desc: "",
|
@@ -169,17 +222,6 @@ const ELEMENTS_LIST = [{
|
|
169
222
|
onInsert: editor => {
|
170
223
|
insertGrid(editor);
|
171
224
|
}
|
172
|
-
}, {
|
173
|
-
name: "Free Grid",
|
174
|
-
group: "Elements",
|
175
|
-
desc: "",
|
176
|
-
type: "freegrid",
|
177
|
-
icon: /*#__PURE__*/_jsx(Icon, {
|
178
|
-
icon: "freegrid"
|
179
|
-
}),
|
180
|
-
onInsert: editor => {
|
181
|
-
insertFreeGrid(editor);
|
182
|
-
}
|
183
225
|
}, {
|
184
226
|
name: "Accordion",
|
185
227
|
group: "Elements",
|
@@ -20,7 +20,8 @@ const buttonStyle = [{
|
|
20
20
|
},
|
21
21
|
children: option.text
|
22
22
|
});
|
23
|
-
}
|
23
|
+
},
|
24
|
+
themeEnabled: true
|
24
25
|
}, {
|
25
26
|
label: "Font Size",
|
26
27
|
key: "textSize",
|
@@ -44,7 +45,8 @@ const buttonStyle = [{
|
|
44
45
|
}, {
|
45
46
|
label: "Button Color",
|
46
47
|
key: "bgColor",
|
47
|
-
type: "color"
|
48
|
+
type: "color",
|
49
|
+
themeEnabled: true
|
48
50
|
}, {
|
49
51
|
label: "Border Color",
|
50
52
|
key: "borderColor",
|
@@ -1,14 +1,14 @@
|
|
1
|
-
import React
|
1
|
+
import React from "react";
|
2
2
|
import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
|
3
3
|
import { squreStyle } from "./radiusStyle";
|
4
4
|
import { getBreakPointsValue } from "../../../helper/theme";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
|
+
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
|
9
10
|
const BannerSpacing = props => {
|
10
11
|
const {
|
11
|
-
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
14
|
elementProps,
|
@@ -18,16 +18,22 @@ const BannerSpacing = props => {
|
|
18
18
|
key
|
19
19
|
} = data;
|
20
20
|
const lockKeyVal = `lock${key}`;
|
21
|
-
|
21
|
+
const [size] = useWindowResize();
|
22
|
+
const {
|
23
|
+
selectedTheme
|
24
|
+
} = useEditorTheme();
|
25
|
+
const {
|
26
|
+
bannerSpacing,
|
27
|
+
lockbannerSpacing
|
28
|
+
} = selectedTheme?.elementProps?.button || {};
|
29
|
+
const isUserValue = Object.keys(props?.value || {})?.length;
|
30
|
+
const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
|
31
|
+
const val = isUserValue ? props?.value : bannerSpacing;
|
32
|
+
let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
|
22
33
|
if (lockSpacing === undefined) {
|
23
34
|
lockSpacing = true;
|
24
35
|
}
|
25
|
-
const
|
26
|
-
const pro_value = getBreakPointsValue(val, size?.device);
|
27
|
-
const [value, setValue] = useState(pro_value);
|
28
|
-
useState(() => {
|
29
|
-
setValue(pro_value);
|
30
|
-
}, [pro_value]);
|
36
|
+
const value = getBreakPointsValue(val, size?.device);
|
31
37
|
const handleChange = e => {
|
32
38
|
let changeAll = {};
|
33
39
|
if (lockSpacing) {
|
@@ -35,16 +41,13 @@ const BannerSpacing = props => {
|
|
35
41
|
changeAll[m] = e.target.value;
|
36
42
|
});
|
37
43
|
}
|
38
|
-
const up_value = {
|
39
|
-
...value,
|
40
|
-
...changeAll,
|
41
|
-
[e.target.name]: e.target.value
|
42
|
-
};
|
43
44
|
onChange({
|
44
45
|
[key]: {
|
45
46
|
...getBreakPointsValue(val, null),
|
46
47
|
[size?.device]: {
|
47
|
-
...
|
48
|
+
...value,
|
49
|
+
...changeAll,
|
50
|
+
[e.target.name]: e.target.value
|
48
51
|
}
|
49
52
|
}
|
50
53
|
});
|
@@ -85,7 +88,7 @@ const BannerSpacing = props => {
|
|
85
88
|
component: "input",
|
86
89
|
sx: classes.sapcingInput,
|
87
90
|
name: "top",
|
88
|
-
value: !lockSpacing ? "" :
|
91
|
+
value: !lockSpacing ? "" : value?.top || 0,
|
89
92
|
className: "sliderInput",
|
90
93
|
disabled: !lockSpacing,
|
91
94
|
onChange: handleChange
|
@@ -3,27 +3,35 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/
|
|
3
3
|
import { radiusStyle } from "./radiusStyle";
|
4
4
|
import useWindowResize from "../../../hooks/useWindowResize";
|
5
5
|
import { getBreakPointsValue } from "../../../helper/theme";
|
6
|
+
import { useEditorTheme } from "../../../hooks/useEditorTheme";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
9
10
|
const BorderRadius = props => {
|
10
11
|
const {
|
11
|
-
value: val,
|
12
12
|
data,
|
13
13
|
onChange,
|
14
14
|
elementProps,
|
15
15
|
classes
|
16
16
|
} = props;
|
17
|
-
let {
|
18
|
-
lockRadius
|
19
|
-
} = elementProps;
|
20
|
-
if (lockRadius === undefined) {
|
21
|
-
lockRadius = true;
|
22
|
-
}
|
23
17
|
const {
|
24
18
|
key
|
25
19
|
} = data;
|
26
20
|
const [size] = useWindowResize();
|
21
|
+
const {
|
22
|
+
selectedTheme
|
23
|
+
} = useEditorTheme();
|
24
|
+
const {
|
25
|
+
borderRadius,
|
26
|
+
lockRadius: themeLockRadius
|
27
|
+
} = selectedTheme?.elementProps?.button || {};
|
28
|
+
const isUserValue = Object.keys(props?.value || {})?.length;
|
29
|
+
const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
|
30
|
+
const val = isUserValue ? props?.value : borderRadius;
|
31
|
+
let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
|
32
|
+
if (lockRadius === undefined) {
|
33
|
+
lockRadius = true;
|
34
|
+
}
|
27
35
|
const value = getBreakPointsValue(val, size?.device);
|
28
36
|
const handleChange = e => {
|
29
37
|
let changeAll = {};
|
@@ -1,22 +1,44 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useMemo, useState } from "react";
|
2
2
|
import { Grid, TextField, InputAdornment, Typography } from "@mui/material";
|
3
3
|
import ColorPickerButton from "../../ColorPickerButton";
|
4
|
+
import { useSlateStatic } from "slate-react";
|
5
|
+
import { getElementStyle, getVariableValue } from "../../../helper/theme";
|
4
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const MAP_STYLE_PROPS = {
|
9
|
+
bgColor: "background-color",
|
10
|
+
textColor: "color"
|
11
|
+
};
|
6
12
|
const Color = props => {
|
7
13
|
const {
|
8
|
-
value,
|
14
|
+
value: val,
|
9
15
|
data,
|
10
16
|
onChange,
|
11
|
-
classes
|
17
|
+
classes,
|
18
|
+
elementProps,
|
19
|
+
handleClose,
|
20
|
+
customProps
|
12
21
|
} = props;
|
13
22
|
const {
|
14
23
|
key,
|
15
24
|
label
|
16
25
|
} = data;
|
17
26
|
const [recentColors, setRecentColors] = useState({});
|
27
|
+
const editor = useSlateStatic();
|
28
|
+
const {
|
29
|
+
value,
|
30
|
+
inputValue
|
31
|
+
} = useMemo(() => {
|
32
|
+
const isVariable = val && val.startsWith("var");
|
33
|
+
const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
|
34
|
+
const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
|
35
|
+
return {
|
36
|
+
value: value || val,
|
37
|
+
inputValue: inputValue || val
|
38
|
+
};
|
39
|
+
}, [editor, val]);
|
18
40
|
useEffect(() => {
|
19
|
-
const storedColors = JSON.parse(localStorage.getItem(
|
41
|
+
const storedColors = JSON.parse(localStorage.getItem("recentColors"));
|
20
42
|
if (storedColors) {
|
21
43
|
setRecentColors(storedColors);
|
22
44
|
}
|
@@ -39,7 +61,7 @@ const Color = props => {
|
|
39
61
|
[key]: updatedColors
|
40
62
|
};
|
41
63
|
setRecentColors(updatedColors);
|
42
|
-
localStorage.setItem(
|
64
|
+
localStorage.setItem("recentColors", JSON.stringify(updatedColors));
|
43
65
|
};
|
44
66
|
return /*#__PURE__*/_jsxs(Grid, {
|
45
67
|
item: true,
|
@@ -56,7 +78,7 @@ const Color = props => {
|
|
56
78
|
children: label
|
57
79
|
}), /*#__PURE__*/_jsx(TextField, {
|
58
80
|
fullWidth: true,
|
59
|
-
value:
|
81
|
+
value: inputValue,
|
60
82
|
placeholder: `${label} color code`,
|
61
83
|
InputLabelProps: {
|
62
84
|
shrink: true
|
@@ -68,7 +90,9 @@ const Color = props => {
|
|
68
90
|
classes: classes,
|
69
91
|
value: value,
|
70
92
|
onSave: onSave,
|
71
|
-
recentColors: recentColors[key]
|
93
|
+
recentColors: recentColors[key],
|
94
|
+
handleClose: handleClose,
|
95
|
+
disableEditTheme: customProps?.disableEditTheme
|
72
96
|
})
|
73
97
|
})
|
74
98
|
}
|
@@ -1,19 +1,26 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useMemo } from "react";
|
2
2
|
import { TextField, IconButton, Grid, Typography } from "@mui/material";
|
3
3
|
import { sizeMap } from "../../../utils/font.js";
|
4
4
|
import { TextMinusIcon, TextPlusIcon } from "../../../common/iconslist.js";
|
5
|
+
import { getElementStyle } from "../../../helper/theme.js";
|
6
|
+
import { useSlateStatic } from "slate-react";
|
5
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
9
|
const FontSize = props => {
|
8
10
|
const {
|
9
|
-
value,
|
11
|
+
value: val,
|
10
12
|
data,
|
11
|
-
onChange
|
13
|
+
onChange,
|
14
|
+
elementProps
|
12
15
|
} = props;
|
13
16
|
const {
|
14
17
|
key,
|
15
18
|
width
|
16
19
|
} = data;
|
20
|
+
const editor = useSlateStatic();
|
21
|
+
const value = useMemo(() => {
|
22
|
+
return getElementStyle(editor, elementProps, "font-size") || val;
|
23
|
+
}, [editor, val]);
|
17
24
|
const handleChange = e => {
|
18
25
|
let inc = parseInt(e.target.value) || 16;
|
19
26
|
inc = inc > 200 ? 200 : inc;
|
@@ -24,7 +31,9 @@ const FontSize = props => {
|
|
24
31
|
const getSizeVal = () => {
|
25
32
|
try {
|
26
33
|
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
27
|
-
|
34
|
+
const defaultSize = 16;
|
35
|
+
const val = parseInt(size || defaultSize);
|
36
|
+
return isNaN(val) ? defaultSize : val;
|
28
37
|
} catch (err) {
|
29
38
|
return "";
|
30
39
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useEffect, useState, useRef } from "react";
|
2
2
|
import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -6,12 +6,23 @@ const SelectBox = props => {
|
|
6
6
|
const {
|
7
7
|
value,
|
8
8
|
data,
|
9
|
-
onChange
|
9
|
+
onChange,
|
10
|
+
elementProps
|
10
11
|
} = props;
|
11
12
|
const {
|
12
13
|
key,
|
13
14
|
placeholder
|
14
15
|
} = data;
|
16
|
+
const [checkedValue, setCheckedValue] = useState(false);
|
17
|
+
const isFirstRender = useRef(true);
|
18
|
+
useEffect(() => {
|
19
|
+
if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
|
20
|
+
setCheckedValue(true);
|
21
|
+
isFirstRender.current = false;
|
22
|
+
} else {
|
23
|
+
setCheckedValue(value);
|
24
|
+
}
|
25
|
+
}, [elementProps.element, value]);
|
15
26
|
const handleChange = e => {
|
16
27
|
onChange({
|
17
28
|
[key]: e.target.checked
|
@@ -26,7 +37,7 @@ const SelectBox = props => {
|
|
26
37
|
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
27
38
|
control: /*#__PURE__*/_jsx(Checkbox, {
|
28
39
|
value: value,
|
29
|
-
checked:
|
40
|
+
checked: checkedValue,
|
30
41
|
onChange: handleChange
|
31
42
|
}),
|
32
43
|
label: placeholder
|