@flozy/editor 3.9.1 → 3.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/ChatEditor.js +16 -0
- package/dist/Editor/CommonEditor.js +109 -177
- package/dist/Editor/Editor.css +12 -8
- package/dist/Editor/Elements/AI/AIInput.js +18 -17
- package/dist/Editor/Elements/AI/CustomSelect.js +12 -19
- package/dist/Editor/Elements/AI/PopoverAIInput.js +28 -23
- package/dist/Editor/Elements/AI/Styles.js +1 -2
- 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/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 +3 -14
- 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/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 +16 -22
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -52
- package/dist/Editor/Toolbar/PopupTool/index.js +17 -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 -177
- 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
|
@@ -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 || {},
|
|
@@ -263,12 +263,7 @@ const SignaturePopup = props => {
|
|
|
263
263
|
name: "signedBy",
|
|
264
264
|
placeholder: "Enter Name",
|
|
265
265
|
size: "small",
|
|
266
|
-
onChange: onChange
|
|
267
|
-
sx: {
|
|
268
|
-
'& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
|
|
269
|
-
borderColor: '#ccc'
|
|
270
|
-
}
|
|
271
|
-
}
|
|
266
|
+
onChange: onChange
|
|
272
267
|
})
|
|
273
268
|
})]
|
|
274
269
|
}), /*#__PURE__*/_jsxs(Grid, {
|
|
@@ -316,8 +311,7 @@ const SignaturePopup = props => {
|
|
|
316
311
|
},
|
|
317
312
|
children: [/*#__PURE__*/_jsx(Grid, {
|
|
318
313
|
style: {
|
|
319
|
-
marginRight: "8px"
|
|
320
|
-
minWidth: '44px'
|
|
314
|
+
marginRight: "8px"
|
|
321
315
|
},
|
|
322
316
|
children: /*#__PURE__*/_jsx("label", {
|
|
323
317
|
htmlFor: "signedByEmail",
|
|
@@ -332,12 +326,7 @@ const SignaturePopup = props => {
|
|
|
332
326
|
name: "signedByEmail",
|
|
333
327
|
placeholder: "Enter Email",
|
|
334
328
|
size: "small",
|
|
335
|
-
onChange: onChange
|
|
336
|
-
sx: {
|
|
337
|
-
'& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
|
|
338
|
-
borderColor: '#ccc'
|
|
339
|
-
}
|
|
340
|
-
}
|
|
329
|
+
onChange: onChange
|
|
341
330
|
})
|
|
342
331
|
})]
|
|
343
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();
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
|
3
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
|
3
|
+
import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
|
|
4
|
+
import { headingMap, sizeMap } from "../../utils/font.js";
|
|
4
5
|
import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
|
|
5
|
-
import { getBreakPointsValue
|
|
6
|
+
import { getBreakPointsValue } from "../../helper/theme.js";
|
|
6
7
|
import useWindowResize from "../../hooks/useWindowResize.js";
|
|
7
8
|
import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -16,13 +17,7 @@ const TextSize = ({
|
|
|
16
17
|
}) => {
|
|
17
18
|
const [size] = useWindowResize();
|
|
18
19
|
const val = activeMark(editor, format);
|
|
19
|
-
const
|
|
20
|
-
const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
|
|
21
|
-
const [fontSize, setFontSize] = useState();
|
|
22
|
-
const timerRef = useRef();
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
setFontSize(getSizeVal());
|
|
25
|
-
}, [value]);
|
|
20
|
+
const value = getBreakPointsValue(val, size?.device);
|
|
26
21
|
const updateMarkData = newVal => {
|
|
27
22
|
let upData = {
|
|
28
23
|
...getBreakPointsValue(val),
|
|
@@ -44,18 +39,20 @@ const TextSize = ({
|
|
|
44
39
|
}
|
|
45
40
|
});
|
|
46
41
|
};
|
|
47
|
-
const onChangeSize =
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
updateMarkData(inc);
|
|
52
|
-
} else {
|
|
53
|
-
setFontSize(null);
|
|
54
|
-
}
|
|
42
|
+
const onChangeSize = e => {
|
|
43
|
+
let inc = parseInt(e.target.value) || 8;
|
|
44
|
+
inc = inc > 200 ? 200 : inc;
|
|
45
|
+
updateMarkData(inc || 8);
|
|
55
46
|
};
|
|
56
47
|
const getSizeVal = () => {
|
|
57
48
|
try {
|
|
58
|
-
|
|
49
|
+
let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
|
50
|
+
Object.entries(headingMap).forEach(([format, value]) => {
|
|
51
|
+
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
|
52
|
+
size = value;
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
return parseInt(size);
|
|
59
56
|
} catch (err) {
|
|
60
57
|
return "";
|
|
61
58
|
}
|
|
@@ -70,19 +67,11 @@ const TextSize = ({
|
|
|
70
67
|
const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
|
|
71
68
|
updateMarkData(newVal);
|
|
72
69
|
};
|
|
73
|
-
const onChange = e => {
|
|
74
|
-
clearTimeout(timerRef.current);
|
|
75
|
-
const value = e.target.value;
|
|
76
|
-
setFontSize(value);
|
|
77
|
-
timerRef.current = setTimeout(() => {
|
|
78
|
-
onChangeSize(value);
|
|
79
|
-
}, 500);
|
|
80
|
-
};
|
|
81
70
|
return /*#__PURE__*/_jsx(_Fragment, {
|
|
82
71
|
children: /*#__PURE__*/_jsx(TextField, {
|
|
83
72
|
sx: classes?.textSize,
|
|
84
|
-
value:
|
|
85
|
-
onChange:
|
|
73
|
+
value: combinedOldVal,
|
|
74
|
+
onChange: onChangeSize,
|
|
86
75
|
size: "small",
|
|
87
76
|
inputProps: {
|
|
88
77
|
style: {
|
|
@@ -48,8 +48,6 @@ const MiniToolbar = props => {
|
|
|
48
48
|
const {
|
|
49
49
|
popupType
|
|
50
50
|
} = useEditorContext();
|
|
51
|
-
const canUndo = editor.history.undos.length > 0;
|
|
52
|
-
const canRedo = editor.history.redos.length > 0;
|
|
53
51
|
const [toolTip, setToolTip] = useState(false);
|
|
54
52
|
const [data, setData] = useState(null);
|
|
55
53
|
useEffect(() => {
|
|
@@ -94,14 +92,14 @@ const MiniToolbar = props => {
|
|
|
94
92
|
label,
|
|
95
93
|
icon: Icon
|
|
96
94
|
}) => {
|
|
97
|
-
const isDisabled = popupType === type
|
|
95
|
+
const isDisabled = popupType === type; // for textFormat type
|
|
98
96
|
|
|
99
97
|
return /*#__PURE__*/_jsx(Tooltip, {
|
|
100
98
|
arrow: true,
|
|
101
99
|
title: label,
|
|
102
100
|
disableHoverListener: toolTip,
|
|
103
101
|
children: /*#__PURE__*/_jsx(IconButton, {
|
|
104
|
-
className:
|
|
102
|
+
className: type === popper ? "active" : "",
|
|
105
103
|
onClick: handleClick(type),
|
|
106
104
|
disabled: isDisabled,
|
|
107
105
|
children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
|
|
@@ -2,8 +2,6 @@ import TextIcon from "../../../assets/svg/TextIcon";
|
|
|
2
2
|
import AddElementIcon from "../../../assets/svg/AddElementIcon";
|
|
3
3
|
import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
|
|
4
4
|
import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
|
|
5
|
-
import UndoButton from "../../../Elements/Undo/UndoButton";
|
|
6
|
-
import RedoButton from "../../../Elements/Redo/RedoButton";
|
|
7
5
|
const MENU_OPTIONS = [{
|
|
8
6
|
type: "textFormat",
|
|
9
7
|
icon: TextIcon,
|
|
@@ -20,13 +18,5 @@ const MENU_OPTIONS = [{
|
|
|
20
18
|
type: "page-settings",
|
|
21
19
|
icon: PageSettingsButton,
|
|
22
20
|
label: "Page Settings"
|
|
23
|
-
}, {
|
|
24
|
-
type: "undo",
|
|
25
|
-
icon: UndoButton,
|
|
26
|
-
label: "Undo"
|
|
27
|
-
}, {
|
|
28
|
-
type: "redo",
|
|
29
|
-
icon: RedoButton,
|
|
30
|
-
label: "Redo"
|
|
31
21
|
}];
|
|
32
22
|
export default MENU_OPTIONS;
|