@flozy/editor 10.4.2 → 10.4.4
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 +16 -17
- package/dist/Editor/CommonEditor.js +16 -131
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -46
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/Accordion/Accordion.js +9 -46
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +23 -1
- package/dist/Editor/Elements/AppHeader/AppHeader.js +5 -10
- package/dist/Editor/Elements/Button/EditorButton.js +9 -27
- package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
- package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +26 -26
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +5 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -0
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +1 -0
- package/dist/Editor/Elements/Form/FormField.js +2 -3
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -35
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +0 -1
- package/dist/Editor/Elements/FreeGrid/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +1 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -14
- package/dist/Editor/Elements/Grid/Grid.js +2 -14
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/Signature/Signature.css +1 -2
- package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/DragButton.js +1 -0
- package/dist/Editor/Elements/Table/Draggable.js +2 -6
- package/dist/Editor/Elements/Table/Styles.js +0 -7
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +5 -24
- package/dist/Editor/Elements/Title/title.js +6 -6
- package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
- package/dist/Editor/MiniEditor.js +1 -2
- package/dist/Editor/Styles/EditorStyles.js +5 -5
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
- package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +10 -58
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +16 -41
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/ImageSelector.js +2 -2
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +65 -45
- package/dist/Editor/common/LinkSettings/index.js +28 -14
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +244 -164
- package/dist/Editor/common/MentionsPopup/index.js +1 -4
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +5 -4
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/styles.js +1 -0
- package/dist/Editor/common/RnD/OptionsPopup/style.js +1 -0
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -11
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
- package/dist/Editor/common/RnD/Utils/index.js +1 -3
- package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +58 -42
- package/dist/Editor/common/RnD/VirtualElement/helper.js +132 -323
- package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
- package/dist/Editor/common/RnD/index.js +39 -68
- package/dist/Editor/common/Select/index.js +7 -44
- package/dist/Editor/common/Select/styles.js +2 -30
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -2
- package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js +9 -12
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +12 -14
- package/dist/Editor/common/Uploader.js +0 -16
- package/dist/Editor/common/iconListV2.js +0 -76
- package/dist/Editor/common/iconslist.js +0 -21
- package/dist/Editor/commonStyle.js +61 -116
- package/dist/Editor/helper/index.js +1 -5
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +3 -9
- package/dist/Editor/hooks/useTable.js +4 -5
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -3
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +37 -161
- package/dist/Editor/utils/accordion.js +4 -14
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/events.js +6 -50
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/formfield.js +0 -1
- package/dist/Editor/utils/helper.js +26 -210
- package/dist/Editor/utils/insertAppHeader.js +1 -1
- package/dist/Editor/utils/signature.js +9 -2
- package/package.json +4 -4
- package/dist/Editor/Elements/FreeGrid/helper.js +0 -115
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- package/dist/Editor/common/Checkbox/index.js +0 -46
- package/dist/Editor/common/Checkbox/styles.js +0 -45
- package/dist/Editor/common/CustomColorPicker/index.js +0 -130
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog2/index.js +0 -94
- package/dist/Editor/common/CustomDialog2/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -43
- package/dist/Editor/common/RadioGroup/index.js +0 -48
- package/dist/Editor/common/RadioGroup/styles.js +0 -29
- package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/embedUpload.js +0 -115
- package/dist/Editor/helper/textIndeces.js +0 -58
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/hooks/useThemeValues.js +0 -63
- package/dist/Editor/theme/index.js +0 -149
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
- package/dist/Editor/themeSettings/buttons/index.js +0 -300
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -240
- package/dist/Editor/themeSettings/fonts/style.js +0 -62
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -380
- package/dist/Editor/themeSettings/style.js +0 -299
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -355
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
- package/dist/Editor/themeSettingsAI/style.js +0 -332
- package/dist/Editor/utils/updateFormName.js +0 -22
@@ -1,5 +1,5 @@
|
|
1
|
-
import React, {
|
2
|
-
import {
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
3
|
import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
4
4
|
import AccordionBtnPopup from "./AccordionBtnPopup";
|
5
5
|
import { IconButton, Tooltip, Box } from "@mui/material";
|
@@ -8,8 +8,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
|
|
8
8
|
import Icon from "../../common/Icon";
|
9
9
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
10
10
|
import useCommonStyle from "../../commonStyle";
|
11
|
-
import { getBorderColor, getTextColor } from "../../helper";
|
12
|
-
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
13
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
13
|
const accordionBtnStyleKeys = {
|
@@ -80,34 +78,12 @@ const Accordion = props => {
|
|
80
78
|
const path = ReactEditor.findPath(editor, element);
|
81
79
|
const {
|
82
80
|
textColor,
|
83
|
-
bgColor
|
84
|
-
borderColor
|
81
|
+
bgColor
|
85
82
|
} = element;
|
86
|
-
const accordionSummary = element?.children?.find(c => c.type === "accordion-summary");
|
87
|
-
const {
|
88
|
-
textColor: childTextColor,
|
89
|
-
borderRadius,
|
90
|
-
bannerSpacing
|
91
|
-
} = accordionSummary || {};
|
92
|
-
const borderStyle = getBorderColor(borderColor);
|
93
83
|
const {
|
94
84
|
theme
|
95
85
|
} = useEditorContext();
|
96
86
|
const classes = useCommonStyle(theme);
|
97
|
-
useEffect(() => {
|
98
|
-
if (!editor.selection || !children[1]) return;
|
99
|
-
try {
|
100
|
-
const accordionDetailsElement = element.children?.[1];
|
101
|
-
const detailsPath = ReactEditor.findPath(editor, accordionDetailsElement);
|
102
|
-
const detailsRange = Editor.range(editor, detailsPath);
|
103
|
-
const isInside = Range.intersection(detailsRange, editor.selection);
|
104
|
-
if (isInside && !toggle) {
|
105
|
-
setToggle(true);
|
106
|
-
}
|
107
|
-
} catch (e) {
|
108
|
-
console.error(e);
|
109
|
-
}
|
110
|
-
}, [editor.selection, children]);
|
111
87
|
const onToggle = () => {
|
112
88
|
setToggle(!toggle);
|
113
89
|
};
|
@@ -183,29 +159,17 @@ const Accordion = props => {
|
|
183
159
|
const onClose = () => {
|
184
160
|
setOpenSettings(false);
|
185
161
|
};
|
186
|
-
|
187
|
-
const borderRadiusStyles = {
|
188
|
-
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
189
|
-
};
|
190
|
-
const padding = getTRBLBreakPoints(bannerSpacing);
|
191
|
-
return /*#__PURE__*/_jsxs(Box, {
|
162
|
+
return /*#__PURE__*/_jsxs("div", {
|
192
163
|
className: `accordion-container`,
|
193
164
|
...attributes,
|
194
165
|
style: {
|
195
166
|
position: "relative"
|
196
167
|
},
|
197
|
-
component: "div",
|
198
|
-
sx: {
|
199
|
-
background: bgColor,
|
200
|
-
...borderStyle,
|
201
|
-
borderRadius: borderRadiusStyles,
|
202
|
-
padding,
|
203
|
-
'& span[data-slate-string="true"]': textStyles
|
204
|
-
},
|
205
168
|
children: [/*#__PURE__*/_jsxs("div", {
|
206
|
-
className: "accordion-title"
|
207
|
-
|
208
|
-
|
169
|
+
className: "accordion-title",
|
170
|
+
style: {
|
171
|
+
background: bgColor
|
172
|
+
},
|
209
173
|
onClick: onToggle,
|
210
174
|
children: [/*#__PURE__*/_jsx(Box, {
|
211
175
|
role: "button",
|
@@ -227,8 +191,7 @@ const Accordion = props => {
|
|
227
191
|
icon: "accordionArrowDown"
|
228
192
|
})
|
229
193
|
}), children[0]]
|
230
|
-
}), /*#__PURE__*/_jsx(
|
231
|
-
component: "div",
|
194
|
+
}), /*#__PURE__*/_jsx("div", {
|
232
195
|
className: "accordion-content",
|
233
196
|
style: {
|
234
197
|
display: toggle ? "block" : "none"
|
@@ -1,5 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import { getBorderColor, getTextColor } from "../../helper";
|
2
3
|
import { Box } from "@mui/material";
|
4
|
+
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
3
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
6
|
const AccordionSummary = props => {
|
5
7
|
const {
|
@@ -7,12 +9,32 @@ const AccordionSummary = props => {
|
|
7
9
|
children,
|
8
10
|
element
|
9
11
|
} = props;
|
12
|
+
const {
|
13
|
+
textColor,
|
14
|
+
bgColor,
|
15
|
+
borderColor,
|
16
|
+
borderRadius,
|
17
|
+
bannerSpacing
|
18
|
+
} = element;
|
19
|
+
const textStyles = getTextColor(textColor);
|
20
|
+
const borderStyle = getBorderColor(borderColor);
|
10
21
|
return /*#__PURE__*/_jsx(Box, {
|
11
22
|
className: `accordion-summary-container`,
|
12
23
|
...attributes,
|
13
24
|
style: {
|
14
25
|
width: "100%",
|
15
|
-
position: "relative"
|
26
|
+
position: "relative",
|
27
|
+
background: bgColor,
|
28
|
+
...borderStyle
|
29
|
+
},
|
30
|
+
sx: {
|
31
|
+
borderRadius: {
|
32
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
33
|
+
},
|
34
|
+
padding: {
|
35
|
+
...getTRBLBreakPoints(bannerSpacing)
|
36
|
+
},
|
37
|
+
'& span[data-slate-string="true"]': textStyles
|
16
38
|
},
|
17
39
|
component: "div",
|
18
40
|
children: children
|
@@ -18,7 +18,7 @@ import Typography from "@mui/material/Typography";
|
|
18
18
|
import Button from "@mui/material/Button";
|
19
19
|
import AppHeaderPopup from "./AppHeaderPopup";
|
20
20
|
import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
|
21
|
-
import { handleLinkType
|
21
|
+
import { handleLinkType } from "../../utils/helper";
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
23
23
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
24
24
|
import { createElement as _createElement } from "react";
|
@@ -45,8 +45,6 @@ function AppHeader(props) {
|
|
45
45
|
bgColorHover,
|
46
46
|
textColor,
|
47
47
|
textColorHover,
|
48
|
-
borderColor,
|
49
|
-
borderColorHover,
|
50
48
|
menuStyle,
|
51
49
|
bannerSpacing,
|
52
50
|
fontSize,
|
@@ -151,7 +149,7 @@ function AppHeader(props) {
|
|
151
149
|
}) : appTitle
|
152
150
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
|
153
151
|
children: menus.map((item, i) => {
|
154
|
-
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank"
|
152
|
+
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
|
155
153
|
const onButtonClick = e => {
|
156
154
|
closeDrawer();
|
157
155
|
setTimeout(() => {
|
@@ -227,7 +225,6 @@ function AppHeader(props) {
|
|
227
225
|
sx: {
|
228
226
|
...elevateStyle,
|
229
227
|
background: bgColor,
|
230
|
-
border: isHavingColor(borderColor) ? `1px solid ${borderColor}` : "none",
|
231
228
|
boxShadow: "none",
|
232
229
|
...appbarSp,
|
233
230
|
zIndex: 999
|
@@ -268,7 +265,7 @@ function AppHeader(props) {
|
|
268
265
|
style: {
|
269
266
|
display: "inline-flex",
|
270
267
|
alignItems: "center",
|
271
|
-
color: textColor
|
268
|
+
color: textColor,
|
272
269
|
fontSize: logoFontSize,
|
273
270
|
fontFamily: titleFontFamily,
|
274
271
|
justifyContent: isLogoRight ? "end" : "start"
|
@@ -323,9 +320,8 @@ function AppHeader(props) {
|
|
323
320
|
fontFamily: fontFamily,
|
324
321
|
textTransform: "none",
|
325
322
|
fontSize: fontSize || "16px",
|
326
|
-
color: textColor || "#
|
323
|
+
color: textColor || "#FFF",
|
327
324
|
background: bgColor || "none",
|
328
|
-
border: borderColorHover ? `1px solid transparent` : "none",
|
329
325
|
"& .m-settings": {
|
330
326
|
display: "none",
|
331
327
|
position: "absolute",
|
@@ -339,9 +335,8 @@ function AppHeader(props) {
|
|
339
335
|
background: "#FFF"
|
340
336
|
},
|
341
337
|
"&:hover": {
|
342
|
-
color: textColorHover || textColor || "#
|
338
|
+
color: textColorHover || textColor || "#FFF",
|
343
339
|
background: bgColorHover || bgColor || "none",
|
344
|
-
border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
|
345
340
|
"& .m-settings": {
|
346
341
|
display: "block"
|
347
342
|
}
|
@@ -9,8 +9,6 @@ import { WorkflowIcon } from "../../common/iconslist";
|
|
9
9
|
import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
10
10
|
import { handleLinkType, windowVar } from "../../utils/helper";
|
11
11
|
import LinkSettings from "../../common/LinkSettings";
|
12
|
-
import { useEditorTheme } from "../../hooks/useEditorTheme";
|
13
|
-
import { getTheme } from "../../theme";
|
14
12
|
import Icon from "../../common/Icon";
|
15
13
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
16
14
|
import useCommonStyle from "../../commonStyle";
|
@@ -42,12 +40,6 @@ const EditorButton = props => {
|
|
42
40
|
const [openMoreOptions, setOpenMoreOptions] = useState(false);
|
43
41
|
const [, setIconLoaded] = useState(false);
|
44
42
|
const classes = useCommonStyle(appTheme);
|
45
|
-
const {
|
46
|
-
theme: selectedTheme
|
47
|
-
} = useEditorTheme();
|
48
|
-
const {
|
49
|
-
buttonTheme
|
50
|
-
} = getTheme(selectedTheme);
|
51
43
|
const {
|
52
44
|
label,
|
53
45
|
bgColor,
|
@@ -61,8 +53,7 @@ const EditorButton = props => {
|
|
61
53
|
fontFamily,
|
62
54
|
textColorHover,
|
63
55
|
bgColorHover,
|
64
|
-
|
65
|
-
// buttonIcon,
|
56
|
+
buttonIcon,
|
66
57
|
iconPosition = "start",
|
67
58
|
borderStyle,
|
68
59
|
borderWidth,
|
@@ -83,7 +74,6 @@ const EditorButton = props => {
|
|
83
74
|
};
|
84
75
|
const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
|
85
76
|
const refURl = isTrigger ? buttonLink?.url : url;
|
86
|
-
const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
|
87
77
|
const BtnIcon = buttonIcon ? buttonIcon : null;
|
88
78
|
windowVar.lastButtonProps = element;
|
89
79
|
const handleTrigger = async () => {
|
@@ -106,7 +96,7 @@ const EditorButton = props => {
|
|
106
96
|
};
|
107
97
|
const buttonProps = handleLinkType(refURl, linkType, true,
|
108
98
|
// button functionalities have to work on both edit mode and normal mode
|
109
|
-
openInNewTab, handleTrigger, metadata
|
99
|
+
openInNewTab, handleTrigger, metadata);
|
110
100
|
const onMenuClick = val => () => {
|
111
101
|
switch (val) {
|
112
102
|
case "edit":
|
@@ -174,7 +164,6 @@ const EditorButton = props => {
|
|
174
164
|
display: "inline-flex",
|
175
165
|
color: "rgba(0, 0, 0, 0.54)",
|
176
166
|
marginBottom: "0px !important",
|
177
|
-
...classes.buttonMoreOption,
|
178
167
|
...classes.buttonMoreOption3
|
179
168
|
},
|
180
169
|
...btnProps,
|
@@ -275,14 +264,19 @@ const EditorButton = props => {
|
|
275
264
|
display: "inline-block"
|
276
265
|
},
|
277
266
|
children: [/*#__PURE__*/_jsxs(Box, {
|
278
|
-
className: `btn textAlign-${tAlign} button theme-element`,
|
279
267
|
ref: buttonRef,
|
268
|
+
className: `btn textAlign-${tAlign}`,
|
280
269
|
sx: {
|
281
270
|
textDecoration: "none",
|
271
|
+
background: bgColor || "rgb(30, 75, 122)",
|
282
272
|
borderBlockStyle: "solid",
|
283
|
-
|
273
|
+
borderColor: borderColor || "transparent",
|
274
|
+
borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
|
284
275
|
...btnSp,
|
285
276
|
borderStyle: borderStyle || "solid",
|
277
|
+
color: `${textColor || "#FFFFFF"}`,
|
278
|
+
fontSize: textSize || "inherit",
|
279
|
+
fontFamily: fontFamily || "PoppinsRegular",
|
286
280
|
display: "inline-flex",
|
287
281
|
alignItems: "center",
|
288
282
|
position: "relative",
|
@@ -293,21 +287,9 @@ const EditorButton = props => {
|
|
293
287
|
"&:hover": {
|
294
288
|
color: `${textColorHover || textColor || "#FFFFFF"}`,
|
295
289
|
background: bgColorHover || bgColor || "rgb(30, 75, 122)",
|
296
|
-
borderColor: borderColorHover || borderColor || "",
|
297
290
|
"& .element-toolbar": {
|
298
291
|
display: "flex"
|
299
292
|
}
|
300
|
-
},
|
301
|
-
color: textColor ? `${textColor} !important` : "#FFFFFF",
|
302
|
-
fontSize: textSize ? `${textSize}px !important` : "inherit",
|
303
|
-
fontFamily: fontFamily ? `${fontFamily} !important` : "PoppinsRegular",
|
304
|
-
background: `${bgColor} !important`,
|
305
|
-
borderColor: `${borderColor} !important`,
|
306
|
-
borderRadius: {
|
307
|
-
...getBreakPointsValue(borderRadius || buttonTheme?.borderRadius || {}, null, "overrideBorderRadius", true)
|
308
|
-
},
|
309
|
-
padding: {
|
310
|
-
...getTRBLBreakPoints(bannerSpacing || buttonTheme?.bannerSpacing || {})
|
311
293
|
}
|
312
294
|
},
|
313
295
|
...buttonProps,
|
@@ -1,15 +1,11 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Box, IconButton, Popover
|
2
|
+
import { Box, IconButton, Popover } from "@mui/material";
|
3
3
|
import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
|
4
4
|
import Button from "../../common/Button";
|
5
5
|
import { colors } from "./defaultColors";
|
6
6
|
import ColorPicker from "./colorPicker.svg";
|
7
|
-
import { useSlateStatic } from "slate-react";
|
8
|
-
import { Transforms } from "slate";
|
9
|
-
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
13
9
|
let c = [];
|
14
10
|
const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
|
15
11
|
if (i % 7 === 0) {
|
@@ -36,8 +32,8 @@ const SingleColorButton = ({
|
|
36
32
|
width: "100%",
|
37
33
|
display: "flex",
|
38
34
|
alignItems: "center",
|
39
|
-
padding: padding || "8px 0px"
|
40
|
-
|
35
|
+
padding: padding || "8px 0px",
|
36
|
+
justifyContent: "center"
|
41
37
|
},
|
42
38
|
children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
|
43
39
|
onClick: handleSelect(m),
|
@@ -114,18 +110,12 @@ const ColorButtons = props => {
|
|
114
110
|
openColorTool,
|
115
111
|
onClose,
|
116
112
|
onColorPickerClick,
|
117
|
-
disableEditTheme,
|
118
113
|
defaultColors = []
|
119
114
|
} = props;
|
120
115
|
const [row1, ...restRows] = ColorChunks([]);
|
121
116
|
const [anchorEl, setAnchorEl] = useState(null);
|
122
117
|
const open = Boolean(anchorEl);
|
123
118
|
const firstRow = defaultColors?.length ? defaultColors : row1;
|
124
|
-
const theme = useTheme();
|
125
|
-
const editor = useSlateStatic();
|
126
|
-
const {
|
127
|
-
setOpenTheme
|
128
|
-
} = useEditorContext();
|
129
119
|
const handleMore = e => {
|
130
120
|
setAnchorEl(e.currentTarget);
|
131
121
|
};
|
@@ -138,7 +128,6 @@ const ColorButtons = props => {
|
|
138
128
|
const handleSelect = color => () => {
|
139
129
|
onSelect(color);
|
140
130
|
};
|
141
|
-
const colorVars = theme?.vars?.colors || {};
|
142
131
|
return /*#__PURE__*/_jsxs(Box, {
|
143
132
|
component: "span",
|
144
133
|
sx: classes.colorButtons,
|
@@ -155,7 +144,7 @@ const ColorButtons = props => {
|
|
155
144
|
activeColor: activeColor
|
156
145
|
}, `si_btn_row1_${m}_${i}`);
|
157
146
|
})
|
158
|
-
}), /*#__PURE__*/
|
147
|
+
}), /*#__PURE__*/_jsxs(Popover, {
|
159
148
|
open: open || openColorTool,
|
160
149
|
anchorEl: anchorEl || openColorTool,
|
161
150
|
onClose: handleClose,
|
@@ -169,40 +158,9 @@ const ColorButtons = props => {
|
|
169
158
|
},
|
170
159
|
sx: classes.colorPopper,
|
171
160
|
className: "colorPopper",
|
172
|
-
children: /*#__PURE__*/
|
161
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
173
162
|
sx: classes.colorButtonsInner,
|
174
|
-
children:
|
175
|
-
children: [/*#__PURE__*/_jsxs(Box, {
|
176
|
-
component: "div",
|
177
|
-
className: "singleColorTitleWrapper",
|
178
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
179
|
-
variant: "subtitle2",
|
180
|
-
children: "Theme colours"
|
181
|
-
}), disableEditTheme ? null : /*#__PURE__*/_jsx("div", {
|
182
|
-
className: "editBtn",
|
183
|
-
onClick: () => {
|
184
|
-
Transforms.deselect(editor, {
|
185
|
-
at: editor.selection
|
186
|
-
});
|
187
|
-
handleClose();
|
188
|
-
setOpenTheme("editThemeColor");
|
189
|
-
},
|
190
|
-
children: "Edit"
|
191
|
-
})]
|
192
|
-
}), /*#__PURE__*/_jsx(SingleColorButton, {
|
193
|
-
crs: Object.values(colorVars),
|
194
|
-
handleSelect: handleSelect,
|
195
|
-
classes: classes,
|
196
|
-
activeColor: activeColor
|
197
|
-
})]
|
198
|
-
}) : null, /*#__PURE__*/_jsx(Box, {
|
199
|
-
component: "div",
|
200
|
-
className: "singleColorTitleWrapper",
|
201
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
202
|
-
variant: "subtitle2",
|
203
|
-
children: "Custom colour"
|
204
|
-
})
|
205
|
-
}), restRows.map((m, i) => {
|
163
|
+
children: restRows.map((m, i) => {
|
206
164
|
return /*#__PURE__*/_jsx(SingleColorButton, {
|
207
165
|
id: `p2_${id}`,
|
208
166
|
crs: m,
|
@@ -211,19 +169,14 @@ const ColorButtons = props => {
|
|
211
169
|
classes: classes,
|
212
170
|
activeColor: activeColor
|
213
171
|
}, `si_btn_${m}_${i}`);
|
214
|
-
})
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
src: ColorPicker,
|
223
|
-
alt: "color wheel"
|
224
|
-
})
|
225
|
-
}) : null]
|
226
|
-
})
|
172
|
+
})
|
173
|
+
}), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
|
174
|
+
onClick: onColorPickerClick,
|
175
|
+
children: /*#__PURE__*/_jsx("img", {
|
176
|
+
src: ColorPicker,
|
177
|
+
alt: "color wheel"
|
178
|
+
})
|
179
|
+
}) : null]
|
227
180
|
})]
|
228
181
|
});
|
229
182
|
};
|
@@ -60,28 +60,4 @@
|
|
60
60
|
padding: 0 15px !important;
|
61
61
|
width: 60px !important;
|
62
62
|
flex-shrink: 0;
|
63
|
-
}
|
64
|
-
|
65
|
-
|
66
|
-
.singleColorTitleWrapper {
|
67
|
-
display: flex;
|
68
|
-
justify-content: space-between;
|
69
|
-
align-items: center;
|
70
|
-
padding: 10px;
|
71
|
-
width: 100%;
|
72
|
-
border-bottom: 1px solid #DCE4EC;
|
73
|
-
}
|
74
|
-
|
75
|
-
.singleColorTitleWrapper .MuiTypography-root {
|
76
|
-
font-weight: 600;
|
77
|
-
}
|
78
|
-
|
79
|
-
.singleColorTitleWrapper .editBtn {
|
80
|
-
text-transform: none;
|
81
|
-
color: #2563EB;
|
82
|
-
text-decoration: underline;
|
83
|
-
padding: 0px;
|
84
|
-
min-width: unset;
|
85
|
-
cursor: pointer;
|
86
|
-
font-size: 14px;
|
87
|
-
}
|
63
|
+
}
|
@@ -1,14 +1,13 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
-
import
|
3
|
+
import ColorPickerTool from "react-gcolor-picker";
|
4
|
+
import { IconButton, Tooltip, Box, Popover } from "@mui/material";
|
4
5
|
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
5
6
|
import ColorButtons from "./ColorButtons";
|
6
7
|
import ColorPickerStyles from "./Styles";
|
7
8
|
import colorWheel from "./colorWheel.png";
|
8
9
|
import "./ColorPicker.css";
|
9
10
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
|
-
import CustomColorPicker from "../../common/CustomColorPicker";
|
11
|
-
import { getSelectedElementColor } from "../../utils/helper";
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
12
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
14
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -26,8 +25,7 @@ const ColorPicker = props => {
|
|
26
25
|
classes,
|
27
26
|
forMiniTool,
|
28
27
|
openColorTool,
|
29
|
-
closeColorTool
|
30
|
-
type
|
28
|
+
closeColorTool
|
31
29
|
} = props;
|
32
30
|
const {
|
33
31
|
theme
|
@@ -36,7 +34,6 @@ const ColorPicker = props => {
|
|
36
34
|
const [anchorEl, setAnchorEl] = useState(null);
|
37
35
|
const open = Boolean(anchorEl);
|
38
36
|
const pickerStyles = ColorPickerStyles(theme);
|
39
|
-
const muiTheme = useTheme();
|
40
37
|
const onOpen = e => {
|
41
38
|
e.preventDefault();
|
42
39
|
setAnchorEl(e.currentTarget);
|
@@ -61,7 +58,7 @@ const ColorPicker = props => {
|
|
61
58
|
setAnchorEl(null);
|
62
59
|
setSelection(null);
|
63
60
|
};
|
64
|
-
const activeColor =
|
61
|
+
const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
|
65
62
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
66
63
|
children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
|
67
64
|
title: title,
|
@@ -99,10 +96,10 @@ const ColorPicker = props => {
|
|
99
96
|
horizontal: "top"
|
100
97
|
},
|
101
98
|
sx: classes.colorPickerPopup,
|
102
|
-
children: /*#__PURE__*/_jsx(
|
99
|
+
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
103
100
|
gradient: true,
|
104
|
-
|
105
|
-
|
101
|
+
value: activeColor,
|
102
|
+
onChange: handleFormSubmit
|
106
103
|
})
|
107
104
|
})]
|
108
105
|
});
|
@@ -20,26 +20,24 @@ const ColorPickerStyles = theme => ({
|
|
20
20
|
background: `${theme?.palette?.editor?.miniToolBarBackground}`,
|
21
21
|
border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
|
22
22
|
borderRadius: "7px !important",
|
23
|
-
padding: "0px
|
24
|
-
|
23
|
+
padding: "0px 5px",
|
24
|
+
'@media only screen and (max-width: 600px)': {
|
25
25
|
marginTop: "-40px"
|
26
26
|
}
|
27
27
|
}
|
28
28
|
},
|
29
29
|
colorButtonSingle: {
|
30
|
-
border: "1.5px solid #DCE4EC !important",
|
31
30
|
"&.active": {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
outline: "2px solid #2563EB"
|
31
|
+
"&:before": {
|
32
|
+
content: '" "',
|
33
|
+
position: "absolute",
|
34
|
+
top: "-4px",
|
35
|
+
left: "-4px",
|
36
|
+
width: "calc(100% + 8px)",
|
37
|
+
height: "calc(100% + 8px)",
|
38
|
+
border: "2px solid #2563EB",
|
39
|
+
borderRadius: "50%"
|
40
|
+
}
|
43
41
|
}
|
44
42
|
},
|
45
43
|
colorButtonsInner: {
|
@@ -61,7 +59,7 @@ const ColorPickerStyles = theme => ({
|
|
61
59
|
width: "24px",
|
62
60
|
height: "24px",
|
63
61
|
margin: "0px 4px",
|
64
|
-
border: "
|
62
|
+
border: "unset"
|
65
63
|
}
|
66
64
|
},
|
67
65
|
colorPickerIcon: {
|