@flozy/editor 10.3.1 → 10.3.3
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 +30 -7
- 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 +1 -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/Options/More.js +7 -7
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -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 -65
- package/dist/Editor/common/LinkSettings/index.js +13 -26
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -2
- package/dist/Editor/common/LinkSettings/style.js +164 -244
- 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 +321 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +25 -11
- package/dist/Editor/common/Select/index.js +44 -7
- package/dist/Editor/common/Select/styles.js +30 -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 +4 -0
- 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/helper.js +197 -30
- 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,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);
|
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,
|
@@ -33,7 +33,8 @@ const MultiSelectWithPopover = props => {
|
|
33
33
|
onChange,
|
34
34
|
onUpdate,
|
35
35
|
property,
|
36
|
-
wrapColumn = false
|
36
|
+
wrapColumn = false,
|
37
|
+
translation
|
37
38
|
} = props;
|
38
39
|
const [anchorEl, setAnchorEl] = useState(null);
|
39
40
|
const [anchorElOption, setAnchorElOption] = useState(null);
|
@@ -170,11 +171,11 @@ const MultiSelectWithPopover = props => {
|
|
170
171
|
variant: "filled",
|
171
172
|
sx: {
|
172
173
|
backgroundColor: option?.color,
|
173
|
-
color:
|
174
|
+
color: "#0F172A",
|
174
175
|
"& .MuiChip-deleteIcon": {
|
175
176
|
flexShrink: 0,
|
176
177
|
"& path": {
|
177
|
-
stroke:
|
178
|
+
stroke: "#0F172A !important"
|
178
179
|
}
|
179
180
|
},
|
180
181
|
"&:hover": {
|
@@ -221,9 +222,9 @@ const MultiSelectWithPopover = props => {
|
|
221
222
|
maxHeight: "250px",
|
222
223
|
overflowY: "auto",
|
223
224
|
overflowX: "hidden",
|
224
|
-
pr:
|
225
|
-
pl:
|
226
|
-
marginTop:
|
225
|
+
pr: "12px",
|
226
|
+
pl: "12px",
|
227
|
+
marginTop: "12px",
|
227
228
|
...customScrollStyles
|
228
229
|
}
|
229
230
|
},
|
@@ -281,11 +282,11 @@ const MultiSelectWithPopover = props => {
|
|
281
282
|
"& .MuiSvgIcon-root": {
|
282
283
|
fontSize: 20
|
283
284
|
},
|
284
|
-
|
285
|
+
"& rect": {
|
285
286
|
fill: theme?.palette?.editor?.closeButtonSvgStroke
|
286
287
|
},
|
287
|
-
|
288
|
-
backgroundColor:
|
288
|
+
"&:hover": {
|
289
|
+
backgroundColor: "transparent"
|
289
290
|
}
|
290
291
|
},
|
291
292
|
children: /*#__PURE__*/_jsx(Icon, {
|
@@ -296,9 +297,9 @@ const MultiSelectWithPopover = props => {
|
|
296
297
|
},
|
297
298
|
sx: {
|
298
299
|
backgroundColor: "transparent",
|
299
|
-
fontFamily:
|
300
|
+
fontFamily: "Inter",
|
300
301
|
fontWeight: 400,
|
301
|
-
fontSize:
|
302
|
+
fontSize: "12px"
|
302
303
|
},
|
303
304
|
placeholder: "Create new one..."
|
304
305
|
}),
|
@@ -314,11 +315,11 @@ const MultiSelectWithPopover = props => {
|
|
314
315
|
deleteIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
|
315
316
|
sx: {
|
316
317
|
backgroundColor: option?.color,
|
317
|
-
color:
|
318
|
+
color: "#0F172A",
|
318
319
|
"& .MuiChip-deleteIcon": {
|
319
320
|
flexShrink: 0,
|
320
321
|
"& path": {
|
321
|
-
stroke:
|
322
|
+
stroke: "#0F172A !important"
|
322
323
|
}
|
323
324
|
},
|
324
325
|
"&:hover": {
|
@@ -328,13 +329,13 @@ const MultiSelectWithPopover = props => {
|
|
328
329
|
}, index))
|
329
330
|
}), /*#__PURE__*/_jsx(Divider, {
|
330
331
|
sx: {
|
331
|
-
mt:
|
332
|
+
mt: "12px",
|
332
333
|
borderBottom: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
|
333
334
|
boxShadow: theme?.palette?.editor?.dividerDropShadow
|
334
335
|
}
|
335
336
|
}), /*#__PURE__*/_jsx(Box, {
|
336
337
|
sx: {
|
337
|
-
pl:
|
338
|
+
pl: "4px"
|
338
339
|
},
|
339
340
|
children: /*#__PURE__*/_jsxs(List, {
|
340
341
|
sx: {
|
@@ -345,11 +346,11 @@ const MultiSelectWithPopover = props => {
|
|
345
346
|
children: [/*#__PURE__*/_jsx(Typography, {
|
346
347
|
sx: {
|
347
348
|
mb: 1,
|
348
|
-
pl:
|
349
|
+
pl: "8px",
|
349
350
|
color: theme?.palette?.editor?.secondaryTextColor,
|
350
|
-
fontFamily:
|
351
|
+
fontFamily: "Inter",
|
351
352
|
fontWeight: 400,
|
352
|
-
fontSize:
|
353
|
+
fontSize: "12px"
|
353
354
|
},
|
354
355
|
children: "Choose an option or create one"
|
355
356
|
}), filteredOptions?.map((option, index) => /*#__PURE__*/_jsx(ListItem, {
|
@@ -362,19 +363,19 @@ const MultiSelectWithPopover = props => {
|
|
362
363
|
sx: {
|
363
364
|
paddingTop: "4px",
|
364
365
|
paddingBottom: "4px",
|
365
|
-
justifyContent:
|
366
|
-
|
367
|
-
|
366
|
+
justifyContent: "space-between",
|
367
|
+
"&:hover": {
|
368
|
+
"& path": {
|
368
369
|
stroke: theme?.palette?.editor?.activeColor
|
369
370
|
},
|
370
|
-
borderRadius:
|
371
|
+
borderRadius: "12px"
|
371
372
|
}
|
372
373
|
},
|
373
374
|
children: [/*#__PURE__*/_jsx(Chip, {
|
374
375
|
label: option?.value,
|
375
376
|
sx: {
|
376
377
|
backgroundColor: option?.color,
|
377
|
-
color:
|
378
|
+
color: "#0F172A",
|
378
379
|
fontWeight: 500,
|
379
380
|
fontSize: "12px",
|
380
381
|
fontFamily: "Inter",
|
@@ -388,11 +389,11 @@ const MultiSelectWithPopover = props => {
|
|
388
389
|
}), /*#__PURE__*/_jsx(IconButton, {
|
389
390
|
size: "small",
|
390
391
|
sx: {
|
391
|
-
|
392
|
+
"& path": {
|
392
393
|
stroke: theme?.palette?.editor?.closeButtonSvgStroke
|
393
394
|
},
|
394
|
-
|
395
|
-
backgroundColor:
|
395
|
+
"&:hover": {
|
396
|
+
backgroundColor: "transparent"
|
396
397
|
}
|
397
398
|
},
|
398
399
|
onClick: e => handleEditOption(e, index),
|
@@ -421,7 +422,7 @@ const MultiSelectWithPopover = props => {
|
|
421
422
|
label: `${inputValue}`,
|
422
423
|
sx: {
|
423
424
|
backgroundColor: chipColor,
|
424
|
-
color:
|
425
|
+
color: "#0F172A",
|
425
426
|
fontWeight: 500,
|
426
427
|
fontSize: "12px",
|
427
428
|
fontFamily: "Inter",
|
@@ -442,7 +443,8 @@ const MultiSelectWithPopover = props => {
|
|
442
443
|
anchorEl: anchorElOption,
|
443
444
|
mode: mode,
|
444
445
|
onClose: onClose,
|
445
|
-
onEvent: onEditOption
|
446
|
+
onEvent: onEditOption,
|
447
|
+
translation: translation
|
446
448
|
}) : null, showSnackBar ? /*#__PURE__*/_jsx(SnackbarAlert, {
|
447
449
|
message: "Option already selected!",
|
448
450
|
setShowSnackBar: setShowSnackBar
|