@flozy/editor 6.0.3 → 6.0.5
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 +7 -7
- package/dist/Editor/CommonEditor.js +25 -81
- package/dist/Editor/DialogWrapper.js +25 -31
- package/dist/Editor/Editor.css +16 -22
- package/dist/Editor/Elements/AI/PopoverAIInput.js +12 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
- package/dist/Editor/Elements/Button/EditorButton.js +9 -26
- package/dist/Editor/Elements/Color Picker/ColorButtons.js +12 -57
- 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 -1
- package/dist/Editor/Elements/DataView/DataView.js +3 -4
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/NumberType.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js +1 -5
- package/dist/Editor/Elements/DataView/Layouts/FilterView.js +19 -23
- package/dist/Editor/Elements/DataView/Providers/DataViewProvider.js +1 -1
- package/dist/Editor/Elements/Embed/Image.js +2 -2
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +14 -0
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -4
- package/dist/Editor/Elements/Grid/GridItem.js +3 -2
- package/dist/Editor/Elements/Link/Link.js +43 -70
- package/dist/Editor/Elements/List/CheckList.js +1 -2
- package/dist/Editor/Elements/Search/SearchAttachment.js +0 -1
- package/dist/Editor/Elements/Search/SearchList.js +1 -8
- package/dist/Editor/Elements/SimpleText/index.js +1 -8
- package/dist/Editor/Elements/SimpleText/style.js +1 -5
- package/dist/Editor/Elements/Table/Table.js +3 -3
- package/dist/Editor/Elements/Table/TableCell.js +9 -14
- package/dist/Editor/Elements/Title/title.js +1 -13
- package/dist/Editor/Elements/Variables/Style.js +2 -28
- package/dist/Editor/Elements/Variables/VariableButton.js +4 -17
- package/dist/Editor/MiniEditor.js +2 -4
- package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
- package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
- package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +15 -7
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +36 -46
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +91 -211
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -11
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -16
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +7 -99
- package/dist/Editor/Toolbar/PopupTool/index.js +0 -2
- package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
- package/dist/Editor/common/ColorPickerButton.js +9 -32
- package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
- package/dist/Editor/common/DnD/Draggable.js +1 -0
- package/dist/Editor/common/FontLoader/FontList.js +9 -1
- package/dist/Editor/common/FontLoader/FontLoader.js +4 -6
- package/dist/Editor/common/Icon.js +0 -28
- package/dist/Editor/common/ImageSelector/Styles.js +9 -3
- package/dist/Editor/common/MentionsPopup/Styles.js +9 -3
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
- package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
- package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +2 -14
- package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +4 -5
- package/dist/Editor/common/RnD/Utils/index.js +0 -40
- package/dist/Editor/common/RnD/index.js +3 -23
- package/dist/Editor/common/Shorthands/elements.js +0 -54
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +2 -10
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +11 -35
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +4 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
- package/dist/Editor/common/Uploader.js +0 -8
- package/dist/Editor/commonStyle.js +63 -58
- package/dist/Editor/helper/deserialize/index.js +1 -1
- package/dist/Editor/helper/index.js +2 -2
- package/dist/Editor/helper/theme.js +3 -224
- package/dist/Editor/hooks/useMouseMove.js +5 -13
- package/dist/Editor/plugins/withEmbeds.js +1 -1
- package/dist/Editor/plugins/withHTML.js +2 -2
- package/dist/Editor/plugins/withLayout.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 +42 -161
- package/dist/Editor/utils/button.js +14 -0
- package/dist/Editor/utils/customHooks/useTableResize.js +1 -2
- package/dist/Editor/utils/draftToSlate.js +2 -3
- package/dist/Editor/utils/font.js +37 -40
- package/dist/Editor/utils/helper.js +19 -88
- package/dist/Editor/utils/link.js +1 -1
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/dist/Editor/utils/table.js +0 -21
- package/package.json +2 -5
- package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -438
- package/dist/Editor/assets/svg/ThemeIcons.js +0 -291
- 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/common/RnD/Theme/MainThemeProvider.js +0 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
- package/dist/Editor/helper/ensureWrappedVariables.js +0 -28
- package/dist/Editor/hooks/useEditorTheme.js +0 -153
- package/dist/Editor/theme/index.js +0 -144
- package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
- package/dist/Editor/themeSettings/buttons/index.js +0 -283
- package/dist/Editor/themeSettings/buttons/style.js +0 -21
- package/dist/Editor/themeSettings/colorTheme/index.js +0 -292
- package/dist/Editor/themeSettings/colorTheme/style.js +0 -77
- package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
- package/dist/Editor/themeSettings/fonts/index.js +0 -220
- 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 -197
- package/dist/Editor/themeSettingsAI/style.js +0 -250
@@ -185,9 +185,6 @@ const SearchAndDocList = ({
|
|
185
185
|
gap: 1,
|
186
186
|
children: [/*#__PURE__*/_jsx(Grid, {
|
187
187
|
item: true,
|
188
|
-
sx: {
|
189
|
-
maxWidth: 'calc(100% - 45px)'
|
190
|
-
},
|
191
188
|
children: /*#__PURE__*/_jsxs(Grid, {
|
192
189
|
container: true,
|
193
190
|
alignItems: "center",
|
@@ -210,9 +207,6 @@ const SearchAndDocList = ({
|
|
210
207
|
})
|
211
208
|
}), /*#__PURE__*/_jsx(Grid, {
|
212
209
|
item: true,
|
213
|
-
sx: {
|
214
|
-
maxWidth: '100%'
|
215
|
-
},
|
216
210
|
children: /*#__PURE__*/_jsx(Typography, {
|
217
211
|
sx: {
|
218
212
|
fontSize: "12px",
|
@@ -225,8 +219,7 @@ const SearchAndDocList = ({
|
|
225
219
|
maxWidth: '230px',
|
226
220
|
textAlign: 'left',
|
227
221
|
'@media only screen and (min-width: 350px) and (max-width: 899px)': {
|
228
|
-
maxWidth: '100%'
|
229
|
-
width: '100%'
|
222
|
+
maxWidth: '100%'
|
230
223
|
}
|
231
224
|
},
|
232
225
|
children: title
|
@@ -5,7 +5,6 @@ import { Box } from "@mui/material";
|
|
5
5
|
import { isTextSelected } from "../../utils/helper";
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
|
-
import { getBreakpointLineSpacing } from "../../helper/theme";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
9
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
10
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -29,14 +28,8 @@ const SimpleText = props => {
|
|
29
28
|
} = customProps;
|
30
29
|
// const { element: pageSt } = getPageSettings(editor) || {};
|
31
30
|
// const { pageColor } = pageSt?.pageProps || {};
|
32
|
-
const {
|
33
|
-
activeBreakPoint
|
34
|
-
} = useEditorContext();
|
35
|
-
const lineHeight = element?.children[0]?.lineHeight;
|
36
|
-
const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
|
37
31
|
const classes = SimpleTextStyle({
|
38
|
-
pageColor: "#FFFFFF"
|
39
|
-
lineHeight: lineH
|
32
|
+
pageColor: "#FFFFFF"
|
40
33
|
});
|
41
34
|
const selected = useSelected();
|
42
35
|
const path = ReactEditor.findPath(editor, element);
|
@@ -1,12 +1,10 @@
|
|
1
1
|
import { invertColor } from "../../helper";
|
2
2
|
const SimpleTextStyle = ({
|
3
|
-
pageColor
|
4
|
-
lineHeight
|
3
|
+
pageColor
|
5
4
|
}) => ({
|
6
5
|
root: {
|
7
6
|
position: "relative",
|
8
7
|
padding: "0px",
|
9
|
-
lineHeight: lineHeight,
|
10
8
|
"&.dataView": {
|
11
9
|
"& .placeholder-simple-text": {
|
12
10
|
opacity: 0
|
@@ -35,8 +33,6 @@ const SimpleTextStyle = ({
|
|
35
33
|
height: "24px",
|
36
34
|
overflow: "hidden",
|
37
35
|
fontSize: "14px",
|
38
|
-
display: "inline-flex",
|
39
|
-
alignItems: "center",
|
40
36
|
"& .bg-pad-sl": {
|
41
37
|
padding: "2px 4px 2px 4px",
|
42
38
|
background: "transparent",
|
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
import { Editor, Transforms } from "slate";
|
3
3
|
import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
|
4
4
|
import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, ClickAwayListener } from "@mui/material";
|
5
|
-
import { TableUtil
|
5
|
+
import { TableUtil } from "../../utils/table";
|
6
6
|
import TablePopup from "./TablePopup";
|
7
7
|
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
8
8
|
import TableStyles from "./Styles";
|
@@ -206,7 +206,7 @@ const Table = props => {
|
|
206
206
|
}
|
207
207
|
}, theme);
|
208
208
|
const addRow = () => {
|
209
|
-
const lastRow =
|
209
|
+
const lastRow = element?.rows - 1;
|
210
210
|
const firstCol = 0;
|
211
211
|
const lastRowPath = [...path, lastRow, firstCol];
|
212
212
|
const position = Editor.start(editor, lastRowPath);
|
@@ -221,7 +221,7 @@ const Table = props => {
|
|
221
221
|
Transforms.deselect(editor);
|
222
222
|
};
|
223
223
|
const addCol = () => {
|
224
|
-
const lastCol =
|
224
|
+
const lastCol = element?.columns - 1;
|
225
225
|
const firstRow = 0;
|
226
226
|
const lastColumnPath = [...path, firstRow, lastCol];
|
227
227
|
const position = Editor.start(editor, lastColumnPath);
|
@@ -50,7 +50,6 @@ const TableCell = props => {
|
|
50
50
|
const {
|
51
51
|
readOnly
|
52
52
|
} = customProps;
|
53
|
-
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
54
53
|
const {
|
55
54
|
bgColor,
|
56
55
|
borderColor,
|
@@ -248,24 +247,20 @@ const TableCell = props => {
|
|
248
247
|
isDragging: false
|
249
248
|
});
|
250
249
|
};
|
251
|
-
const eventProps = isMobile ? {
|
252
|
-
// mobile events for selection
|
253
|
-
onTouchStart: onMouseDownInCell,
|
254
|
-
onTouchMove: handleTouchMove,
|
255
|
-
onTouchEnd: handleTouchEnd
|
256
|
-
} : {
|
257
|
-
onMouseEnter: () => onMouseEnter(path),
|
258
|
-
onMouseLeave,
|
259
|
-
onMouseDown: onMouseDownInCell,
|
260
|
-
onMouseUp,
|
261
|
-
onClick
|
262
|
-
};
|
263
250
|
const tbProps = tableResizing || resizing || over || readOnly ? {
|
264
251
|
...commonTdProps,
|
265
252
|
contentEditable: false
|
266
253
|
} : {
|
267
254
|
...commonTdProps,
|
268
|
-
|
255
|
+
onMouseEnter: () => onMouseEnter(path),
|
256
|
+
onMouseLeave,
|
257
|
+
onMouseDown: onMouseDownInCell,
|
258
|
+
onMouseUp,
|
259
|
+
onClick,
|
260
|
+
// mobile events for selection
|
261
|
+
onTouchStart: onMouseDownInCell,
|
262
|
+
onTouchMove: handleTouchMove,
|
263
|
+
onTouchEnd: handleTouchEnd
|
269
264
|
};
|
270
265
|
const dndProps = {
|
271
266
|
id: cellId,
|
@@ -1,24 +1,12 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Text } from "slate";
|
3
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
const isEmptyTextNode = node => {
|
5
|
-
if (Text.isText(node)) {
|
6
|
-
return !node.text.trim();
|
7
|
-
}
|
8
|
-
return false;
|
9
|
-
};
|
10
3
|
const Title = props => {
|
11
4
|
const {
|
12
|
-
element,
|
13
5
|
attributes,
|
14
|
-
children
|
15
|
-
customProps
|
6
|
+
children
|
16
7
|
} = props;
|
17
|
-
const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
|
18
8
|
return /*#__PURE__*/_jsx("div", {
|
19
9
|
...attributes,
|
20
|
-
placeholder: "Title",
|
21
|
-
className: `content-editable ${isEmpty}`,
|
22
10
|
style: {
|
23
11
|
fontWeight: "bold",
|
24
12
|
fontSize: "20px"
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const VariableStyles =
|
1
|
+
const VariableStyles = () => ({
|
2
2
|
variablesItem: {
|
3
3
|
color: "#2563EB",
|
4
4
|
background: "#EEEEEE"
|
@@ -37,34 +37,8 @@ const VariableStyles = theme => ({
|
|
37
37
|
"& .MuiMenuItem-root": {
|
38
38
|
color: "#64748B"
|
39
39
|
},
|
40
|
-
"& .MuiPaper-root": {
|
41
|
-
borderRadius: '8px',
|
42
|
-
backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
|
43
|
-
marginTop: '5px',
|
44
|
-
"@media only screen and (max-width: 599px)": {
|
45
|
-
padding: '10px 0px'
|
46
|
-
}
|
47
|
-
},
|
48
|
-
"& .MuiList-root": {
|
49
|
-
padding: '0px'
|
50
|
-
},
|
51
|
-
"& .MuiButtonBase-root": {
|
52
|
-
margin: '6px',
|
53
|
-
borderRadius: '8px',
|
54
|
-
padding: '6px 14px',
|
55
|
-
fontSize: '14px',
|
56
|
-
fontWeight: '400',
|
57
|
-
color: theme?.palette?.editor?.deletePopUpButtonTextColor,
|
58
|
-
"&:hover": {
|
59
|
-
background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
|
60
|
-
},
|
61
|
-
"@media only screen and (max-width: 599px)": {
|
62
|
-
minHeight: '30px',
|
63
|
-
margin: '0px 6px'
|
64
|
-
}
|
65
|
-
},
|
66
40
|
"& .Mui-selected": {
|
67
|
-
backgroundColor:
|
41
|
+
backgroundColor: "rgba(0, 0, 0, 0.04) !important"
|
68
42
|
}
|
69
43
|
}
|
70
44
|
});
|
@@ -3,15 +3,11 @@ import { useSlateStatic } from "slate-react";
|
|
3
3
|
import { MenuItem, Select } from "@mui/material";
|
4
4
|
import { insertVariables } from "../../utils/variables";
|
5
5
|
import VariableStyles from "./Style";
|
6
|
-
import
|
7
|
-
import { useEditorContext } from "../../hooks/useMouseMove";
|
6
|
+
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
9
|
const VariableButton = props => {
|
11
|
-
const
|
12
|
-
theme
|
13
|
-
} = useEditorContext();
|
14
|
-
const classes = VariableStyles(theme);
|
10
|
+
const classes = VariableStyles();
|
15
11
|
const editor = useSlateStatic();
|
16
12
|
const {
|
17
13
|
options
|
@@ -28,14 +24,13 @@ const VariableButton = props => {
|
|
28
24
|
value: "",
|
29
25
|
sx: classes.variableBtn,
|
30
26
|
onChange: updateVariable,
|
31
|
-
IconComponent: () => /*#__PURE__*/_jsx(
|
27
|
+
IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
|
32
28
|
MenuProps: {
|
33
29
|
sx: classes.variableMenuItem,
|
34
30
|
PaperProps: {
|
35
31
|
style: {
|
36
32
|
maxHeight: 300,
|
37
|
-
overflowY: "auto"
|
38
|
-
transformOrigin: 'top left'
|
33
|
+
overflowY: "auto"
|
39
34
|
},
|
40
35
|
sx: {
|
41
36
|
"&::-webkit-scrollbar-track": {
|
@@ -45,14 +40,6 @@ const VariableButton = props => {
|
|
45
40
|
borderRadius: "16px"
|
46
41
|
}
|
47
42
|
}
|
48
|
-
},
|
49
|
-
anchorOrigin: {
|
50
|
-
vertical: 'bottom',
|
51
|
-
horizontal: 'right'
|
52
|
-
},
|
53
|
-
transformOrigin: {
|
54
|
-
vertical: 'top',
|
55
|
-
horizontal: 'right'
|
56
43
|
}
|
57
44
|
},
|
58
45
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
@@ -11,7 +11,6 @@ import withCommon from "./hooks/withCommon";
|
|
11
11
|
import { serializeToText } from "./utils/serializeToText";
|
12
12
|
import "./Editor.css";
|
13
13
|
import { EditorProvider } from "./hooks/useMouseMove";
|
14
|
-
import { ensureWrappedVariables } from "./helper/ensureWrappedVariables";
|
15
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
16
15
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
17
16
|
const MiniEditor = props => {
|
@@ -37,8 +36,7 @@ const MiniEditor = props => {
|
|
37
36
|
needLayout: false
|
38
37
|
}));
|
39
38
|
const [isInteracted, setIsInteracted] = useState(false);
|
40
|
-
const
|
41
|
-
const [value, setValue] = useState(ensureWrappedVariables(updatedContent));
|
39
|
+
const [value, setValue] = useState(content);
|
42
40
|
const [deboundedValue] = useDebounce(value, 500);
|
43
41
|
const isReadOnly = readOnly === "readonly";
|
44
42
|
const customProps = {
|
@@ -151,7 +149,7 @@ const MiniEditor = props => {
|
|
151
149
|
theme: theme,
|
152
150
|
children: /*#__PURE__*/_jsxs(Slate, {
|
153
151
|
editor: editor,
|
154
|
-
initialValue:
|
152
|
+
initialValue: content,
|
155
153
|
onChange: onChange,
|
156
154
|
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
157
155
|
...props,
|
@@ -1,32 +1,8 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Select, MenuItem } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark
|
4
|
-
import { toolbarGroups } from "../toolbarGroups.js";
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
5
4
|
import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
|
6
|
-
import { googleFontList as defaultFonts } from "../../common/FontLoader/FontList.js";
|
7
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
-
const allTools = toolbarGroups.flat();
|
9
|
-
const fontWeight = allTools.find(f => f.format === "fontWeight");
|
10
|
-
export const getValue = (editor, format) => {
|
11
|
-
switch (format) {
|
12
|
-
case "fontFamily":
|
13
|
-
{
|
14
|
-
const style = getSelectedElementStyle("font-family", editor);
|
15
|
-
return style || defaultFonts[0];
|
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;
|
@@ -44,7 +20,7 @@ const Dropdown = ({
|
|
44
20
|
});
|
45
21
|
};
|
46
22
|
return /*#__PURE__*/_jsx(Select, {
|
47
|
-
value: value
|
23
|
+
value: value,
|
48
24
|
className: "editor-dd",
|
49
25
|
onChange: e => changeMarkData(e, format),
|
50
26
|
MenuProps: {
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Autocomplete, TextField } from "@mui/material";
|
3
|
-
import { addMarkData } from "../../utils/SlateUtilityFunctions.js";
|
3
|
+
import { activeMark, addMarkData } from "../../utils/SlateUtilityFunctions.js";
|
4
4
|
import usePopupStyle from "../PopupTool/PopupToolStyle.js";
|
5
5
|
import { useEditorContext } from "../../hooks/useMouseMove.js";
|
6
|
-
import KeyboardArrowDownRoundedIcon from
|
7
|
-
import { getValue } from "./Dropdown.js";
|
6
|
+
import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
const FontFamilyAutocomplete = ({
|
10
9
|
editor,
|
@@ -15,7 +14,7 @@ const FontFamilyAutocomplete = ({
|
|
15
14
|
val = "",
|
16
15
|
webFont = false
|
17
16
|
}) => {
|
18
|
-
const markValue =
|
17
|
+
const markValue = activeMark(editor, format);
|
19
18
|
const value = !webFont ? markValue : val;
|
20
19
|
const changeMarkData = (event, newValue, format) => {
|
21
20
|
if (!webFont) {
|
@@ -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,7 +1,10 @@
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
2
2
|
import { TextField, IconButton } from "@mui/material";
|
3
|
-
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
4
|
-
import {
|
3
|
+
import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
|
4
|
+
import { headingMap, sizeMap } from "../../utils/font.js";
|
5
|
+
import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
|
6
|
+
import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
|
7
|
+
import { getBreakPointsValue } from "../../helper/theme.js";
|
5
8
|
import useWindowResize from "../../hooks/useWindowResize.js";
|
6
9
|
import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
|
7
10
|
import { TextSizeDownArrow, TextSizeUpArrow } from "../../common/iconListV2.js";
|
@@ -14,12 +17,11 @@ const TextSize = ({
|
|
14
17
|
format,
|
15
18
|
fullWidth
|
16
19
|
}) => {
|
17
|
-
const [fontSize, setFontSize] = useState();
|
18
|
-
const timerRef = useRef();
|
19
20
|
const [size] = useWindowResize();
|
20
21
|
const val = activeMark(editor, format);
|
21
|
-
const
|
22
|
-
const
|
22
|
+
const value = getBreakPointsValue(val, size?.device);
|
23
|
+
const [fontSize, setFontSize] = useState();
|
24
|
+
const timerRef = useRef();
|
23
25
|
useEffect(() => {
|
24
26
|
setFontSize(getSizeVal());
|
25
27
|
}, [value]);
|
@@ -55,7 +57,13 @@ const TextSize = ({
|
|
55
57
|
};
|
56
58
|
const getSizeVal = () => {
|
57
59
|
try {
|
58
|
-
|
60
|
+
let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
61
|
+
Object.entries(headingMap).forEach(([format, value]) => {
|
62
|
+
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
63
|
+
size = value;
|
64
|
+
}
|
65
|
+
});
|
66
|
+
return parseInt(size);
|
59
67
|
} catch (err) {
|
60
68
|
return "";
|
61
69
|
}
|
@@ -3,18 +3,16 @@ import { Grid, Tabs, Tab, CircularProgress } from "@mui/material";
|
|
3
3
|
import TemplateCard from "./TemplateCard";
|
4
4
|
import FullViewCard from "./FullViewCard";
|
5
5
|
import ButtonTemplateCard from "./ButtonTemplatesCard";
|
6
|
-
|
7
|
-
// const CATEGORIES_SORT_INDEX = {
|
8
|
-
// Brief: 1,
|
9
|
-
// Buttons: 2,
|
10
|
-
// Banners: 3,
|
11
|
-
// Tables: 4,
|
12
|
-
// Contract: 5,
|
13
|
-
// Proposal: 6,
|
14
|
-
// };
|
15
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
16
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
17
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
const CATEGORIES_SORT_INDEX = {
|
9
|
+
Brief: 1,
|
10
|
+
Buttons: 2,
|
11
|
+
Banners: 3,
|
12
|
+
Tables: 4,
|
13
|
+
Contract: 5,
|
14
|
+
Proposal: 6
|
15
|
+
};
|
18
16
|
const Categories = props => {
|
19
17
|
const {
|
20
18
|
value,
|
@@ -48,7 +46,7 @@ const ProgressBar = ({
|
|
48
46
|
alignItems: "center",
|
49
47
|
margin: 0,
|
50
48
|
padding: 0,
|
51
|
-
height: "
|
49
|
+
height: "50px",
|
52
50
|
overflow: "hidden"
|
53
51
|
},
|
54
52
|
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
@@ -71,49 +69,41 @@ const AddTemplates = props => {
|
|
71
69
|
const [categories, setCategories] = useState([]);
|
72
70
|
const [category, setCategory] = useState("");
|
73
71
|
const [templates, setTemplates] = useState([]);
|
72
|
+
const [filteredTemplates, setFilteredTemplates] = useState([]);
|
74
73
|
useEffect(() => {
|
75
|
-
|
74
|
+
getTemplatesList();
|
76
75
|
}, []);
|
77
|
-
const
|
78
|
-
|
79
|
-
const categoryDB = await services("listCategory");
|
80
|
-
if (categoryDB?.data?.Template?.length > 0) {
|
81
|
-
setCategories(categoryDB.data.Template);
|
82
|
-
setCategory(categoryDB.data.Template[0]);
|
83
|
-
getTemplatesList(categoryDB.data.Template[0]);
|
84
|
-
}
|
85
|
-
setLoading(false);
|
76
|
+
const sortCategory = (a, b) => {
|
77
|
+
return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
|
86
78
|
};
|
87
|
-
const getTemplatesList = async
|
79
|
+
const getTemplatesList = async () => {
|
88
80
|
setLoading(true);
|
89
|
-
const result = await services("listTemplates", {
|
90
|
-
|
91
|
-
|
92
|
-
|
81
|
+
const result = await services("listTemplates", {});
|
82
|
+
const tempList = result?.data?.filter(f => f.type === "Template");
|
83
|
+
const lic = tempList?.reduce((a, b) => {
|
84
|
+
if (a.indexOf(b.category) < 0) {
|
85
|
+
a.push(b.category);
|
86
|
+
}
|
87
|
+
return a;
|
88
|
+
}, []).sort(sortCategory);
|
89
|
+
const ft = tempList?.filter(f => f.category === lic[0]);
|
90
|
+
setTemplates(tempList);
|
91
|
+
setCategories(lic);
|
92
|
+
setCategory(lic[0]);
|
93
|
+
setFilteredTemplates(ft);
|
93
94
|
setLoading(false);
|
94
95
|
};
|
95
96
|
const handleChange = (event, newValue) => {
|
96
|
-
setTemplates([]);
|
97
97
|
onSearch("");
|
98
98
|
setCategory(newValue);
|
99
|
-
|
99
|
+
setFilteredTemplates(templates.filter(f => f.category === newValue));
|
100
100
|
};
|
101
|
-
const onSelectTemplate = card =>
|
101
|
+
const onSelectTemplate = card => () => {
|
102
102
|
try {
|
103
|
-
|
104
|
-
data
|
105
|
-
} = await services("templateContent", {
|
106
|
-
id: card?.id
|
107
|
-
});
|
108
|
-
const content = data?.content;
|
109
|
-
if (content) {
|
110
|
-
editor.insertNode(JSON.parse(content));
|
111
|
-
} else {
|
112
|
-
console.log("No data found");
|
113
|
-
}
|
103
|
+
editor.insertNode(JSON.parse(card.content));
|
114
104
|
onClose();
|
115
105
|
} catch (err) {
|
116
|
-
console.log(
|
106
|
+
console.log(err);
|
117
107
|
}
|
118
108
|
};
|
119
109
|
const filterByTitle = f => {
|
@@ -183,16 +173,16 @@ const AddTemplates = props => {
|
|
183
173
|
data: categories,
|
184
174
|
handleChange: handleChange
|
185
175
|
})
|
186
|
-
}), /*#__PURE__*/
|
176
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
187
177
|
container: true,
|
188
178
|
spacing: 0,
|
189
179
|
className: `${fullScreen ? "fullscreen" : ""}`,
|
190
180
|
sx: classes.templateCardsWrpr,
|
191
|
-
children:
|
181
|
+
children: [/*#__PURE__*/_jsx(ProgressBar, {
|
192
182
|
loading: loading
|
193
|
-
})
|
194
|
-
|
195
|
-
})
|
183
|
+
}), filteredTemplates.filter(filterByTitle).map(m => {
|
184
|
+
return renderTemplate(m);
|
185
|
+
})]
|
196
186
|
})]
|
197
187
|
});
|
198
188
|
};
|
@@ -51,8 +51,7 @@ const alignmentOptions = [{
|
|
51
51
|
}];
|
52
52
|
function SelectAlignment({
|
53
53
|
editor,
|
54
|
-
classes
|
55
|
-
closeMainPopup
|
54
|
+
classes
|
56
55
|
}) {
|
57
56
|
const selected = useMemo(() => {
|
58
57
|
return alignmentOptions.find(t => isBlockActive(editor, t.value));
|
@@ -60,7 +59,6 @@ function SelectAlignment({
|
|
60
59
|
const onChange = (format, option) => {
|
61
60
|
if (option.type === "block") {
|
62
61
|
toggleBlock(editor, format);
|
63
|
-
closeMainPopup();
|
64
62
|
}
|
65
63
|
};
|
66
64
|
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { useEffect, useRef, useState } from "react";
|
2
|
-
import { activeMark, addMarkData } from "../../../utils/SlateUtilityFunctions";
|
2
|
+
import { activeMark, addMarkData, isBlockActive } from "../../../utils/SlateUtilityFunctions";
|
3
3
|
import { Button, IconButton, Popover, TextField } from "@mui/material";
|
4
4
|
import DownArrowIcon from "../../../assets/svg/DownArrowIcon";
|
5
5
|
import useWindowResize from "../../../hooks/useWindowResize";
|
6
|
-
import { BREAKPOINTS_DEVICES, getBreakPointsValue
|
6
|
+
import { BREAKPOINTS_DEVICES, getBreakPointsValue } from "../../../helper/theme";
|
7
|
+
import { headingMap, sizeMap } from "../../../utils/font";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
10
|
const fontSizeOptions = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 26, 32, 36, 40, 48, 64, 96, 128];
|
@@ -18,7 +19,7 @@ function SelectFontSize({
|
|
18
19
|
const containerRef = useRef();
|
19
20
|
const [size] = useWindowResize();
|
20
21
|
const val = activeMark(editor, format);
|
21
|
-
const value =
|
22
|
+
const value = getBreakPointsValue(val, size?.device);
|
22
23
|
const timerRef = useRef();
|
23
24
|
const updateMarkData = newVal => {
|
24
25
|
let upData = {
|
@@ -52,7 +53,13 @@ function SelectFontSize({
|
|
52
53
|
};
|
53
54
|
const getSizeVal = () => {
|
54
55
|
try {
|
55
|
-
|
56
|
+
let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
57
|
+
Object.entries(headingMap).forEach(([format, value]) => {
|
58
|
+
if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
|
59
|
+
size = value;
|
60
|
+
}
|
61
|
+
});
|
62
|
+
return parseInt(size);
|
56
63
|
} catch (err) {
|
57
64
|
return "";
|
58
65
|
}
|
@@ -90,8 +97,8 @@ function SelectFontSize({
|
|
90
97
|
anchorEl: anchorEl,
|
91
98
|
onClose: () => setAnchorEl(null),
|
92
99
|
anchorOrigin: {
|
93
|
-
vertical:
|
94
|
-
horizontal:
|
100
|
+
vertical: 'bottom',
|
101
|
+
horizontal: 'left'
|
95
102
|
},
|
96
103
|
sx: classes.customSelectPopoverWrapper,
|
97
104
|
children: fontSizeOptions.map((s, i) => {
|
@@ -68,8 +68,7 @@ const listOptions = [{
|
|
68
68
|
}];
|
69
69
|
function SelectList({
|
70
70
|
editor,
|
71
|
-
classes
|
72
|
-
closeMainPopup
|
71
|
+
classes
|
73
72
|
}) {
|
74
73
|
const selectedList = useMemo(() => {
|
75
74
|
return listOptions.find(t => isBlockActive(editor, t.value));
|
@@ -80,7 +79,6 @@ function SelectList({
|
|
80
79
|
} else if (option.type === "accordion") {
|
81
80
|
insertAccordion(editor);
|
82
81
|
}
|
83
|
-
closeMainPopup();
|
84
82
|
};
|
85
83
|
return /*#__PURE__*/_jsx(CustomSelectTool, {
|
86
84
|
options: listOptions,
|