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