@flozy/editor 4.7.5 → 4.7.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +3 -1
- package/dist/Editor/Elements/AI/AIInput.js +5 -4
- package/dist/Editor/Elements/AI/PopoverAIInput.js +62 -78
- package/dist/Editor/Elements/AI/Styles.js +0 -1
- package/dist/Editor/Elements/Button/EditorButton.js +1 -2
- package/dist/Editor/Elements/Embed/EmbedPopup.js +1 -7
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/FreeGrid/styles.js +1 -1
- package/dist/Editor/Elements/Link/Link.js +37 -73
- package/dist/Editor/Elements/Link/LinkButton.js +25 -37
- package/dist/Editor/MiniEditor.js +12 -19
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- package/dist/Editor/Toolbar/Basic/index.js +8 -10
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -8
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +2 -4
- package/dist/Editor/Toolbar/Toolbar.js +1 -2
- package/dist/Editor/common/LinkSettings/index.js +2 -3
- package/dist/Editor/common/LinkSettings/navOptions.js +1 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js +6 -12
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +1 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +3 -5
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +1 -1
- package/dist/Editor/plugins/withCustomDeleteBackward.js +0 -13
- package/dist/Editor/utils/Decorators/index.js +2 -3
- package/dist/Editor/utils/SlateUtilityFunctions.js +0 -9
- package/dist/Editor/utils/helper.js +1 -1
- package/dist/Editor/utils/link.js +4 -9
- package/package.json +1 -1
- package/dist/Editor/utils/Decorators/highlightSelection.js +0 -22
@@ -534,7 +534,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
534
534
|
readOnly: isReadOnly,
|
535
535
|
renderElement: renderElement,
|
536
536
|
renderLeaf: renderLeaf,
|
537
|
-
decorate:
|
537
|
+
decorate: decorators,
|
538
538
|
onKeyDown: onKeyDown,
|
539
539
|
onSelect: () => handleCursorScroll(editorWrapper.current)
|
540
540
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
@@ -584,6 +584,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
584
584
|
}), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
|
585
585
|
...htmlAction,
|
586
586
|
handleCodeToText: handleCodeToText
|
587
|
+
}), /*#__PURE__*/_jsx(FontLoader, {
|
588
|
+
...props
|
587
589
|
})]
|
588
590
|
}, id)
|
589
591
|
})
|
@@ -90,7 +90,6 @@ function AIInput({
|
|
90
90
|
children: [/*#__PURE__*/_jsxs(Box, {
|
91
91
|
component: "div",
|
92
92
|
sx: classes.aiContainer,
|
93
|
-
ref: refs[0],
|
94
93
|
children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
|
95
94
|
sx: classes.generatedText,
|
96
95
|
style: {
|
@@ -105,6 +104,7 @@ function AIInput({
|
|
105
104
|
onSubmit: e => {
|
106
105
|
e.preventDefault();
|
107
106
|
},
|
107
|
+
ref: refs[0],
|
108
108
|
children: [/*#__PURE__*/_jsx("div", {
|
109
109
|
className: "icon-container icons-elements",
|
110
110
|
ref: inputWrapperRef,
|
@@ -116,21 +116,22 @@ function AIInput({
|
|
116
116
|
children: /*#__PURE__*/_jsx(WaveLoading, {})
|
117
117
|
}) : /*#__PURE__*/_jsx(TextareaAutosize, {
|
118
118
|
className: "ai-input",
|
119
|
-
placeholder: "Ask AI to write anything...",
|
119
|
+
placeholder: fromToolBar ? "" : "Ask AI to write anything...",
|
120
120
|
ref: inputRef,
|
121
121
|
value: inputValue,
|
122
122
|
onChange: onInputChange,
|
123
|
+
disabled: fromToolBar,
|
123
124
|
onKeyDown: event => {
|
124
125
|
if (event.key === "Enter" && !event.shiftKey) {
|
125
126
|
event.preventDefault();
|
126
127
|
handleSendBtnClick();
|
127
128
|
}
|
128
129
|
}
|
129
|
-
}), /*#__PURE__*/_jsxs(Box, {
|
130
|
+
}), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
|
130
131
|
component: "div",
|
131
132
|
style: classes.sendIconContainer,
|
132
133
|
className: "icons-elements",
|
133
|
-
children: [/*#__PURE__*/_jsx(IconButton, {
|
134
|
+
children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
|
134
135
|
disabled: loading,
|
135
136
|
onClick: () => startRecording(),
|
136
137
|
children: /*#__PURE__*/_jsx(ChatMicIcon, {})
|
@@ -40,11 +40,9 @@ const scrollToAIInput = editor => {
|
|
40
40
|
}, 200);
|
41
41
|
};
|
42
42
|
const insertText = (editor, text, options) => {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
Transforms.insertFragment(editor, fragment, options);
|
47
|
-
}
|
43
|
+
const parsed = new DOMParser().parseFromString(text, "text/html");
|
44
|
+
const fragment = deserialize(parsed.body);
|
45
|
+
Transforms.insertFragment(editor, fragment, options);
|
48
46
|
};
|
49
47
|
const insertAtNextLine = (editor, text) => {
|
50
48
|
const nextLine = getNextLine(editor);
|
@@ -201,95 +199,81 @@ function PopoverAIInput({
|
|
201
199
|
useEffect(() => {
|
202
200
|
selectedEleRef.current = selectedElement;
|
203
201
|
}, [selectedElement]);
|
204
|
-
const
|
205
|
-
|
202
|
+
const onSend = async (type, option) => {
|
203
|
+
if (type === "close") {
|
204
|
+
onClickOutside();
|
205
|
+
return;
|
206
|
+
}
|
207
|
+
if (type === "done") {
|
208
|
+
// Get the current selection point
|
209
|
+
const {
|
210
|
+
anchor
|
211
|
+
} = editor.selection;
|
212
|
+
const {
|
213
|
+
path
|
214
|
+
} = anchor;
|
215
|
+
const {
|
216
|
+
text: selectText
|
217
|
+
} = Node.get(editor, path);
|
218
|
+
if (selectText?.length) {
|
219
|
+
insertAtNextLine(editor, generatedText);
|
220
|
+
} else {
|
221
|
+
insertText(editor, generatedText);
|
222
|
+
}
|
223
|
+
onClickOutside();
|
224
|
+
return;
|
225
|
+
}
|
226
|
+
if (type === "replace_selection") {
|
227
|
+
// replace generated text
|
228
|
+
insertText(editor, generatedText);
|
229
|
+
onClickOutside();
|
230
|
+
return;
|
231
|
+
}
|
232
|
+
if (type === "speech_to_text") {
|
233
|
+
setGeneratedText(option.text);
|
234
|
+
return;
|
235
|
+
}
|
236
|
+
if (type === "try_again") {
|
237
|
+
// resetting the previous option and try again
|
238
|
+
option = selectedOption;
|
239
|
+
type = selectedOption.value;
|
240
|
+
} else {
|
241
|
+
setSelectedOption(option);
|
242
|
+
}
|
243
|
+
setLoading(true);
|
244
|
+
const payload = {
|
206
245
|
mode: option.mode || 0,
|
207
246
|
query: option?.inputValue || inputValue
|
208
247
|
};
|
209
248
|
if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
|
210
249
|
payload.textOptionInput = type;
|
211
250
|
}
|
212
|
-
const selectedText = getSelectedText(editor);
|
213
|
-
const textData = generatedText || selectedText;
|
214
251
|
if (option.mode) {
|
215
|
-
payload.textData =
|
216
|
-
} else if (selectedText && Number(payload.mode) === 0) {
|
217
|
-
payload.query = `${selectedText} \n ${payload.query}`;
|
252
|
+
payload.textData = generatedText || window.getSelection().toString();
|
218
253
|
}
|
219
|
-
const
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
254
|
+
const result = await services("infinityAI", payload);
|
255
|
+
setLoading(false);
|
256
|
+
setInputValue("");
|
257
|
+
let {
|
258
|
+
data: text
|
259
|
+
} = result || {};
|
260
|
+
if (!text) {
|
261
|
+
onClickOutside();
|
262
|
+
return;
|
224
263
|
}
|
225
|
-
|
226
|
-
};
|
227
|
-
const onSend = async (type, option) => {
|
228
|
-
try {
|
229
|
-
if (type === "close") {
|
230
|
-
onClickOutside();
|
231
|
-
return;
|
232
|
-
}
|
233
|
-
if (type === "done") {
|
234
|
-
// Get the current selection point
|
235
|
-
const {
|
236
|
-
anchor
|
237
|
-
} = editor.selection;
|
238
|
-
const {
|
239
|
-
path
|
240
|
-
} = anchor;
|
241
|
-
const {
|
242
|
-
text: selectText
|
243
|
-
} = Node.get(editor, path);
|
244
|
-
if (selectText?.length) {
|
245
|
-
insertAtNextLine(editor, generatedText);
|
246
|
-
} else {
|
247
|
-
insertText(editor, generatedText);
|
248
|
-
}
|
249
|
-
onClickOutside();
|
250
|
-
return;
|
251
|
-
}
|
252
|
-
if (type === "replace_selection") {
|
253
|
-
// replace generated text
|
254
|
-
insertText(editor, generatedText);
|
255
|
-
onClickOutside();
|
256
|
-
return;
|
257
|
-
}
|
258
|
-
setLoading(true);
|
259
|
-
const payload = framePayload(type, option);
|
260
|
-
setSelectedOption({
|
261
|
-
...option,
|
262
|
-
payload
|
263
|
-
});
|
264
|
-
const result = await services("infinityAI", payload);
|
265
|
-
setLoading(false);
|
266
|
-
setInputValue("");
|
267
|
-
let {
|
268
|
-
data: text
|
269
|
-
} = result || {};
|
270
|
-
if (!text) {
|
271
|
-
onClickOutside();
|
272
|
-
return;
|
273
|
-
}
|
274
|
-
|
275
|
-
// if (!option.replace) {
|
264
|
+
if (!option.replace) {
|
276
265
|
if (type === "continue_writing") {
|
277
266
|
setGeneratedText(generatedText + text);
|
278
267
|
} else {
|
279
268
|
setGeneratedText(text);
|
280
269
|
}
|
281
|
-
|
282
|
-
// return;
|
283
|
-
// }
|
284
|
-
|
285
|
-
// ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
|
286
|
-
// insertText(editor, text);
|
287
|
-
|
288
|
-
// scrollToAIInput();
|
289
|
-
} catch (err) {
|
290
|
-
console.error("Error on sending/inserting text", err);
|
270
|
+
return;
|
291
271
|
}
|
272
|
+
insertText(editor, text);
|
273
|
+
|
274
|
+
// scrollToAIInput();
|
292
275
|
};
|
276
|
+
|
293
277
|
const onInputChange = e => {
|
294
278
|
setInputValue(e.target.value);
|
295
279
|
};
|
@@ -325,8 +325,7 @@ const EditorButton = props => {
|
|
325
325
|
navType: element?.buttonLink?.linkType,
|
326
326
|
navValue: element?.url,
|
327
327
|
openInNewTab: element?.openInNewTab,
|
328
|
-
customProps: customProps
|
329
|
-
allowTrigger: true
|
328
|
+
customProps: customProps
|
330
329
|
}) : null]
|
331
330
|
});
|
332
331
|
};
|
@@ -12,19 +12,13 @@ const EmbedPopup = props => {
|
|
12
12
|
format,
|
13
13
|
onDelete
|
14
14
|
} = props;
|
15
|
-
const videoStyles = embedVideoStyle?.filter(f => {
|
16
|
-
if (f?.value === "AspectRatio" && format !== "video") {
|
17
|
-
return false;
|
18
|
-
}
|
19
|
-
return true;
|
20
|
-
});
|
21
15
|
return /*#__PURE__*/_jsx(StyleBuilder, {
|
22
16
|
title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
|
23
17
|
type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
|
24
18
|
element: element,
|
25
19
|
onSave: onSave,
|
26
20
|
onClose: onClose,
|
27
|
-
renderTabs: format === "image" ? embedImageStyle :
|
21
|
+
renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
|
28
22
|
customProps: customProps,
|
29
23
|
onDelete: onDelete
|
30
24
|
});
|
@@ -71,11 +71,11 @@ const FormWorkflow = props => {
|
|
71
71
|
children: [/*#__PURE__*/_jsx(Grid, {
|
72
72
|
item: true,
|
73
73
|
sx: classes.radioBtn,
|
74
|
-
children: /*#__PURE__*/
|
74
|
+
children: /*#__PURE__*/_jsxs(RadioGroup, {
|
75
75
|
name: "set timing",
|
76
76
|
value: schedule,
|
77
77
|
defaultValue: 1,
|
78
|
-
children: /*#__PURE__*/_jsx(FormControlLabel, {
|
78
|
+
children: [/*#__PURE__*/_jsx(FormControlLabel, {
|
79
79
|
value: "immediately",
|
80
80
|
label: "Immediately",
|
81
81
|
onChange: () => {
|
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
|
|
84
84
|
control: /*#__PURE__*/_jsx(Radio, {
|
85
85
|
size: "small"
|
86
86
|
})
|
87
|
-
})
|
87
|
+
}), /*#__PURE__*/_jsx(FormControlLabel, {
|
88
|
+
value: "after",
|
89
|
+
label: "After",
|
90
|
+
onChange: () => {
|
91
|
+
setSchedule("after");
|
92
|
+
},
|
93
|
+
control: /*#__PURE__*/_jsx(Radio, {
|
94
|
+
size: "small"
|
95
|
+
})
|
96
|
+
})]
|
88
97
|
})
|
89
98
|
}), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
|
90
99
|
item: true,
|
@@ -1,43 +1,22 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Node, Transforms } from "slate";
|
3
3
|
import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
|
4
|
-
import {
|
4
|
+
import { IconButton, Tooltip } from "@mui/material";
|
5
5
|
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
|
6
6
|
import EditIcon from "@mui/icons-material/Edit";
|
7
7
|
import LinkOffIcon from "@mui/icons-material/LinkOff";
|
8
8
|
import { removeLink } from "../../utils/link";
|
9
|
+
import LinkPopup from "./LinkPopup";
|
9
10
|
import "./styles.css";
|
10
|
-
import {
|
11
|
-
import LinkSettings from "../../common/LinkSettings";
|
11
|
+
import { absoluteLink } from "../../utils/helper";
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
|
-
const linkStyles = () => ({
|
15
|
-
linkBtn: {
|
16
|
-
border: "none",
|
17
|
-
outline: "none",
|
18
|
-
background: "none",
|
19
|
-
fontSize: "inherit",
|
20
|
-
fontWeight: "inherit",
|
21
|
-
fontFamily: "inherit",
|
22
|
-
color: "rgb(85, 26, 139)",
|
23
|
-
textDecoration: "underline",
|
24
|
-
padding: 0,
|
25
|
-
margin: 0,
|
26
|
-
"&:hover": {
|
27
|
-
color: "rgb(65, 15, 110);"
|
28
|
-
}
|
29
|
-
}
|
30
|
-
});
|
31
14
|
const Link = props => {
|
32
15
|
const {
|
33
16
|
attributes,
|
34
17
|
element,
|
35
|
-
children
|
36
|
-
customProps
|
18
|
+
children
|
37
19
|
} = props;
|
38
|
-
const {
|
39
|
-
readOnly
|
40
|
-
} = customProps;
|
41
20
|
const editor = useSlateStatic();
|
42
21
|
const selected = useSelected();
|
43
22
|
const focused = useFocused();
|
@@ -45,60 +24,59 @@ const Link = props => {
|
|
45
24
|
const [linkData, setLinkData] = useState({
|
46
25
|
name: "",
|
47
26
|
url: "",
|
48
|
-
showInNewTab: true
|
49
|
-
linkType: ""
|
27
|
+
showInNewTab: true
|
50
28
|
});
|
51
29
|
const path = ReactEditor.findPath(editor, element);
|
52
30
|
const urlPath = element.url || element.href;
|
53
|
-
const
|
54
|
-
const
|
55
|
-
|
56
|
-
|
57
|
-
|
31
|
+
const absLink = absoluteLink(urlPath);
|
32
|
+
const updateLink = () => {
|
33
|
+
Transforms.setNodes(editor, {
|
34
|
+
href: linkData?.url,
|
35
|
+
showInNewTab: linkData?.showInNewTab
|
36
|
+
}, {
|
58
37
|
at: path
|
59
38
|
});
|
60
39
|
setLinkData({
|
61
40
|
name: "",
|
62
41
|
url: "",
|
63
|
-
showInNewTab: true
|
64
|
-
linkType: ""
|
42
|
+
showInNewTab: true
|
65
43
|
});
|
66
44
|
setShowInput(false);
|
67
45
|
};
|
68
46
|
const onEditLink = () => {
|
69
47
|
setLinkData({
|
70
48
|
name: Node.string(element),
|
71
|
-
|
72
|
-
showInNewTab: showInNewTab
|
73
|
-
linkType: element?.linkType
|
49
|
+
url: urlPath || "",
|
50
|
+
showInNewTab: element?.showInNewTab
|
74
51
|
});
|
75
52
|
setShowInput(true);
|
76
53
|
};
|
54
|
+
const handleInputChange = ({
|
55
|
+
target
|
56
|
+
}) => {
|
57
|
+
let val = target.type === "checkbox" ? target.checked : target.value;
|
58
|
+
setLinkData({
|
59
|
+
...linkData,
|
60
|
+
[target.name]: val
|
61
|
+
});
|
62
|
+
};
|
77
63
|
const handleClose = () => {
|
78
64
|
setShowInput(false);
|
79
65
|
};
|
80
66
|
const Toolbar = () => {
|
81
|
-
const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
|
82
|
-
const navType = getLinkType(linkType, urlPath);
|
83
|
-
const hideOpenLink = navType === "page" || !navType;
|
84
|
-
console.log("linkType", linkType, navType, hideOpenLink);
|
85
67
|
return selected && focused ? /*#__PURE__*/_jsxs("div", {
|
86
68
|
className: "element-toolbar hr",
|
87
69
|
contentEditable: false,
|
88
70
|
style: {
|
89
71
|
width: "150px",
|
90
72
|
top: "100%",
|
91
|
-
left: "0px"
|
92
|
-
display: "flex"
|
73
|
+
left: "0px"
|
93
74
|
},
|
94
|
-
children: [
|
75
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
95
76
|
title: "Open",
|
96
|
-
children: /*#__PURE__*/_jsx(
|
97
|
-
|
98
|
-
|
99
|
-
color: "rgba(0, 0, 0, 0.54)"
|
100
|
-
},
|
101
|
-
...btnProps,
|
77
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
78
|
+
href: absLink,
|
79
|
+
target: "_blank",
|
102
80
|
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
103
81
|
})
|
104
82
|
}), /*#__PURE__*/_jsx(Tooltip, {
|
@@ -116,35 +94,21 @@ const Link = props => {
|
|
116
94
|
})]
|
117
95
|
}) : null;
|
118
96
|
};
|
119
|
-
const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
|
120
|
-
console.log("buttonProps===>", buttonProps);
|
121
97
|
return /*#__PURE__*/_jsxs("div", {
|
122
98
|
className: "link",
|
123
|
-
children: [/*#__PURE__*/_jsx(
|
99
|
+
children: [/*#__PURE__*/_jsx("a", {
|
100
|
+
href: absLink,
|
124
101
|
...attributes,
|
125
102
|
...element.attr,
|
126
|
-
|
127
|
-
...buttonProps,
|
103
|
+
target: element.target,
|
128
104
|
children: children
|
129
|
-
}), /*#__PURE__*/_jsx(Toolbar, {}),
|
105
|
+
}), /*#__PURE__*/_jsx(Toolbar, {}), /*#__PURE__*/_jsx(LinkPopup, {
|
106
|
+
open: showInput,
|
107
|
+
linkData: linkData,
|
130
108
|
handleClose: handleClose,
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
openInNewTab
|
135
|
-
}) => {
|
136
|
-
updateLink({
|
137
|
-
linkType,
|
138
|
-
url: navValue,
|
139
|
-
target: openInNewTab ? "_blank" : "_self"
|
140
|
-
});
|
141
|
-
handleClose();
|
142
|
-
},
|
143
|
-
navType: getLinkType(linkType, urlPath),
|
144
|
-
navValue: urlPath,
|
145
|
-
openInNewTab: linkData.showInNewTab === "_blank",
|
146
|
-
customProps: customProps
|
147
|
-
}) : null]
|
109
|
+
handleInputChange: handleInputChange,
|
110
|
+
handleInsertLink: updateLink
|
111
|
+
})]
|
148
112
|
});
|
149
113
|
};
|
150
114
|
export default Link;
|
@@ -4,41 +4,34 @@ import { IconButton, Tooltip } from "@mui/material";
|
|
4
4
|
import { insertLink } from "../../utils/link";
|
5
5
|
import Icon from "../../common/Icon";
|
6
6
|
import { getBlockActive } from "../../utils/SlateUtilityFunctions";
|
7
|
-
import
|
8
|
-
import LinkSettings from "../../common/LinkSettings";
|
7
|
+
import LinkPopup from "./LinkPopup";
|
9
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
10
|
const LinkButton = props => {
|
12
11
|
const {
|
13
|
-
editor
|
14
|
-
customProps
|
12
|
+
editor
|
15
13
|
} = props;
|
16
14
|
const linkInputRef = useRef(null);
|
17
15
|
const [showInput, setShowInput] = useState(false);
|
18
16
|
const [linkData, setLinkData] = useState({
|
19
17
|
name: "",
|
20
18
|
url: "",
|
21
|
-
showInNewTab: true
|
22
|
-
linkType: ""
|
19
|
+
showInNewTab: true
|
23
20
|
});
|
24
21
|
const [selection, setSelection] = useState();
|
25
22
|
const {
|
26
23
|
isActive,
|
27
24
|
props: blockProps
|
28
25
|
} = getBlockActive(editor, "link");
|
29
|
-
const
|
30
|
-
const showInNewTab = blockProps?.showInNewTab || blockProps?.target;
|
31
|
-
const {
|
32
|
-
linkType
|
33
|
-
} = linkData || {};
|
34
|
-
const handleInsertLink = linkData => {
|
26
|
+
const handleInsertLink = () => {
|
35
27
|
Transforms.select(editor, selection);
|
36
|
-
insertLink(editor,
|
28
|
+
insertLink(editor, {
|
29
|
+
...linkData
|
30
|
+
});
|
37
31
|
setLinkData({
|
38
32
|
name: "",
|
39
33
|
url: "",
|
40
|
-
showInNewTab: true
|
41
|
-
linkType: ""
|
34
|
+
showInNewTab: true
|
42
35
|
});
|
43
36
|
setShowInput(false);
|
44
37
|
};
|
@@ -47,13 +40,21 @@ const LinkButton = props => {
|
|
47
40
|
if (editor.selection) {
|
48
41
|
setLinkData({
|
49
42
|
name: Editor.string(editor, editor.selection),
|
50
|
-
|
51
|
-
showInNewTab:
|
52
|
-
linkType: blockProps?.linkType
|
43
|
+
url: blockProps?.href || "",
|
44
|
+
showInNewTab: true
|
53
45
|
});
|
54
46
|
setShowInput(true);
|
55
47
|
}
|
56
48
|
};
|
49
|
+
const handleInputChange = ({
|
50
|
+
target
|
51
|
+
}) => {
|
52
|
+
let val = target.type === "checkbox" ? target.checked : target.value;
|
53
|
+
setLinkData({
|
54
|
+
...linkData,
|
55
|
+
[target.name]: val
|
56
|
+
});
|
57
|
+
};
|
57
58
|
const handleClose = () => {
|
58
59
|
setShowInput(false);
|
59
60
|
};
|
@@ -71,26 +72,13 @@ const LinkButton = props => {
|
|
71
72
|
icon: "link"
|
72
73
|
})
|
73
74
|
})
|
74
|
-
}),
|
75
|
+
}), /*#__PURE__*/_jsx(LinkPopup, {
|
76
|
+
open: showInput,
|
77
|
+
linkData: linkData,
|
75
78
|
handleClose: handleClose,
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
openInNewTab
|
80
|
-
}) => {
|
81
|
-
handleInsertLink({
|
82
|
-
name: linkData?.name,
|
83
|
-
linkType,
|
84
|
-
url: navValue,
|
85
|
-
showInNewTab: openInNewTab ? "_blank" : "_self"
|
86
|
-
});
|
87
|
-
handleClose();
|
88
|
-
},
|
89
|
-
navType: getLinkType(linkType, urlPath),
|
90
|
-
navValue: urlPath,
|
91
|
-
openInNewTab: linkData.showInNewTab === "_blank",
|
92
|
-
customProps: customProps
|
93
|
-
}) : null]
|
79
|
+
handleInputChange: handleInputChange,
|
80
|
+
handleInsertLink: handleInsertLink
|
81
|
+
})]
|
94
82
|
});
|
95
83
|
};
|
96
84
|
export default LinkButton;
|
@@ -10,7 +10,6 @@ import BasicToolbar from "./Toolbar/Basic";
|
|
10
10
|
import withCommon from "./hooks/withCommon";
|
11
11
|
import { serializeToText } from "./utils/serializeToText";
|
12
12
|
import "./Editor.css";
|
13
|
-
import { EditorProvider } from "./hooks/useMouseMove";
|
14
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
15
|
const MiniEditor = props => {
|
@@ -24,8 +23,7 @@ const MiniEditor = props => {
|
|
24
23
|
miniEditorPlaceholder,
|
25
24
|
className,
|
26
25
|
otherProps,
|
27
|
-
onSave
|
28
|
-
theme
|
26
|
+
onSave
|
29
27
|
} = props;
|
30
28
|
const {
|
31
29
|
CHARACTERS = []
|
@@ -130,23 +128,18 @@ const MiniEditor = props => {
|
|
130
128
|
handleEditorChange(newVal);
|
131
129
|
setValue(newVal);
|
132
130
|
};
|
133
|
-
return /*#__PURE__*/
|
131
|
+
return /*#__PURE__*/_jsxs(Slate, {
|
134
132
|
editor: editor,
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
renderElement: renderElement,
|
146
|
-
renderLeaf: renderLeaf,
|
147
|
-
onKeyDown: onKeyDown
|
148
|
-
})]
|
149
|
-
})
|
133
|
+
initialValue: content,
|
134
|
+
onChange: onChange,
|
135
|
+
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
136
|
+
...props
|
137
|
+
}), /*#__PURE__*/_jsx(Editable, {
|
138
|
+
className: className || "mini-editor-cls",
|
139
|
+
renderElement: renderElement,
|
140
|
+
renderLeaf: renderLeaf,
|
141
|
+
onKeyDown: onKeyDown
|
142
|
+
})]
|
150
143
|
});
|
151
144
|
};
|
152
145
|
MiniEditor.displayName = "MiniEditor";
|
@@ -25,8 +25,7 @@ const BasicToolbar = props => {
|
|
25
25
|
hideTextColor = false,
|
26
26
|
hideResetIcon = true,
|
27
27
|
onResetClick = () => {}
|
28
|
-
}
|
29
|
-
customProps
|
28
|
+
}
|
30
29
|
} = props;
|
31
30
|
// state
|
32
31
|
const [activeColor, setActiveColor] = useState("#000000");
|
@@ -35,25 +34,25 @@ const BasicToolbar = props => {
|
|
35
34
|
const handleTextColor = color => {
|
36
35
|
setActiveColor(color);
|
37
36
|
addMarkData(editor, {
|
38
|
-
format:
|
37
|
+
format: 'color',
|
39
38
|
value: color
|
40
39
|
});
|
41
40
|
};
|
42
41
|
return /*#__PURE__*/_jsxs(Box, {
|
43
|
-
component:
|
42
|
+
component: 'div',
|
44
43
|
className: "basic-toolbar",
|
45
44
|
children: [/*#__PURE__*/_jsxs(Grid, {
|
46
45
|
container: true,
|
47
46
|
sx: {
|
48
|
-
padding:
|
47
|
+
padding: '10px'
|
49
48
|
},
|
50
|
-
alignItems:
|
51
|
-
justifyContent:
|
49
|
+
alignItems: 'center',
|
50
|
+
justifyContent: 'space-between',
|
52
51
|
children: [/*#__PURE__*/_jsx(Grid, {
|
53
52
|
item: true,
|
54
53
|
children: /*#__PURE__*/_jsxs(Grid, {
|
55
54
|
container: true,
|
56
|
-
alignItems:
|
55
|
+
alignItems: 'center',
|
57
56
|
children: [/*#__PURE__*/_jsx(Grid, {
|
58
57
|
item: true,
|
59
58
|
children: fontStyle?.map((m, i) => {
|
@@ -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
|
-
customProps: customProps
|
68
|
+
editor: editor
|
71
69
|
}, link.id)
|
72
70
|
}), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
|
73
71
|
item: true,
|
@@ -13,7 +13,6 @@ import PopperHeader from "../PopperHeader";
|
|
13
13
|
import MiniColorPicker from "./MiniColorPicker";
|
14
14
|
import SelectAlignment from "./SelectAlignment";
|
15
15
|
import SelectFontSize from "./SelectFontSize";
|
16
|
-
import InfinityAITool from "./InfinityAITool";
|
17
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
18
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
19
18
|
const DEFAULT_COLOR = {
|
@@ -27,8 +26,7 @@ const MiniTextFormat = props => {
|
|
27
26
|
const {
|
28
27
|
classes,
|
29
28
|
editor,
|
30
|
-
closeMainPopup
|
31
|
-
customProps
|
29
|
+
closeMainPopup
|
32
30
|
} = props;
|
33
31
|
const [anchorEl, setAnchorEl] = useState(null);
|
34
32
|
const open = Boolean(anchorEl);
|
@@ -50,7 +48,7 @@ const MiniTextFormat = props => {
|
|
50
48
|
xs: 12,
|
51
49
|
children: /*#__PURE__*/_jsxs("div", {
|
52
50
|
className: "toolWrapper",
|
53
|
-
children: [
|
51
|
+
children: [/*#__PURE__*/_jsx(SelectTypography, {
|
54
52
|
classes: classes,
|
55
53
|
editor: editor,
|
56
54
|
closeMainPopup: closeMainPopup
|
@@ -93,8 +91,7 @@ const MiniTextFormat = props => {
|
|
93
91
|
className: "verticalLine ml-1 mr-1"
|
94
92
|
}), /*#__PURE__*/_jsx(LinkButton, {
|
95
93
|
active: isBlockActive(editor, link.format),
|
96
|
-
editor: editor
|
97
|
-
customProps: customProps
|
94
|
+
editor: editor
|
98
95
|
}, link.id), /*#__PURE__*/_jsx(Button, {
|
99
96
|
onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
|
100
97
|
className: "textSettingsIcon",
|
@@ -122,8 +119,7 @@ const MiniTextFormat = props => {
|
|
122
119
|
}), /*#__PURE__*/_jsx(TextFormat, {
|
123
120
|
editor: editor,
|
124
121
|
classes: classes,
|
125
|
-
closeMainPopup: closeMainPopup
|
126
|
-
customProps: customProps
|
122
|
+
closeMainPopup: closeMainPopup
|
127
123
|
})]
|
128
124
|
})
|
129
125
|
})
|
@@ -25,8 +25,7 @@ const TextFormat = props => {
|
|
25
25
|
classes,
|
26
26
|
editor,
|
27
27
|
onClose,
|
28
|
-
closeMainPopup
|
29
|
-
customProps
|
28
|
+
closeMainPopup
|
30
29
|
} = props;
|
31
30
|
const [anchorEl, setAnchorEl] = useState(null);
|
32
31
|
const [type, setType] = useState(null);
|
@@ -345,8 +344,7 @@ const TextFormat = props => {
|
|
345
344
|
closeMainPopup: closeMainPopup || onClose
|
346
345
|
}), /*#__PURE__*/_jsx(LinkButton, {
|
347
346
|
active: isBlockActive(editor, link.format),
|
348
|
-
editor: editor
|
349
|
-
customProps: customProps
|
347
|
+
editor: editor
|
350
348
|
}, link.id)]
|
351
349
|
})]
|
352
350
|
}), /*#__PURE__*/_jsx(Grid, {
|
@@ -86,8 +86,7 @@ export const RenderToolbarIcon = props => {
|
|
86
86
|
case "link":
|
87
87
|
return /*#__PURE__*/_jsx(LinkButton, {
|
88
88
|
active: isBlockActive(editor, "link"),
|
89
|
-
editor: editor
|
90
|
-
customProps: customProps
|
89
|
+
editor: editor
|
91
90
|
}, element.id);
|
92
91
|
case "embed":
|
93
92
|
return /*#__PURE__*/_jsx(Embed, {
|
@@ -38,14 +38,13 @@ export default function LinkSettings(props) {
|
|
38
38
|
handleClose,
|
39
39
|
onSave,
|
40
40
|
customProps,
|
41
|
-
navType
|
42
|
-
allowTrigger
|
41
|
+
navType
|
43
42
|
} = props;
|
44
43
|
const {
|
45
44
|
isMobile,
|
46
45
|
tagName
|
47
46
|
} = customProps;
|
48
|
-
const navOptions = getNavOptions(customProps.hideTools, tagName
|
47
|
+
const navOptions = getNavOptions(customProps.hideTools, tagName);
|
49
48
|
const classes = LinkSettingsStyles(theme);
|
50
49
|
const [nav, setNav] = useState(getNav(navType, navOptions));
|
51
50
|
const [navValue, setNavValue] = useState(props?.navValue || "");
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export const getNavOptions = (hideTools = [], tagName = ""
|
1
|
+
export const getNavOptions = (hideTools = [], tagName = "") => {
|
2
2
|
let navOptions = [{
|
3
3
|
label: "None",
|
4
4
|
value: ""
|
@@ -33,10 +33,6 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
|
|
33
33
|
placeholder: "phone"
|
34
34
|
}];
|
35
35
|
navOptions = navOptions.filter(n => !hideTools.includes(n.value));
|
36
|
-
if (!allowTrigger) {
|
37
|
-
const triggerValues = ["nextTrigger", "prevTrigger"];
|
38
|
-
navOptions = navOptions.filter(n => !triggerValues.includes(n.value));
|
39
|
-
}
|
40
36
|
if (tagName !== "Pages") {
|
41
37
|
navOptions = navOptions.filter(n => n.value !== "page");
|
42
38
|
}
|
@@ -4,7 +4,6 @@ import { ReactEditor } from "slate-react";
|
|
4
4
|
import LinkSettings from "../../../LinkSettings";
|
5
5
|
import { insertLink, removeLink } from "../../../../utils/link";
|
6
6
|
import { getBlockActive, isBlockActive, upateBlockActive } from "../../../../utils/SlateUtilityFunctions";
|
7
|
-
import { getLinkType } from "../../../../utils/helper";
|
8
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
8
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
9
|
const Link = props => {
|
@@ -33,13 +32,11 @@ const Link = props => {
|
|
33
32
|
if (childType === "text") {
|
34
33
|
selectTextNode();
|
35
34
|
const p = getBlockActive(editor, "link")?.props || {};
|
36
|
-
const url = p?.href || p?.url;
|
37
|
-
const showInNewTab = p?.target || p?.showInNewTab;
|
38
35
|
const bp = {
|
39
36
|
name: Editor.string(editor, editor.selection),
|
40
|
-
navType:
|
41
|
-
navValue:
|
42
|
-
openInNewTab:
|
37
|
+
navType: "webAddress",
|
38
|
+
navValue: p?.href,
|
39
|
+
openInNewTab: p?.target === "_blank"
|
43
40
|
};
|
44
41
|
setIsActiveTextLink(isBlockActive(editor, "link"));
|
45
42
|
setBlockProps(bp);
|
@@ -81,8 +78,7 @@ const Link = props => {
|
|
81
78
|
return {
|
82
79
|
name: Editor.string(editor, editor.selection),
|
83
80
|
url: d?.navValue,
|
84
|
-
showInNewTab: d?.openInNewTab
|
85
|
-
linkType: d?.linkType
|
81
|
+
showInNewTab: d?.openInNewTab
|
86
82
|
};
|
87
83
|
case "image":
|
88
84
|
return {
|
@@ -112,8 +108,7 @@ const Link = props => {
|
|
112
108
|
const upData = isActiveTextLink ? {
|
113
109
|
href: data?.url,
|
114
110
|
target: data?.showInNewTab ? "_blank" : "_self",
|
115
|
-
name: data?.name
|
116
|
-
linkType: data?.linkType
|
111
|
+
name: data?.name
|
117
112
|
} : data;
|
118
113
|
if (isActiveTextLink) {
|
119
114
|
// update text link
|
@@ -156,8 +151,7 @@ const Link = props => {
|
|
156
151
|
},
|
157
152
|
...(blockProps || {}),
|
158
153
|
customProps: customProps,
|
159
|
-
theme: theme
|
160
|
-
allowTrigger: childType === "button"
|
154
|
+
theme: theme
|
161
155
|
}) : null
|
162
156
|
});
|
163
157
|
};
|
@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
|
|
123
123
|
dragOver,
|
124
124
|
parentPath,
|
125
125
|
path,
|
126
|
-
|
127
|
-
|
126
|
+
diffX,
|
127
|
+
x: cx,
|
128
128
|
breakpoint
|
129
129
|
// calX,
|
130
130
|
} = props;
|
@@ -134,9 +134,7 @@ export function onDropItem(props, parentClass) {
|
|
134
134
|
let newPath = [];
|
135
135
|
newPath = moveTo;
|
136
136
|
const cCalx = isContainerElement(editor, moveTo, props);
|
137
|
-
|
138
|
-
// cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
|
139
|
-
// );
|
137
|
+
const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
|
140
138
|
const toSectionNode = Node.get(editor, newPath);
|
141
139
|
const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
|
142
140
|
const rect = addToSectionDOM.getBoundingClientRect();
|
@@ -14,19 +14,6 @@ const withCustomDeleteBackward = editor => {
|
|
14
14
|
selection
|
15
15
|
} = editor;
|
16
16
|
if (selection) {
|
17
|
-
// get the current node
|
18
|
-
const [freeGridItemNode] = Editor.nodes(editor, {
|
19
|
-
match: n => n.type === "freegridItem" // Adjust based on your list item type
|
20
|
-
});
|
21
|
-
|
22
|
-
// if it is freegrid
|
23
|
-
if (freeGridItemNode && freeGridItemNode[0]) {
|
24
|
-
const hasText = Node.string(freeGridItemNode[0]);
|
25
|
-
if (!hasText) {
|
26
|
-
return;
|
27
|
-
}
|
28
|
-
}
|
29
|
-
|
30
17
|
// Check if current node is a list item and is the last one
|
31
18
|
const [node] = Editor.nodes(editor, {
|
32
19
|
match: n => n.type === "list-item" // Adjust based on your list item type
|
@@ -1,6 +1,5 @@
|
|
1
|
-
import highlightSelection from "./highlightSelection";
|
2
1
|
import link from "./link";
|
3
|
-
const decorators =
|
4
|
-
return [...link(d
|
2
|
+
const decorators = d => {
|
3
|
+
return [...link(d)];
|
5
4
|
};
|
6
5
|
export default decorators;
|
@@ -242,15 +242,6 @@ export const getMarked = (leaf, children, theme) => {
|
|
242
242
|
})
|
243
243
|
});
|
244
244
|
}
|
245
|
-
if (leaf.highlight) {
|
246
|
-
children = /*#__PURE__*/_jsx("span", {
|
247
|
-
style: {
|
248
|
-
background: "#EAEBFE",
|
249
|
-
color: "inherit"
|
250
|
-
},
|
251
|
-
children: children
|
252
|
-
});
|
253
|
-
}
|
254
245
|
if (leaf.decoration === "link") {
|
255
246
|
children = /*#__PURE__*/_jsx("a", {
|
256
247
|
style: {
|
@@ -1,10 +1,8 @@
|
|
1
1
|
import { Editor, Transforms, Path, Range, Element } from "slate";
|
2
|
-
|
3
|
-
export const createLinkNode = (href, showInNewTab, text, linkType) => ({
|
2
|
+
export const createLinkNode = (href, showInNewTab, text) => ({
|
4
3
|
type: "link",
|
5
4
|
href,
|
6
5
|
target: showInNewTab ? "_blank" : "_self",
|
7
|
-
linkType,
|
8
6
|
children: [{
|
9
7
|
text
|
10
8
|
}]
|
@@ -12,19 +10,16 @@ export const createLinkNode = (href, showInNewTab, text, linkType) => ({
|
|
12
10
|
export const insertLink = (editor, {
|
13
11
|
url,
|
14
12
|
showInNewTab,
|
15
|
-
name
|
16
|
-
linkType
|
13
|
+
name
|
17
14
|
}) => {
|
18
15
|
if (!url) return;
|
19
16
|
const {
|
20
17
|
selection
|
21
18
|
} = editor;
|
22
|
-
const link = createLinkNode(url, showInNewTab, name || "Link"
|
19
|
+
const link = createLinkNode(url, showInNewTab, name || "Link");
|
23
20
|
if (!!selection) {
|
24
21
|
const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
|
25
|
-
|
26
|
-
|
27
|
-
if (parent.type === "link" || isActive) {
|
22
|
+
if (parent.type === "link") {
|
28
23
|
removeLink(editor);
|
29
24
|
}
|
30
25
|
if (editor.isVoid(parent)) {
|
package/package.json
CHANGED
@@ -1,22 +0,0 @@
|
|
1
|
-
import { Editor, Range, Text } from "slate";
|
2
|
-
const highlightSelection = ([node, path], editor = {}) => {
|
3
|
-
if (Text.isText(node) && editor?.selection) {
|
4
|
-
const intersection = Range.intersection(editor.selection, Editor.range(editor, path));
|
5
|
-
if (!intersection) {
|
6
|
-
return [];
|
7
|
-
}
|
8
|
-
|
9
|
-
// Avoid applying highlight if the range only includes line breaks
|
10
|
-
const rangeText = Editor.string(editor, intersection);
|
11
|
-
if (!rangeText.trim()) {
|
12
|
-
return [];
|
13
|
-
}
|
14
|
-
const range = {
|
15
|
-
highlight: true,
|
16
|
-
...intersection
|
17
|
-
};
|
18
|
-
return [range];
|
19
|
-
}
|
20
|
-
return [];
|
21
|
-
};
|
22
|
-
export default highlightSelection;
|