@flozy/editor 4.0.1 → 4.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +3 -19
- package/dist/Editor/CommonEditor.js +181 -109
- package/dist/Editor/Editor.css +31 -3
- package/dist/Editor/Elements/AI/AIInput.js +31 -33
- package/dist/Editor/Elements/AI/CustomSelect.js +19 -12
- package/dist/Editor/Elements/AI/PopoverAIInput.js +73 -97
- package/dist/Editor/Elements/AI/Styles.js +2 -2
- package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js +73 -0
- package/dist/Editor/Elements/AI/VoiceToText/index.js +184 -0
- package/dist/Editor/Elements/AI/VoiceToText/style.js +40 -0
- package/dist/Editor/Elements/AI/helper.js +5 -3
- package/dist/Editor/Elements/Accordion/Accordion.js +1 -1
- package/dist/Editor/Elements/Accordion/AccordionSummary.js +5 -10
- package/dist/Editor/Elements/AppHeader/AppHeader.js +26 -4
- package/dist/Editor/Elements/Button/EditorButton.js +28 -16
- package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -1
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +60 -15
- package/dist/Editor/Elements/Color Picker/ColorPicker.css +25 -1
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +4 -4
- package/dist/Editor/Elements/Color Picker/Styles.js +3 -1
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +2 -4
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +2 -1
- package/dist/Editor/Elements/Grid/Grid.js +27 -3
- package/dist/Editor/Elements/Grid/GridItem.js +3 -1
- package/dist/Editor/Elements/Link/Link.js +6 -1
- package/dist/Editor/Elements/Link/LinkButton.js +4 -2
- package/dist/Editor/Elements/Link/LinkPopup.js +73 -14
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +28 -0
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/NewLine/NewLineButton.js +2 -1
- package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +3 -3
- package/dist/Editor/Elements/Redo/RedoButton.js +14 -0
- package/dist/Editor/Elements/Signature/Signature.css +13 -6
- package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +2 -1
- package/dist/Editor/Elements/Signature/SignaturePopup.js +185 -30
- package/dist/Editor/Elements/SimpleText/index.js +11 -1
- package/dist/Editor/Elements/SimpleText/style.js +1 -1
- package/dist/Editor/Elements/Table/Styles.js +23 -1
- package/dist/Editor/Elements/Table/Table.js +2 -1
- package/dist/Editor/Elements/Table/TableCell.js +69 -7
- package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js +1 -0
- package/dist/Editor/Elements/Undo/UndoButton.js +14 -0
- package/dist/Editor/MiniEditor.js +3 -1
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +4 -2
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +27 -3
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +31 -20
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +36 -5
- package/dist/Editor/Toolbar/Mini/Options/Options.js +10 -0
- package/dist/Editor/Toolbar/Mini/Styles.js +7 -0
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +12 -13
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +12 -13
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/CustomSelectTool.js +3 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js +59 -0
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +213 -86
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -2
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +123 -44
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +106 -44
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +438 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +7 -6
- package/dist/Editor/Toolbar/toolbarGroups.js +53 -11
- package/dist/Editor/assets/svg/AIIcons.js +153 -1
- package/dist/Editor/assets/svg/AddTemplateIcon.js +13 -10
- package/dist/Editor/assets/svg/RedoIcon.js +27 -0
- package/dist/Editor/assets/svg/SettingsIcon.js +28 -0
- package/dist/Editor/assets/svg/TextIcon.js +8 -5
- package/dist/Editor/assets/svg/ThemeIcons.js +291 -0
- package/dist/Editor/assets/svg/UndoIcon.js +27 -0
- package/dist/Editor/common/ColorPickerButton.js +26 -18
- package/dist/Editor/common/CustomColorPicker/index.js +106 -0
- package/dist/Editor/common/CustomColorPicker/style.js +53 -0
- package/dist/Editor/common/CustomDialog/index.js +94 -0
- package/dist/Editor/common/CustomDialog/style.js +67 -0
- package/dist/Editor/common/CustomSelect.js +33 -0
- package/dist/Editor/common/DnD/DragHandleButton.js +56 -47
- package/dist/Editor/common/EditorIcons.js +7 -7
- package/dist/Editor/common/Icon.js +64 -25
- package/dist/Editor/common/ImageList.js +16 -3
- package/dist/Editor/common/ImageSelector/ImageSelector.js +30 -9
- package/dist/Editor/common/ImageSelector/Styles.js +2 -1
- package/dist/Editor/common/LinkSettings/NavComponents.js +5 -2
- package/dist/Editor/common/LinkSettings/index.js +4 -2
- package/dist/Editor/common/LinkSettings/navOptions.js +7 -2
- package/dist/Editor/common/LinkSettings/style.js +11 -8
- package/dist/Editor/common/MentionsPopup/Styles.js +1 -1
- package/dist/Editor/common/Section/index.js +57 -7
- package/dist/Editor/common/Section/styles.js +11 -0
- package/dist/Editor/common/Shorthands/elements.js +63 -9
- package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js +1 -2
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +4 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +13 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +15 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +29 -7
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +13 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +14 -4
- package/dist/Editor/common/StyleBuilder/index.js +1 -1
- package/dist/Editor/common/iconListV2.js +843 -0
- package/dist/Editor/common/iconslist.js +0 -31
- package/dist/Editor/commonStyle.js +6 -0
- package/dist/Editor/helper/index.js +0 -22
- package/dist/Editor/helper/theme.js +189 -3
- package/dist/Editor/hooks/useEditorTheme.js +139 -0
- package/dist/Editor/hooks/useMouseMove.js +4 -1
- package/dist/Editor/hooks/useWindowMessage.js +10 -7
- 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 +50 -173
- package/dist/Editor/theme/index.js +144 -0
- package/dist/Editor/themeSettings/ActiveTheme.js +72 -0
- package/dist/Editor/themeSettings/buttons/index.js +290 -0
- package/dist/Editor/themeSettings/buttons/style.js +21 -0
- package/dist/Editor/themeSettings/colorTheme/index.js +290 -0
- package/dist/Editor/themeSettings/colorTheme/style.js +77 -0
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +123 -0
- package/dist/Editor/themeSettings/fonts/index.js +213 -0
- package/dist/Editor/themeSettings/fonts/style.js +44 -0
- package/dist/Editor/themeSettings/icons.js +60 -0
- package/dist/Editor/themeSettings/index.js +320 -0
- package/dist/Editor/themeSettings/style.js +152 -0
- package/dist/Editor/themeSettingsAI/icons.js +96 -0
- package/dist/Editor/themeSettingsAI/index.js +356 -0
- package/dist/Editor/themeSettingsAI/saveTheme.js +190 -0
- package/dist/Editor/themeSettingsAI/style.js +247 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +169 -27
- package/dist/Editor/utils/button.js +1 -17
- package/dist/Editor/utils/events.js +54 -2
- package/dist/Editor/utils/font.js +40 -37
- package/dist/Editor/utils/helper.js +31 -2
- package/dist/Editor/utils/table.js +51 -43
- package/package.json +4 -3
@@ -6,6 +6,7 @@ import { isTextSelected } from "../../utils/helper";
|
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
11
|
const SimpleText = props => {
|
11
12
|
const {
|
@@ -45,7 +46,16 @@ const SimpleText = props => {
|
|
45
46
|
sx: classes.root,
|
46
47
|
children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
|
47
48
|
className: "placeholder-simple-text",
|
48
|
-
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ?
|
49
|
+
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
|
50
|
+
children: ["Type ", /*#__PURE__*/_jsx("span", {
|
51
|
+
style: {
|
52
|
+
backgroundColor: '#F2F6FA',
|
53
|
+
padding: "0px 2px",
|
54
|
+
borderRadius: "2px"
|
55
|
+
},
|
56
|
+
children: "/"
|
57
|
+
}), " to browse elements"]
|
58
|
+
}) : "" : ""
|
49
59
|
})]
|
50
60
|
});
|
51
61
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const TableStyles =
|
1
|
+
const TableStyles = themeType => ({
|
2
2
|
tableToolBar: {
|
3
3
|
position: "absolute",
|
4
4
|
top: "-34px",
|
@@ -61,6 +61,28 @@ const TableStyles = () => ({
|
|
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
|
+
}
|
64
86
|
}
|
65
87
|
});
|
66
88
|
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 } from "@mui/material";
|
4
|
+
import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } 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,6 +15,7 @@ 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";
|
18
19
|
import "./table.css";
|
19
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
20
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
2
|
-
import { Editor, Element } from "slate";
|
3
|
-
import { Box } from "@mui/material";
|
2
|
+
import { Editor, Element, Transforms } from "slate";
|
3
|
+
import { Box, MenuItem, Popper, Typography } 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";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -28,7 +29,8 @@ const Resizer = ({
|
|
28
29
|
});
|
29
30
|
};
|
30
31
|
const TableCell = props => {
|
31
|
-
const
|
32
|
+
const themeType = localStorage.getItem("themeType");
|
33
|
+
const classes = TableStyles(themeType);
|
32
34
|
const {
|
33
35
|
element,
|
34
36
|
attributes,
|
@@ -69,6 +71,42 @@ const TableCell = props => {
|
|
69
71
|
const tableDOM = table.getDOMNode(path, true);
|
70
72
|
const isCellSelected = table.isCellSelected(editor.selection);
|
71
73
|
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];
|
72
110
|
useEffect(() => {
|
73
111
|
if (tableDOM) {
|
74
112
|
const {
|
@@ -89,7 +127,7 @@ const TableCell = props => {
|
|
89
127
|
cellWidth: parentWidth / columns
|
90
128
|
});
|
91
129
|
}
|
92
|
-
}, [tableDOM]);
|
130
|
+
}, [tableDOM, anchorEl]);
|
93
131
|
useEffect(() => {
|
94
132
|
if (editor && element && tableSize) {
|
95
133
|
const dom = ReactEditor.toDOMNode(editor, element);
|
@@ -99,14 +137,37 @@ const TableCell = props => {
|
|
99
137
|
height: 100
|
100
138
|
});
|
101
139
|
}
|
102
|
-
}, [tableSize]);
|
140
|
+
}, [tableSize, anchorEl]);
|
103
141
|
useEffect(() => {
|
104
142
|
if (!resizing && tableProps) {
|
105
143
|
table.updateTableStyle({
|
106
144
|
"col.size": size
|
107
145
|
}, tableProps);
|
108
146
|
}
|
109
|
-
}, [resizing]);
|
147
|
+
}, [resizing, anchorEl]);
|
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
|
+
};
|
110
171
|
const sizeProps = isHeader ? {
|
111
172
|
width: size?.width || tableSize?.cellWidth
|
112
173
|
} : {};
|
@@ -121,6 +182,7 @@ const TableCell = props => {
|
|
121
182
|
border: `3px solid ${cellBorderColor}`,
|
122
183
|
...(sizeProps || {})
|
123
184
|
},
|
185
|
+
onContextMenu: onRightClick,
|
124
186
|
children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
|
125
187
|
classes: classes,
|
126
188
|
onMouseDown: onMouseDown,
|
@@ -128,7 +190,7 @@ const TableCell = props => {
|
|
128
190
|
}) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
|
129
191
|
className: "selection-area-tc",
|
130
192
|
contentEditable: false
|
131
|
-
}) : null]
|
193
|
+
}) : null, poperForDeltion()]
|
132
194
|
});
|
133
195
|
};
|
134
196
|
export default TableCell;
|
@@ -8,6 +8,7 @@ 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);
|
11
12
|
const {
|
12
13
|
editor
|
13
14
|
} = props;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
3
|
+
import UndoIcon from "../../assets/svg/UndoIcon";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const UndoButton = () => {
|
6
|
+
const editor = useSlateStatic();
|
7
|
+
const onUndo = () => {
|
8
|
+
editor?.undo();
|
9
|
+
};
|
10
|
+
return /*#__PURE__*/_jsx(UndoIcon, {
|
11
|
+
onClick: onUndo
|
12
|
+
});
|
13
|
+
};
|
14
|
+
export default UndoButton;
|
@@ -23,7 +23,8 @@ const MiniEditor = props => {
|
|
23
23
|
miniEditorPlaceholder,
|
24
24
|
className,
|
25
25
|
otherProps,
|
26
|
-
onSave
|
26
|
+
onSave,
|
27
|
+
theme
|
27
28
|
} = props;
|
28
29
|
const {
|
29
30
|
CHARACTERS = []
|
@@ -132,6 +133,7 @@ const MiniEditor = props => {
|
|
132
133
|
editor: editor,
|
133
134
|
initialValue: content,
|
134
135
|
onChange: onChange,
|
136
|
+
theme: theme,
|
135
137
|
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
136
138
|
...props
|
137
139
|
}), /*#__PURE__*/_jsx(Editable, {
|
@@ -25,7 +25,8 @@ const BasicToolbar = props => {
|
|
25
25
|
hideTextColor = false,
|
26
26
|
hideResetIcon = true,
|
27
27
|
onResetClick = () => {}
|
28
|
-
}
|
28
|
+
},
|
29
|
+
theme
|
29
30
|
} = props;
|
30
31
|
// state
|
31
32
|
const [activeColor, setActiveColor] = useState("#000000");
|
@@ -65,7 +66,8 @@ const BasicToolbar = props => {
|
|
65
66
|
item: true,
|
66
67
|
children: /*#__PURE__*/_jsx(LinkButton, {
|
67
68
|
active: isBlockActive(editor, link.format),
|
68
|
-
editor: editor
|
69
|
+
editor: editor,
|
70
|
+
theme: theme
|
69
71
|
}, link.id)
|
70
72
|
}), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
|
71
73
|
item: true,
|
@@ -1,8 +1,32 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Select, MenuItem } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
3
|
+
import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import { fontFamilyMap } from "../../utils/font";
|
5
|
+
import { toolbarGroups } from "../toolbarGroups.js";
|
5
6
|
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
|
+
};
|
6
30
|
const Dropdown = ({
|
7
31
|
classes,
|
8
32
|
editor,
|
@@ -10,7 +34,7 @@ const Dropdown = ({
|
|
10
34
|
options,
|
11
35
|
width
|
12
36
|
}) => {
|
13
|
-
const value =
|
37
|
+
const value = getValue(editor, format);
|
14
38
|
const changeMarkData = (event, format) => {
|
15
39
|
event.preventDefault();
|
16
40
|
const value = event.target.value;
|
@@ -28,7 +52,7 @@ const Dropdown = ({
|
|
28
52
|
width: width || "100%",
|
29
53
|
height: "36px",
|
30
54
|
borderRadius: "10px",
|
31
|
-
fontSize: "
|
55
|
+
fontSize: "12px"
|
32
56
|
},
|
33
57
|
MenuProps: {
|
34
58
|
PaperProps: {
|
@@ -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, isMarkBtnActive } 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: isMarkBtnActive(editor, format),
|
13
13
|
format: format,
|
14
14
|
onMouseDown: e => {
|
15
15
|
e.preventDefault();
|
@@ -1,9 +1,8 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark
|
4
|
-
import { headingMap, sizeMap } from "../../utils/font.js";
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
5
4
|
import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
|
6
|
-
import { getBreakPointsValue } from "../../helper/theme.js";
|
5
|
+
import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
|
7
6
|
import useWindowResize from "../../hooks/useWindowResize.js";
|
8
7
|
import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -17,7 +16,13 @@ const TextSize = ({
|
|
17
16
|
}) => {
|
18
17
|
const [size] = useWindowResize();
|
19
18
|
const val = activeMark(editor, format);
|
20
|
-
const
|
19
|
+
const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
|
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]);
|
21
26
|
const updateMarkData = newVal => {
|
22
27
|
let upData = {
|
23
28
|
...getBreakPointsValue(val),
|
@@ -39,20 +44,18 @@ const TextSize = ({
|
|
39
44
|
}
|
40
45
|
});
|
41
46
|
};
|
42
|
-
const onChangeSize =
|
43
|
-
|
44
|
-
|
45
|
-
|
47
|
+
const onChangeSize = value => {
|
48
|
+
if (value) {
|
49
|
+
let inc = parseInt(value);
|
50
|
+
inc = inc > 200 ? 200 : inc;
|
51
|
+
updateMarkData(inc);
|
52
|
+
} else {
|
53
|
+
setFontSize(null);
|
54
|
+
}
|
46
55
|
};
|
47
56
|
const getSizeVal = () => {
|
48
57
|
try {
|
49
|
-
|
50
|
-
Object.entries(headingMap).forEach(([format, value]) => {
|
51
|
-
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
52
|
-
size = value;
|
53
|
-
}
|
54
|
-
});
|
55
|
-
return parseInt(size);
|
58
|
+
return parseInt(value);
|
56
59
|
} catch (err) {
|
57
60
|
return "";
|
58
61
|
}
|
@@ -67,18 +70,26 @@ const TextSize = ({
|
|
67
70
|
const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
|
68
71
|
updateMarkData(newVal);
|
69
72
|
};
|
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
|
+
};
|
70
81
|
return /*#__PURE__*/_jsx(_Fragment, {
|
71
82
|
children: /*#__PURE__*/_jsx(TextField, {
|
72
83
|
sx: classes?.textSize,
|
73
|
-
value:
|
74
|
-
onChange:
|
84
|
+
value: fontSize,
|
85
|
+
onChange: onChange,
|
75
86
|
size: "small",
|
76
87
|
inputProps: {
|
77
88
|
style: {
|
78
89
|
width: fullWidth ? "100%" : "30px",
|
79
|
-
textAlign: "center",
|
90
|
+
// textAlign: "center",
|
80
91
|
height: "19px",
|
81
|
-
fontSize: "
|
92
|
+
fontSize: "12px"
|
82
93
|
}
|
83
94
|
},
|
84
95
|
fullWidth: fullWidth,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { useSlate } from "slate-react";
|
3
3
|
import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
|
4
4
|
import MENU_OPTIONS from "./Options/Options";
|
@@ -18,6 +18,11 @@ const POPUP_TYPES = {
|
|
18
18
|
addElement: AddElements,
|
19
19
|
addTemplate: AddTemplates
|
20
20
|
};
|
21
|
+
const POPUP_OFFSETS = {
|
22
|
+
textFormat: [80, 5],
|
23
|
+
addElement: [60, 5],
|
24
|
+
addTemplate: [20, 5]
|
25
|
+
};
|
21
26
|
const FULLSCREEN_POPUP = {
|
22
27
|
addTemplate: true
|
23
28
|
};
|
@@ -44,10 +49,13 @@ const MiniToolbar = props => {
|
|
44
49
|
const {
|
45
50
|
hideTools
|
46
51
|
} = customProps;
|
52
|
+
const boxRef = useRef(null); // Add ref to get the Box element
|
47
53
|
const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
|
48
54
|
const {
|
49
55
|
popupType
|
50
56
|
} = useEditorContext();
|
57
|
+
const canUndo = editor.history.undos.length > 0;
|
58
|
+
const canRedo = editor.history.redos.length > 0;
|
51
59
|
const [toolTip, setToolTip] = useState(false);
|
52
60
|
const [data, setData] = useState(null);
|
53
61
|
useEffect(() => {
|
@@ -80,26 +88,42 @@ const MiniToolbar = props => {
|
|
80
88
|
};
|
81
89
|
const closePopper = data => {
|
82
90
|
setData(data);
|
83
|
-
setToolTip(
|
91
|
+
setToolTip(false);
|
92
|
+
};
|
93
|
+
|
94
|
+
// Calculate center of Box for Popper/Modal positioning
|
95
|
+
const getBoxCenter = () => {
|
96
|
+
if (boxRef.current) {
|
97
|
+
const rect = boxRef.current.getBoundingClientRect();
|
98
|
+
return {
|
99
|
+
top: rect.top + rect.height / 2,
|
100
|
+
left: rect.left + rect.width / 2
|
101
|
+
};
|
102
|
+
}
|
103
|
+
return {
|
104
|
+
top: 0,
|
105
|
+
left: 0
|
106
|
+
};
|
84
107
|
};
|
85
108
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
86
109
|
children: [/*#__PURE__*/_jsx(Box, {
|
87
110
|
component: "div",
|
88
111
|
className: "mini-tool-wrpr-ei",
|
89
112
|
sx: classes.root,
|
113
|
+
ref: boxRef,
|
90
114
|
children: UPDATED_MENU_OPTIONS.map(({
|
91
115
|
type,
|
92
116
|
label,
|
93
117
|
icon: Icon
|
94
118
|
}) => {
|
95
|
-
const isDisabled = popupType === type; // for textFormat type
|
119
|
+
const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
|
96
120
|
|
97
121
|
return /*#__PURE__*/_jsx(Tooltip, {
|
98
122
|
arrow: true,
|
99
123
|
title: label,
|
100
124
|
disableHoverListener: toolTip,
|
101
125
|
children: /*#__PURE__*/_jsx(IconButton, {
|
102
|
-
className: type === popper ? "active" : ""
|
126
|
+
className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
|
103
127
|
onClick: handleClick(type),
|
104
128
|
disabled: isDisabled,
|
105
129
|
children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
|
@@ -121,11 +145,18 @@ const MiniToolbar = props => {
|
|
121
145
|
}), /*#__PURE__*/_jsx(DialogComp, {
|
122
146
|
open: open,
|
123
147
|
onClose: onClose,
|
124
|
-
anchorEl: anchorEl
|
148
|
+
anchorEl: anchorEl || getBoxCenter() // Positioning at center of Box
|
149
|
+
,
|
125
150
|
placement: "top",
|
126
151
|
sx: popupStyles.popupWrapper,
|
127
152
|
className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
|
128
153
|
fullScreen: fullScreen,
|
154
|
+
modifiers: [{
|
155
|
+
name: "offset",
|
156
|
+
options: {
|
157
|
+
offset: POPUP_OFFSETS[popper] || [0, 10] // Add some space between anchor and popper
|
158
|
+
}
|
159
|
+
}],
|
129
160
|
children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
|
130
161
|
className: "papper-wrpr",
|
131
162
|
style: {
|
@@ -2,6 +2,8 @@ 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";
|
5
7
|
const MENU_OPTIONS = [{
|
6
8
|
type: "textFormat",
|
7
9
|
icon: TextIcon,
|
@@ -18,5 +20,13 @@ const MENU_OPTIONS = [{
|
|
18
20
|
type: "page-settings",
|
19
21
|
icon: PageSettingsButton,
|
20
22
|
label: "Page Settings"
|
23
|
+
}, {
|
24
|
+
type: "undo",
|
25
|
+
icon: UndoButton,
|
26
|
+
label: "Undo"
|
27
|
+
}, {
|
28
|
+
type: "redo",
|
29
|
+
icon: RedoButton,
|
30
|
+
label: "Redo"
|
21
31
|
}];
|
22
32
|
export default MENU_OPTIONS;
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
4
|
const Select = props => {
|
6
5
|
const {
|
7
6
|
classes,
|
@@ -34,19 +33,19 @@ const ButtonTemplateCard = props => {
|
|
34
33
|
xs: 3,
|
35
34
|
children: /*#__PURE__*/_jsx(Card, {
|
36
35
|
sx: classes.paperOverrides,
|
37
|
-
children: /*#__PURE__*/
|
36
|
+
children: /*#__PURE__*/_jsx(Box, {
|
38
37
|
sx: classes.buttonCardMediaWrpr,
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
})
|
38
|
+
onClick: onSelectTemplate(m),
|
39
|
+
children: /*#__PURE__*/_jsx("div", {
|
40
|
+
className: "img-wrapper",
|
41
|
+
children: /*#__PURE__*/_jsx(CardMedia, {
|
42
|
+
className: `template-card-media`,
|
43
|
+
component: "div",
|
44
|
+
image: m?.thumbnail,
|
45
|
+
alt: m?.title,
|
46
|
+
sx: classes.buttonCardMedia
|
47
|
+
})
|
48
|
+
})
|
50
49
|
})
|
51
50
|
})
|
52
51
|
}, `template_${m.id}`);
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
4
|
const Select = props => {
|
6
5
|
const {
|
7
6
|
classes,
|
@@ -35,19 +34,19 @@ const FullViewCard = props => {
|
|
35
34
|
children: /*#__PURE__*/_jsx(Card, {
|
36
35
|
sx: classes.paperOverrides,
|
37
36
|
className: "paperOverrides",
|
38
|
-
children: /*#__PURE__*/
|
37
|
+
children: /*#__PURE__*/_jsx(Box, {
|
39
38
|
sx: classes.buttonCardMediaWrpr,
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
})
|
39
|
+
onClick: onSelectTemplate(m),
|
40
|
+
children: /*#__PURE__*/_jsx("div", {
|
41
|
+
className: "img-wrapper",
|
42
|
+
children: /*#__PURE__*/_jsx(CardMedia, {
|
43
|
+
component: "div",
|
44
|
+
image: m?.thumbnail,
|
45
|
+
alt: m?.title,
|
46
|
+
sx: classes.fullViewCardMedia,
|
47
|
+
className: height
|
48
|
+
})
|
49
|
+
})
|
51
50
|
})
|
52
51
|
})
|
53
52
|
}, `template_${m.id}`);
|