@flozy/editor 10.1.4 → 10.1.6
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 +120 -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 +6 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +25 -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 +454 -0
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +21 -6
- package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +5 -1
- package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +3 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/index.js +11 -0
- package/dist/Editor/Elements/DataView/Layouts/ViewData.js +8 -4
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +1 -1
- package/dist/Editor/Elements/EmbedScript/Code.js +14 -2
- package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +57 -28
- package/dist/Editor/Elements/EmbedScript/styles.js +89 -0
- package/dist/Editor/Elements/Form/Form.js +181 -168
- package/dist/Editor/Elements/Form/FormElements/FormText.js +23 -6
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +3 -2
- package/dist/Editor/Elements/Form/FormField.js +13 -6
- package/dist/Editor/Elements/Form/Workflow/Styles.js +24 -22
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +36 -31
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +7 -4
- package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
- package/dist/Editor/Elements/FreeGrid/helper.js +113 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +67 -7
- package/dist/Editor/Elements/Grid/Grid.js +14 -2
- package/dist/Editor/Elements/Grid/GridItem.js +1 -1
- package/dist/Editor/Elements/List/CheckList.js +4 -1
- package/dist/Editor/Elements/Search/SearchAttachment.js +40 -9
- package/dist/Editor/Elements/Search/SearchButton.js +9 -8
- package/dist/Editor/Elements/Search/SearchList.js +9 -7
- 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/index.js +6 -1
- 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 +100 -27
- 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/ClearAllRounded.js +31 -0
- package/dist/Editor/assets/svg/ResetIconNew.js +23 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +1 -0
- package/dist/Editor/assets/svg/ThemeIcons.js +293 -0
- package/dist/Editor/common/ColorPickerButton.js +39 -17
- 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 +31 -1
- package/dist/Editor/common/ImageSelector/Styles.js +3 -9
- package/dist/Editor/common/LinkSettings/NavComponents.js +34 -8
- package/dist/Editor/common/LinkSettings/index.js +84 -68
- package/dist/Editor/common/LinkSettings/style.js +245 -30
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +13 -14
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +28 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +6 -5
- 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 +147 -12
- package/dist/Editor/common/RnD/OptionsPopup/index.js +8 -5
- package/dist/Editor/common/RnD/OptionsPopup/style.js +121 -19
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +8 -5
- 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 +48 -57
- package/dist/Editor/common/RnD/VirtualElement/helper.js +143 -131
- package/dist/Editor/common/RnD/VirtualElement/styles.js +16 -0
- package/dist/Editor/common/RnD/index.js +5 -10
- package/dist/Editor/common/Select/index.js +2 -0
- package/dist/Editor/common/Shorthands/elements.js +54 -0
- package/dist/Editor/common/SnackBar/index.js +43 -0
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- 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/fontSize.js +16 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +7 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +13 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +15 -7
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +5 -7
- package/dist/Editor/common/Uploader.js +8 -0
- package/dist/Editor/common/iconListV2.js +156 -6
- package/dist/Editor/common/iconslist.js +24 -0
- package/dist/Editor/commonStyle.js +168 -62
- 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 +8 -5
- 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 +361 -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 +166 -43
- 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/form.js +4 -4
- package/dist/Editor/utils/formfield.js +8 -2
- package/dist/Editor/utils/helper.js +109 -19
- package/dist/Editor/utils/signature.js +2 -9
- package/package.json +4 -4
@@ -1,6 +1,6 @@
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
2
2
|
import React, { useState } from "react";
|
3
|
-
import { Transforms, Path, Node } from "slate";
|
3
|
+
import { Transforms, Path, Node, Editor, Element } from "slate";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
|
6
6
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
@@ -206,7 +206,19 @@ const Grid = props => {
|
|
206
206
|
};
|
207
207
|
const onAddSection = () => () => {
|
208
208
|
try {
|
209
|
-
|
209
|
+
let duplicateGrid = JSON.parse(JSON.stringify(element));
|
210
|
+
const carousel = Editor.above(editor, {
|
211
|
+
at: path,
|
212
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel-item"
|
213
|
+
});
|
214
|
+
if (carousel) {
|
215
|
+
const [carouselNode, carouselItemPath] = carousel || [];
|
216
|
+
const duplicatecCarousel = JSON.parse(JSON.stringify(carouselNode));
|
217
|
+
Transforms.insertNodes(editor, duplicatecCarousel, {
|
218
|
+
at: Path.next(carouselItemPath)
|
219
|
+
});
|
220
|
+
return;
|
221
|
+
}
|
210
222
|
insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
|
211
223
|
} catch (err) {
|
212
224
|
console.log(err);
|
@@ -292,7 +292,7 @@ const GridItem = props => {
|
|
292
292
|
...getBRProps,
|
293
293
|
display: "flex",
|
294
294
|
flexDirection: flexDirection || "column",
|
295
|
-
background: bgColor
|
295
|
+
background: bgColor,
|
296
296
|
borderColor: getBorderColor(),
|
297
297
|
borderWidth: borderWidth || "1px",
|
298
298
|
borderStyle: borderStyle || "solid",
|
@@ -27,6 +27,9 @@ const CheckList = props => {
|
|
27
27
|
checked
|
28
28
|
} = element;
|
29
29
|
const path = ReactEditor.findPath(editor, element);
|
30
|
+
const {
|
31
|
+
customLineHeight
|
32
|
+
} = customProps || {};
|
30
33
|
const handleCheck = e => {
|
31
34
|
Transforms.setNodes(editor, {
|
32
35
|
checked: e.target.checked
|
@@ -45,7 +48,7 @@ const CheckList = props => {
|
|
45
48
|
justifyContent: "center",
|
46
49
|
alignItems: "center",
|
47
50
|
...(style || {}),
|
48
|
-
lineHeight:
|
51
|
+
lineHeight: `${customLineHeight} !important`
|
49
52
|
},
|
50
53
|
children: [/*#__PURE__*/_jsxs("div", {
|
51
54
|
contentEditable: false,
|
@@ -1,5 +1,10 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import Box from "@mui/material/Box";
|
3
|
+
import Card from "@mui/material/Card";
|
4
|
+
import CardMedia from "@mui/material/CardMedia";
|
5
|
+
import CardContent from "@mui/material/CardContent";
|
6
|
+
import Typography from "@mui/material/Typography";
|
7
|
+
import Skeleton from "@mui/material/Skeleton";
|
3
8
|
import Icon from "../../common/Icon";
|
4
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
5
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -15,13 +20,26 @@ const SearchAttachment = props => {
|
|
15
20
|
metadata
|
16
21
|
} = customProps;
|
17
22
|
const {
|
18
|
-
|
19
|
-
|
23
|
+
type,
|
24
|
+
id
|
20
25
|
} = element;
|
21
26
|
const {
|
22
27
|
theme
|
23
28
|
} = useEditorContext();
|
29
|
+
const [title, setTitle] = useState("");
|
30
|
+
const [showSkeleton, setShowSkeleton] = useState(false);
|
24
31
|
const label = Boolean(title?.trim()) ? title : 'Untitled';
|
32
|
+
useEffect(() => {
|
33
|
+
const fetchTitle = async id => {
|
34
|
+
setShowSkeleton(true);
|
35
|
+
const title = await customProps?.services('getDocTitle', id);
|
36
|
+
setTitle(title?.data);
|
37
|
+
setShowSkeleton(false);
|
38
|
+
};
|
39
|
+
if (id) {
|
40
|
+
fetchTitle(id);
|
41
|
+
}
|
42
|
+
}, []);
|
25
43
|
const handleClick = () => {
|
26
44
|
if (metadata && metadata?.actionHandler) {
|
27
45
|
metadata?.actionHandler(type, element);
|
@@ -38,15 +56,15 @@ const SearchAttachment = props => {
|
|
38
56
|
children: /*#__PURE__*/_jsxs(Card, {
|
39
57
|
sx: {
|
40
58
|
display: "flex",
|
41
|
-
justifyContent: "flex-start",
|
42
|
-
alignItems: "flex-end",
|
59
|
+
justifyContent: showSkeleton ? "center" : "flex-start",
|
60
|
+
alignItems: showSkeleton ? "center" : "flex-end",
|
43
61
|
width: "fit-content",
|
44
62
|
maxWidth: '250px',
|
45
63
|
padding: "0px 10px",
|
46
64
|
boxShadow: "none",
|
47
65
|
border: `1px solid ${theme?.palette?.primary?.slashBrainBorder} !important`,
|
48
66
|
borderRadius: "7px !important",
|
49
|
-
background: `${theme?.palette?.containers?.slashBrainCardBg} !important`,
|
67
|
+
background: showSkeleton ? `${theme?.palette?.editor?.menuOptionHoverBackground} !important` : `${theme?.palette?.containers?.slashBrainCardBg} !important`,
|
50
68
|
cursor: 'pointer',
|
51
69
|
margin: '4px 0px',
|
52
70
|
lineHeight: 1.43,
|
@@ -76,7 +94,12 @@ const SearchAttachment = props => {
|
|
76
94
|
width: "unset !important"
|
77
95
|
}
|
78
96
|
},
|
79
|
-
children: /*#__PURE__*/_jsx(
|
97
|
+
children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
|
98
|
+
variant: "circular",
|
99
|
+
width: 14,
|
100
|
+
height: 14,
|
101
|
+
animation: "wave"
|
102
|
+
}) : /*#__PURE__*/_jsx(Icon, {
|
80
103
|
icon: "docsIcon"
|
81
104
|
})
|
82
105
|
}), /*#__PURE__*/_jsx(CardContent, {
|
@@ -94,7 +117,15 @@ const SearchAttachment = props => {
|
|
94
117
|
width: "unset !important"
|
95
118
|
}
|
96
119
|
},
|
97
|
-
children: /*#__PURE__*/
|
120
|
+
children: showSkeleton ? /*#__PURE__*/_jsx(Skeleton, {
|
121
|
+
variant: "text",
|
122
|
+
width: 140,
|
123
|
+
height: 20,
|
124
|
+
animation: "wave",
|
125
|
+
sx: {
|
126
|
+
borderRadius: "4px"
|
127
|
+
}
|
128
|
+
}) : /*#__PURE__*/_jsxs(Typography, {
|
98
129
|
sx: {
|
99
130
|
fontWeight: "500",
|
100
131
|
background: theme?.palette?.text?.slashBrainText,
|
@@ -30,6 +30,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
30
30
|
const [skip, setSkip] = useState(0);
|
31
31
|
const [search, setSearch] = useState("");
|
32
32
|
const [isLoading, setIsLoading] = useState(false);
|
33
|
+
const [total, setTotal] = useState(0);
|
33
34
|
const [debouncedSearch] = useDebounce(search, 300);
|
34
35
|
const limit = 20;
|
35
36
|
const observer = useRef();
|
@@ -63,24 +64,24 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
63
64
|
}
|
64
65
|
};
|
65
66
|
useEffect(() => {
|
66
|
-
getDocs(
|
67
|
-
debouncedSearch,
|
68
|
-
skip,
|
69
|
-
limit,
|
70
|
-
current_doc_id: currentId
|
71
|
-
});
|
67
|
+
getDocs();
|
72
68
|
}, [skip, debouncedSearch]);
|
73
69
|
const getDocs = async () => {
|
70
|
+
if (isLoading) return;
|
71
|
+
if (total > 0 && mapData?.length >= total) return;
|
74
72
|
setIsLoading(true);
|
75
73
|
try {
|
76
74
|
if (otherProps?.services) {
|
77
75
|
const result = await otherProps?.services("getDocs", {
|
78
76
|
skip,
|
79
77
|
limit,
|
80
|
-
search,
|
78
|
+
search: debouncedSearch,
|
81
79
|
current_doc_id: currentId
|
82
80
|
});
|
83
|
-
|
81
|
+
const docs = result?.data?.docs || [];
|
82
|
+
const totalCount = result?.data?.total || 0;
|
83
|
+
setMapData(prev => skip === 0 ? docs : [...prev, ...docs]);
|
84
|
+
setTotal(totalCount);
|
84
85
|
}
|
85
86
|
} catch (error) {
|
86
87
|
console.error("Error fetching documents:", error);
|
@@ -259,7 +259,7 @@ const SearchAndDocList = ({
|
|
259
259
|
xs: 12,
|
260
260
|
children: /*#__PURE__*/_jsx(Typography, {
|
261
261
|
sx: {
|
262
|
-
display: mapData?.length === 0 ? 'flex' : 'none',
|
262
|
+
display: mapData?.length === 0 && !isLoading ? 'flex' : 'none',
|
263
263
|
alignItems: "center",
|
264
264
|
justifyContent: "center",
|
265
265
|
color: theme?.palette?.text?.secondary,
|
@@ -269,15 +269,17 @@ const SearchAndDocList = ({
|
|
269
269
|
},
|
270
270
|
children: "No docs"
|
271
271
|
})
|
272
|
-
}),
|
272
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
273
273
|
item: true,
|
274
|
+
xs: 12,
|
274
275
|
sx: {
|
275
|
-
display:
|
276
|
+
display: isLoading ? 'flex' : 'none',
|
277
|
+
alignItems: "center",
|
276
278
|
justifyContent: "center",
|
277
|
-
|
278
|
-
|
279
|
-
padding: '
|
280
|
-
|
279
|
+
color: theme?.palette?.text?.secondary,
|
280
|
+
fontSize: '12px',
|
281
|
+
padding: '20px',
|
282
|
+
fontWeight: 700
|
281
283
|
},
|
282
284
|
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
283
285
|
})]
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useRef, useState } from "react";
|
2
2
|
import SignatureCanvas from "react-signature-canvas";
|
3
|
-
import { Grid, useMediaQuery } from "@mui/material";
|
3
|
+
import { Grid, IconButton, useMediaQuery } from "@mui/material";
|
4
|
+
import { ResetIcon } from "../../../common/iconListV2";
|
4
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
6
7
|
const DrawSignature = props => {
|
@@ -24,6 +25,13 @@ const DrawSignature = props => {
|
|
24
25
|
signature: result?.imageURL || strImage
|
25
26
|
});
|
26
27
|
};
|
28
|
+
const onClear = () => {
|
29
|
+
canvasRef.clear();
|
30
|
+
setUploading(false);
|
31
|
+
onDataChange({
|
32
|
+
signature: ""
|
33
|
+
});
|
34
|
+
};
|
27
35
|
const isMobile = useMediaQuery("(max-width:599px)");
|
28
36
|
const signatureCanvasStyle = isMobile ? {
|
29
37
|
width: "260px",
|
@@ -31,14 +39,15 @@ const DrawSignature = props => {
|
|
31
39
|
} : {};
|
32
40
|
return /*#__PURE__*/_jsxs(Grid, {
|
33
41
|
container: true,
|
34
|
-
children: [uploading ? "Uploading..." : "", /*#__PURE__*/
|
42
|
+
children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsxs(Grid, {
|
35
43
|
item: true,
|
36
44
|
xs: 12,
|
37
45
|
style: {
|
38
46
|
width: "100%",
|
39
|
-
height: "209px"
|
47
|
+
height: "209px",
|
48
|
+
position: "relative"
|
40
49
|
},
|
41
|
-
children: /*#__PURE__*/_jsx(SignatureCanvas, {
|
50
|
+
children: [/*#__PURE__*/_jsx(SignatureCanvas, {
|
42
51
|
canvasProps: {
|
43
52
|
className: "signature-canvas",
|
44
53
|
...signatureCanvasStyle
|
@@ -47,7 +56,11 @@ const DrawSignature = props => {
|
|
47
56
|
ref: ref => canvasRef = ref,
|
48
57
|
maxWidth: brush.size || 2,
|
49
58
|
penColor: brush?.color || "#000"
|
50
|
-
})
|
59
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
60
|
+
className: "clear-canvas",
|
61
|
+
onClick: onClear,
|
62
|
+
children: /*#__PURE__*/_jsx(ResetIcon, {})
|
63
|
+
})]
|
51
64
|
})]
|
52
65
|
});
|
53
66
|
};
|
@@ -30,15 +30,28 @@ const UploadSignature = props => {
|
|
30
30
|
signature: result?.imageURL || strImage
|
31
31
|
});
|
32
32
|
};
|
33
|
+
const onRemove = () => {
|
34
|
+
setBase64(null);
|
35
|
+
setUploading(false);
|
36
|
+
onUploadDone({
|
37
|
+
signature: ""
|
38
|
+
});
|
39
|
+
};
|
33
40
|
return /*#__PURE__*/_jsxs("div", {
|
34
41
|
className: "signature-tab2",
|
35
|
-
children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/
|
42
|
+
children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsxs("div", {
|
36
43
|
className: "upload-sign-img-wrapper",
|
37
|
-
children: /*#__PURE__*/_jsx("img", {
|
44
|
+
children: [/*#__PURE__*/_jsx("img", {
|
38
45
|
className: "upload-sign-img",
|
39
46
|
src: base64,
|
40
47
|
alt: "Signature"
|
41
|
-
})
|
48
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
49
|
+
variant: "body2",
|
50
|
+
gutterBottom: true,
|
51
|
+
className: "remove-sign-img-btn",
|
52
|
+
onClick: onRemove,
|
53
|
+
children: "Remove"
|
54
|
+
})]
|
42
55
|
}) : /*#__PURE__*/_jsxs("div", {
|
43
56
|
className: "upload-input-wrapper",
|
44
57
|
children: [/*#__PURE__*/_jsx("input", {
|
@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
|
|
5
5
|
import { isTextSelected } from "../../utils/helper";
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
|
+
import { getBreakpointLineSpacing, getDevice } from "../../helper/theme";
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -29,8 +30,12 @@ const SimpleText = props => {
|
|
29
30
|
} = customProps;
|
30
31
|
// const { element: pageSt } = getPageSettings(editor) || {};
|
31
32
|
// const { pageColor } = pageSt?.pageProps || {};
|
33
|
+
const breakpoint = getDevice(window.innerWidth);
|
34
|
+
const lineH = element?.children[0]?.lineHeight;
|
35
|
+
const lineHeight = getBreakpointLineSpacing(lineH, breakpoint);
|
32
36
|
const classes = SimpleTextStyle({
|
33
|
-
pageColor: "#FFFFFF"
|
37
|
+
pageColor: "#FFFFFF",
|
38
|
+
lineHeight
|
34
39
|
});
|
35
40
|
const selected = useSelected();
|
36
41
|
const path = ReactEditor.findPath(editor, element);
|
@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
|
|
35
35
|
height: "24px",
|
36
36
|
overflow: "hidden",
|
37
37
|
fontSize: "14px",
|
38
|
-
display:
|
39
|
-
alignItems:
|
38
|
+
display: "inline-flex",
|
39
|
+
alignItems: "center",
|
40
40
|
"& .bg-pad-sl": {
|
41
41
|
padding: "2px 4px 2px 4px",
|
42
42
|
background: "transparent",
|
@@ -13,9 +13,13 @@ function Draggable(props) {
|
|
13
13
|
} = props?.data || {};
|
14
14
|
const style = transform ? {
|
15
15
|
transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
|
16
|
-
} :
|
16
|
+
} : {};
|
17
17
|
return /*#__PURE__*/_jsx(Box, {
|
18
|
-
style:
|
18
|
+
style: {
|
19
|
+
...style,
|
20
|
+
touchAction: "none" // Disables scrolling while dragging. Necessary for proper mobile drag functionality.
|
21
|
+
},
|
22
|
+
|
19
23
|
ref: setNodeRef,
|
20
24
|
...listeners,
|
21
25
|
...attributes,
|
@@ -86,6 +86,13 @@ const TableStyles = theme => {
|
|
86
86
|
background: "#2563EB"
|
87
87
|
}
|
88
88
|
},
|
89
|
+
mobileCellResizer: {
|
90
|
+
position: "absolute",
|
91
|
+
right: "-10px",
|
92
|
+
top: "-10px",
|
93
|
+
zIndex: 4000,
|
94
|
+
padding: "2px"
|
95
|
+
},
|
89
96
|
mobileToolDrawer: {
|
90
97
|
"& .customSelectContainer": {
|
91
98
|
border: "none !important",
|
@@ -307,7 +307,7 @@ const Table = props => {
|
|
307
307
|
onScroll: handleScroll,
|
308
308
|
onMouseOver: onMouseOver,
|
309
309
|
onMouseLeave: onMouseLeave,
|
310
|
-
className:
|
310
|
+
className: "custom-scroll",
|
311
311
|
children: [/*#__PURE__*/_jsx(TableComp, {
|
312
312
|
className: readOnly ? "readOnly" : "",
|
313
313
|
sx: {
|
@@ -345,8 +345,8 @@ const Table = props => {
|
|
345
345
|
handleAction: handleAction,
|
346
346
|
exandTools: exandTools,
|
347
347
|
openSetttings: openSetttings,
|
348
|
-
|
349
|
-
|
348
|
+
hideTools: hideTools,
|
349
|
+
translation: translation
|
350
350
|
}), /*#__PURE__*/_jsx(MoreTableSettings, {
|
351
351
|
exandTools: exandTools,
|
352
352
|
handleAction: handleAction,
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useState, useEffect, useMemo } from "react";
|
2
2
|
import { Editor, Path, Transforms } from "slate";
|
3
|
-
import { Box } from "@mui/material";
|
3
|
+
import { Box, IconButton } from "@mui/material";
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
5
5
|
import useTableResize from "../../utils/customHooks/useTableResize";
|
6
6
|
import { TableUtil } from "../../utils/table";
|
@@ -12,6 +12,7 @@ import TablePopup from "./TablePopup";
|
|
12
12
|
import { Droppable } from "./Droppable";
|
13
13
|
import { useDndContext } from "@dnd-kit/core";
|
14
14
|
import { getNodeWithType } from "../../utils/helper";
|
15
|
+
import { ResizeIcon } from "../../common/iconListV2";
|
15
16
|
import { isEmptyTextNode } from "../../helper";
|
16
17
|
import SimpleText from "../SimpleText";
|
17
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -41,16 +42,32 @@ const Resizer = ({
|
|
41
42
|
onMouseDown,
|
42
43
|
height
|
43
44
|
}) => {
|
45
|
+
const eventProps = {
|
46
|
+
onPointerDown: onMouseDown
|
47
|
+
};
|
44
48
|
return /*#__PURE__*/_jsx(_Fragment, {
|
45
49
|
children: /*#__PURE__*/_jsx(Box, {
|
46
50
|
component: "div",
|
47
51
|
className: "cell-resizer",
|
48
52
|
contentEditable: false,
|
49
|
-
onPointerDown: onMouseDown,
|
50
53
|
sx: classes.cellResizer,
|
51
54
|
style: {
|
52
55
|
height: `${height}px`
|
53
|
-
}
|
56
|
+
},
|
57
|
+
...eventProps
|
58
|
+
})
|
59
|
+
});
|
60
|
+
};
|
61
|
+
const MobileResizer = ({
|
62
|
+
classes,
|
63
|
+
onMouseDown
|
64
|
+
}) => {
|
65
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
66
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
67
|
+
contentEditable: false,
|
68
|
+
sx: classes.mobileCellResizer,
|
69
|
+
onTouchStart: onMouseDown,
|
70
|
+
children: /*#__PURE__*/_jsx(ResizeIcon, {})
|
54
71
|
})
|
55
72
|
});
|
56
73
|
};
|
@@ -115,7 +132,8 @@ const TableCell = props => {
|
|
115
132
|
size: element?.size,
|
116
133
|
minMaxProps: {
|
117
134
|
minWidth: 30
|
118
|
-
}
|
135
|
+
},
|
136
|
+
isMobile
|
119
137
|
});
|
120
138
|
const [tableSize, setTableSize] = useState({});
|
121
139
|
const [openSettings, setOpenSettings] = useState(false);
|
@@ -420,6 +438,7 @@ const TableCell = props => {
|
|
420
438
|
resetSelection
|
421
439
|
};
|
422
440
|
const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
|
441
|
+
const TableResizer = isMobile && hoverCol === column ? MobileResizer : Resizer;
|
423
442
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
424
443
|
children: [/*#__PURE__*/_jsxs("td", {
|
425
444
|
...element.attr,
|
@@ -454,7 +473,7 @@ const TableCell = props => {
|
|
454
473
|
padding: "8px"
|
455
474
|
},
|
456
475
|
children: children
|
457
|
-
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(
|
476
|
+
}), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(TableResizer, {
|
458
477
|
classes: classes,
|
459
478
|
onMouseDown: onMouseDown,
|
460
479
|
height: tableDOM?.getBoundingClientRect()?.height
|
@@ -4,6 +4,12 @@ import { useSlate } from "slate-react";
|
|
4
4
|
import { getNodeText } from "../../utils/helper";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const isEmptyTextNode = node => {
|
8
|
+
if (Text.isText(node)) {
|
9
|
+
return !node.text.trim();
|
10
|
+
}
|
11
|
+
return false;
|
12
|
+
};
|
7
13
|
const Title = props => {
|
8
14
|
const {
|
9
15
|
attributes,
|
@@ -50,10 +56,4 @@ const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
|
|
50
56
|
}
|
51
57
|
}, [editor.selection]);
|
52
58
|
return null;
|
53
|
-
};
|
54
|
-
const isEmptyTextNode = node => {
|
55
|
-
if (Text.isText(node)) {
|
56
|
-
return !node.text.trim();
|
57
|
-
}
|
58
|
-
return false;
|
59
59
|
};
|
@@ -34,7 +34,8 @@ const VariableButton = props => {
|
|
34
34
|
PaperProps: {
|
35
35
|
style: {
|
36
36
|
maxHeight: 300,
|
37
|
-
overflowY: "auto"
|
37
|
+
overflowY: "auto",
|
38
|
+
transformOrigin: 'top left'
|
38
39
|
},
|
39
40
|
sx: {
|
40
41
|
"&::-webkit-scrollbar-track": {
|
@@ -44,6 +45,14 @@ const VariableButton = props => {
|
|
44
45
|
borderRadius: "16px"
|
45
46
|
}
|
46
47
|
}
|
48
|
+
},
|
49
|
+
anchorOrigin: {
|
50
|
+
vertical: 'bottom',
|
51
|
+
horizontal: 'right'
|
52
|
+
},
|
53
|
+
transformOrigin: {
|
54
|
+
vertical: 'top',
|
55
|
+
horizontal: 'right'
|
47
56
|
}
|
48
57
|
},
|
49
58
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
@@ -45,12 +45,13 @@ const MiniEditor = props => {
|
|
45
45
|
const {
|
46
46
|
translationMock
|
47
47
|
} = otherProps;
|
48
|
+
const dummyTranslation = () => {};
|
48
49
|
const customProps = {
|
49
50
|
...(otherProps || {}),
|
50
51
|
readOnly: isReadOnly,
|
51
52
|
editorPlaceholder: miniEditorPlaceholder,
|
52
53
|
page_id: id,
|
53
|
-
translation: translation || translationMock
|
54
|
+
translation: translation || translationMock || dummyTranslation
|
54
55
|
};
|
55
56
|
const [mentions, setMentions] = useMentions({
|
56
57
|
editor,
|
@@ -133,7 +133,7 @@ const editorStyles = ({
|
|
133
133
|
},
|
134
134
|
"& .accordion-summary-collapse-btn": {
|
135
135
|
padding: "4px",
|
136
|
-
width:
|
136
|
+
width: "5px"
|
137
137
|
},
|
138
138
|
"& .workflow-icon-btn": {
|
139
139
|
pointerEvents: "none",
|
@@ -242,7 +242,7 @@ const editorStyles = ({
|
|
242
242
|
}
|
243
243
|
},
|
244
244
|
"& .section-tw": {
|
245
|
-
background:
|
245
|
+
background: "transparent !important",
|
246
246
|
"& button": {
|
247
247
|
padding: "2px",
|
248
248
|
borderRadius: "0px",
|
@@ -291,8 +291,8 @@ const editorStyles = ({
|
|
291
291
|
}
|
292
292
|
},
|
293
293
|
"& ::selection": {
|
294
|
-
background:
|
295
|
-
color:
|
294
|
+
background: "rgba(35, 131, 226, 0.35)!important",
|
295
|
+
color: "inherit"
|
296
296
|
},
|
297
297
|
"&.readOnlyContainer": {
|
298
298
|
"& .max-content": {
|
@@ -302,7 +302,7 @@ const editorStyles = ({
|
|
302
302
|
},
|
303
303
|
fullScreenWrapper: {
|
304
304
|
"& .editor-wrapper": {
|
305
|
-
paddingTop:
|
305
|
+
paddingTop: "20px"
|
306
306
|
},
|
307
307
|
"& .MuiDialog-paper, & .MuiPopover-paper": {
|
308
308
|
background: `${theme?.palette?.editor?.background} !important`
|
@@ -1,8 +1,32 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Select, MenuItem } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
3
|
+
import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
|
4
|
+
import { toolbarGroups } from "../toolbarGroups.js";
|
4
5
|
import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
|
6
|
+
import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList.js";
|
5
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
const allTools = toolbarGroups.flat();
|
9
|
+
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
10
|
+
export const getValue = (editor, format) => {
|
11
|
+
switch (format) {
|
12
|
+
case "fontFamily":
|
13
|
+
{
|
14
|
+
const style = getSelectedElementStyle("font-family", editor, format);
|
15
|
+
return style || defaultFonts[0];
|
16
|
+
}
|
17
|
+
case "fontWeight":
|
18
|
+
{
|
19
|
+
const {
|
20
|
+
options
|
21
|
+
} = fontWeight || {};
|
22
|
+
const fontWeightStyle = getSelectedElementStyle("font-weight", editor, format);
|
23
|
+
const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
|
24
|
+
return selected?.value;
|
25
|
+
}
|
26
|
+
default:
|
27
|
+
return activeMark(editor, format);
|
28
|
+
}
|
29
|
+
};
|
6
30
|
const Dropdown = ({
|
7
31
|
classes,
|
8
32
|
editor,
|
@@ -10,7 +34,7 @@ const Dropdown = ({
|
|
10
34
|
options,
|
11
35
|
width
|
12
36
|
}) => {
|
13
|
-
const value = activeMark(editor, format);
|
37
|
+
const value = activeMark(editor, format, true) || getValue(editor, format);
|
14
38
|
const changeMarkData = (event, format) => {
|
15
39
|
event.preventDefault();
|
16
40
|
const value = event.target.value;
|
@@ -20,7 +44,7 @@ const Dropdown = ({
|
|
20
44
|
});
|
21
45
|
};
|
22
46
|
return /*#__PURE__*/_jsx(Select, {
|
23
|
-
value: value,
|
47
|
+
value: value || options?.[0]?.value,
|
24
48
|
className: "editor-dd",
|
25
49
|
onChange: e => changeMarkData(e, format),
|
26
50
|
MenuProps: {
|