@flozy/editor 7.0.5 → 7.0.7
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/CommonEditor.js +2 -5
- package/dist/Editor/Editor.css +1 -1
- package/dist/Editor/Elements/AI/PopoverAIInput.js +12 -2
- package/dist/Editor/Elements/Button/EditorButton.js +0 -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/Form/Form.js +0 -1
- package/dist/Editor/Elements/FreeGrid/styles.js +0 -1
- 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 +15 -15
- package/dist/Editor/Elements/Table/TableCell.js +9 -14
- package/dist/Editor/MiniEditor.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/AddTemplates.js +28 -37
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectAlignment.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js +1 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +8 -3
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +3 -9
- package/dist/Editor/Toolbar/PopupTool/TemplateCard.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -45
- package/dist/Editor/Toolbar/PopupTool/index.js +0 -2
- package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -1
- package/dist/Editor/common/ImageSelector/UploadStyles.js +1 -2
- package/dist/Editor/common/MentionsPopup/index.js +1 -0
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
- package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +0 -6
- package/dist/Editor/common/Section/index.js +2 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/index.js +1 -3
- package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +0 -4
- package/dist/Editor/commonStyle.js +0 -5
- package/dist/Editor/helper/theme.js +1 -24
- package/dist/Editor/hooks/useMouseMove.js +2 -5
- package/dist/Editor/plugins/withHTML.js +1 -7
- package/dist/Editor/utils/SlateUtilityFunctions.js +7 -23
- package/dist/Editor/utils/customHooks/useTableResize.js +1 -2
- package/dist/Editor/utils/helper.js +0 -41
- package/dist/Editor/utils/pageSettings.js +2 -14
- package/dist/Editor/utils/table.js +0 -21
- package/package.json +1 -1
- package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +0 -79
- package/dist/Editor/helper/ensureWrappedVariables.js +0 -28
@@ -26,7 +26,7 @@ import editorStyles from "./Styles/EditorStyles";
|
|
26
26
|
import DragAndDrop from "./common/DnD";
|
27
27
|
import Section from "./common/Section";
|
28
28
|
import decorators from "./utils/Decorators";
|
29
|
-
import {
|
29
|
+
import { getTRBLBreakPoints } from "./helper/theme";
|
30
30
|
import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
|
31
31
|
import useWindowResize from "./hooks/useWindowResize";
|
32
32
|
import PopoverAIInput from "./Elements/AI/PopoverAIInput";
|
@@ -141,8 +141,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
141
141
|
pageColor,
|
142
142
|
color: pageTextColor,
|
143
143
|
pageWidth,
|
144
|
-
maxWidth: pageMaxWidth
|
145
|
-
lineHeight
|
144
|
+
maxWidth: pageMaxWidth
|
146
145
|
} = pageSt?.pageProps || {
|
147
146
|
bannerSpacing: {
|
148
147
|
left: 0,
|
@@ -333,7 +332,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
333
332
|
onDrawerOpen: onDrawerOpen,
|
334
333
|
ICON_API: "https://assets.agenciflow.com"
|
335
334
|
};
|
336
|
-
const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
|
337
335
|
const renderElement = useCallback(props => {
|
338
336
|
return /*#__PURE__*/_jsx(Element, {
|
339
337
|
...props,
|
@@ -536,7 +534,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
536
534
|
padding: {
|
537
535
|
...getTRBLBreakPoints(bannerSpacing)
|
538
536
|
},
|
539
|
-
lineHeight: lineH,
|
540
537
|
width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
|
541
538
|
height: viewport.h ? `${viewport.h}px` : `100%`,
|
542
539
|
alignSelf: "center",
|
package/dist/Editor/Editor.css
CHANGED
@@ -6,7 +6,7 @@ import AIInput from "./AIInput";
|
|
6
6
|
import { ReactEditor, useSlate } from "slate-react";
|
7
7
|
import { Node, Range, Transforms } from "slate";
|
8
8
|
import { MODES } from "./helper";
|
9
|
-
import { getSelectedText, getSlateDom
|
9
|
+
import { getSelectedText, getSlateDom } from "../../utils/helper";
|
10
10
|
import { VoiceToText } from "./VoiceToText";
|
11
11
|
import deserialize from "../../helper/deserialize";
|
12
12
|
import useEditorScroll from "../../hooks/useEditorScroll";
|
@@ -286,7 +286,17 @@ function PopoverAIInput({
|
|
286
286
|
};
|
287
287
|
useEffect(() => {
|
288
288
|
if (openAI && getSelectedText(editor).trim()) {
|
289
|
-
|
289
|
+
const customSelection = document.querySelectorAll(".slate-highlight");
|
290
|
+
const selectionBg = "rgba(35, 131, 226, 0.35)";
|
291
|
+
if (customSelection?.length) {
|
292
|
+
customSelection?.forEach(el => el.style.background = selectionBg);
|
293
|
+
|
294
|
+
// if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
|
295
|
+
const selection = window.getSelection();
|
296
|
+
if (selection) {
|
297
|
+
selection.removeAllRanges(); // Clears the selection
|
298
|
+
}
|
299
|
+
}
|
290
300
|
}
|
291
301
|
}, [editor.selection, openAI]);
|
292
302
|
return /*#__PURE__*/_jsxs("div", {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { Node, Path, Transforms } from "slate";
|
3
|
-
import { ReactEditor,
|
3
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
4
|
import { Box, useTheme } from "@mui/material";
|
5
5
|
import { DataViewProvider } from "./Providers/DataViewProvider";
|
6
6
|
import useDataViewStyles from "./styles";
|
@@ -15,7 +15,7 @@ const DataView = props => {
|
|
15
15
|
theme: appTheme
|
16
16
|
} = useEditorContext();
|
17
17
|
const theme = useTheme();
|
18
|
-
const editor =
|
18
|
+
const editor = useSlateStatic();
|
19
19
|
const {
|
20
20
|
attributes,
|
21
21
|
children,
|
@@ -113,8 +113,7 @@ const DataView = props => {
|
|
113
113
|
onDuplicate: onDuplicate,
|
114
114
|
readOnly: readOnly,
|
115
115
|
title: title,
|
116
|
-
onTitleChange: onTitleChange
|
117
|
-
path: path
|
116
|
+
onTitleChange: onTitleChange
|
118
117
|
}), /*#__PURE__*/_jsx(LayoutView, {
|
119
118
|
readOnly: readOnly,
|
120
119
|
children: children
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { TextField } from "@mui/material";
|
3
3
|
import { useDataView } from "../../Providers/DataViewProvider";
|
4
|
-
import { focusDynamicTableInput } from "../../../../utils/helper";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
const NumberType = props => {
|
7
6
|
const {
|
@@ -17,7 +16,6 @@ const NumberType = props => {
|
|
17
16
|
onChange(rowIndex, {
|
18
17
|
[property]: e?.target?.value
|
19
18
|
});
|
20
|
-
focusDynamicTableInput(e);
|
21
19
|
};
|
22
20
|
return /*#__PURE__*/_jsx(TextField, {
|
23
21
|
type: "number",
|
@@ -26,9 +24,7 @@ const NumberType = props => {
|
|
26
24
|
value: value,
|
27
25
|
size: "small",
|
28
26
|
onChange: handleChange,
|
29
|
-
disabled: readOnly
|
30
|
-
id: `tv-number-input-${rowIndex}-${property}` // * should be unique
|
27
|
+
disabled: readOnly
|
31
28
|
});
|
32
29
|
};
|
33
|
-
|
34
30
|
export default NumberType;
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
2
|
import { TextField } from "@mui/material";
|
3
3
|
import { useDataView } from "../../Providers/DataViewProvider";
|
4
|
-
import { focusDynamicTableInput } from "../../../../utils/helper";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
const TextType = props => {
|
7
6
|
const {
|
@@ -17,7 +16,6 @@ const TextType = props => {
|
|
17
16
|
onChange(rowIndex, {
|
18
17
|
[property]: e?.target?.value
|
19
18
|
});
|
20
|
-
focusDynamicTableInput(e);
|
21
19
|
};
|
22
20
|
const formatValue = () => {
|
23
21
|
if (typeof value === "string") {
|
@@ -32,9 +30,7 @@ const TextType = props => {
|
|
32
30
|
value: formatValue(value),
|
33
31
|
size: "small",
|
34
32
|
onChange: handleChange,
|
35
|
-
disabled: readOnly
|
36
|
-
id: `tv-text-input-${rowIndex}-${property}` // * should be unique
|
33
|
+
disabled: readOnly
|
37
34
|
});
|
38
35
|
};
|
39
|
-
|
40
36
|
export default TextType;
|
@@ -5,7 +5,6 @@ import FilterSort from "./FilterSort";
|
|
5
5
|
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
6
6
|
import Icon from "../../../common/Icon";
|
7
7
|
import { useEditorContext } from "../../../hooks/useMouseMove";
|
8
|
-
import { focusDynamicTableInput } from "../../../utils/helper";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
10
|
const FilterView = props => {
|
@@ -16,8 +15,7 @@ const FilterView = props => {
|
|
16
15
|
onEnter,
|
17
16
|
readOnly,
|
18
17
|
title,
|
19
|
-
onTitleChange
|
20
|
-
path
|
18
|
+
onTitleChange
|
21
19
|
} = props;
|
22
20
|
const {
|
23
21
|
sort,
|
@@ -72,7 +70,6 @@ const FilterView = props => {
|
|
72
70
|
};
|
73
71
|
const handleTitleChange = e => {
|
74
72
|
onTitleChange(e?.target?.value);
|
75
|
-
focusDynamicTableInput(e);
|
76
73
|
};
|
77
74
|
const handleEnter = e => {
|
78
75
|
if (e?.key === "Enter") {
|
@@ -99,25 +96,24 @@ const FilterView = props => {
|
|
99
96
|
},
|
100
97
|
value: title,
|
101
98
|
onChange: handleTitleChange,
|
102
|
-
onKeyUp: handleEnter
|
103
|
-
id: `tv-title-input-${path.join("|")}`
|
99
|
+
onKeyUp: handleEnter
|
104
100
|
}) : title || "Untitled"
|
105
101
|
}), /*#__PURE__*/_jsxs(Box, {
|
106
102
|
className: "tv-fi-wrpr",
|
107
103
|
sx: {
|
108
|
-
alignItems:
|
104
|
+
alignItems: 'center'
|
109
105
|
},
|
110
106
|
children: [/*#__PURE__*/_jsxs(Box, {
|
111
107
|
className: `tv-sb mr ${toggle ? "open" : ""}`,
|
112
108
|
sx: {
|
113
|
-
minHeight:
|
109
|
+
minHeight: '32px'
|
114
110
|
},
|
115
111
|
children: [/*#__PURE__*/_jsx(IconButton, {
|
116
112
|
type: "button",
|
117
113
|
sx: {
|
118
|
-
|
119
|
-
width:
|
120
|
-
height:
|
114
|
+
'& svg': {
|
115
|
+
width: '14px',
|
116
|
+
height: '14px'
|
121
117
|
}
|
122
118
|
},
|
123
119
|
"aria-label": "search",
|
@@ -141,12 +137,12 @@ const FilterView = props => {
|
|
141
137
|
className: ` ${sort?.length > 0 ? "active" : ""}`,
|
142
138
|
onClick: handleSortClick,
|
143
139
|
sx: {
|
144
|
-
|
140
|
+
'& svg': {
|
145
141
|
strokeWidth: 1.2
|
146
142
|
}
|
147
143
|
},
|
148
144
|
children: /*#__PURE__*/_jsx(Icon, {
|
149
|
-
icon:
|
145
|
+
icon: 'sortBy'
|
150
146
|
})
|
151
147
|
}), /*#__PURE__*/_jsx(FilterSort, {
|
152
148
|
open: open,
|
@@ -156,7 +152,7 @@ const FilterView = props => {
|
|
156
152
|
}), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
|
157
153
|
className: "mr",
|
158
154
|
sx: {
|
159
|
-
|
155
|
+
'& svg': {
|
160
156
|
fill: theme?.palette?.editor?.tv_stroke
|
161
157
|
}
|
162
158
|
},
|
@@ -166,7 +162,7 @@ const FilterView = props => {
|
|
166
162
|
className: "mr",
|
167
163
|
onClick: handleDeleteRow,
|
168
164
|
children: /*#__PURE__*/_jsx(Icon, {
|
169
|
-
icon:
|
165
|
+
icon: 'trashIcon'
|
170
166
|
})
|
171
167
|
}) : null, !readOnly ? /*#__PURE__*/_jsxs(Menu, {
|
172
168
|
sx: classes.basicMenu,
|
@@ -189,24 +185,24 @@ const FilterView = props => {
|
|
189
185
|
onClick: onMenuClick("Duplicate"),
|
190
186
|
children: [" ", /*#__PURE__*/_jsx(Box, {
|
191
187
|
sx: {
|
192
|
-
marginRight:
|
193
|
-
display:
|
194
|
-
alignItems:
|
188
|
+
marginRight: '5px',
|
189
|
+
display: ' flex',
|
190
|
+
alignItems: 'center'
|
195
191
|
},
|
196
192
|
children: /*#__PURE__*/_jsx(Icon, {
|
197
|
-
icon:
|
193
|
+
icon: 'duplicateIcon'
|
198
194
|
})
|
199
195
|
}), "Duplicate"]
|
200
196
|
}), /*#__PURE__*/_jsxs(MenuItem, {
|
201
197
|
onClick: onMenuClick("Delete"),
|
202
198
|
children: [" ", /*#__PURE__*/_jsx(Box, {
|
203
199
|
sx: {
|
204
|
-
marginRight:
|
205
|
-
display:
|
206
|
-
alignItems:
|
200
|
+
marginRight: '5px',
|
201
|
+
display: ' flex',
|
202
|
+
alignItems: 'center'
|
207
203
|
},
|
208
204
|
children: /*#__PURE__*/_jsx(Icon, {
|
209
|
-
icon:
|
205
|
+
icon: 'trashIcon'
|
210
206
|
})
|
211
207
|
}), "Delete"]
|
212
208
|
})]
|
@@ -49,7 +49,6 @@ const SearchAttachment = props => {
|
|
49
49
|
background: `${theme?.palette?.containers?.slashBrainCardBg} !important`,
|
50
50
|
cursor: 'pointer',
|
51
51
|
margin: '4px 0px',
|
52
|
-
lineHeight: 1.43,
|
53
52
|
"&.MuiPaper-root.MuiPaper-rounded": {
|
54
53
|
borderRadius: "7px !important",
|
55
54
|
paddingTop: '0px !important'
|
@@ -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";
|
@@ -30,14 +30,16 @@ const ToolTableComponent = props => {
|
|
30
30
|
const {
|
31
31
|
updateTableSelection
|
32
32
|
} = useTable();
|
33
|
-
return /*#__PURE__*/_jsx(
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
33
|
+
return /*#__PURE__*/_jsx("div", {
|
34
|
+
children: /*#__PURE__*/_jsx(TableTool, {
|
35
|
+
theme: editorTheme,
|
36
|
+
handleToolAction: (type, option) => {
|
37
|
+
handleAction(type, option);
|
38
|
+
if (type === "duplicate") {
|
39
|
+
updateTableSelection(getDefaultTableSelection());
|
40
|
+
}
|
39
41
|
}
|
40
|
-
}
|
42
|
+
})
|
41
43
|
});
|
42
44
|
};
|
43
45
|
const MoreTableSettings = props => {
|
@@ -72,11 +74,9 @@ const MoreTableSettings = props => {
|
|
72
74
|
placement: "bottom-start",
|
73
75
|
children: /*#__PURE__*/_jsx(ClickAwayListener, {
|
74
76
|
onClickAway: () => setExpandTools(false),
|
75
|
-
children: /*#__PURE__*/_jsx(
|
76
|
-
|
77
|
-
|
78
|
-
editorTheme: editorTheme
|
79
|
-
})
|
77
|
+
children: /*#__PURE__*/_jsx(ToolTableComponent, {
|
78
|
+
handleAction: handleAction,
|
79
|
+
editorTheme: editorTheme
|
80
80
|
})
|
81
81
|
})
|
82
82
|
});
|
@@ -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,
|
@@ -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,
|
@@ -4,7 +4,6 @@ import TemplateCard from "./TemplateCard";
|
|
4
4
|
import FullViewCard from "./FullViewCard";
|
5
5
|
import ButtonTemplateCard from "./ButtonTemplatesCard";
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
8
|
const CATEGORIES_SORT_INDEX = {
|
10
9
|
Brief: 1,
|
@@ -47,7 +46,7 @@ const ProgressBar = ({
|
|
47
46
|
alignItems: "center",
|
48
47
|
margin: 0,
|
49
48
|
padding: 0,
|
50
|
-
height: "
|
49
|
+
height: "50px",
|
51
50
|
overflow: "hidden"
|
52
51
|
},
|
53
52
|
children: /*#__PURE__*/_jsx(CircularProgress, {})
|
@@ -70,49 +69,41 @@ const AddTemplates = props => {
|
|
70
69
|
const [categories, setCategories] = useState([]);
|
71
70
|
const [category, setCategory] = useState("");
|
72
71
|
const [templates, setTemplates] = useState([]);
|
72
|
+
const [filteredTemplates, setFilteredTemplates] = useState([]);
|
73
73
|
useEffect(() => {
|
74
|
-
|
74
|
+
getTemplatesList();
|
75
75
|
}, []);
|
76
|
-
const
|
77
|
-
|
78
|
-
const categoryDB = await services("listCategory");
|
79
|
-
if (categoryDB?.data?.Template?.length > 0) {
|
80
|
-
setCategories(categoryDB.data.Template);
|
81
|
-
setCategory(categoryDB.data.Template[0]);
|
82
|
-
getTemplatesList(categoryDB.data.Template[0]);
|
83
|
-
}
|
84
|
-
setLoading(false);
|
76
|
+
const sortCategory = (a, b) => {
|
77
|
+
return (CATEGORIES_SORT_INDEX[a] || Infinity) - (CATEGORIES_SORT_INDEX[b] || Infinity);
|
85
78
|
};
|
86
|
-
const getTemplatesList = async
|
79
|
+
const getTemplatesList = async () => {
|
87
80
|
setLoading(true);
|
88
|
-
const result = await services("listTemplates", {
|
89
|
-
|
90
|
-
|
91
|
-
|
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);
|
92
94
|
setLoading(false);
|
93
95
|
};
|
94
96
|
const handleChange = (event, newValue) => {
|
95
|
-
setTemplates([]);
|
96
97
|
onSearch("");
|
97
98
|
setCategory(newValue);
|
98
|
-
|
99
|
+
setFilteredTemplates(templates.filter(f => f.category === newValue));
|
99
100
|
};
|
100
|
-
const onSelectTemplate = card =>
|
101
|
+
const onSelectTemplate = card => () => {
|
101
102
|
try {
|
102
|
-
|
103
|
-
data
|
104
|
-
} = await services("templateContent", {
|
105
|
-
id: card?.id
|
106
|
-
});
|
107
|
-
const content = data?.content;
|
108
|
-
if (content) {
|
109
|
-
editor.insertNode(JSON.parse(content));
|
110
|
-
} else {
|
111
|
-
console.log("No data found");
|
112
|
-
}
|
103
|
+
editor.insertNode(JSON.parse(card.content));
|
113
104
|
onClose();
|
114
105
|
} catch (err) {
|
115
|
-
console.log(
|
106
|
+
console.log(err);
|
116
107
|
}
|
117
108
|
};
|
118
109
|
const filterByTitle = f => {
|
@@ -182,16 +173,16 @@ const AddTemplates = props => {
|
|
182
173
|
data: categories,
|
183
174
|
handleChange: handleChange
|
184
175
|
})
|
185
|
-
}), /*#__PURE__*/
|
176
|
+
}), /*#__PURE__*/_jsxs(Grid, {
|
186
177
|
container: true,
|
187
178
|
spacing: 0,
|
188
179
|
className: `${fullScreen ? "fullscreen" : ""}`,
|
189
180
|
sx: classes.templateCardsWrpr,
|
190
|
-
children:
|
181
|
+
children: [/*#__PURE__*/_jsx(ProgressBar, {
|
191
182
|
loading: loading
|
192
|
-
})
|
193
|
-
|
194
|
-
})
|
183
|
+
}), filteredTemplates.filter(filterByTitle).map(m => {
|
184
|
+
return renderTemplate(m);
|
185
|
+
})]
|
195
186
|
})]
|
196
187
|
});
|
197
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, {
|