@flozy/editor 10.1.2 → 10.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +16 -17
- package/dist/Editor/CommonEditor.js +15 -115
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +8 -16
- package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +9 -25
- 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/MultiSelectType.js +6 -21
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
- package/dist/Editor/Elements/Embed/Image.js +2 -3
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
- package/dist/Editor/Elements/Form/Form.js +168 -179
- package/dist/Editor/Elements/Form/FormField.js +4 -10
- package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/styles.js +7 -67
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +1 -4
- package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
- package/dist/Editor/Elements/Search/SearchButton.js +8 -9
- package/dist/Editor/Elements/Search/SearchList.js +7 -9
- package/dist/Editor/Elements/SimpleText/index.js +1 -6
- package/dist/Editor/Elements/SimpleText/style.js +2 -2
- package/dist/Editor/Elements/Table/Table.js +3 -3
- 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 +27 -100
- package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
- package/dist/Editor/common/ColorPickerButton.js +17 -39
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
- package/dist/Editor/common/Icon.js +1 -31
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
- package/dist/Editor/common/LinkSettings/index.js +68 -84
- package/dist/Editor/common/LinkSettings/style.js +30 -245
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
- 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 +12 -147
- package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
- package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
- package/dist/Editor/common/RnD/index.js +6 -5
- package/dist/Editor/common/Select/index.js +0 -2
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -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/lineSpacing.js +6 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
- package/dist/Editor/common/Uploader.js +0 -8
- package/dist/Editor/common/iconListV2.js +6 -101
- package/dist/Editor/common/iconslist.js +0 -24
- package/dist/Editor/commonStyle.js +61 -174
- package/dist/Editor/helper/theme.js +2 -203
- package/dist/Editor/hooks/useMouseMove.js +5 -8
- 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 +43 -166
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +19 -90
- package/package.json +4 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
- package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
- package/dist/Editor/assets/svg/BackIcon.js +0 -18
- package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
- package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
- 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/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/SnackBar/index.js +0 -43
- 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 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -290
- package/dist/Editor/themeSettings/buttons/style.js +0 -23
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
- 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 -361
- package/dist/Editor/themeSettings/style.js +0 -292
- 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 -324
@@ -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,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { useDataView } from "../../Providers/DataViewProvider";
|
3
|
-
import
|
3
|
+
import Select from "./Components/Select";
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const MultiSelectType = props => {
|
6
6
|
const {
|
@@ -10,15 +10,13 @@ const MultiSelectType = props => {
|
|
10
10
|
options,
|
11
11
|
label = "",
|
12
12
|
readOnly,
|
13
|
-
settings
|
14
|
-
translation
|
13
|
+
settings
|
15
14
|
} = props;
|
16
15
|
const {
|
17
16
|
wrapColumn
|
18
17
|
} = settings;
|
19
18
|
const {
|
20
|
-
onChange
|
21
|
-
onUpdateProperty
|
19
|
+
onChange
|
22
20
|
} = useDataView();
|
23
21
|
const value = Array.isArray(pValue) ? pValue : [];
|
24
22
|
const coloredValues = [...(value || [])]?.map(m => {
|
@@ -32,28 +30,15 @@ const MultiSelectType = props => {
|
|
32
30
|
[property]: data?.filter(f => f?.value)
|
33
31
|
});
|
34
32
|
};
|
35
|
-
|
36
|
-
|
37
|
-
"label": "Multi Select",
|
38
|
-
"visible": true,
|
39
|
-
"key": property,
|
40
|
-
"type": "multi-select",
|
41
|
-
"options": data
|
42
|
-
};
|
43
|
-
onUpdateProperty(updateData);
|
44
|
-
};
|
45
|
-
return /*#__PURE__*/_jsx(MultiSelectWithPopover, {
|
33
|
+
return /*#__PURE__*/_jsx(Select, {
|
34
|
+
className: `wrap-${wrapColumn}`,
|
46
35
|
value: coloredValues,
|
47
36
|
onChange: handleChange,
|
48
|
-
onUpdate: handleUpdate,
|
49
37
|
options: options,
|
50
38
|
multiple: true,
|
51
39
|
limitTags: 2,
|
52
40
|
placeholder: label,
|
53
|
-
disabled: readOnly
|
54
|
-
property: property,
|
55
|
-
wrapColumn: wrapColumn,
|
56
|
-
translation: translation
|
41
|
+
disabled: readOnly
|
57
42
|
});
|
58
43
|
};
|
59
44
|
export default MultiSelectType;
|
@@ -4,11 +4,7 @@ import { colors } from "../../../Color Picker/defaultColors";
|
|
4
4
|
import Icon from "../../../../common/Icon";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
-
const
|
8
|
-
const DEFAULT_COLORS = colors?.filter(f => !f?.includes("linear") && !EXCLUDED_COLORS?.has(f));
|
9
|
-
|
10
|
-
// const DEFAULT_COLORS = colors?.filter((f) => !(f.includes("linear") || f === "#000000"));
|
11
|
-
|
7
|
+
const DEFAULT_COLORS = colors?.filter(f => !(f.includes("linear") || f === "#000000"));
|
12
8
|
const AddOptions = props => {
|
13
9
|
const {
|
14
10
|
edit,
|
@@ -30,7 +30,6 @@ const EditOption = props => {
|
|
30
30
|
} = edit;
|
31
31
|
const selectedOption = edit?.options[optionIndex] || {};
|
32
32
|
const pickerStyles = ColorPickerStyles(theme);
|
33
|
-
const hideBackButton = edit?.hideBackButton || false;
|
34
33
|
useEffect(() => {
|
35
34
|
return () => {
|
36
35
|
// on un-mount update the option change
|
@@ -105,14 +104,14 @@ const EditOption = props => {
|
|
105
104
|
children: [/*#__PURE__*/_jsxs(Box, {
|
106
105
|
className: "fe-dv-ap-title",
|
107
106
|
children: [/*#__PURE__*/_jsxs("span", {
|
108
|
-
children: [
|
107
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
109
108
|
className: "tv-act-ico",
|
110
109
|
size: "small",
|
111
110
|
onClick: onBack,
|
112
111
|
children: /*#__PURE__*/_jsx(Icon, {
|
113
112
|
icon: 'leftArrow'
|
114
113
|
})
|
115
|
-
})
|
114
|
+
}), translation("Edit Option")]
|
116
115
|
}), /*#__PURE__*/_jsx(IconButton, {
|
117
116
|
className: "tv-act-ico bg br1",
|
118
117
|
size: "small",
|
@@ -29,16 +29,6 @@ const POSITIONS = {
|
|
29
29
|
vertical: "top",
|
30
30
|
horizontal: "right"
|
31
31
|
}
|
32
|
-
},
|
33
|
-
editOptionMulti: {
|
34
|
-
anchorOrigin: {
|
35
|
-
vertical: "top",
|
36
|
-
horizontal: "left"
|
37
|
-
},
|
38
|
-
transformOrigin: {
|
39
|
-
vertical: "top",
|
40
|
-
horizontal: "left"
|
41
|
-
}
|
42
32
|
}
|
43
33
|
};
|
44
34
|
const PropertySettings = props => {
|
@@ -92,7 +82,6 @@ const PropertySettings = props => {
|
|
92
82
|
translation: translation
|
93
83
|
});
|
94
84
|
case "editOption":
|
95
|
-
case "editOptionMulti":
|
96
85
|
return /*#__PURE__*/_jsx(EditOption, {
|
97
86
|
classes: classes,
|
98
87
|
onClose: onClose,
|
@@ -11,8 +11,7 @@ const RenderRow = props => {
|
|
11
11
|
properties,
|
12
12
|
onSelect,
|
13
13
|
selected,
|
14
|
-
readOnly
|
15
|
-
translation
|
14
|
+
readOnly
|
16
15
|
} = props;
|
17
16
|
const showProperties = properties?.filter(f => f.visible);
|
18
17
|
return showProperties?.map((property, i) => {
|
@@ -23,8 +22,7 @@ const RenderRow = props => {
|
|
23
22
|
property: property,
|
24
23
|
onSelect: onSelect,
|
25
24
|
selected: selected,
|
26
|
-
readOnly: readOnly
|
27
|
-
translation: translation
|
25
|
+
readOnly: readOnly
|
28
26
|
}, `${property.key}_${i}`);
|
29
27
|
});
|
30
28
|
};
|
@@ -35,8 +33,7 @@ const ViewData = props => {
|
|
35
33
|
customProps
|
36
34
|
} = props;
|
37
35
|
const {
|
38
|
-
readOnly
|
39
|
-
translation
|
36
|
+
readOnly
|
40
37
|
} = customProps || {};
|
41
38
|
const {
|
42
39
|
properties,
|
@@ -70,8 +67,7 @@ const ViewData = props => {
|
|
70
67
|
properties: properties,
|
71
68
|
onSelect: onSelect,
|
72
69
|
selected: selectedRows?.includes(row?.id),
|
73
|
-
readOnly: readOnly
|
74
|
-
translation: translation
|
70
|
+
readOnly: readOnly
|
75
71
|
}), /*#__PURE__*/_jsx("td", {}), /*#__PURE__*/_jsx("td", {})]
|
76
72
|
}, i);
|
77
73
|
}), /*#__PURE__*/_jsx("tr", {
|
@@ -4,7 +4,7 @@ import { Node, Transforms, Editor } from "slate";
|
|
4
4
|
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
5
5
|
import useResize from "../../utils/customHooks/useResize";
|
6
6
|
import EmbedPopup from "./EmbedPopup";
|
7
|
-
import { IconButton, Tooltip, Box, useTheme
|
7
|
+
import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
|
8
8
|
import { LinkIcon } from "../../common/iconslist";
|
9
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
10
|
import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
|
@@ -200,7 +200,6 @@ const Image = props => {
|
|
200
200
|
theme: appTheme
|
201
201
|
} = useEditorContext();
|
202
202
|
const classes = useCommonStyle(appTheme);
|
203
|
-
const isMobile = useMediaQuery("(max-width:599px)");
|
204
203
|
const handleImageClick = () => {
|
205
204
|
try {
|
206
205
|
Transforms.select(editor, {
|
@@ -281,7 +280,7 @@ const Image = props => {
|
|
281
280
|
sx: {
|
282
281
|
display: {
|
283
282
|
lg: "flex",
|
284
|
-
xs: xsHidden
|
283
|
+
xs: xsHidden ? "none" : "flex"
|
285
284
|
},
|
286
285
|
width: `100%`,
|
287
286
|
maxWidth: "100%",
|
@@ -89,7 +89,7 @@ const VideoPlaceholder = props => {
|
|
89
89
|
},
|
90
90
|
children: [/*#__PURE__*/_jsx(Icon, {
|
91
91
|
icon: "video"
|
92
|
-
}),
|
92
|
+
}), TYPE_LABELS[type] || translation("Embed Video or Other")]
|
93
93
|
}) : /*#__PURE__*/_jsxs(Box, {
|
94
94
|
sx: {
|
95
95
|
color: "#64748B !important",
|
@@ -5,7 +5,6 @@ import { IconButton, Tooltip } from "@mui/material";
|
|
5
5
|
import { DeleteIcon } from "../../assets/svg/AIIcons";
|
6
6
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
7
7
|
import { Transforms } from "slate";
|
8
|
-
import { CodeElementIcon } from "../../common/iconListV2";
|
9
8
|
|
10
9
|
// const sanitize = (input) => {
|
11
10
|
// const doc = new DOMParser().parseFromString(input, "text/html");
|
@@ -19,7 +18,6 @@ import { CodeElementIcon } from "../../common/iconListV2";
|
|
19
18
|
// return doc.body.innerHTML;
|
20
19
|
// };
|
21
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
22
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
23
21
|
import { createElement as _createElement } from "react";
|
24
22
|
const getCode = (embedData, isEncoded) => {
|
25
23
|
if (isEncoded) {
|
@@ -63,7 +61,6 @@ const Code = props => {
|
|
63
61
|
} = customProps;
|
64
62
|
const editor = useSlateStatic();
|
65
63
|
const path = ReactEditor.findPath(editor, element);
|
66
|
-
const hasCode = embedData && getCode(embedData, isEncoded);
|
67
64
|
const onDelete = () => {
|
68
65
|
Transforms.removeNodes(editor, {
|
69
66
|
at: path
|
@@ -88,20 +85,11 @@ const Code = props => {
|
|
88
85
|
}
|
89
86
|
}, [embedData]);
|
90
87
|
return /*#__PURE__*/_createElement("div", {
|
91
|
-
className:
|
88
|
+
className: "embed-code has-hover",
|
92
89
|
contentEditable: false,
|
93
90
|
...attributes,
|
94
91
|
key: element?.updatedOn
|
95
|
-
},
|
96
|
-
className: "empty-code",
|
97
|
-
children: [/*#__PURE__*/_jsx("span", {
|
98
|
-
className: "code-icon",
|
99
|
-
children: /*#__PURE__*/_jsx(CodeElementIcon, {})
|
100
|
-
}), /*#__PURE__*/_jsx("span", {
|
101
|
-
className: "code-name",
|
102
|
-
children: translation("Embed Code")
|
103
|
-
})]
|
104
|
-
}), /*#__PURE__*/_jsx("div", {
|
92
|
+
}, /*#__PURE__*/_jsx("div", {
|
105
93
|
ref: codeRef
|
106
94
|
}), children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {
|
107
95
|
onDelete: onDelete,
|
@@ -1,10 +1,7 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle,
|
2
|
+
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Tooltip } from "@mui/material";
|
3
3
|
import { insertEmbedScript, updateEmbedScript } from "../../utils/embedScript";
|
4
4
|
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
5
|
-
import { useEditorContext } from "../../hooks/useMouseMove";
|
6
|
-
import Styles from "./styles";
|
7
|
-
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
8
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
7
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
@@ -23,10 +20,6 @@ const EmbedScriptPopup = props => {
|
|
23
20
|
error: false
|
24
21
|
});
|
25
22
|
const [allowedDomains, setAllowedDomains] = useState([]);
|
26
|
-
const {
|
27
|
-
theme
|
28
|
-
} = useEditorContext();
|
29
|
-
const classes = Styles(theme);
|
30
23
|
const {
|
31
24
|
loading,
|
32
25
|
error
|
@@ -76,70 +69,50 @@ const EmbedScriptPopup = props => {
|
|
76
69
|
}
|
77
70
|
onClose();
|
78
71
|
};
|
79
|
-
const handleClear = () => {
|
80
|
-
setCode("");
|
81
|
-
};
|
82
72
|
return /*#__PURE__*/_jsx(_Fragment, {
|
83
73
|
children: /*#__PURE__*/_jsxs(Dialog, {
|
84
74
|
open: open,
|
85
75
|
fullWidth: true,
|
86
|
-
sx: classes.root,
|
87
76
|
children: [/*#__PURE__*/_jsx(DialogTitle, {
|
88
77
|
children: /*#__PURE__*/_jsxs(Box, {
|
89
78
|
component: "div",
|
90
79
|
sx: {
|
91
80
|
display: "flex",
|
92
81
|
alignItems: "center",
|
93
|
-
|
94
|
-
width: "100%"
|
82
|
+
gap: "6px"
|
95
83
|
},
|
96
|
-
children: [/*#__PURE__*/
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
variant: "h6",
|
105
|
-
children: translation("Embed Code")
|
106
|
-
}), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
|
107
|
-
title: /*#__PURE__*/_jsxs(Box, {
|
108
|
-
sx: {
|
109
|
-
textTransform: "none"
|
84
|
+
children: [translation("Embed Code"), allowedDomains?.length ? /*#__PURE__*/_jsx(Tooltip, {
|
85
|
+
title: /*#__PURE__*/_jsxs(Box, {
|
86
|
+
sx: {
|
87
|
+
textTransform: "none"
|
88
|
+
},
|
89
|
+
children: [/*#__PURE__*/_jsx("span", {
|
90
|
+
style: {
|
91
|
+
fontWeight: "bold"
|
110
92
|
},
|
111
|
-
children:
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
}
|
124
|
-
})
|
125
|
-
}) : null]
|
126
|
-
}), /*#__PURE__*/_jsx(IconButton, {
|
127
|
-
className: "close-popupbtn",
|
128
|
-
onClick: onClose,
|
129
|
-
children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
|
130
|
-
})]
|
93
|
+
children: translation("Allowed Domains")
|
94
|
+
}), /*#__PURE__*/_jsx("br", {}), allowedDomains.join(", ")]
|
95
|
+
}),
|
96
|
+
children: /*#__PURE__*/_jsx(InfoOutlinedIcon, {
|
97
|
+
color: "gray",
|
98
|
+
fontSize: "14px",
|
99
|
+
style: {
|
100
|
+
fill: "#94A3B8",
|
101
|
+
cursor: "pointer"
|
102
|
+
}
|
103
|
+
})
|
104
|
+
}) : null]
|
131
105
|
})
|
132
|
-
}), /*#__PURE__*/_jsx(Divider, {
|
133
|
-
className: "divider"
|
134
106
|
}), /*#__PURE__*/_jsxs(DialogContent, {
|
135
107
|
children: [/*#__PURE__*/_jsx("textarea", {
|
136
108
|
value: code,
|
137
109
|
onChange: handleChange,
|
138
110
|
style: {
|
139
|
-
minHeight: "
|
111
|
+
minHeight: "200px",
|
140
112
|
width: "100%",
|
141
113
|
resize: "none",
|
142
|
-
padding: "4px"
|
114
|
+
padding: "4px",
|
115
|
+
boxSizing: "border-box"
|
143
116
|
}
|
144
117
|
}), /*#__PURE__*/_jsx(Box, {
|
145
118
|
component: "div",
|
@@ -148,14 +121,12 @@ const EmbedScriptPopup = props => {
|
|
148
121
|
})]
|
149
122
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
150
123
|
children: [/*#__PURE__*/_jsx(Button, {
|
151
|
-
onClick: handleClear,
|
152
|
-
className: "clear-btn",
|
153
|
-
children: translation("Clear")
|
154
|
-
}), /*#__PURE__*/_jsx(Button, {
|
155
124
|
onClick: onSubmit,
|
156
125
|
disabled: loading,
|
157
|
-
className: "save-btn",
|
158
126
|
children: loading ? translation("Validating") : translation("Save")
|
127
|
+
}), /*#__PURE__*/_jsx(Button, {
|
128
|
+
onClick: onClose,
|
129
|
+
children: translation("Cancel")
|
159
130
|
})]
|
160
131
|
})]
|
161
132
|
})
|