@flozy/editor 3.6.4 → 3.6.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +9 -2
- package/dist/Editor/Elements/AppHeader/AppHeader.js +14 -12
- package/dist/Editor/Elements/Embed/Frames/ImageFrame.js +0 -1
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +1 -2
- 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 -11
- package/dist/Editor/Elements/Table/TableCell.js +1 -1
- package/dist/Editor/MiniEditor.js +1 -3
- package/dist/Editor/Toolbar/Basic/index.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +2 -4
- package/dist/Editor/Toolbar/PopupTool/index.js +2 -4
- package/dist/Editor/common/LinkSettings/NavComponents.js +54 -20
- package/dist/Editor/common/MUIIcon/index.js +1 -2
- package/dist/Editor/utils/helper.js +33 -10
- package/package.json +1 -1
- package/dist/Editor/Elements/Link/LinkPopupStyles.js +0 -28
@@ -153,8 +153,15 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
153
153
|
event,
|
154
154
|
editor
|
155
155
|
});
|
156
|
-
} else if (event.key === "Enter") {
|
157
|
-
|
156
|
+
} else if (event.key === "Enter" && !event.shiftKey) {
|
157
|
+
const {
|
158
|
+
value: strVal,
|
159
|
+
...restVal
|
160
|
+
} = getOnSaveData(value);
|
161
|
+
onsubmit(false, {
|
162
|
+
strVal,
|
163
|
+
restVal
|
164
|
+
});
|
158
165
|
}
|
159
166
|
}, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
|
160
167
|
const handleClose = () => {};
|
@@ -146,19 +146,21 @@ function AppHeader(props) {
|
|
146
146
|
src: appLogo
|
147
147
|
}) : appTitle
|
148
148
|
}), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
|
149
|
-
children: menus.map((item, i) =>
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
149
|
+
children: menus.map((item, i) => {
|
150
|
+
const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
|
151
|
+
return /*#__PURE__*/_jsx(ListItem, {
|
152
|
+
disablePadding: true,
|
153
|
+
children: /*#__PURE__*/_jsx(ListItemButton, {
|
154
|
+
...buttonProps,
|
155
|
+
sx: {
|
156
|
+
textAlign: "center"
|
157
|
+
},
|
158
|
+
children: /*#__PURE__*/_jsx(ListItemText, {
|
159
|
+
primary: item.text
|
160
|
+
})
|
159
161
|
})
|
160
|
-
})
|
161
|
-
}
|
162
|
+
}, `${item.text}_${i}`);
|
163
|
+
})
|
162
164
|
})]
|
163
165
|
});
|
164
166
|
const container = window !== undefined ? () => window().document.body : undefined;
|
@@ -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,10 +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 classes = LinkPopupStyles(theme);
|
17
14
|
return /*#__PURE__*/_jsxs(Dialog, {
|
18
15
|
fullWidth: true,
|
19
16
|
open: open,
|
@@ -47,16 +44,13 @@ const LinkPopup = props => {
|
|
47
44
|
style: {
|
48
45
|
paddingTop: "12px"
|
49
46
|
},
|
50
|
-
className: classes.titleTypo,
|
51
47
|
children: /*#__PURE__*/_jsx(TextField, {
|
52
48
|
size: "small",
|
53
49
|
fullWidth: true,
|
54
50
|
value: linkData?.name,
|
55
51
|
name: "name",
|
56
52
|
placeholder: "Link Title",
|
57
|
-
onChange: handleInputChange
|
58
|
-
sx: classes.addLinkField,
|
59
|
-
className: classes.addLinkField
|
53
|
+
onChange: handleInputChange
|
60
54
|
})
|
61
55
|
}), /*#__PURE__*/_jsx(Grid, {
|
62
56
|
item: true,
|
@@ -70,9 +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,
|
75
|
-
className: classes.addLinkField
|
67
|
+
onChange: handleInputChange
|
76
68
|
})
|
77
69
|
}), /*#__PURE__*/_jsx(Grid, {
|
78
70
|
item: true,
|
@@ -117,7 +117,7 @@ const TableCell = props => {
|
|
117
117
|
className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
|
118
118
|
style: {
|
119
119
|
position: "relative",
|
120
|
-
|
120
|
+
backgroundColor: bgColor || entireBgColor,
|
121
121
|
border: `3px solid ${cellBorderColor}`,
|
122
122
|
...(sizeProps || {})
|
123
123
|
},
|
@@ -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,
|
@@ -28,8 +28,7 @@ const MiniTextFormat = props => {
|
|
28
28
|
classes,
|
29
29
|
editor,
|
30
30
|
closeMainPopup,
|
31
|
-
customProps
|
32
|
-
theme
|
31
|
+
customProps
|
33
32
|
} = props;
|
34
33
|
const [anchorEl, setAnchorEl] = useState(null);
|
35
34
|
const open = Boolean(anchorEl);
|
@@ -94,8 +93,7 @@ const MiniTextFormat = props => {
|
|
94
93
|
className: "verticalLine ml-1 mr-1"
|
95
94
|
}), /*#__PURE__*/_jsx(LinkButton, {
|
96
95
|
active: isBlockActive(editor, link.format),
|
97
|
-
editor: editor
|
98
|
-
theme: theme
|
96
|
+
editor: editor
|
99
97
|
}, link.id), /*#__PURE__*/_jsx(Button, {
|
100
98
|
onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
|
101
99
|
className: "textSettingsIcon",
|
@@ -91,8 +91,7 @@ const PopupTool = props => {
|
|
91
91
|
editor: editor,
|
92
92
|
classes: classes,
|
93
93
|
closeMainPopup: handleClose,
|
94
|
-
customProps: customProps
|
95
|
-
theme: theme
|
94
|
+
customProps: customProps
|
96
95
|
})
|
97
96
|
}) : /*#__PURE__*/_jsx(Popper, {
|
98
97
|
id: id,
|
@@ -114,8 +113,7 @@ const PopupTool = props => {
|
|
114
113
|
editor: editor,
|
115
114
|
classes: classes,
|
116
115
|
closeMainPopup: handleClose,
|
117
|
-
customProps: customProps
|
118
|
-
theme: theme
|
116
|
+
customProps: customProps
|
119
117
|
})
|
120
118
|
})
|
121
119
|
})
|
@@ -1,8 +1,24 @@
|
|
1
1
|
import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
|
2
2
|
import { useEffect, useMemo, useState } from "react";
|
3
|
+
import { useSlate } from "slate-react";
|
3
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
5
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
5
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
|
+
const sectionTypes = ["grid"];
|
8
|
+
const loopChildren = (children = [], sections) => {
|
9
|
+
if (!children?.length) {
|
10
|
+
return sections;
|
11
|
+
}
|
12
|
+
for (let child of children) {
|
13
|
+
if (sectionTypes.includes(child?.type)) {
|
14
|
+
if (child.id) {
|
15
|
+
sections.push(child.id);
|
16
|
+
}
|
17
|
+
}
|
18
|
+
sections = loopChildren(child.children, sections);
|
19
|
+
}
|
20
|
+
return sections;
|
21
|
+
};
|
6
22
|
const OpenInNewTab = props => {
|
7
23
|
const {
|
8
24
|
nav,
|
@@ -42,21 +58,35 @@ export const SelectPage = props => {
|
|
42
58
|
services
|
43
59
|
} = props;
|
44
60
|
const [pages, setPages] = useState([]);
|
61
|
+
const editor = useSlate();
|
45
62
|
const getPages = async () => {
|
46
63
|
const result = await services("getPages", {});
|
47
|
-
|
48
|
-
const {
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
64
|
+
if (result?.data?.length) {
|
65
|
+
const refactor = result?.data?.map(r => {
|
66
|
+
const {
|
67
|
+
title,
|
68
|
+
url_name,
|
69
|
+
...rest
|
70
|
+
} = r;
|
71
|
+
return {
|
72
|
+
label: url_name,
|
73
|
+
value: url_name,
|
74
|
+
...rest
|
75
|
+
};
|
76
|
+
});
|
77
|
+
setPages(refactor);
|
78
|
+
} else {
|
79
|
+
const currentPage = {
|
80
|
+
label: "Current Page",
|
81
|
+
value: "_currentPage",
|
82
|
+
is_current_page: 1,
|
83
|
+
sections: loopChildren(editor.children, [])
|
57
84
|
};
|
58
|
-
|
59
|
-
|
85
|
+
setPages([currentPage]);
|
86
|
+
if (!value) {
|
87
|
+
onChange(currentPage.value);
|
88
|
+
}
|
89
|
+
}
|
60
90
|
};
|
61
91
|
useEffect(() => {
|
62
92
|
getPages();
|
@@ -76,12 +106,14 @@ export const SelectPage = props => {
|
|
76
106
|
}
|
77
107
|
return [];
|
78
108
|
}, [value, pages]);
|
109
|
+
const isCurrentPage = page?.value === "_currentPage";
|
79
110
|
return /*#__PURE__*/_jsxs("div", {
|
80
111
|
children: [/*#__PURE__*/_jsx(FreeSoloCreateOption, {
|
81
112
|
label: page?.label,
|
82
|
-
setValue: val => onChange(val?.value),
|
113
|
+
setValue: val => onChange(val?.value || ""),
|
83
114
|
placeholder: "Select Page",
|
84
|
-
options: pages
|
115
|
+
options: pages,
|
116
|
+
disabled: isCurrentPage
|
85
117
|
}), /*#__PURE__*/_jsx(FreeSoloCreateOption, {
|
86
118
|
label: section?.label,
|
87
119
|
setValue: val => {
|
@@ -96,7 +128,7 @@ export const SelectPage = props => {
|
|
96
128
|
label: p,
|
97
129
|
value: p
|
98
130
|
}))
|
99
|
-
}), /*#__PURE__*/_jsx(OpenInNewTab, {
|
131
|
+
}), isCurrentPage ? null : /*#__PURE__*/_jsx(OpenInNewTab, {
|
100
132
|
...props
|
101
133
|
})]
|
102
134
|
});
|
@@ -149,7 +181,8 @@ export function FreeSoloCreateOption({
|
|
149
181
|
label,
|
150
182
|
setValue,
|
151
183
|
options = [],
|
152
|
-
placeholder = ""
|
184
|
+
placeholder = "",
|
185
|
+
disabled = false
|
153
186
|
}) {
|
154
187
|
return /*#__PURE__*/_jsx(Autocomplete, {
|
155
188
|
freeSolo: true,
|
@@ -164,7 +197,7 @@ export function FreeSoloCreateOption({
|
|
164
197
|
children: option.label
|
165
198
|
}),
|
166
199
|
onChange: (event, newValue) => {
|
167
|
-
if (typeof newValue ===
|
200
|
+
if (typeof newValue === "string") {
|
168
201
|
setValue({
|
169
202
|
value: newValue
|
170
203
|
});
|
@@ -189,7 +222,7 @@ export function FreeSoloCreateOption({
|
|
189
222
|
} = params;
|
190
223
|
// Suggest the creation of a new value
|
191
224
|
const isExisting = options.some(option => inputValue === option.label);
|
192
|
-
if (inputValue !==
|
225
|
+
if (inputValue !== "" && !isExisting) {
|
193
226
|
filtered.push({
|
194
227
|
inputValue,
|
195
228
|
label: `Add "${inputValue}"`
|
@@ -202,7 +235,7 @@ export function FreeSoloCreateOption({
|
|
202
235
|
handleHomeEndKeys: true,
|
203
236
|
getOptionLabel: option => {
|
204
237
|
// Value selected with enter, right from the input
|
205
|
-
if (typeof option ===
|
238
|
+
if (typeof option === "string") {
|
206
239
|
return option;
|
207
240
|
}
|
208
241
|
// Add "xxx" option created dynamically
|
@@ -214,6 +247,7 @@ export function FreeSoloCreateOption({
|
|
214
247
|
},
|
215
248
|
sx: {
|
216
249
|
marginTop: "10px"
|
217
|
-
}
|
250
|
+
},
|
251
|
+
disabled: disabled
|
218
252
|
});
|
219
253
|
}
|
@@ -2,9 +2,8 @@ import React, { useEffect, useState } from "react";
|
|
2
2
|
import { Box } from "@mui/material";
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
4
|
const iconLoader = async iconName => {
|
5
|
-
const iconAPI = process.env.ICON_API;
|
6
5
|
try {
|
7
|
-
const iconResponse = await fetch(`${
|
6
|
+
const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
|
8
7
|
const icon = await iconResponse.text();
|
9
8
|
return icon;
|
10
9
|
} catch (error) {
|
@@ -208,7 +208,13 @@ export const hasVerticalScrollbar = (element = {}) => {
|
|
208
208
|
return element.scrollHeight > element.clientHeight;
|
209
209
|
};
|
210
210
|
const isHomePage = page => {
|
211
|
-
return page === "home" || page === "iframe.html" || !page;
|
211
|
+
return page === "home" || page === "iframe.html" || page === "_currentPage" || !page;
|
212
|
+
};
|
213
|
+
const getScrollElement = () => {
|
214
|
+
const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
|
215
|
+
const isSlateWrapperScroll = hasVerticalScrollbar(slateWrapper);
|
216
|
+
const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
|
217
|
+
return scrollFrom;
|
212
218
|
};
|
213
219
|
export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
|
214
220
|
const props = {};
|
@@ -239,16 +245,33 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
|
|
239
245
|
}
|
240
246
|
break;
|
241
247
|
case "page":
|
242
|
-
|
243
|
-
const [page, section] = url?.split("#") || [];
|
248
|
+
const [page = "", section] = url?.split("#") || [];
|
244
249
|
const sec = section ? `#${section}` : "";
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
250
|
+
if (page === "_currentPage") {
|
251
|
+
props.component = "button";
|
252
|
+
props.onClick = () => {
|
253
|
+
const scrollFrom = getScrollElement();
|
254
|
+
if (sec) {
|
255
|
+
const element = document.getElementById(section);
|
256
|
+
if (element) {
|
257
|
+
const topPosition = element.getBoundingClientRect().top + scrollFrom.scrollTop;
|
258
|
+
scrollFrom.scrollTo({
|
259
|
+
top: topPosition,
|
260
|
+
behavior: "smooth"
|
261
|
+
});
|
262
|
+
}
|
263
|
+
}
|
264
|
+
};
|
265
|
+
} else {
|
266
|
+
props.component = "a";
|
267
|
+
const currentUserPage = getCurrentUserPage();
|
268
|
+
props.href = isCurrentPage(page) ? `./${currentUserPage}${sec}` : `./${url}`;
|
269
|
+
if (openInNewTab) {
|
270
|
+
if (isCurrentPage(page)) {
|
271
|
+
// temp fix, if user is presented in current page, open in new tab option is restricted, we will scroll to the element in current page
|
272
|
+
} else {
|
273
|
+
props.target = "_blank";
|
274
|
+
}
|
252
275
|
}
|
253
276
|
}
|
254
277
|
break;
|
package/package.json
CHANGED
@@ -1,28 +0,0 @@
|
|
1
|
-
const LinkPopupStyles = theme => ({
|
2
|
-
addLinkField: {
|
3
|
-
"& .MuiOutlinedInput-input": {
|
4
|
-
fontSize: "12px",
|
5
|
-
fontWeight: 500,
|
6
|
-
color: `${theme?.palette?.editor?.textColor} !important`
|
7
|
-
},
|
8
|
-
"& .MuiFormHelperText-root": {
|
9
|
-
color: `${theme?.palette?.editor?.textColor} !important`
|
10
|
-
},
|
11
|
-
"& .MuiOutlinedInput-root": {
|
12
|
-
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
|
13
|
-
color: `${theme?.palette?.editor?.textColor} !important`,
|
14
|
-
borderRadius: "7px",
|
15
|
-
"& fieldset": {
|
16
|
-
borderColor: "#D8DDE1"
|
17
|
-
},
|
18
|
-
"&:hover fieldset": {
|
19
|
-
borderColor: "#64748B"
|
20
|
-
},
|
21
|
-
"&.Mui-focused fieldset": {
|
22
|
-
borderColor: "#2563EB"
|
23
|
-
},
|
24
|
-
"& .MuiFormLabel-root": {}
|
25
|
-
}
|
26
|
-
}
|
27
|
-
});
|
28
|
-
export default LinkPopupStyles;
|