@flozy/editor 3.6.1 → 3.6.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/Elements/AppHeader/AppHeader.js +14 -12
- package/dist/Editor/Elements/Button/EditorButton.js +4 -9
- package/dist/Editor/Elements/ChipText/ChipText.js +3 -3
- package/dist/Editor/Elements/Emoji/EmojiButton.js +2 -2
- package/dist/Editor/Elements/Emoji/EmojiPicker.js +0 -16
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +3 -2
- package/dist/Editor/Elements/List/CheckList.js +2 -6
- package/dist/Editor/Styles/EditorStyles.js +2 -3
- package/dist/Editor/common/LinkSettings/NavComponents.js +54 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +28 -12
- package/dist/Editor/utils/helper.js +33 -10
- package/dist/Editor/utils/serializeToHTML.js +13 -25
- package/dist/index.js +1 -5
- package/package.json +4 -4
- package/dist/Editor/ChatEditor.js +0 -195
- package/dist/Editor/common/MUIIcon/index.js +0 -49
- package/dist/Editor/common/StyleBuilder/fieldTypes/loadIcon.js +0 -13
- package/dist/Editor/common/StyleBuilder/fieldTypes/mui_filled_icons.js +0 -2
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -361
@@ -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;
|
@@ -2,8 +2,7 @@ import React, { useState } from "react";
|
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
4
|
import { IconButton, Tooltip, Box } from "@mui/material";
|
5
|
-
|
6
|
-
import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
|
5
|
+
import * as fIcons from "@mui/icons-material";
|
7
6
|
import SettingsIcon from "@mui/icons-material/Settings";
|
8
7
|
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
|
9
8
|
import LinkIcon from "@mui/icons-material/Link";
|
@@ -64,7 +63,7 @@ const EditorButton = props => {
|
|
64
63
|
};
|
65
64
|
const isTrigger = linkType === "actionTrigger";
|
66
65
|
const refURl = isTrigger ? buttonLink?.url : url;
|
67
|
-
const BtnIcon = buttonIcon ? buttonIcon : null;
|
66
|
+
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
|
68
67
|
windowVar.lastButtonProps = element;
|
69
68
|
const handleTrigger = async () => {
|
70
69
|
if (metadata?.buttonLink?.handler) {
|
@@ -81,7 +80,6 @@ const EditorButton = props => {
|
|
81
80
|
}
|
82
81
|
};
|
83
82
|
const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
|
84
|
-
console.log(openInNewTab);
|
85
83
|
const onMenuClick = val => () => {
|
86
84
|
switch (val) {
|
87
85
|
case "edit":
|
@@ -133,7 +131,6 @@ const EditorButton = props => {
|
|
133
131
|
color: "rgba(0, 0, 0, 0.54)"
|
134
132
|
},
|
135
133
|
...btnProps,
|
136
|
-
target: openInNewTab ? "_blank" : "_self",
|
137
134
|
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
138
135
|
})
|
139
136
|
})]
|
@@ -215,14 +212,12 @@ const EditorButton = props => {
|
|
215
212
|
}
|
216
213
|
},
|
217
214
|
...buttonProps,
|
218
|
-
children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(
|
219
|
-
iconName: buttonIcon,
|
215
|
+
children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(BtnIcon, {
|
220
216
|
style: {
|
221
217
|
paddingLeft: "4px",
|
222
218
|
paddingRight: "4px"
|
223
219
|
}
|
224
|
-
}), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(
|
225
|
-
iconName: buttonIcon,
|
220
|
+
}), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(BtnIcon, {
|
226
221
|
style: {
|
227
222
|
paddingLeft: "4px",
|
228
223
|
paddingRight: "4px"
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Transforms } from "slate";
|
3
3
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
|
+
import * as fIcons from "@mui/icons-material";
|
4
5
|
import { Box } from "@mui/material";
|
5
6
|
import ChipTextPopup from "./ChipTextPopup";
|
6
7
|
import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
|
7
|
-
import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
10
|
const ChipText = props => {
|
@@ -26,6 +26,7 @@ const ChipText = props => {
|
|
26
26
|
buttonIcon,
|
27
27
|
textSize
|
28
28
|
} = element;
|
29
|
+
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
|
29
30
|
const [openSetttings, setOpenSettings] = useState(false);
|
30
31
|
const editor = useSlateStatic();
|
31
32
|
const path = ReactEditor.findPath(editor, element);
|
@@ -81,8 +82,7 @@ const ChipText = props => {
|
|
81
82
|
background: bgColor || "#CCC",
|
82
83
|
color: textColor
|
83
84
|
},
|
84
|
-
children: [/*#__PURE__*/_jsx(
|
85
|
-
iconName: buttonIcon || "Check",
|
85
|
+
children: [/*#__PURE__*/_jsx(BtnIcon, {
|
86
86
|
style: {
|
87
87
|
fontSize: textSize || "16px",
|
88
88
|
lineHeight: textSize || "16px",
|
@@ -2,10 +2,10 @@ import React, { useState, forwardRef, useImperativeHandle } from "react";
|
|
2
2
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Paper, Popover } from "@mui/material";
|
4
4
|
import data from "@emoji-mart/data";
|
5
|
+
import Picker from "@emoji-mart/react";
|
5
6
|
import { insertEmoji } from "../../utils/emoji";
|
6
7
|
import ToolbarIcon from "../../common/ToolbarIcon";
|
7
8
|
import Icon from "../../common/Icon";
|
8
|
-
import EmojiPicker from "./EmojiPicker";
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -61,7 +61,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
61
61
|
},
|
62
62
|
onClose: handleClose,
|
63
63
|
children: /*#__PURE__*/_jsx(Paper, {
|
64
|
-
children: /*#__PURE__*/_jsx(
|
64
|
+
children: /*#__PURE__*/_jsx(Picker, {
|
65
65
|
data: data,
|
66
66
|
onEmojiSelect: onEmojiSelect
|
67
67
|
})
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import data from "@emoji-mart/data";
|
2
|
-
import Picker from "@emoji-mart/react";
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
5
|
-
const EmojiPicker = props => {
|
6
|
-
const {
|
7
|
-
onEmojiSelect
|
8
|
-
} = props;
|
9
|
-
return /*#__PURE__*/_jsx(_Fragment, {
|
10
|
-
children: /*#__PURE__*/_jsx(Picker, {
|
11
|
-
data: data,
|
12
|
-
onEmojiSelect: onEmojiSelect
|
13
|
-
})
|
14
|
-
});
|
15
|
-
};
|
16
|
-
export default EmojiPicker;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from "react";
|
2
|
+
import * as fIcons from "@mui/icons-material";
|
2
3
|
import { Box } from "@mui/material";
|
3
|
-
import Check from "@mui/icons-material/Check";
|
4
4
|
import { getBreakPointsValue } from "../../helper/theme";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -23,6 +23,7 @@ const InlineIcon = props => {
|
|
23
23
|
right,
|
24
24
|
bottom
|
25
25
|
} = bannerSpacing || {};
|
26
|
+
const BtnIcon = fIcons["Check"];
|
26
27
|
return /*#__PURE__*/_jsxs(Box, {
|
27
28
|
...attributes,
|
28
29
|
className: "editor-icon-text",
|
@@ -41,7 +42,7 @@ const InlineIcon = props => {
|
|
41
42
|
background: bgColor || "#CCC",
|
42
43
|
color: textColor
|
43
44
|
},
|
44
|
-
children: [/*#__PURE__*/_jsx(
|
45
|
+
children: [/*#__PURE__*/_jsx(BtnIcon, {}), /*#__PURE__*/_jsx("div", {
|
45
46
|
contentEditable: true,
|
46
47
|
children: children
|
47
48
|
})]
|
@@ -11,9 +11,7 @@ const CheckList = ({
|
|
11
11
|
attributes,
|
12
12
|
children,
|
13
13
|
element,
|
14
|
-
isEmpty
|
15
|
-
className,
|
16
|
-
style
|
14
|
+
isEmpty
|
17
15
|
}) => {
|
18
16
|
const editor = useSlateStatic();
|
19
17
|
const readOnly = useReadOnly();
|
@@ -32,14 +30,12 @@ const CheckList = ({
|
|
32
30
|
const nestedCheckList = element?.children?.length && element.children[0].type === "check-list-item";
|
33
31
|
return /*#__PURE__*/_jsx(_Fragment, {
|
34
32
|
children: /*#__PURE__*/_jsxs("div", {
|
35
|
-
className: className || "",
|
36
33
|
...attributes,
|
37
34
|
style: {
|
38
35
|
textAlign: element.alignment || "left",
|
39
36
|
display: "flex",
|
40
37
|
justifyContent: "center",
|
41
|
-
alignItems: "center"
|
42
|
-
...(style || {})
|
38
|
+
alignItems: "center"
|
43
39
|
},
|
44
40
|
children: [/*#__PURE__*/_jsxs("div", {
|
45
41
|
contentEditable: false,
|
@@ -188,7 +188,6 @@ const editorStyles = ({
|
|
188
188
|
}
|
189
189
|
},
|
190
190
|
"& .checkbox-edit": {
|
191
|
-
alignSelf: "flex-start",
|
192
191
|
"& .MuiFormControlLabel-root": {
|
193
192
|
marginRight: "0px"
|
194
193
|
},
|
@@ -213,7 +212,7 @@ const editorStyles = ({
|
|
213
212
|
"& svg": {
|
214
213
|
width: "17px",
|
215
214
|
height: "18px",
|
216
|
-
marginTop:
|
215
|
+
marginTop: '-1px'
|
217
216
|
}
|
218
217
|
}
|
219
218
|
},
|
@@ -274,7 +273,7 @@ const editorStyles = ({
|
|
274
273
|
},
|
275
274
|
cardsTypo: {
|
276
275
|
color: theme?.palette?.editor?.textColor,
|
277
|
-
fontSize:
|
276
|
+
fontSize: '14px !important'
|
278
277
|
}
|
279
278
|
});
|
280
279
|
export default editorStyles;
|
@@ -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
|
}
|
@@ -1,10 +1,29 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Grid, IconButton, TextField, Tooltip } from "@mui/material";
|
3
|
-
import
|
4
|
-
import MUIFilledIcons from "./mui_filled_icons";
|
3
|
+
import * as fIcons from "@mui/icons-material";
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
7
|
+
const MUIIcons = Object.keys(fIcons).reduce((a, b) => {
|
8
|
+
if (b.indexOf("Outlined") > -1) {
|
9
|
+
a.outlined.push(b);
|
10
|
+
} else if (b.indexOf("Rounded") > -1) {
|
11
|
+
a.rounded.push(b);
|
12
|
+
} else if (b.indexOf("Sharp") > -1) {
|
13
|
+
a.sharp.push(b);
|
14
|
+
} else if (b.indexOf("TwoTone") > -1) {
|
15
|
+
a.tt.push(b);
|
16
|
+
} else {
|
17
|
+
a.filled.push(b);
|
18
|
+
}
|
19
|
+
return a;
|
20
|
+
}, {
|
21
|
+
filled: [],
|
22
|
+
outlined: [],
|
23
|
+
rounded: [],
|
24
|
+
tt: [],
|
25
|
+
sharp: []
|
26
|
+
});
|
8
27
|
const Icons = props => {
|
9
28
|
const {
|
10
29
|
value,
|
@@ -15,7 +34,7 @@ const Icons = props => {
|
|
15
34
|
key
|
16
35
|
} = data;
|
17
36
|
const [val, setVal] = useState("");
|
18
|
-
const [list, setList] = useState(
|
37
|
+
const [list, setList] = useState(MUIIcons.filled.slice(0, 90));
|
19
38
|
const onSelectIcon = ico => () => {
|
20
39
|
onChange({
|
21
40
|
[key]: ico
|
@@ -25,11 +44,11 @@ const Icons = props => {
|
|
25
44
|
const keyVal = e.target.value?.toLowerCase();
|
26
45
|
setVal(keyVal);
|
27
46
|
if (keyVal) {
|
28
|
-
setList(
|
47
|
+
setList(MUIIcons.filled.filter(f => {
|
29
48
|
return f.toLowerCase().indexOf(keyVal) > -1;
|
30
49
|
}).slice(0, 90));
|
31
50
|
} else {
|
32
|
-
setList(
|
51
|
+
setList(MUIIcons.filled.slice(0, 90));
|
33
52
|
}
|
34
53
|
};
|
35
54
|
const onRemoveIcon = () => {
|
@@ -37,7 +56,7 @@ const Icons = props => {
|
|
37
56
|
[key]: null
|
38
57
|
});
|
39
58
|
};
|
40
|
-
const SelectedIcon = value ? value : null;
|
59
|
+
const SelectedIcon = value ? fIcons[value] : null;
|
41
60
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
42
61
|
children: [/*#__PURE__*/_jsx(Grid, {
|
43
62
|
item: true,
|
@@ -73,9 +92,7 @@ const Icons = props => {
|
|
73
92
|
arrow: true,
|
74
93
|
children: /*#__PURE__*/_jsx(IconButton, {
|
75
94
|
onClick: onRemoveIcon,
|
76
|
-
children: /*#__PURE__*/_jsx(
|
77
|
-
iconName: value
|
78
|
-
})
|
95
|
+
children: /*#__PURE__*/_jsx(SelectedIcon, {})
|
79
96
|
})
|
80
97
|
}) : ""
|
81
98
|
})]
|
@@ -90,14 +107,13 @@ const Icons = props => {
|
|
90
107
|
paddingTop: "5px"
|
91
108
|
},
|
92
109
|
children: list.map(m => {
|
110
|
+
const Ico = fIcons[m];
|
93
111
|
return /*#__PURE__*/_jsx(Tooltip, {
|
94
112
|
title: m,
|
95
113
|
arrow: true,
|
96
114
|
children: /*#__PURE__*/_jsx(IconButton, {
|
97
115
|
onClick: onSelectIcon(m),
|
98
|
-
children: /*#__PURE__*/_jsx(
|
99
|
-
iconName: m
|
100
|
-
})
|
116
|
+
children: /*#__PURE__*/_jsx(Ico, {})
|
101
117
|
})
|
102
118
|
}, `mui_ico_${m}`);
|
103
119
|
})
|
@@ -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;
|
@@ -1,34 +1,22 @@
|
|
1
1
|
import { renderToString } from "react-dom/server";
|
2
|
-
import { getBlock } from "./
|
2
|
+
import { getBlock } from "./SlateUtilityFunctions";
|
3
3
|
const serializeToHTML = nodes => {
|
4
4
|
try {
|
5
|
-
const htmlString = nodes.map(
|
6
|
-
|
7
|
-
const renderNode = node => {
|
5
|
+
const htmlString = nodes.map(n => {
|
6
|
+
if (n) {
|
8
7
|
const props = {
|
9
|
-
element:
|
10
|
-
children:
|
11
|
-
// Render each child node
|
12
|
-
if (child.text !== undefined) {
|
13
|
-
// For text nodes, return the text
|
14
|
-
return child.text;
|
15
|
-
}
|
16
|
-
// For other nodes, render them recursively
|
17
|
-
return renderNode(child);
|
18
|
-
}) || []
|
8
|
+
element: n,
|
9
|
+
children: n?.children
|
19
10
|
};
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
return htmlString;
|
11
|
+
const reactString = renderToString(getBlock(props));
|
12
|
+
return reactString;
|
13
|
+
} else {
|
14
|
+
return "";
|
15
|
+
}
|
16
|
+
});
|
17
|
+
console.log(htmlString);
|
29
18
|
} catch (err) {
|
30
|
-
console.
|
31
|
-
return '';
|
19
|
+
console.log(err);
|
32
20
|
}
|
33
21
|
};
|
34
22
|
export default serializeToHTML;
|
package/dist/index.js
CHANGED
@@ -2,11 +2,7 @@ import Collaborative from "./Editor/CollaborativeEditor";
|
|
2
2
|
import CommonEditor from "./Editor/CommonEditor";
|
3
3
|
import Mini from "./Editor/MiniEditor";
|
4
4
|
import EditorInFrame from "./Editor/IframeEditor";
|
5
|
-
import Chat from "./Editor/ChatEditor";
|
6
|
-
import Emoji from "./Editor/Elements/Emoji/EmojiPicker";
|
7
5
|
export const Editor = CommonEditor;
|
8
6
|
export const MiniEditor = Mini;
|
9
7
|
export const CollaborativeEditor = Collaborative;
|
10
|
-
export const IframeEditor = EditorInFrame;
|
11
|
-
export const ChatEditor = Chat;
|
12
|
-
export const EmojiPicker = Emoji;
|
8
|
+
export const IframeEditor = EditorInFrame;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "3.6.
|
3
|
+
"version": "3.6.3",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -58,11 +58,11 @@
|
|
58
58
|
"prepare": "husky install .husky",
|
59
59
|
"lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
|
60
60
|
"start": "craco start",
|
61
|
-
"build": "
|
61
|
+
"build": "craco build",
|
62
62
|
"test": "craco test --passWithNoTests",
|
63
63
|
"eject": "react-scripts eject",
|
64
|
-
"storybook": "
|
65
|
-
"build-storybook": "
|
64
|
+
"storybook": "storybook dev -p 6006",
|
65
|
+
"build-storybook": "storybook build",
|
66
66
|
"publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
|
67
67
|
"publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"
|
68
68
|
},
|