@flozy/editor 4.6.2 → 4.6.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +17 -17
- package/dist/Editor/Editor.css +32 -1
- package/dist/Editor/Elements/AI/AIInput.js +4 -5
- package/dist/Editor/Elements/AI/PopoverAIInput.js +40 -29
- package/dist/Editor/Elements/AI/Styles.js +1 -1
- package/dist/Editor/Elements/Button/EditorButton.js +8 -4
- package/dist/Editor/Elements/Divider/Divider.js +115 -8
- package/dist/Editor/Elements/Divider/DividerPopup.js +24 -0
- package/dist/Editor/Elements/Embed/Embed.css +1 -1
- package/dist/Editor/Elements/Embed/Image.js +3 -2
- package/dist/Editor/Elements/Embed/Video.js +7 -4
- package/dist/Editor/Elements/Emoji/EmojiButton.js +1 -23
- package/dist/Editor/Elements/Form/Form.js +0 -1
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +3 -12
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +56 -3
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +2 -0
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +7 -3
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +16 -2
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +8 -2
- package/dist/Editor/Elements/FreeGrid/styles.js +83 -2
- package/dist/Editor/Elements/Signature/SignaturePopup.js +24 -7
- package/dist/Editor/Elements/Signature/Signed.js +1 -1
- package/dist/Editor/Elements/SimpleText/index.js +7 -8
- package/dist/Editor/Elements/Table/TableRow.js +1 -1
- package/dist/Editor/Styles/EditorStyles.js +2 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +35 -29
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +35 -30
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +22 -38
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +0 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +18 -6
- package/dist/Editor/common/FontLoader/FontLoader.js +6 -6
- package/dist/Editor/common/Icon.js +1 -1
- package/dist/Editor/common/LinkSettings/index.js +3 -3
- package/dist/Editor/common/LinkSettings/navOptions.js +4 -1
- package/dist/Editor/common/RnD/DragOver/index.js +0 -1
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +15 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +5 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +53 -0
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +32 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js +49 -0
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +3 -1
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +5 -2
- package/dist/Editor/common/RnD/RnDCopy.js +2 -0
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +5 -3
- package/dist/Editor/common/RnD/VirtualElement/index.js +1 -1
- package/dist/Editor/common/RnD/index.js +67 -37
- package/dist/Editor/common/Section/index.js +11 -1
- package/dist/Editor/common/Section/styles.js +16 -0
- package/dist/Editor/common/StyleBuilder/dividerStyles.js +56 -0
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +19 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +19 -4
- package/dist/Editor/common/SwipeableDrawer/index.js +4 -15
- package/dist/Editor/common/SwipeableDrawer/style.js +3 -11
- package/dist/Editor/common/Uploader.js +2 -1
- package/dist/Editor/common/iconslist.js +23 -0
- package/dist/Editor/helper/RnD/focusNode.js +74 -0
- package/dist/Editor/helper/index.js +5 -2
- package/dist/Editor/helper/theme.js +2 -2
- package/dist/Editor/hooks/useBreakpoints.js +1 -1
- package/dist/Editor/hooks/useDragging.js +51 -0
- package/dist/Editor/hooks/useMouseMove.js +5 -4
- package/dist/Editor/hooks/withCommon.js +1 -0
- package/dist/Editor/hooks/withRestrictedNodes.js +48 -0
- package/dist/Editor/utils/Decorators/highlightSelection.js +16 -0
- package/dist/Editor/utils/Decorators/index.js +3 -2
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +16 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +33 -5
- package/dist/Editor/utils/events.js +71 -0
- package/dist/Editor/utils/helper.js +16 -0
- package/package.json +1 -1
@@ -1,7 +1,7 @@
|
|
1
1
|
/* eslint-disable no-unused-vars */
|
2
2
|
import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
|
3
3
|
import PropTypes from "prop-types";
|
4
|
-
import { createEditor,
|
4
|
+
import { createEditor, Range, Transforms } from "slate";
|
5
5
|
import { Slate, Editable, ReactEditor } from "slate-react";
|
6
6
|
import { useDebounce, useDebouncedCallback } from "use-debounce";
|
7
7
|
import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
|
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
|
|
10
10
|
import useMentions from "./hooks/useMentions";
|
11
11
|
import MentionsPopup from "./common/MentionsPopup";
|
12
12
|
import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
|
13
|
-
import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
|
13
|
+
import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
|
14
14
|
import withCommon from "./hooks/withCommon";
|
15
15
|
import DialogWrapper from "./DialogWrapper";
|
16
16
|
import { serializeToText } from "./utils/serializeToText";
|
@@ -27,16 +27,16 @@ import DragAndDrop from "./common/DnD";
|
|
27
27
|
import Section from "./common/Section";
|
28
28
|
import decorators from "./utils/Decorators";
|
29
29
|
import { getTRBLBreakPoints } from "./helper/theme";
|
30
|
-
import { handleInsertLastElement, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
|
30
|
+
import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
|
31
31
|
import useWindowResize from "./hooks/useWindowResize";
|
32
32
|
import PopoverAIInput from "./Elements/AI/PopoverAIInput";
|
33
33
|
import RnDCopy from "./common/RnD/RnDCopy";
|
34
34
|
import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
|
35
35
|
import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
|
36
|
-
import FontLoader from "./common/FontLoader/FontLoader";
|
37
36
|
import "./font.css";
|
38
37
|
import "./Editor.css";
|
39
38
|
import "animate.css";
|
39
|
+
import FontLoader from "./common/FontLoader/FontLoader";
|
40
40
|
import { jsx as _jsx } from "react/jsx-runtime";
|
41
41
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
42
42
|
const Item = /*#__PURE__*/forwardRef(({
|
@@ -82,7 +82,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
82
82
|
onSave,
|
83
83
|
editor: collaborativeEditor,
|
84
84
|
readOnly,
|
85
|
-
toolbarOptions,
|
86
85
|
otherProps,
|
87
86
|
isIframe,
|
88
87
|
theme,
|
@@ -115,7 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
115
114
|
editorClass,
|
116
115
|
fixedWidth = "60%",
|
117
116
|
fullWidth = "80%",
|
118
|
-
hideTools
|
117
|
+
hideTools = []
|
119
118
|
} = otherProps || {};
|
120
119
|
const editor = useMemo(() => {
|
121
120
|
if (collaborativeEditor) return collaborativeEditor;
|
@@ -146,12 +145,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
146
145
|
placeHolderColor: invertColor(pageColor || "#FFF"),
|
147
146
|
theme
|
148
147
|
});
|
149
|
-
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
150
148
|
useEffect(() => {
|
151
149
|
setValue(draftToSlate({
|
152
150
|
data: content
|
153
151
|
}));
|
154
|
-
if (!
|
152
|
+
if (!ReactEditor.isFocused(editor)) {
|
155
153
|
ReactEditor.focus(editor);
|
156
154
|
}
|
157
155
|
}, [id, content]);
|
@@ -289,10 +287,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
289
287
|
index,
|
290
288
|
type
|
291
289
|
} = mentions;
|
292
|
-
const
|
290
|
+
const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
|
291
|
+
const chars = type && !isFreeGrid(content) ? Shorthands[type]({
|
293
292
|
...mentions,
|
294
293
|
CHARACTERS,
|
295
|
-
hideTools:
|
294
|
+
hideTools: updatedHideTools || []
|
296
295
|
}) : [];
|
297
296
|
const handleEditorChange = newValue => {
|
298
297
|
setValue(newValue);
|
@@ -366,6 +365,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
366
365
|
});
|
367
366
|
} else if (event.key === "Enter") {
|
368
367
|
enterEvent(event, editor, customProps?.isMobile);
|
368
|
+
} else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
|
369
|
+
upDownArrowKeyEvents(event, editor);
|
370
|
+
} else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
|
371
|
+
upDownArrowKeyEvents(event, editor);
|
369
372
|
} else if (event.key === "Backspace") {
|
370
373
|
const isPageSettingsNode = isPageSettings(event, editor);
|
371
374
|
if (isPageSettingsNode) {
|
@@ -385,7 +388,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
385
388
|
}
|
386
389
|
}
|
387
390
|
}
|
388
|
-
}, [chars,
|
391
|
+
}, [chars, target, mentions, setMentions, search, type, mentionsRef]);
|
389
392
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
390
393
|
const dotBg = needDotsBG ? {
|
391
394
|
background: "white",
|
@@ -450,13 +453,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
450
453
|
const selection = window?.getSelection();
|
451
454
|
if (selection && selection.rangeCount > 0) {
|
452
455
|
const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
|
453
|
-
const
|
454
|
-
const containerBottom = containerRect?.bottom;
|
456
|
+
const containerBottom = container?.getBoundingClientRect()?.bottom;
|
455
457
|
if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
|
456
|
-
// Calculate dynamic scroll based on remaining space
|
457
|
-
const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
|
458
458
|
container?.scrollBy({
|
459
|
-
top:
|
459
|
+
top: 200,
|
460
460
|
behavior: "smooth"
|
461
461
|
});
|
462
462
|
}
|
@@ -531,7 +531,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
531
531
|
readOnly: isReadOnly,
|
532
532
|
renderElement: renderElement,
|
533
533
|
renderLeaf: renderLeaf,
|
534
|
-
decorate: decorators,
|
534
|
+
decorate: d => decorators(d, editor),
|
535
535
|
onKeyDown: onKeyDown,
|
536
536
|
onSelect: () => handleCursorScroll(editorWrapper.current)
|
537
537
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
package/dist/Editor/Editor.css
CHANGED
@@ -234,6 +234,18 @@ blockquote {
|
|
234
234
|
background-color: #0052cc;
|
235
235
|
}
|
236
236
|
|
237
|
+
.signature-btn-container .sign-placeholder {
|
238
|
+
display: none; /* will changed to flex on DnD */
|
239
|
+
flex-direction: column;
|
240
|
+
justify-content: center;
|
241
|
+
align-items: center;
|
242
|
+
border: 1px solid #E4E6E9;
|
243
|
+
border-radius: 10px;
|
244
|
+
background: white;
|
245
|
+
box-shadow: 0px 4px 16px 0px #0000000D;
|
246
|
+
gap: 10px;
|
247
|
+
}
|
248
|
+
|
237
249
|
.signature-btn-grps {
|
238
250
|
display: flex;
|
239
251
|
justify-content: space-around;
|
@@ -244,6 +256,13 @@ blockquote {
|
|
244
256
|
width: 17px !important;
|
245
257
|
}
|
246
258
|
|
259
|
+
.react-datepicker__input-container input {
|
260
|
+
height: 40px !important;
|
261
|
+
border: 1px solid #ccc;
|
262
|
+
border-radius: 5px;
|
263
|
+
width: 100%;
|
264
|
+
}
|
265
|
+
|
247
266
|
.close-popupbtn {
|
248
267
|
border-radius: 4px !important;
|
249
268
|
width: 24px;
|
@@ -884,7 +903,6 @@ blockquote {
|
|
884
903
|
/* For Firefox */
|
885
904
|
.removeScroll {
|
886
905
|
-moz-appearance: textfield;
|
887
|
-
appearance: none;
|
888
906
|
}
|
889
907
|
|
890
908
|
.borderInput:focus-visible {
|
@@ -1188,4 +1206,17 @@ blockquote {
|
|
1188
1206
|
|
1189
1207
|
.freegrid-section {
|
1190
1208
|
max-width: 100% !important;
|
1209
|
+
}
|
1210
|
+
|
1211
|
+
.divider-settings {
|
1212
|
+
display: none;
|
1213
|
+
position: absolute;
|
1214
|
+
}
|
1215
|
+
|
1216
|
+
.dividerComponent:hover {
|
1217
|
+
padding: 10px 0;
|
1218
|
+
}
|
1219
|
+
|
1220
|
+
.dividerComponent:hover .divider-settings {
|
1221
|
+
display: block;
|
1191
1222
|
}
|
@@ -90,6 +90,7 @@ function AIInput({
|
|
90
90
|
children: [/*#__PURE__*/_jsxs(Box, {
|
91
91
|
component: "div",
|
92
92
|
sx: classes.aiContainer,
|
93
|
+
ref: refs[0],
|
93
94
|
children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
|
94
95
|
sx: classes.generatedText,
|
95
96
|
style: {
|
@@ -104,7 +105,6 @@ function AIInput({
|
|
104
105
|
onSubmit: e => {
|
105
106
|
e.preventDefault();
|
106
107
|
},
|
107
|
-
ref: refs[0],
|
108
108
|
children: [/*#__PURE__*/_jsx("div", {
|
109
109
|
className: "icon-container icons-elements",
|
110
110
|
ref: inputWrapperRef,
|
@@ -116,22 +116,21 @@ function AIInput({
|
|
116
116
|
children: /*#__PURE__*/_jsx(WaveLoading, {})
|
117
117
|
}) : /*#__PURE__*/_jsx(TextareaAutosize, {
|
118
118
|
className: "ai-input",
|
119
|
-
placeholder:
|
119
|
+
placeholder: "Ask AI to write anything...",
|
120
120
|
ref: inputRef,
|
121
121
|
value: inputValue,
|
122
122
|
onChange: onInputChange,
|
123
|
-
disabled: fromToolBar,
|
124
123
|
onKeyDown: event => {
|
125
124
|
if (event.key === "Enter" && !event.shiftKey) {
|
126
125
|
event.preventDefault();
|
127
126
|
handleSendBtnClick();
|
128
127
|
}
|
129
128
|
}
|
130
|
-
}),
|
129
|
+
}), /*#__PURE__*/_jsxs(Box, {
|
131
130
|
component: "div",
|
132
131
|
style: classes.sendIconContainer,
|
133
132
|
className: "icons-elements",
|
134
|
-
children: [
|
133
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
135
134
|
disabled: loading,
|
136
135
|
onClick: () => startRecording(),
|
137
136
|
children: /*#__PURE__*/_jsx(ChatMicIcon, {})
|
@@ -201,6 +201,29 @@ function PopoverAIInput({
|
|
201
201
|
useEffect(() => {
|
202
202
|
selectedEleRef.current = selectedElement;
|
203
203
|
}, [selectedElement]);
|
204
|
+
const framePayload = (type, option) => {
|
205
|
+
let payload = {
|
206
|
+
mode: option.mode || 0,
|
207
|
+
query: option?.inputValue || inputValue
|
208
|
+
};
|
209
|
+
if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
|
210
|
+
payload.textOptionInput = type;
|
211
|
+
}
|
212
|
+
const selectedText = getSelectedText(editor);
|
213
|
+
const textData = generatedText || selectedText;
|
214
|
+
if (option.mode) {
|
215
|
+
payload.textData = textData;
|
216
|
+
} else if (selectedText && Number(payload.mode) === 0) {
|
217
|
+
payload.query = `${selectedText} \n ${payload.query}`;
|
218
|
+
}
|
219
|
+
const tryAgain = type === "try_again";
|
220
|
+
if (tryAgain) {
|
221
|
+
// resetting previous payload
|
222
|
+
const prevPayload = selectedOption?.payload || {};
|
223
|
+
payload = prevPayload;
|
224
|
+
}
|
225
|
+
return payload;
|
226
|
+
};
|
204
227
|
const onSend = async (type, option) => {
|
205
228
|
try {
|
206
229
|
if (type === "close") {
|
@@ -232,28 +255,12 @@ function PopoverAIInput({
|
|
232
255
|
onClickOutside();
|
233
256
|
return;
|
234
257
|
}
|
235
|
-
if (type === "speech_to_text") {
|
236
|
-
setGeneratedText(option.text);
|
237
|
-
return;
|
238
|
-
}
|
239
|
-
if (type === "try_again") {
|
240
|
-
// resetting the previous option and try again
|
241
|
-
option = selectedOption;
|
242
|
-
type = selectedOption.value;
|
243
|
-
} else {
|
244
|
-
setSelectedOption(option);
|
245
|
-
}
|
246
258
|
setLoading(true);
|
247
|
-
const payload =
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
payload.textOptionInput = type;
|
253
|
-
}
|
254
|
-
if (option.mode) {
|
255
|
-
payload.textData = generatedText || window.getSelection().toString();
|
256
|
-
}
|
259
|
+
const payload = framePayload(type, option);
|
260
|
+
setSelectedOption({
|
261
|
+
...option,
|
262
|
+
payload
|
263
|
+
});
|
257
264
|
const result = await services("infinityAI", payload);
|
258
265
|
setLoading(false);
|
259
266
|
setInputValue("");
|
@@ -264,15 +271,19 @@ function PopoverAIInput({
|
|
264
271
|
onClickOutside();
|
265
272
|
return;
|
266
273
|
}
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
return;
|
274
|
+
|
275
|
+
// if (!option.replace) {
|
276
|
+
if (type === "continue_writing") {
|
277
|
+
setGeneratedText(generatedText + text);
|
278
|
+
} else {
|
279
|
+
setGeneratedText(text);
|
274
280
|
}
|
275
|
-
|
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);
|
276
287
|
|
277
288
|
// scrollToAIInput();
|
278
289
|
} catch (err) {
|
@@ -1,6 +1,5 @@
|
|
1
1
|
const Styles = theme => ({
|
2
2
|
aiContainer: {
|
3
|
-
background: "#FCFAFF",
|
4
3
|
background: theme?.palette?.editor?.aiInputBackground,
|
5
4
|
border: "1px solid #8360FD",
|
6
5
|
borderRadius: "6px",
|
@@ -103,6 +102,7 @@ const Styles = theme => ({
|
|
103
102
|
customSelectWrapper: {
|
104
103
|
width: "fit-content",
|
105
104
|
marginTop: "4px",
|
105
|
+
position: "absolute",
|
106
106
|
"@media only screen and (max-width: 600px)": {
|
107
107
|
marginBottom: "4px"
|
108
108
|
}
|
@@ -10,10 +10,14 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
|
|
10
10
|
import { handleLinkType, windowVar } from "../../utils/helper";
|
11
11
|
import LinkSettings from "../../common/LinkSettings";
|
12
12
|
import Icon from "../../common/Icon";
|
13
|
+
import { useEditorContext } from "../../hooks/useMouseMove";
|
13
14
|
import { jsx as _jsx } from "react/jsx-runtime";
|
14
15
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
15
16
|
const EditorButton = props => {
|
16
17
|
const theme = useTheme();
|
18
|
+
const {
|
19
|
+
theme: appTheme
|
20
|
+
} = useEditorContext();
|
17
21
|
const {
|
18
22
|
attributes,
|
19
23
|
element,
|
@@ -140,8 +144,8 @@ const EditorButton = props => {
|
|
140
144
|
sx: {
|
141
145
|
display: "inline-flex",
|
142
146
|
color: "rgba(0, 0, 0, 0.54)",
|
143
|
-
borderRadius:
|
144
|
-
border:
|
147
|
+
borderRadius: "50% !important",
|
148
|
+
border: "none !important"
|
145
149
|
},
|
146
150
|
...btnProps,
|
147
151
|
children: /*#__PURE__*/_jsx(Icon, {
|
@@ -212,7 +216,7 @@ const EditorButton = props => {
|
|
212
216
|
},
|
213
217
|
"& svg": {
|
214
218
|
"& path": {
|
215
|
-
stroke:
|
219
|
+
stroke: appTheme?.palette?.text?.primary
|
216
220
|
}
|
217
221
|
},
|
218
222
|
"& button": {
|
@@ -277,7 +281,7 @@ const EditorButton = props => {
|
|
277
281
|
right: "-42px",
|
278
282
|
stroke: "#fff",
|
279
283
|
"& path": {
|
280
|
-
fill: openMoreOptions ?
|
284
|
+
fill: openMoreOptions ? appTheme.palette.text.blueText : ""
|
281
285
|
}
|
282
286
|
},
|
283
287
|
onClick: handleMoreBtn,
|
@@ -1,30 +1,137 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
|
3
|
+
import { ReactEditor, useSlateStatic } from "slate-react";
|
4
|
+
import { IconButton, Tooltip } from "@mui/material";
|
5
|
+
import { GridSettingsIcon } from "../../common/iconslist";
|
6
|
+
import DividerPopup from "./DividerPopup";
|
7
|
+
import { Transforms } from "slate";
|
2
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
3
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
4
10
|
const Divider = props => {
|
5
11
|
const {
|
6
12
|
attributes,
|
7
|
-
children
|
13
|
+
children,
|
14
|
+
element,
|
15
|
+
customProps
|
8
16
|
} = props;
|
17
|
+
const {
|
18
|
+
theme
|
19
|
+
} = useEditorContext();
|
20
|
+
const {
|
21
|
+
borderColor = theme?.palette?.primary?.main || '#0F172A',
|
22
|
+
borderWidth = '1px',
|
23
|
+
borderStyle = 'solid'
|
24
|
+
} = element;
|
25
|
+
const {
|
26
|
+
readOnly
|
27
|
+
} = customProps;
|
28
|
+
const editor = useSlateStatic();
|
29
|
+
const path = ReactEditor.findPath(editor, element);
|
30
|
+
const [openSettings, setOpenSettings] = useState(false);
|
31
|
+
const {
|
32
|
+
hoverPath
|
33
|
+
} = useEditorContext();
|
34
|
+
const [showTool] = useEditorSelection(editor);
|
35
|
+
const selected = hoverPath === path.join(",");
|
36
|
+
const onSettings = () => {
|
37
|
+
setOpenSettings(true);
|
38
|
+
};
|
39
|
+
const DividerToolbar = ({
|
40
|
+
selected,
|
41
|
+
showTool,
|
42
|
+
onSettings
|
43
|
+
}) => {
|
44
|
+
return /*#__PURE__*/_jsx("div", {
|
45
|
+
contentEditable: false,
|
46
|
+
className: "divider-settings",
|
47
|
+
style: {
|
48
|
+
top: "-20px",
|
49
|
+
left: 0
|
50
|
+
},
|
51
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
52
|
+
title: "Divider Settings",
|
53
|
+
arrow: true,
|
54
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
55
|
+
size: "small",
|
56
|
+
sx: {
|
57
|
+
background: theme?.palette?.greyshades?.light8,
|
58
|
+
border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
|
59
|
+
boxShadow: '0px 0px 4px 0px #00000040',
|
60
|
+
borderRadius: '50%',
|
61
|
+
'& svg': {
|
62
|
+
stroke: theme?.palette?.text?.secondary3
|
63
|
+
},
|
64
|
+
'&.MuiIconButton-root:hover': {
|
65
|
+
background: `${theme?.palette?.greyshades?.light8} !important`
|
66
|
+
}
|
67
|
+
},
|
68
|
+
onClick: onSettings,
|
69
|
+
children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
|
70
|
+
})
|
71
|
+
})
|
72
|
+
});
|
73
|
+
};
|
74
|
+
const onSave = data => {
|
75
|
+
const updateData = {
|
76
|
+
...data
|
77
|
+
};
|
78
|
+
delete updateData.children;
|
79
|
+
Transforms.setNodes(editor, {
|
80
|
+
...updateData
|
81
|
+
}, {
|
82
|
+
at: path
|
83
|
+
});
|
84
|
+
onClose();
|
85
|
+
};
|
86
|
+
const onClose = () => {
|
87
|
+
setOpenSettings(false);
|
88
|
+
};
|
89
|
+
const onDelete = () => {
|
90
|
+
if (path) {
|
91
|
+
Transforms.removeNodes(editor, {
|
92
|
+
at: path
|
93
|
+
});
|
94
|
+
}
|
95
|
+
};
|
9
96
|
return /*#__PURE__*/_jsxs("div", {
|
10
97
|
...attributes,
|
11
98
|
className: "dividerComponent",
|
12
|
-
contentEditable: "false",
|
13
99
|
style: {
|
14
|
-
userSelect: "none"
|
100
|
+
userSelect: "none",
|
101
|
+
position: 'relative'
|
15
102
|
},
|
16
|
-
children: [/*#__PURE__*/_jsx("
|
17
|
-
|
103
|
+
children: [!readOnly && /*#__PURE__*/_jsx("div", {
|
104
|
+
className: `element-root element-selector`,
|
105
|
+
contentEditable: false,
|
106
|
+
style: {
|
107
|
+
zIndex: 1000
|
108
|
+
},
|
109
|
+
children: /*#__PURE__*/_jsx(DividerToolbar, {
|
110
|
+
selected: selected,
|
111
|
+
showTool: showTool,
|
112
|
+
onSettings: onSettings
|
113
|
+
})
|
114
|
+
}), /*#__PURE__*/_jsx("hr", {
|
115
|
+
contentEditable: false,
|
18
116
|
className: "editorDivider",
|
19
117
|
style: {
|
20
|
-
userSelect: "none"
|
118
|
+
userSelect: "none",
|
119
|
+
borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
|
120
|
+
backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
|
121
|
+
height: borderColor?.includes("linear") ? borderWidth : undefined
|
21
122
|
}
|
22
123
|
}), /*#__PURE__*/_jsx("span", {
|
23
124
|
style: {
|
24
125
|
display: "none"
|
25
126
|
},
|
26
127
|
children: children
|
27
|
-
})
|
128
|
+
}), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
|
129
|
+
element: element,
|
130
|
+
onSave: onSave,
|
131
|
+
onClose: onClose,
|
132
|
+
onDelete: onDelete,
|
133
|
+
customProps: customProps
|
134
|
+
}) : null]
|
28
135
|
});
|
29
136
|
};
|
30
137
|
export default Divider;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import StyleBuilder from "../../common/StyleBuilder";
|
3
|
+
import dividerStyle from "../../common/StyleBuilder/dividerStyles";
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
5
|
+
const DividerPopup = props => {
|
6
|
+
const {
|
7
|
+
element,
|
8
|
+
onSave,
|
9
|
+
onClose,
|
10
|
+
onDelete,
|
11
|
+
customProps
|
12
|
+
} = props;
|
13
|
+
return /*#__PURE__*/_jsx(StyleBuilder, {
|
14
|
+
title: "Divider",
|
15
|
+
type: "dividerStyle",
|
16
|
+
element: element,
|
17
|
+
onSave: onSave,
|
18
|
+
onClose: onClose,
|
19
|
+
renderTabs: dividerStyle,
|
20
|
+
onDelete: onDelete,
|
21
|
+
customProps: customProps
|
22
|
+
});
|
23
|
+
};
|
24
|
+
export default DividerPopup;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useState
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
2
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Node, Transforms, Editor } from "slate";
|
4
4
|
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
@@ -94,7 +94,8 @@ const ImageContent = props => {
|
|
94
94
|
onTouchEnd: onTouchEnd // for mobile
|
95
95
|
,
|
96
96
|
"data-path": path.join(","),
|
97
|
-
draggable: false
|
97
|
+
draggable: false,
|
98
|
+
contentEditable: false
|
98
99
|
});
|
99
100
|
};
|
100
101
|
const Image = props => {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState, useEffect
|
1
|
+
import React, { useState, useEffect } from "react";
|
2
2
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Node, Transforms } from "slate";
|
4
4
|
import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
|
@@ -87,7 +87,8 @@ const Video = ({
|
|
87
87
|
url,
|
88
88
|
xsHidden,
|
89
89
|
width: oldWidth,
|
90
|
-
bannerSpacing
|
90
|
+
bannerSpacing,
|
91
|
+
aspectRatio
|
91
92
|
} = element;
|
92
93
|
const editor = useSlateStatic();
|
93
94
|
const [openSetttings, setOpenSettings] = useState(false);
|
@@ -189,9 +190,10 @@ const Video = ({
|
|
189
190
|
width: {
|
190
191
|
...getBreakPointsValue(getSize(), null, "overrideReSize", true)
|
191
192
|
},
|
192
|
-
height: url ? {
|
193
|
+
height: url && !aspectRatio ? {
|
193
194
|
...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
|
194
|
-
} : "auto"
|
195
|
+
} : "auto",
|
196
|
+
aspectRatio: aspectRatio ? aspectRatio : "auto"
|
195
197
|
}, theme)
|
196
198
|
};
|
197
199
|
}
|
@@ -221,6 +223,7 @@ const Video = ({
|
|
221
223
|
alignContent: vertical
|
222
224
|
},
|
223
225
|
...element.attr,
|
226
|
+
contentEditable: false,
|
224
227
|
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
225
228
|
element: element,
|
226
229
|
onSave: onSave,
|
@@ -6,7 +6,6 @@ import { insertEmoji } from "../../utils/emoji";
|
|
6
6
|
import ToolbarIcon from "../../common/ToolbarIcon";
|
7
7
|
import Icon from "../../common/Icon";
|
8
8
|
import EmojiPicker from "./EmojiPicker";
|
9
|
-
import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
|
10
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
11
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
12
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -20,7 +19,6 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
20
19
|
const [anchorEl, setAnchorEl] = useState(null);
|
21
20
|
const [target, setTarget] = useState(selectionTarget);
|
22
21
|
const open = Boolean(anchorEl);
|
23
|
-
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
24
22
|
useImperativeHandle(ref, () => ({
|
25
23
|
triggerClick: target => {
|
26
24
|
setTarget(target);
|
@@ -56,27 +54,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
56
54
|
icon: "emoji"
|
57
55
|
}),
|
58
56
|
icoBtnType: icoBtnType
|
59
|
-
}),
|
60
|
-
open: open,
|
61
|
-
onClose: handleClose,
|
62
|
-
customClass: "emojiDrawer",
|
63
|
-
children: /*#__PURE__*/_jsx(Paper, {
|
64
|
-
style: {
|
65
|
-
width: '100%'
|
66
|
-
},
|
67
|
-
sx: {
|
68
|
-
'& em-emoji-picker': {
|
69
|
-
width: '100%'
|
70
|
-
}
|
71
|
-
},
|
72
|
-
children: /*#__PURE__*/_jsx(EmojiPicker, {
|
73
|
-
data: data,
|
74
|
-
onEmojiSelect: onEmojiSelect,
|
75
|
-
theme: theme?.palette?.type,
|
76
|
-
dynamicWidth: true
|
77
|
-
})
|
78
|
-
})
|
79
|
-
}) : /*#__PURE__*/_jsx(Popover, {
|
57
|
+
}), /*#__PURE__*/_jsx(Popover, {
|
80
58
|
style: {
|
81
59
|
zIndex: 10001
|
82
60
|
},
|