@flozy/editor 4.0.0 → 4.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +28 -17
- package/dist/Editor/CommonEditor.js +109 -177
- package/dist/Editor/Editor.css +13 -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 +6 -7
- 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();
|