@flozy/editor 10.3.9 → 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 +131 -16
- 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 +30 -28
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +9 -7
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +0 -1
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- 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 +0 -1
- package/dist/Editor/Elements/Form/FormField.js +3 -2
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +35 -31
- 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 +7 -7
- package/dist/Editor/Elements/FreeGrid/helper.js +115 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +14 -0
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- 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/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 +24 -5
- 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 +58 -10
- 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/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 +28 -0
- 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 +45 -66
- package/dist/Editor/common/LinkSettings/index.js +14 -28
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +164 -244
- 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 +4 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +2 -1
- 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 +0 -1
- package/dist/Editor/common/RnD/OptionsPopup/style.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +11 -2
- 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 -7
- package/dist/Editor/common/Select/styles.js +31 -2
- package/dist/Editor/common/Shorthands/elements.js +54 -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/textOptions.js +15 -7
- package/dist/Editor/common/SwipeableDrawer/style.js +14 -12
- package/dist/Editor/common/Uploader.js +16 -0
- package/dist/Editor/common/iconListV2.js +76 -0
- package/dist/Editor/common/iconslist.js +21 -0
- package/dist/Editor/commonStyle.js +116 -61
- 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 +9 -3
- 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 +161 -37
- 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/formfield.js +1 -0
- 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
@@ -1,5 +1,5 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import { Transforms } from "slate";
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import { Editor, Range, 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,6 +8,8 @@ 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";
|
11
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
15
|
const accordionBtnStyleKeys = {
|
@@ -78,12 +80,34 @@ const Accordion = props => {
|
|
78
80
|
const path = ReactEditor.findPath(editor, element);
|
79
81
|
const {
|
80
82
|
textColor,
|
81
|
-
bgColor
|
83
|
+
bgColor,
|
84
|
+
borderColor
|
82
85
|
} = 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);
|
83
93
|
const {
|
84
94
|
theme
|
85
95
|
} = useEditorContext();
|
86
96
|
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]);
|
87
111
|
const onToggle = () => {
|
88
112
|
setToggle(!toggle);
|
89
113
|
};
|
@@ -159,17 +183,29 @@ const Accordion = props => {
|
|
159
183
|
const onClose = () => {
|
160
184
|
setOpenSettings(false);
|
161
185
|
};
|
162
|
-
|
186
|
+
const textStyles = getTextColor(childTextColor);
|
187
|
+
const borderRadiusStyles = {
|
188
|
+
...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
|
189
|
+
};
|
190
|
+
const padding = getTRBLBreakPoints(bannerSpacing);
|
191
|
+
return /*#__PURE__*/_jsxs(Box, {
|
163
192
|
className: `accordion-container`,
|
164
193
|
...attributes,
|
165
194
|
style: {
|
166
195
|
position: "relative"
|
167
196
|
},
|
197
|
+
component: "div",
|
198
|
+
sx: {
|
199
|
+
background: bgColor,
|
200
|
+
...borderStyle,
|
201
|
+
borderRadius: borderRadiusStyles,
|
202
|
+
padding,
|
203
|
+
'& span[data-slate-string="true"]': textStyles
|
204
|
+
},
|
168
205
|
children: [/*#__PURE__*/_jsxs("div", {
|
169
|
-
className: "accordion-title"
|
170
|
-
style:
|
171
|
-
|
172
|
-
},
|
206
|
+
className: "accordion-title"
|
207
|
+
// style={{ background: bgColor, ...borderStyle }}
|
208
|
+
,
|
173
209
|
onClick: onToggle,
|
174
210
|
children: [/*#__PURE__*/_jsx(Box, {
|
175
211
|
role: "button",
|
@@ -191,7 +227,8 @@ const Accordion = props => {
|
|
191
227
|
icon: "accordionArrowDown"
|
192
228
|
})
|
193
229
|
}), children[0]]
|
194
|
-
}), /*#__PURE__*/_jsx(
|
230
|
+
}), /*#__PURE__*/_jsx(Box, {
|
231
|
+
component: "div",
|
195
232
|
className: "accordion-content",
|
196
233
|
style: {
|
197
234
|
display: toggle ? "block" : "none"
|
@@ -1,7 +1,5 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { getBorderColor, getTextColor } from "../../helper";
|
3
2
|
import { Box } from "@mui/material";
|
4
|
-
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
5
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
4
|
const AccordionSummary = props => {
|
7
5
|
const {
|
@@ -9,32 +7,12 @@ const AccordionSummary = props => {
|
|
9
7
|
children,
|
10
8
|
element
|
11
9
|
} = 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);
|
21
10
|
return /*#__PURE__*/_jsx(Box, {
|
22
11
|
className: `accordion-summary-container`,
|
23
12
|
...attributes,
|
24
13
|
style: {
|
25
14
|
width: "100%",
|
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
|
15
|
+
position: "relative"
|
38
16
|
},
|
39
17
|
component: "div",
|
40
18
|
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 } from "../../utils/helper";
|
21
|
+
import { handleLinkType, isHavingColor } 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,6 +45,8 @@ function AppHeader(props) {
|
|
45
45
|
bgColorHover,
|
46
46
|
textColor,
|
47
47
|
textColorHover,
|
48
|
+
borderColor,
|
49
|
+
borderColorHover,
|
48
50
|
menuStyle,
|
49
51
|
bannerSpacing,
|
50
52
|
fontSize,
|
@@ -149,7 +151,7 @@ function AppHeader(props) {
|
|
149
151
|
}) : appTitle
|
150
152
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
|
151
153
|
children: menus.map((item, i) => {
|
152
|
-
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
|
154
|
+
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank", () => {}, !readOnly, true);
|
153
155
|
const onButtonClick = e => {
|
154
156
|
closeDrawer();
|
155
157
|
setTimeout(() => {
|
@@ -225,6 +227,7 @@ function AppHeader(props) {
|
|
225
227
|
sx: {
|
226
228
|
...elevateStyle,
|
227
229
|
background: bgColor,
|
230
|
+
border: isHavingColor(borderColor) ? `1px solid ${borderColor}` : "none",
|
228
231
|
boxShadow: "none",
|
229
232
|
...appbarSp,
|
230
233
|
zIndex: 999
|
@@ -265,7 +268,7 @@ function AppHeader(props) {
|
|
265
268
|
style: {
|
266
269
|
display: "inline-flex",
|
267
270
|
alignItems: "center",
|
268
|
-
color: textColor,
|
271
|
+
color: textColor || "#000000",
|
269
272
|
fontSize: logoFontSize,
|
270
273
|
fontFamily: titleFontFamily,
|
271
274
|
justifyContent: isLogoRight ? "end" : "start"
|
@@ -320,8 +323,9 @@ function AppHeader(props) {
|
|
320
323
|
fontFamily: fontFamily,
|
321
324
|
textTransform: "none",
|
322
325
|
fontSize: fontSize || "16px",
|
323
|
-
color: textColor || "#
|
326
|
+
color: textColor || "#000",
|
324
327
|
background: bgColor || "none",
|
328
|
+
border: borderColorHover ? `1px solid transparent` : "none",
|
325
329
|
"& .m-settings": {
|
326
330
|
display: "none",
|
327
331
|
position: "absolute",
|
@@ -335,8 +339,9 @@ function AppHeader(props) {
|
|
335
339
|
background: "#FFF"
|
336
340
|
},
|
337
341
|
"&:hover": {
|
338
|
-
color: textColorHover || textColor || "#
|
342
|
+
color: textColorHover || textColor || "#000",
|
339
343
|
background: bgColorHover || bgColor || "none",
|
344
|
+
border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
|
340
345
|
"& .m-settings": {
|
341
346
|
display: "block"
|
342
347
|
}
|
@@ -9,6 +9,8 @@ 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";
|
12
14
|
import Icon from "../../common/Icon";
|
13
15
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
14
16
|
import useCommonStyle from "../../commonStyle";
|
@@ -40,6 +42,12 @@ const EditorButton = props => {
|
|
40
42
|
const [openMoreOptions, setOpenMoreOptions] = useState(false);
|
41
43
|
const [, setIconLoaded] = useState(false);
|
42
44
|
const classes = useCommonStyle(appTheme);
|
45
|
+
const {
|
46
|
+
theme: selectedTheme
|
47
|
+
} = useEditorTheme();
|
48
|
+
const {
|
49
|
+
buttonTheme
|
50
|
+
} = getTheme(selectedTheme);
|
43
51
|
const {
|
44
52
|
label,
|
45
53
|
bgColor,
|
@@ -53,7 +61,8 @@ const EditorButton = props => {
|
|
53
61
|
fontFamily,
|
54
62
|
textColorHover,
|
55
63
|
bgColorHover,
|
56
|
-
|
64
|
+
borderColorHover,
|
65
|
+
// buttonIcon,
|
57
66
|
iconPosition = "start",
|
58
67
|
borderStyle,
|
59
68
|
borderWidth,
|
@@ -74,6 +83,7 @@ const EditorButton = props => {
|
|
74
83
|
};
|
75
84
|
const isTrigger = linkType === "nextTrigger" || linkType === "prevTrigger";
|
76
85
|
const refURl = isTrigger ? buttonLink?.url : url;
|
86
|
+
const buttonIcon = element?.buttonIcon || buttonTheme?.buttonIcon;
|
77
87
|
const BtnIcon = buttonIcon ? buttonIcon : null;
|
78
88
|
windowVar.lastButtonProps = element;
|
79
89
|
const handleTrigger = async () => {
|
@@ -96,7 +106,7 @@ const EditorButton = props => {
|
|
96
106
|
};
|
97
107
|
const buttonProps = handleLinkType(refURl, linkType, true,
|
98
108
|
// button functionalities have to work on both edit mode and normal mode
|
99
|
-
openInNewTab, handleTrigger, metadata);
|
109
|
+
openInNewTab, handleTrigger, metadata, !readOnly);
|
100
110
|
const onMenuClick = val => () => {
|
101
111
|
switch (val) {
|
102
112
|
case "edit":
|
@@ -164,6 +174,7 @@ const EditorButton = props => {
|
|
164
174
|
display: "inline-flex",
|
165
175
|
color: "rgba(0, 0, 0, 0.54)",
|
166
176
|
marginBottom: "0px !important",
|
177
|
+
...classes.buttonMoreOption,
|
167
178
|
...classes.buttonMoreOption3
|
168
179
|
},
|
169
180
|
...btnProps,
|
@@ -264,19 +275,14 @@ const EditorButton = props => {
|
|
264
275
|
display: "inline-block"
|
265
276
|
},
|
266
277
|
children: [/*#__PURE__*/_jsxs(Box, {
|
278
|
+
className: `btn textAlign-${tAlign} button theme-element`,
|
267
279
|
ref: buttonRef,
|
268
|
-
className: `btn textAlign-${tAlign}`,
|
269
280
|
sx: {
|
270
281
|
textDecoration: "none",
|
271
|
-
background: bgColor || "rgb(30, 75, 122)",
|
272
282
|
borderBlockStyle: "solid",
|
273
|
-
|
274
|
-
borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
|
283
|
+
borderWidth: borderWidth !== undefined ? borderWidth : borderColor || borderColorHover ? "1px" : "0px",
|
275
284
|
...btnSp,
|
276
285
|
borderStyle: borderStyle || "solid",
|
277
|
-
color: `${textColor || "#FFFFFF"}`,
|
278
|
-
fontSize: textSize || "inherit",
|
279
|
-
fontFamily: fontFamily || "PoppinsRegular",
|
280
286
|
display: "inline-flex",
|
281
287
|
alignItems: "center",
|
282
288
|
position: "relative",
|
@@ -287,9 +293,21 @@ const EditorButton = props => {
|
|
287
293
|
"&:hover": {
|
288
294
|
color: `${textColorHover || textColor || "#FFFFFF"}`,
|
289
295
|
background: bgColorHover || bgColor || "rgb(30, 75, 122)",
|
296
|
+
borderColor: borderColorHover || borderColor || "",
|
290
297
|
"& .element-toolbar": {
|
291
298
|
display: "flex"
|
292
299
|
}
|
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 || {})
|
293
311
|
}
|
294
312
|
},
|
295
313
|
...buttonProps,
|
@@ -1,11 +1,15 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
|
-
import { Box, IconButton, Popover } from "@mui/material";
|
2
|
+
import { Box, IconButton, Popover, Typography, useTheme } 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";
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
13
|
let c = [];
|
10
14
|
const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
|
11
15
|
if (i % 7 === 0) {
|
@@ -32,8 +36,8 @@ const SingleColorButton = ({
|
|
32
36
|
width: "100%",
|
33
37
|
display: "flex",
|
34
38
|
alignItems: "center",
|
35
|
-
padding: padding || "8px 0px"
|
36
|
-
justifyContent: "center"
|
39
|
+
padding: padding || "8px 0px"
|
40
|
+
// justifyContent: "center",
|
37
41
|
},
|
38
42
|
children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
|
39
43
|
onClick: handleSelect(m),
|
@@ -110,12 +114,18 @@ const ColorButtons = props => {
|
|
110
114
|
openColorTool,
|
111
115
|
onClose,
|
112
116
|
onColorPickerClick,
|
117
|
+
disableEditTheme,
|
113
118
|
defaultColors = []
|
114
119
|
} = props;
|
115
120
|
const [row1, ...restRows] = ColorChunks([]);
|
116
121
|
const [anchorEl, setAnchorEl] = useState(null);
|
117
122
|
const open = Boolean(anchorEl);
|
118
123
|
const firstRow = defaultColors?.length ? defaultColors : row1;
|
124
|
+
const theme = useTheme();
|
125
|
+
const editor = useSlateStatic();
|
126
|
+
const {
|
127
|
+
setOpenTheme
|
128
|
+
} = useEditorContext();
|
119
129
|
const handleMore = e => {
|
120
130
|
setAnchorEl(e.currentTarget);
|
121
131
|
};
|
@@ -128,6 +138,7 @@ const ColorButtons = props => {
|
|
128
138
|
const handleSelect = color => () => {
|
129
139
|
onSelect(color);
|
130
140
|
};
|
141
|
+
const colorVars = theme?.vars?.colors || {};
|
131
142
|
return /*#__PURE__*/_jsxs(Box, {
|
132
143
|
component: "span",
|
133
144
|
sx: classes.colorButtons,
|
@@ -144,7 +155,7 @@ const ColorButtons = props => {
|
|
144
155
|
activeColor: activeColor
|
145
156
|
}, `si_btn_row1_${m}_${i}`);
|
146
157
|
})
|
147
|
-
}), /*#__PURE__*/
|
158
|
+
}), /*#__PURE__*/_jsx(Popover, {
|
148
159
|
open: open || openColorTool,
|
149
160
|
anchorEl: anchorEl || openColorTool,
|
150
161
|
onClose: handleClose,
|
@@ -158,9 +169,40 @@ const ColorButtons = props => {
|
|
158
169
|
},
|
159
170
|
sx: classes.colorPopper,
|
160
171
|
className: "colorPopper",
|
161
|
-
children:
|
172
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
162
173
|
sx: classes.colorButtonsInner,
|
163
|
-
children:
|
174
|
+
children: [Object.values(colorVars)?.length ? /*#__PURE__*/_jsxs(_Fragment, {
|
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) => {
|
164
206
|
return /*#__PURE__*/_jsx(SingleColorButton, {
|
165
207
|
id: `p2_${id}`,
|
166
208
|
crs: m,
|
@@ -169,14 +211,19 @@ const ColorButtons = props => {
|
|
169
211
|
classes: classes,
|
170
212
|
activeColor: activeColor
|
171
213
|
}, `si_btn_${m}_${i}`);
|
172
|
-
})
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
214
|
+
}), forMiniTool ? /*#__PURE__*/_jsx(IconButton, {
|
215
|
+
onClick: onColorPickerClick,
|
216
|
+
style: {
|
217
|
+
alignSelf: "start",
|
218
|
+
margin: "6px",
|
219
|
+
padding: "0px"
|
220
|
+
},
|
221
|
+
children: /*#__PURE__*/_jsx("img", {
|
222
|
+
src: ColorPicker,
|
223
|
+
alt: "color wheel"
|
224
|
+
})
|
225
|
+
}) : null]
|
226
|
+
})
|
180
227
|
})]
|
181
228
|
});
|
182
229
|
};
|
@@ -60,4 +60,28 @@
|
|
60
60
|
padding: 0 15px !important;
|
61
61
|
width: 60px !important;
|
62
62
|
flex-shrink: 0;
|
63
|
-
}
|
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
|
+
}
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
|
-
import
|
4
|
-
import { IconButton, Tooltip, Box, Popover } from "@mui/material";
|
3
|
+
import { IconButton, Tooltip, Box, Popover, useTheme } from "@mui/material";
|
5
4
|
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
6
5
|
import ColorButtons from "./ColorButtons";
|
7
6
|
import ColorPickerStyles from "./Styles";
|
8
7
|
import colorWheel from "./colorWheel.png";
|
9
8
|
import "./ColorPicker.css";
|
10
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
|
+
import CustomColorPicker from "../../common/CustomColorPicker";
|
11
|
+
import { getSelectedElementColor } from "../../utils/helper";
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
13
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -25,7 +26,8 @@ const ColorPicker = props => {
|
|
25
26
|
classes,
|
26
27
|
forMiniTool,
|
27
28
|
openColorTool,
|
28
|
-
closeColorTool
|
29
|
+
closeColorTool,
|
30
|
+
type
|
29
31
|
} = props;
|
30
32
|
const {
|
31
33
|
theme
|
@@ -34,6 +36,7 @@ const ColorPicker = props => {
|
|
34
36
|
const [anchorEl, setAnchorEl] = useState(null);
|
35
37
|
const open = Boolean(anchorEl);
|
36
38
|
const pickerStyles = ColorPickerStyles(theme);
|
39
|
+
const muiTheme = useTheme();
|
37
40
|
const onOpen = e => {
|
38
41
|
e.preventDefault();
|
39
42
|
setAnchorEl(e.currentTarget);
|
@@ -58,7 +61,7 @@ const ColorPicker = props => {
|
|
58
61
|
setAnchorEl(null);
|
59
62
|
setSelection(null);
|
60
63
|
};
|
61
|
-
const activeColor = activeMark(editor, format) || DEFAULT_COLOR[format];
|
64
|
+
const activeColor = type === "textColor" ? getSelectedElementColor(editor, format, muiTheme) : activeMark(editor, format) || DEFAULT_COLOR[format];
|
62
65
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
63
66
|
children: [forMiniTool ? null : /*#__PURE__*/_jsx(Tooltip, {
|
64
67
|
title: title,
|
@@ -96,10 +99,10 @@ const ColorPicker = props => {
|
|
96
99
|
horizontal: "top"
|
97
100
|
},
|
98
101
|
sx: classes.colorPickerPopup,
|
99
|
-
children: /*#__PURE__*/_jsx(
|
102
|
+
children: /*#__PURE__*/_jsx(CustomColorPicker, {
|
100
103
|
gradient: true,
|
101
|
-
|
102
|
-
|
104
|
+
onChange: handleFormSubmit,
|
105
|
+
color: activeColor
|
103
106
|
})
|
104
107
|
})]
|
105
108
|
});
|
@@ -20,24 +20,26 @@ 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 10px",
|
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",
|
30
31
|
"&.active": {
|
31
|
-
"&:before": {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
}
|
32
|
+
// "&:before": {
|
33
|
+
// content: '" "',
|
34
|
+
// position: "absolute",
|
35
|
+
// top: "-4px",
|
36
|
+
// left: "-4px",
|
37
|
+
// width: "calc(100% + 8px)",
|
38
|
+
// height: "calc(100% + 8px)",
|
39
|
+
// border: "2px solid #2563EB",
|
40
|
+
// borderRadius: "50%",
|
41
|
+
// },
|
42
|
+
outline: "2px solid #2563EB"
|
41
43
|
}
|
42
44
|
},
|
43
45
|
colorButtonsInner: {
|
@@ -59,7 +61,7 @@ const ColorPickerStyles = theme => ({
|
|
59
61
|
width: "24px",
|
60
62
|
height: "24px",
|
61
63
|
margin: "0px 4px",
|
62
|
-
border: "
|
64
|
+
border: "1.5px solid #DCE4EC"
|
63
65
|
}
|
64
66
|
},
|
65
67
|
colorPickerIcon: {
|
@@ -14,7 +14,8 @@ const ColumnView = props => {
|
|
14
14
|
property,
|
15
15
|
onSelect,
|
16
16
|
selected,
|
17
|
-
readOnly
|
17
|
+
readOnly,
|
18
|
+
translation
|
18
19
|
} = props;
|
19
20
|
const {
|
20
21
|
type
|
@@ -60,7 +61,8 @@ const ColumnView = props => {
|
|
60
61
|
readOnly: readOnly,
|
61
62
|
settings: {
|
62
63
|
wrapColumn: property?.wrapColumn
|
63
|
-
}
|
64
|
+
},
|
65
|
+
translation: translation
|
64
66
|
}), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
|
65
67
|
sx: classes.root,
|
66
68
|
open: open,
|