@flozy/editor 3.9.9 → 4.0.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 +28 -17
- package/dist/Editor/CommonEditor.js +109 -177
- package/dist/Editor/Editor.css +12 -8
- package/dist/Editor/Elements/AI/AIInput.js +24 -18
- package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +89 -66
- package/dist/Editor/Elements/AI/Styles.js +1 -2
- package/dist/Editor/Elements/AI/helper.js +3 -5
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +21 -5
- package/dist/Editor/Elements/AppHeader/AppHeader.js +4 -26
- package/dist/Editor/Elements/Button/EditorButton.js +16 -28
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +17 -60
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +1 -2
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +4 -2
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- package/dist/Editor/Elements/Grid/Grid.js +3 -27
- package/dist/Editor/Elements/Grid/GridItem.js +1 -3
- package/dist/Editor/Elements/Link/Link.js +1 -6
- package/dist/Editor/Elements/Link/LinkButton.js +2 -4
- package/dist/Editor/Elements/Link/LinkPopup.js +3 -10
- package/dist/Editor/Elements/List/CheckList.js +2 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Signature/SignaturePopup.js +5 -20
- package/dist/Editor/Elements/Table/Styles.js +1 -23
- package/dist/Editor/Elements/Table/Table.js +1 -2
- package/dist/Editor/Elements/Table/TableCell.js +7 -69
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +0 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +2 -26
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +18 -29
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -4
- package/dist/Editor/Toolbar/Mini/Options/Options.js +0 -10
- package/dist/Editor/Toolbar/Mini/Styles.js +0 -7
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +13 -12
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +13 -12
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +11 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +86 -213
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +33 -40
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +5 -4
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/assets/svg/AIIcons.js +1 -153
- package/dist/Editor/assets/svg/AddTemplateIcon.js +10 -13
- package/dist/Editor/assets/svg/TextIcon.js +5 -8
- package/dist/Editor/common/ColorPickerButton.js +18 -26
- package/dist/Editor/common/DnD/DragHandleButton.js +47 -56
- package/dist/Editor/common/Icon.js +3 -43
- package/dist/Editor/common/LinkSettings/NavComponents.js +2 -5
- package/dist/Editor/common/LinkSettings/index.js +2 -4
- package/dist/Editor/common/LinkSettings/navOptions.js +2 -7
- package/dist/Editor/common/LinkSettings/style.js +8 -11
- package/dist/Editor/common/Section/index.js +7 -57
- package/dist/Editor/common/Section/styles.js +0 -11
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +2 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +29 -33
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +25 -31
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -29
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +4 -14
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconslist.js +31 -0
- package/dist/Editor/helper/index.js +22 -0
- package/dist/Editor/helper/theme.js +4 -189
- package/dist/Editor/hooks/useMouseMove.js +1 -4
- package/dist/Editor/hooks/useWindowMessage.js +7 -10
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +1 -1
- package/dist/Editor/plugins/withTable.js +1 -1
- package/dist/Editor/theme/ThemeList.js +173 -50
- package/dist/Editor/utils/SlateUtilityFunctions.js +27 -169
- package/dist/Editor/utils/button.js +17 -1
- package/dist/Editor/utils/events.js +2 -54
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +2 -31
- package/dist/Editor/utils/table.js +43 -51
- package/package.json +3 -4
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +0 -73
- package/dist/Editor/Elements/AI/VoiceToText/index.js +0 -184
- package/dist/Editor/Elements/AI/VoiceToText/style.js +0 -40
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
- package/dist/Editor/Elements/Redo/RedoButton.js +0 -14
- package/dist/Editor/Elements/Undo/UndoButton.js +0 -14
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/RedoIcon.js +0 -27
- package/dist/Editor/assets/svg/SettingsIcon.js +0 -28
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- package/dist/Editor/assets/svg/UndoIcon.js +0 -27
- package/dist/Editor/common/CustomColorPicker/index.js +0 -106
- package/dist/Editor/common/CustomColorPicker/style.js +0 -53
- package/dist/Editor/common/CustomDialog/index.js +0 -94
- package/dist/Editor/common/CustomDialog/style.js +0 -67
- package/dist/Editor/common/CustomSelect.js +0 -33
- package/dist/Editor/hooks/useEditorTheme.js +0 -139
- package/dist/Editor/theme/index.js +0 -144
- 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 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -290
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -123
- package/dist/Editor/themeSettings/fonts/index.js +0 -213
- package/dist/Editor/themeSettings/fonts/style.js +0 -44
- package/dist/Editor/themeSettings/icons.js +0 -60
- package/dist/Editor/themeSettings/index.js +0 -320
- package/dist/Editor/themeSettings/style.js +0 -152
- package/dist/Editor/themeSettingsAI/icons.js +0 -96
- package/dist/Editor/themeSettingsAI/index.js +0 -356
- package/dist/Editor/themeSettingsAI/saveTheme.js +0 -190
- package/dist/Editor/themeSettingsAI/style.js +0 -247
|
@@ -15,8 +15,7 @@ const ColorPickerStyles = theme => ({
|
|
|
15
15
|
colorPopper: {
|
|
16
16
|
"& .MuiPaper-root": {
|
|
17
17
|
backgroundColor: theme?.palette?.editor?.background,
|
|
18
|
-
|
|
19
|
-
"@media only screen and (max-width: 600px)": {
|
|
18
|
+
'@media only screen and (max-width: 600px)': {
|
|
20
19
|
marginTop: "-40px"
|
|
21
20
|
}
|
|
22
21
|
}
|
|
@@ -5,13 +5,15 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
5
5
|
const EmojiPicker = props => {
|
|
6
6
|
const {
|
|
7
7
|
onEmojiSelect,
|
|
8
|
-
onClose
|
|
8
|
+
onClose,
|
|
9
|
+
theme = 'dark'
|
|
9
10
|
} = props;
|
|
10
11
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
11
12
|
children: /*#__PURE__*/_jsx(Picker, {
|
|
12
13
|
data: data,
|
|
13
14
|
onEmojiSelect: onEmojiSelect,
|
|
14
|
-
onClickOutside: onClose
|
|
15
|
+
onClickOutside: onClose,
|
|
16
|
+
theme: theme
|
|
15
17
|
})
|
|
16
18
|
});
|
|
17
19
|
};
|
|
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
|
|
|
71
71
|
children: [/*#__PURE__*/_jsx(Grid, {
|
|
72
72
|
item: true,
|
|
73
73
|
sx: classes.radioBtn,
|
|
74
|
-
children: /*#__PURE__*/
|
|
74
|
+
children: /*#__PURE__*/_jsx(RadioGroup, {
|
|
75
75
|
name: "set timing",
|
|
76
76
|
value: schedule,
|
|
77
77
|
defaultValue: 1,
|
|
78
|
-
children:
|
|
78
|
+
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
|
79
79
|
value: "immediately",
|
|
80
80
|
label: "Immediately",
|
|
81
81
|
onChange: () => {
|
|
@@ -84,16 +84,7 @@ const FormWorkflow = props => {
|
|
|
84
84
|
control: /*#__PURE__*/_jsx(Radio, {
|
|
85
85
|
size: "small"
|
|
86
86
|
})
|
|
87
|
-
})
|
|
88
|
-
value: "after",
|
|
89
|
-
label: "After",
|
|
90
|
-
onChange: () => {
|
|
91
|
-
setSchedule("after");
|
|
92
|
-
},
|
|
93
|
-
control: /*#__PURE__*/_jsx(Radio, {
|
|
94
|
-
size: "small"
|
|
95
|
-
})
|
|
96
|
-
})]
|
|
87
|
+
})
|
|
97
88
|
})
|
|
98
89
|
}), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
|
|
99
90
|
item: true,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
|
2
2
|
import React, { useState } from "react";
|
|
3
|
-
import { Transforms, Path
|
|
3
|
+
import { Transforms, Path } from "slate";
|
|
4
4
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
|
5
5
|
import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
|
|
6
6
|
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
|
@@ -15,7 +15,6 @@ import { gridItem } from "../../utils/gridItem";
|
|
|
15
15
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
|
16
16
|
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
|
17
17
|
import useWindowResize from "../../hooks/useWindowResize";
|
|
18
|
-
import { useTheme } from "@emotion/react";
|
|
19
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
19
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
21
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -30,16 +29,11 @@ const GridToolBar = ({
|
|
|
30
29
|
onAddGridItem,
|
|
31
30
|
onAddSection,
|
|
32
31
|
onMoveSection,
|
|
33
|
-
path
|
|
34
|
-
isSectionFullWidth
|
|
32
|
+
path
|
|
35
33
|
}) => {
|
|
36
34
|
return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
|
|
37
35
|
className: "grid-container-toolbar",
|
|
38
36
|
contentEditable: false,
|
|
39
|
-
style: isSectionFullWidth ? {
|
|
40
|
-
right: "4px",
|
|
41
|
-
top: "4px"
|
|
42
|
-
} : {},
|
|
43
37
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
|
44
38
|
title: "Grid Settings",
|
|
45
39
|
arrow: true,
|
|
@@ -80,19 +74,7 @@ const GridToolBar = ({
|
|
|
80
74
|
}) : null]
|
|
81
75
|
}) : null;
|
|
82
76
|
};
|
|
83
|
-
const getParentEl = (editor, path) => {
|
|
84
|
-
try {
|
|
85
|
-
if (path?.length) {
|
|
86
|
-
return Node.parent(editor, path);
|
|
87
|
-
} else {
|
|
88
|
-
return null;
|
|
89
|
-
}
|
|
90
|
-
} catch (err) {
|
|
91
|
-
return null;
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
77
|
const Grid = props => {
|
|
95
|
-
const theme = useTheme();
|
|
96
78
|
const {
|
|
97
79
|
attributes,
|
|
98
80
|
children,
|
|
@@ -131,11 +113,6 @@ const Grid = props => {
|
|
|
131
113
|
const selected = hoverPath === path.join(",");
|
|
132
114
|
const [showTool] = useEditorSelection(editor);
|
|
133
115
|
const [size] = useWindowResize();
|
|
134
|
-
const parentElement = getParentEl(editor, path);
|
|
135
|
-
const {
|
|
136
|
-
sectionGridSize
|
|
137
|
-
} = parentElement || {};
|
|
138
|
-
const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
|
|
139
116
|
const onAddGridItem = () => {
|
|
140
117
|
const currentPath = editor.selection?.anchor?.path;
|
|
141
118
|
const ancestorsPath = Path.ancestors(currentPath, {
|
|
@@ -350,8 +327,7 @@ const Grid = props => {
|
|
|
350
327
|
onAddGridItem: onAddGridItem,
|
|
351
328
|
onAddSection: onAddSection,
|
|
352
329
|
onMoveSection: onMoveSection,
|
|
353
|
-
path: path
|
|
354
|
-
isSectionFullWidth: isSectionFullWidth
|
|
330
|
+
path: path
|
|
355
331
|
})]
|
|
356
332
|
}), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
|
|
357
333
|
element: element,
|
|
@@ -8,7 +8,6 @@ import { GridSettingsIcon } from "../../common/iconslist";
|
|
|
8
8
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
|
9
9
|
import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
|
|
10
10
|
import { isEmptyNode } from "../../utils/helper";
|
|
11
|
-
import { useTheme } from "@emotion/react";
|
|
12
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
13
|
const GridItemToolbar = ({
|
|
@@ -35,7 +34,6 @@ const GridItemToolbar = ({
|
|
|
35
34
|
}) : null;
|
|
36
35
|
};
|
|
37
36
|
const GridItem = props => {
|
|
38
|
-
const theme = useTheme();
|
|
39
37
|
const {
|
|
40
38
|
attributes,
|
|
41
39
|
children,
|
|
@@ -121,7 +119,7 @@ const GridItem = props => {
|
|
|
121
119
|
xs: xsHidden ? "none" : "flex"
|
|
122
120
|
},
|
|
123
121
|
flexDirection: flexDirection || "column",
|
|
124
|
-
background: bgColor,
|
|
122
|
+
background: bgColor || "transparent",
|
|
125
123
|
borderColor: getBorderColor(),
|
|
126
124
|
borderWidth: borderWidth || "1px",
|
|
127
125
|
borderRadius: {
|
|
@@ -9,7 +9,6 @@ import { removeLink } from "../../utils/link";
|
|
|
9
9
|
import LinkPopup from "./LinkPopup";
|
|
10
10
|
import "./styles.css";
|
|
11
11
|
import { absoluteLink } from "../../utils/helper";
|
|
12
|
-
import { useEditorContext } from "../../hooks/useMouseMove";
|
|
13
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
14
|
const Link = props => {
|
|
@@ -30,9 +29,6 @@ const Link = props => {
|
|
|
30
29
|
const path = ReactEditor.findPath(editor, element);
|
|
31
30
|
const urlPath = element.url || element.href;
|
|
32
31
|
const absLink = absoluteLink(urlPath);
|
|
33
|
-
const {
|
|
34
|
-
theme
|
|
35
|
-
} = useEditorContext();
|
|
36
32
|
const updateLink = () => {
|
|
37
33
|
Transforms.setNodes(editor, {
|
|
38
34
|
href: linkData?.url,
|
|
@@ -111,8 +107,7 @@ const Link = props => {
|
|
|
111
107
|
linkData: linkData,
|
|
112
108
|
handleClose: handleClose,
|
|
113
109
|
handleInputChange: handleInputChange,
|
|
114
|
-
handleInsertLink: updateLink
|
|
115
|
-
theme: theme
|
|
110
|
+
handleInsertLink: updateLink
|
|
116
111
|
})]
|
|
117
112
|
});
|
|
118
113
|
};
|
|
@@ -9,8 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
const LinkButton = props => {
|
|
11
11
|
const {
|
|
12
|
-
editor
|
|
13
|
-
theme
|
|
12
|
+
editor
|
|
14
13
|
} = props;
|
|
15
14
|
const linkInputRef = useRef(null);
|
|
16
15
|
const [showInput, setShowInput] = useState(false);
|
|
@@ -78,8 +77,7 @@ const LinkButton = props => {
|
|
|
78
77
|
linkData: linkData,
|
|
79
78
|
handleClose: handleClose,
|
|
80
79
|
handleInputChange: handleInputChange,
|
|
81
|
-
handleInsertLink: handleInsertLink
|
|
82
|
-
theme: theme
|
|
80
|
+
handleInsertLink: handleInsertLink
|
|
83
81
|
})]
|
|
84
82
|
});
|
|
85
83
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Grid, TextField, Button, IconButton, Typography, Checkbox } from "@mui/material";
|
|
3
3
|
import CloseIcon from "@mui/icons-material/Close";
|
|
4
|
-
import LinkPopupStyles from "./LinkPopupStyles";
|
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
6
|
const LinkPopup = props => {
|
|
@@ -10,11 +9,8 @@ const LinkPopup = props => {
|
|
|
10
9
|
handleClose,
|
|
11
10
|
linkData,
|
|
12
11
|
handleInputChange,
|
|
13
|
-
handleInsertLink
|
|
14
|
-
theme
|
|
12
|
+
handleInsertLink
|
|
15
13
|
} = props;
|
|
16
|
-
const themeType = localStorage.getItem("themeType");
|
|
17
|
-
const classes = LinkPopupStyles(themeType);
|
|
18
14
|
return /*#__PURE__*/_jsxs(Dialog, {
|
|
19
15
|
fullWidth: true,
|
|
20
16
|
open: open,
|
|
@@ -48,15 +44,13 @@ const LinkPopup = props => {
|
|
|
48
44
|
style: {
|
|
49
45
|
paddingTop: "12px"
|
|
50
46
|
},
|
|
51
|
-
className: classes.titleTypo,
|
|
52
47
|
children: /*#__PURE__*/_jsx(TextField, {
|
|
53
48
|
size: "small",
|
|
54
49
|
fullWidth: true,
|
|
55
50
|
value: linkData?.name,
|
|
56
51
|
name: "name",
|
|
57
52
|
placeholder: "Link Title",
|
|
58
|
-
onChange: handleInputChange
|
|
59
|
-
sx: classes.addLinkField
|
|
53
|
+
onChange: handleInputChange
|
|
60
54
|
})
|
|
61
55
|
}), /*#__PURE__*/_jsx(Grid, {
|
|
62
56
|
item: true,
|
|
@@ -70,8 +64,7 @@ const LinkPopup = props => {
|
|
|
70
64
|
name: "url",
|
|
71
65
|
value: linkData?.url,
|
|
72
66
|
placeholder: "https://google.com",
|
|
73
|
-
onChange: handleInputChange
|
|
74
|
-
sx: classes.addLinkField
|
|
67
|
+
onChange: handleInputChange
|
|
75
68
|
})
|
|
76
69
|
}), /*#__PURE__*/_jsx(Grid, {
|
|
77
70
|
item: true,
|
|
@@ -68,7 +68,8 @@ const CheckList = ({
|
|
|
68
68
|
style: {
|
|
69
69
|
flex: 1,
|
|
70
70
|
opacity: checked ? 1 : 1,
|
|
71
|
-
textDecoration: !checked ? "none" : "none"
|
|
71
|
+
textDecoration: !checked ? "none" : "none",
|
|
72
|
+
width: '90%'
|
|
72
73
|
},
|
|
73
74
|
className: `checkbox-list content-editable ${isEmpty ? "empty" : ""}`,
|
|
74
75
|
placeholder: nestedCheckList ? "" : "Todo List",
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { useSlateStatic } from "slate-react";
|
|
3
3
|
import PageSettingsPopup from "./PageSettingsPopup";
|
|
4
|
+
import { PageSettings } from "../../common/iconslist";
|
|
4
5
|
import ToolbarIcon from "../../common/ToolbarIcon";
|
|
5
6
|
import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
|
|
6
|
-
import SettingsIcon from "../../assets/svg/SettingsIcon";
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -45,13 +45,13 @@ const PageSettingsButton = props => {
|
|
|
45
45
|
setOpenSettings(false);
|
|
46
46
|
};
|
|
47
47
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
48
|
-
children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(
|
|
48
|
+
children: [from === "miniToolBar" ? /*#__PURE__*/_jsx(PageSettings, {
|
|
49
49
|
onClick: onSettings,
|
|
50
50
|
className: "removeDefaultSvgCls"
|
|
51
51
|
}) : /*#__PURE__*/_jsx(ToolbarIcon, {
|
|
52
52
|
title: "Page Settings",
|
|
53
53
|
onClick: onSettings,
|
|
54
|
-
icon: /*#__PURE__*/_jsx(
|
|
54
|
+
icon: /*#__PURE__*/_jsx(PageSettings, {}),
|
|
55
55
|
icoBtnType: icoBtnType
|
|
56
56
|
}), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
|
|
57
57
|
element: openSetttings?.element || {},
|
|
@@ -32,14 +32,12 @@ const SignaturePopup = props => {
|
|
|
32
32
|
const [open, setOpen] = useState(false);
|
|
33
33
|
const [tab, setTab] = useState(0);
|
|
34
34
|
const SeletectedTab = SignatureOptions[tab];
|
|
35
|
-
const defaultName = metadata?.signatureDetails?.name;
|
|
36
|
-
const defaultEmail = metadata?.signatureDetails?.email;
|
|
37
35
|
const [signedData, setSignedData] = useState({
|
|
38
36
|
signedOn: new Date(),
|
|
39
37
|
signature: "",
|
|
40
38
|
signedText: "",
|
|
41
|
-
signedBy:
|
|
42
|
-
signedByEmail:
|
|
39
|
+
signedBy: "",
|
|
40
|
+
signedByEmail: ""
|
|
43
41
|
});
|
|
44
42
|
const [brush, setBrush] = useState({
|
|
45
43
|
size: 1,
|
|
@@ -264,14 +262,8 @@ const SignaturePopup = props => {
|
|
|
264
262
|
id: "signedBy",
|
|
265
263
|
name: "signedBy",
|
|
266
264
|
placeholder: "Enter Name",
|
|
267
|
-
defaultValue: defaultName || "",
|
|
268
265
|
size: "small",
|
|
269
|
-
onChange: onChange
|
|
270
|
-
sx: {
|
|
271
|
-
'& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
|
|
272
|
-
borderColor: '#ccc'
|
|
273
|
-
}
|
|
274
|
-
}
|
|
266
|
+
onChange: onChange
|
|
275
267
|
})
|
|
276
268
|
})]
|
|
277
269
|
}), /*#__PURE__*/_jsxs(Grid, {
|
|
@@ -319,8 +311,7 @@ const SignaturePopup = props => {
|
|
|
319
311
|
},
|
|
320
312
|
children: [/*#__PURE__*/_jsx(Grid, {
|
|
321
313
|
style: {
|
|
322
|
-
marginRight: "8px"
|
|
323
|
-
minWidth: '44px'
|
|
314
|
+
marginRight: "8px"
|
|
324
315
|
},
|
|
325
316
|
children: /*#__PURE__*/_jsx("label", {
|
|
326
317
|
htmlFor: "signedByEmail",
|
|
@@ -335,13 +326,7 @@ const SignaturePopup = props => {
|
|
|
335
326
|
name: "signedByEmail",
|
|
336
327
|
placeholder: "Enter Email",
|
|
337
328
|
size: "small",
|
|
338
|
-
onChange: onChange
|
|
339
|
-
sx: {
|
|
340
|
-
'& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
|
|
341
|
-
borderColor: '#ccc'
|
|
342
|
-
}
|
|
343
|
-
},
|
|
344
|
-
defaultValue: defaultEmail || ""
|
|
329
|
+
onChange: onChange
|
|
345
330
|
})
|
|
346
331
|
})]
|
|
347
332
|
})]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const TableStyles =
|
|
1
|
+
const TableStyles = () => ({
|
|
2
2
|
tableToolBar: {
|
|
3
3
|
position: "absolute",
|
|
4
4
|
top: "-34px",
|
|
@@ -61,28 +61,6 @@ const TableStyles = themeType => ({
|
|
|
61
61
|
"&:hover": {
|
|
62
62
|
background: "#ccc"
|
|
63
63
|
}
|
|
64
|
-
},
|
|
65
|
-
deleteCellsPopUp: {
|
|
66
|
-
backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
|
|
67
|
-
borderRadius: "7px !important",
|
|
68
|
-
border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
|
|
69
|
-
zIndex: 100,
|
|
70
|
-
minWidth: "186px !important"
|
|
71
|
-
},
|
|
72
|
-
menuItemPopUp: {
|
|
73
|
-
padding: "5px 7px !important",
|
|
74
|
-
margin: "6px !important",
|
|
75
|
-
borderRadius: 1,
|
|
76
|
-
userSelect: "none",
|
|
77
|
-
color: themeType === "dark" ? "#2563EB" : "#0F172A",
|
|
78
|
-
"&:hover": {
|
|
79
|
-
// backgroundColor: "rgba(0, 123, 255, 0.1)",
|
|
80
|
-
backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
|
|
81
|
-
},
|
|
82
|
-
"&.Mui-selected": {
|
|
83
|
-
backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
|
|
84
|
-
color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
|
|
85
|
-
}
|
|
86
64
|
}
|
|
87
65
|
});
|
|
88
66
|
export default TableStyles;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { Transforms } from "slate";
|
|
3
3
|
import { useSelected, useSlateStatic } from "slate-react";
|
|
4
|
-
import { Box, IconButton, Tooltip, Table as TableComp, TableBody
|
|
4
|
+
import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
|
|
5
5
|
import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
|
|
6
6
|
import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
|
|
7
7
|
import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
|
|
@@ -15,7 +15,6 @@ import { TableUtil } from "../../utils/table";
|
|
|
15
15
|
import TablePopup from "./TablePopup";
|
|
16
16
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
|
17
17
|
import TableStyles from "./Styles";
|
|
18
|
-
import useClickOutside from "../../hooks/useClickOutside";
|
|
19
18
|
import "./table.css";
|
|
20
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
|
2
|
-
import { Editor, Element
|
|
3
|
-
import { Box
|
|
2
|
+
import { Editor, Element } from "slate";
|
|
3
|
+
import { Box } 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";
|
|
7
7
|
import TableStyles from "./Styles";
|
|
8
8
|
import { useEditorSelection } from "../../hooks/useMouseMove";
|
|
9
|
-
import useClickOutside from "../../hooks/useClickOutside";
|
|
10
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
12
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -29,8 +28,7 @@ const Resizer = ({
|
|
|
29
28
|
});
|
|
30
29
|
};
|
|
31
30
|
const TableCell = props => {
|
|
32
|
-
const
|
|
33
|
-
const classes = TableStyles(themeType);
|
|
31
|
+
const classes = TableStyles();
|
|
34
32
|
const {
|
|
35
33
|
element,
|
|
36
34
|
attributes,
|
|
@@ -71,42 +69,6 @@ const TableCell = props => {
|
|
|
71
69
|
const tableDOM = table.getDOMNode(path, true);
|
|
72
70
|
const isCellSelected = table.isCellSelected(editor.selection);
|
|
73
71
|
const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
|
|
74
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
75
|
-
const open = Boolean(anchorEl);
|
|
76
|
-
const popperOptions = [{
|
|
77
|
-
value: "Delete Row"
|
|
78
|
-
}, {
|
|
79
|
-
value: "Delete Column"
|
|
80
|
-
}];
|
|
81
|
-
const onRightClick = e => {
|
|
82
|
-
e.preventDefault();
|
|
83
|
-
if (hasSelected) {
|
|
84
|
-
setAnchorEl(e.currentTarget);
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
const closePoper = () => {
|
|
88
|
-
setAnchorEl(null);
|
|
89
|
-
};
|
|
90
|
-
const handleMenuItemClick = value => {
|
|
91
|
-
Transforms.select(editor, editor.selection);
|
|
92
|
-
switch (value) {
|
|
93
|
-
case "Delete Row":
|
|
94
|
-
table.deleteRow();
|
|
95
|
-
break;
|
|
96
|
-
case "Delete Column":
|
|
97
|
-
table.deleteColumn();
|
|
98
|
-
break;
|
|
99
|
-
default:
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
// closePoper();
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
// Use the useClickOutside hook
|
|
106
|
-
const popperRef = useClickOutside({
|
|
107
|
-
onClickOutside: closePoper,
|
|
108
|
-
refCount: 1
|
|
109
|
-
})[0];
|
|
110
72
|
useEffect(() => {
|
|
111
73
|
if (tableDOM) {
|
|
112
74
|
const {
|
|
@@ -127,7 +89,7 @@ const TableCell = props => {
|
|
|
127
89
|
cellWidth: parentWidth / columns
|
|
128
90
|
});
|
|
129
91
|
}
|
|
130
|
-
}, [tableDOM
|
|
92
|
+
}, [tableDOM]);
|
|
131
93
|
useEffect(() => {
|
|
132
94
|
if (editor && element && tableSize) {
|
|
133
95
|
const dom = ReactEditor.toDOMNode(editor, element);
|
|
@@ -137,37 +99,14 @@ const TableCell = props => {
|
|
|
137
99
|
height: 100
|
|
138
100
|
});
|
|
139
101
|
}
|
|
140
|
-
}, [tableSize
|
|
102
|
+
}, [tableSize]);
|
|
141
103
|
useEffect(() => {
|
|
142
104
|
if (!resizing && tableProps) {
|
|
143
105
|
table.updateTableStyle({
|
|
144
106
|
"col.size": size
|
|
145
107
|
}, tableProps);
|
|
146
108
|
}
|
|
147
|
-
}, [resizing
|
|
148
|
-
const poperForDeltion = () => {
|
|
149
|
-
return /*#__PURE__*/_jsx(Popper, {
|
|
150
|
-
open: open,
|
|
151
|
-
anchorEl: anchorEl,
|
|
152
|
-
placement: "bottom-start",
|
|
153
|
-
disablePortal: true,
|
|
154
|
-
ref: popperRef,
|
|
155
|
-
sx: classes.deleteCellsPopUp,
|
|
156
|
-
children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
|
|
157
|
-
value: option.value,
|
|
158
|
-
onClick: () => handleMenuItemClick(option.value),
|
|
159
|
-
contentEditable: false,
|
|
160
|
-
sx: classes.menuItemPopUp,
|
|
161
|
-
children: /*#__PURE__*/_jsx(Typography, {
|
|
162
|
-
sx: {
|
|
163
|
-
fontSize: "12px",
|
|
164
|
-
userSelect: "none"
|
|
165
|
-
},
|
|
166
|
-
children: option.value
|
|
167
|
-
})
|
|
168
|
-
}, option.value))
|
|
169
|
-
});
|
|
170
|
-
};
|
|
109
|
+
}, [resizing]);
|
|
171
110
|
const sizeProps = isHeader ? {
|
|
172
111
|
width: size?.width || tableSize?.cellWidth
|
|
173
112
|
} : {};
|
|
@@ -182,7 +121,6 @@ const TableCell = props => {
|
|
|
182
121
|
border: `3px solid ${cellBorderColor}`,
|
|
183
122
|
...(sizeProps || {})
|
|
184
123
|
},
|
|
185
|
-
onContextMenu: onRightClick,
|
|
186
124
|
children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
|
187
125
|
classes: classes,
|
|
188
126
|
onMouseDown: onMouseDown,
|
|
@@ -190,7 +128,7 @@ const TableCell = props => {
|
|
|
190
128
|
}) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
|
|
191
129
|
className: "selection-area-tc",
|
|
192
130
|
contentEditable: false
|
|
193
|
-
}) : null
|
|
131
|
+
}) : null]
|
|
194
132
|
});
|
|
195
133
|
};
|
|
196
134
|
export default TableCell;
|
|
@@ -8,7 +8,6 @@ import { ReactEditor } from "slate-react";
|
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
10
|
const TableContextMenu = props => {
|
|
11
|
-
console.log("Table context menu :", props);
|
|
12
11
|
const {
|
|
13
12
|
editor
|
|
14
13
|
} = props;
|
|
@@ -23,8 +23,7 @@ const MiniEditor = props => {
|
|
|
23
23
|
miniEditorPlaceholder,
|
|
24
24
|
className,
|
|
25
25
|
otherProps,
|
|
26
|
-
onSave
|
|
27
|
-
theme
|
|
26
|
+
onSave
|
|
28
27
|
} = props;
|
|
29
28
|
const {
|
|
30
29
|
CHARACTERS = []
|
|
@@ -133,7 +132,6 @@ const MiniEditor = props => {
|
|
|
133
132
|
editor: editor,
|
|
134
133
|
initialValue: content,
|
|
135
134
|
onChange: onChange,
|
|
136
|
-
theme: theme,
|
|
137
135
|
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
|
138
136
|
...props
|
|
139
137
|
}), /*#__PURE__*/_jsx(Editable, {
|
|
@@ -25,8 +25,7 @@ const BasicToolbar = props => {
|
|
|
25
25
|
hideTextColor = false,
|
|
26
26
|
hideResetIcon = true,
|
|
27
27
|
onResetClick = () => {}
|
|
28
|
-
}
|
|
29
|
-
theme
|
|
28
|
+
}
|
|
30
29
|
} = props;
|
|
31
30
|
// state
|
|
32
31
|
const [activeColor, setActiveColor] = useState("#000000");
|
|
@@ -66,8 +65,7 @@ const BasicToolbar = props => {
|
|
|
66
65
|
item: true,
|
|
67
66
|
children: /*#__PURE__*/_jsx(LinkButton, {
|
|
68
67
|
active: isBlockActive(editor, link.format),
|
|
69
|
-
editor: editor
|
|
70
|
-
theme: theme
|
|
68
|
+
editor: editor
|
|
71
69
|
}, link.id)
|
|
72
70
|
}), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
|
|
73
71
|
item: true,
|
|
@@ -1,32 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Select, MenuItem } from "@mui/material";
|
|
3
|
-
import { addMarkData, activeMark
|
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
|
4
4
|
import { fontFamilyMap } from "../../utils/font";
|
|
5
|
-
import { toolbarGroups } from "../toolbarGroups.js";
|
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
const allTools = toolbarGroups.flat();
|
|
8
|
-
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
|
9
|
-
const getValue = (editor, format) => {
|
|
10
|
-
switch (format) {
|
|
11
|
-
case "fontFamily":
|
|
12
|
-
{
|
|
13
|
-
const style = getSelectedElementStyle("font-family", editor);
|
|
14
|
-
const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
|
|
15
|
-
return val || fontFamilyMap.PoppinsRegular;
|
|
16
|
-
}
|
|
17
|
-
case "fontWeight":
|
|
18
|
-
{
|
|
19
|
-
const {
|
|
20
|
-
options
|
|
21
|
-
} = fontWeight || {};
|
|
22
|
-
const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
|
|
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
|
-
};
|
|
30
6
|
const Dropdown = ({
|
|
31
7
|
classes,
|
|
32
8
|
editor,
|
|
@@ -34,7 +10,7 @@ const Dropdown = ({
|
|
|
34
10
|
options,
|
|
35
11
|
width
|
|
36
12
|
}) => {
|
|
37
|
-
const value =
|
|
13
|
+
const value = activeMark(editor, format);
|
|
38
14
|
const changeMarkData = (event, format) => {
|
|
39
15
|
event.preventDefault();
|
|
40
16
|
const value = event.target.value;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import Icon from "../../common/Icon";
|
|
3
3
|
import Button from "../../common/Button";
|
|
4
|
-
import { toggleMark,
|
|
4
|
+
import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
const MarkButton = ({
|
|
7
7
|
editor,
|
|
@@ -9,7 +9,7 @@ const MarkButton = ({
|
|
|
9
9
|
title
|
|
10
10
|
}) => {
|
|
11
11
|
return /*#__PURE__*/_jsx(Button, {
|
|
12
|
-
active:
|
|
12
|
+
active: isMarkActive(editor, format),
|
|
13
13
|
format: format,
|
|
14
14
|
onMouseDown: e => {
|
|
15
15
|
e.preventDefault();
|