@flozy/editor 4.6.1 → 4.6.2
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 +1 -32
- package/dist/Editor/Elements/AI/AIInput.js +5 -4
- package/dist/Editor/Elements/AI/PopoverAIInput.js +29 -40
- package/dist/Editor/Elements/AI/Styles.js +1 -1
- package/dist/Editor/Elements/Button/EditorButton.js +4 -8
- package/dist/Editor/Elements/Divider/Divider.js +8 -107
- package/dist/Editor/Elements/Embed/Embed.css +1 -1
- package/dist/Editor/Elements/Embed/Image.js +3 -4
- package/dist/Editor/Elements/Embed/Video.js +7 -9
- package/dist/Editor/Elements/Emoji/EmojiButton.js +23 -1
- package/dist/Editor/Elements/Form/Form.js +1 -0
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +3 -56
- package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +0 -2
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +3 -7
- package/dist/Editor/Elements/FreeGrid/Options/AddElement.js +2 -16
- package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js +2 -8
- package/dist/Editor/Elements/FreeGrid/styles.js +1 -82
- package/dist/Editor/Elements/Signature/SignaturePopup.js +7 -24
- package/dist/Editor/Elements/Signature/Signed.js +1 -1
- package/dist/Editor/Elements/SimpleText/index.js +8 -7
- package/dist/Editor/Elements/Table/TableRow.js +1 -1
- package/dist/Editor/Styles/EditorStyles.js +2 -2
- package/dist/Editor/Toolbar/Mini/MiniToolbar.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js +29 -35
- package/dist/Editor/Toolbar/PopupTool/FullViewCard.js +30 -35
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -4
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +38 -22
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
- package/dist/Editor/Toolbar/PopupTool/index.js +5 -5
- 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 +1 -4
- package/dist/Editor/common/RnD/DragOver/index.js +1 -0
- package/dist/Editor/common/RnD/ElementOptions/Actions.js +2 -15
- package/dist/Editor/common/RnD/ElementOptions/styles.js +0 -5
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +1 -1
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js +2 -32
- package/dist/Editor/common/RnD/ElementSettings/Settings/index.js +1 -3
- package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js +2 -5
- package/dist/Editor/common/RnD/RnDCopy.js +0 -2
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +3 -5
- package/dist/Editor/common/RnD/VirtualElement/index.js +1 -1
- package/dist/Editor/common/RnD/index.js +37 -67
- package/dist/Editor/common/Section/index.js +1 -11
- package/dist/Editor/common/Section/styles.js +0 -16
- package/dist/Editor/common/StyleBuilder/embedVideoStyle.js +0 -19
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +4 -19
- package/dist/Editor/common/SwipeableDrawer/index.js +15 -4
- package/dist/Editor/common/SwipeableDrawer/style.js +11 -3
- package/dist/Editor/common/iconslist.js +0 -23
- package/dist/Editor/helper/index.js +2 -5
- package/dist/Editor/helper/theme.js +2 -2
- package/dist/Editor/hooks/useBreakpoints.js +1 -1
- package/dist/Editor/hooks/useMouseMove.js +4 -5
- package/dist/Editor/hooks/withCommon.js +0 -1
- package/dist/Editor/utils/Decorators/index.js +2 -3
- package/dist/Editor/utils/RnD/RnDCtrlCmds.js +1 -16
- package/dist/Editor/utils/SlateUtilityFunctions.js +5 -33
- package/dist/Editor/utils/customHooks/useResize.js +5 -4
- package/dist/Editor/utils/events.js +0 -71
- package/dist/Editor/utils/helper.js +0 -16
- package/package.json +1 -1
- package/dist/Editor/Elements/Divider/DividerPopup.js +0 -24
- package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +0 -53
- package/dist/Editor/common/RnD/ElementSettings/Settings/DividerSettings.js +0 -49
- package/dist/Editor/common/StyleBuilder/dividerStyles.js +0 -56
- package/dist/Editor/helper/RnD/focusNode.js +0 -74
- package/dist/Editor/hooks/useDragging.js +0 -51
- package/dist/Editor/hooks/withRestrictedNodes.js +0 -48
- package/dist/Editor/utils/Decorators/highlightSelection.js +0 -16
@@ -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, Transforms, Range } 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
|
13
|
+
import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } 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,
|
30
|
+
import { handleInsertLastElement, 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";
|
36
37
|
import "./font.css";
|
37
38
|
import "./Editor.css";
|
38
39
|
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,6 +82,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
82
82
|
onSave,
|
83
83
|
editor: collaborativeEditor,
|
84
84
|
readOnly,
|
85
|
+
toolbarOptions,
|
85
86
|
otherProps,
|
86
87
|
isIframe,
|
87
88
|
theme,
|
@@ -114,7 +115,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
114
115
|
editorClass,
|
115
116
|
fixedWidth = "60%",
|
116
117
|
fullWidth = "80%",
|
117
|
-
hideTools
|
118
|
+
hideTools
|
118
119
|
} = otherProps || {};
|
119
120
|
const editor = useMemo(() => {
|
120
121
|
if (collaborativeEditor) return collaborativeEditor;
|
@@ -145,11 +146,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
145
146
|
placeHolderColor: invertColor(pageColor || "#FFF"),
|
146
147
|
theme
|
147
148
|
});
|
149
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
148
150
|
useEffect(() => {
|
149
151
|
setValue(draftToSlate({
|
150
152
|
data: content
|
151
153
|
}));
|
152
|
-
if (!ReactEditor.isFocused(editor)) {
|
154
|
+
if (!isMobile && !ReactEditor.isFocused(editor)) {
|
153
155
|
ReactEditor.focus(editor);
|
154
156
|
}
|
155
157
|
}, [id, content]);
|
@@ -287,11 +289,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
287
289
|
index,
|
288
290
|
type
|
289
291
|
} = mentions;
|
290
|
-
const
|
291
|
-
const chars = type && !isFreeGrid(content) ? Shorthands[type]({
|
292
|
+
const chars = type ? Shorthands[type]({
|
292
293
|
...mentions,
|
293
294
|
CHARACTERS,
|
294
|
-
hideTools:
|
295
|
+
hideTools: hideTools || []
|
295
296
|
}) : [];
|
296
297
|
const handleEditorChange = newValue => {
|
297
298
|
setValue(newValue);
|
@@ -365,10 +366,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
365
366
|
});
|
366
367
|
} else if (event.key === "Enter") {
|
367
368
|
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);
|
372
369
|
} else if (event.key === "Backspace") {
|
373
370
|
const isPageSettingsNode = isPageSettings(event, editor);
|
374
371
|
if (isPageSettingsNode) {
|
@@ -388,7 +385,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
388
385
|
}
|
389
386
|
}
|
390
387
|
}
|
391
|
-
}, [chars, target, mentions, setMentions, search, type, mentionsRef]);
|
388
|
+
}, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
|
392
389
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
393
390
|
const dotBg = needDotsBG ? {
|
394
391
|
background: "white",
|
@@ -453,10 +450,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
453
450
|
const selection = window?.getSelection();
|
454
451
|
if (selection && selection.rangeCount > 0) {
|
455
452
|
const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
|
456
|
-
const
|
453
|
+
const containerRect = container?.getBoundingClientRect();
|
454
|
+
const containerBottom = containerRect?.bottom;
|
457
455
|
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: scrollAmount,
|
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:
|
534
|
+
decorate: decorators,
|
535
535
|
onKeyDown: onKeyDown,
|
536
536
|
onSelect: () => handleCursorScroll(editorWrapper.current)
|
537
537
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
package/dist/Editor/Editor.css
CHANGED
@@ -234,18 +234,6 @@ 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
|
-
|
249
237
|
.signature-btn-grps {
|
250
238
|
display: flex;
|
251
239
|
justify-content: space-around;
|
@@ -256,13 +244,6 @@ blockquote {
|
|
256
244
|
width: 17px !important;
|
257
245
|
}
|
258
246
|
|
259
|
-
.react-datepicker__input-container input {
|
260
|
-
height: 40px !important;
|
261
|
-
border: 1px solid #ccc;
|
262
|
-
border-radius: 5px;
|
263
|
-
width: 100%;
|
264
|
-
}
|
265
|
-
|
266
247
|
.close-popupbtn {
|
267
248
|
border-radius: 4px !important;
|
268
249
|
width: 24px;
|
@@ -903,6 +884,7 @@ blockquote {
|
|
903
884
|
/* For Firefox */
|
904
885
|
.removeScroll {
|
905
886
|
-moz-appearance: textfield;
|
887
|
+
appearance: none;
|
906
888
|
}
|
907
889
|
|
908
890
|
.borderInput:focus-visible {
|
@@ -1206,17 +1188,4 @@ blockquote {
|
|
1206
1188
|
|
1207
1189
|
.freegrid-section {
|
1208
1190
|
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;
|
1222
1191
|
}
|
@@ -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, {})
|
@@ -201,29 +201,6 @@ 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
|
-
};
|
227
204
|
const onSend = async (type, option) => {
|
228
205
|
try {
|
229
206
|
if (type === "close") {
|
@@ -255,12 +232,28 @@ function PopoverAIInput({
|
|
255
232
|
onClickOutside();
|
256
233
|
return;
|
257
234
|
}
|
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
|
+
}
|
258
246
|
setLoading(true);
|
259
|
-
const payload =
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
247
|
+
const payload = {
|
248
|
+
mode: option.mode || 0,
|
249
|
+
query: option?.inputValue || inputValue
|
250
|
+
};
|
251
|
+
if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
|
252
|
+
payload.textOptionInput = type;
|
253
|
+
}
|
254
|
+
if (option.mode) {
|
255
|
+
payload.textData = generatedText || window.getSelection().toString();
|
256
|
+
}
|
264
257
|
const result = await services("infinityAI", payload);
|
265
258
|
setLoading(false);
|
266
259
|
setInputValue("");
|
@@ -271,19 +264,15 @@ function PopoverAIInput({
|
|
271
264
|
onClickOutside();
|
272
265
|
return;
|
273
266
|
}
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
267
|
+
if (!option.replace) {
|
268
|
+
if (type === "continue_writing") {
|
269
|
+
setGeneratedText(generatedText + text);
|
270
|
+
} else {
|
271
|
+
setGeneratedText(text);
|
272
|
+
}
|
273
|
+
return;
|
280
274
|
}
|
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);
|
275
|
+
insertText(editor, text);
|
287
276
|
|
288
277
|
// scrollToAIInput();
|
289
278
|
} catch (err) {
|
@@ -1,5 +1,6 @@
|
|
1
1
|
const Styles = theme => ({
|
2
2
|
aiContainer: {
|
3
|
+
background: "#FCFAFF",
|
3
4
|
background: theme?.palette?.editor?.aiInputBackground,
|
4
5
|
border: "1px solid #8360FD",
|
5
6
|
borderRadius: "6px",
|
@@ -102,7 +103,6 @@ const Styles = theme => ({
|
|
102
103
|
customSelectWrapper: {
|
103
104
|
width: "fit-content",
|
104
105
|
marginTop: "4px",
|
105
|
-
position: "absolute",
|
106
106
|
"@media only screen and (max-width: 600px)": {
|
107
107
|
marginBottom: "4px"
|
108
108
|
}
|
@@ -10,14 +10,10 @@ 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";
|
14
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
15
|
const EditorButton = props => {
|
17
16
|
const theme = useTheme();
|
18
|
-
const {
|
19
|
-
theme: appTheme
|
20
|
-
} = useEditorContext();
|
21
17
|
const {
|
22
18
|
attributes,
|
23
19
|
element,
|
@@ -144,8 +140,8 @@ const EditorButton = props => {
|
|
144
140
|
sx: {
|
145
141
|
display: "inline-flex",
|
146
142
|
color: "rgba(0, 0, 0, 0.54)",
|
147
|
-
borderRadius:
|
148
|
-
border:
|
143
|
+
borderRadius: '50% !important',
|
144
|
+
border: 'none !important'
|
149
145
|
},
|
150
146
|
...btnProps,
|
151
147
|
children: /*#__PURE__*/_jsx(Icon, {
|
@@ -216,7 +212,7 @@ const EditorButton = props => {
|
|
216
212
|
},
|
217
213
|
"& svg": {
|
218
214
|
"& path": {
|
219
|
-
stroke:
|
215
|
+
stroke: theme.palette.text.primary
|
220
216
|
}
|
221
217
|
},
|
222
218
|
"& button": {
|
@@ -281,7 +277,7 @@ const EditorButton = props => {
|
|
281
277
|
right: "-42px",
|
282
278
|
stroke: "#fff",
|
283
279
|
"& path": {
|
284
|
-
fill: openMoreOptions ?
|
280
|
+
fill: openMoreOptions ? theme.palette.text.blueText : ""
|
285
281
|
}
|
286
282
|
},
|
287
283
|
onClick: handleMoreBtn,
|
@@ -1,129 +1,30 @@
|
|
1
|
-
import 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";
|
1
|
+
import React from "react";
|
8
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
3
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
4
|
const Divider = props => {
|
11
5
|
const {
|
12
6
|
attributes,
|
13
|
-
children
|
14
|
-
element,
|
15
|
-
customProps
|
7
|
+
children
|
16
8
|
} = props;
|
17
|
-
const {
|
18
|
-
theme
|
19
|
-
} = useEditorContext();
|
20
|
-
const {
|
21
|
-
borderColor = theme?.palette?.text?.primary || '#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
|
-
boxShadow: '0px 0px 4px 0px #00000040',
|
58
|
-
borderRadius: '50%'
|
59
|
-
},
|
60
|
-
onClick: onSettings,
|
61
|
-
children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
|
62
|
-
})
|
63
|
-
})
|
64
|
-
});
|
65
|
-
};
|
66
|
-
const onSave = data => {
|
67
|
-
const updateData = {
|
68
|
-
...data
|
69
|
-
};
|
70
|
-
delete updateData.children;
|
71
|
-
Transforms.setNodes(editor, {
|
72
|
-
...updateData
|
73
|
-
}, {
|
74
|
-
at: path
|
75
|
-
});
|
76
|
-
onClose();
|
77
|
-
};
|
78
|
-
const onClose = () => {
|
79
|
-
setOpenSettings(false);
|
80
|
-
};
|
81
|
-
const onDelete = () => {
|
82
|
-
if (path) {
|
83
|
-
Transforms.removeNodes(editor, {
|
84
|
-
at: path
|
85
|
-
});
|
86
|
-
}
|
87
|
-
};
|
88
9
|
return /*#__PURE__*/_jsxs("div", {
|
89
10
|
...attributes,
|
90
11
|
className: "dividerComponent",
|
12
|
+
contentEditable: "false",
|
91
13
|
style: {
|
92
|
-
userSelect: "none"
|
93
|
-
position: 'relative'
|
14
|
+
userSelect: "none"
|
94
15
|
},
|
95
|
-
children: [
|
96
|
-
|
97
|
-
contentEditable: false,
|
98
|
-
style: {
|
99
|
-
zIndex: 1000
|
100
|
-
},
|
101
|
-
children: /*#__PURE__*/_jsx(DividerToolbar, {
|
102
|
-
selected: selected,
|
103
|
-
showTool: showTool,
|
104
|
-
onSettings: onSettings
|
105
|
-
})
|
106
|
-
}), /*#__PURE__*/_jsx("hr", {
|
107
|
-
contentEditable: false,
|
16
|
+
children: [/*#__PURE__*/_jsx("hr", {
|
17
|
+
contentEditable: "false",
|
108
18
|
className: "editorDivider",
|
109
19
|
style: {
|
110
|
-
userSelect: "none"
|
111
|
-
borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
|
112
|
-
backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
|
113
|
-
height: borderColor?.includes("linear") ? borderWidth : undefined
|
20
|
+
userSelect: "none"
|
114
21
|
}
|
115
22
|
}), /*#__PURE__*/_jsx("span", {
|
116
23
|
style: {
|
117
24
|
display: "none"
|
118
25
|
},
|
119
26
|
children: children
|
120
|
-
})
|
121
|
-
element: element,
|
122
|
-
onSave: onSave,
|
123
|
-
onClose: onClose,
|
124
|
-
onDelete: onDelete,
|
125
|
-
customProps: customProps
|
126
|
-
}) : null]
|
27
|
+
})]
|
127
28
|
});
|
128
29
|
};
|
129
30
|
export default Divider;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useState, memo } 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,8 +94,7 @@ const ImageContent = props => {
|
|
94
94
|
onTouchEnd: onTouchEnd // for mobile
|
95
95
|
,
|
96
96
|
"data-path": path.join(","),
|
97
|
-
draggable: false
|
98
|
-
contentEditable: false
|
97
|
+
draggable: false
|
99
98
|
});
|
100
99
|
};
|
101
100
|
const Image = props => {
|
@@ -223,7 +222,7 @@ const Image = props => {
|
|
223
222
|
const getWidth = () => {
|
224
223
|
if (resizing) {
|
225
224
|
return {
|
226
|
-
width: `${size.
|
225
|
+
width: `${size.widthInPercent}%`,
|
227
226
|
height: objectFit ? `${size.height}px` : "auto"
|
228
227
|
};
|
229
228
|
} else {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
1
|
+
import React, { useState, useEffect, useCallback } 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";
|
@@ -53,7 +53,8 @@ const VideoContent = props => {
|
|
53
53
|
...videoSX
|
54
54
|
},
|
55
55
|
src: embedURL,
|
56
|
-
title: alt
|
56
|
+
title: alt,
|
57
|
+
allowFullScreen: true
|
57
58
|
});
|
58
59
|
};
|
59
60
|
const VideoPlaceholder = props => {
|
@@ -86,8 +87,7 @@ const Video = ({
|
|
86
87
|
url,
|
87
88
|
xsHidden,
|
88
89
|
width: oldWidth,
|
89
|
-
bannerSpacing
|
90
|
-
aspectRatio
|
90
|
+
bannerSpacing
|
91
91
|
} = element;
|
92
92
|
const editor = useSlateStatic();
|
93
93
|
const [openSetttings, setOpenSettings] = useState(false);
|
@@ -180,7 +180,7 @@ const Video = ({
|
|
180
180
|
const getWidth = () => {
|
181
181
|
if (resizing) {
|
182
182
|
return {
|
183
|
-
width: size.
|
183
|
+
width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
|
184
184
|
height: url ? `${size.height || 370}px` : "auto"
|
185
185
|
};
|
186
186
|
} else {
|
@@ -189,10 +189,9 @@ const Video = ({
|
|
189
189
|
width: {
|
190
190
|
...getBreakPointsValue(getSize(), null, "overrideReSize", true)
|
191
191
|
},
|
192
|
-
height: url
|
192
|
+
height: url ? {
|
193
193
|
...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
|
194
|
-
} : "auto"
|
195
|
-
aspectRatio: aspectRatio ? aspectRatio : "auto"
|
194
|
+
} : "auto"
|
196
195
|
}, theme)
|
197
196
|
};
|
198
197
|
}
|
@@ -222,7 +221,6 @@ const Video = ({
|
|
222
221
|
alignContent: vertical
|
223
222
|
},
|
224
223
|
...element.attr,
|
225
|
-
contentEditable: false,
|
226
224
|
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
227
225
|
element: element,
|
228
226
|
onSave: onSave,
|
@@ -6,6 +6,7 @@ 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";
|
9
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
10
11
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
11
12
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
@@ -19,6 +20,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
19
20
|
const [anchorEl, setAnchorEl] = useState(null);
|
20
21
|
const [target, setTarget] = useState(selectionTarget);
|
21
22
|
const open = Boolean(anchorEl);
|
23
|
+
const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
|
22
24
|
useImperativeHandle(ref, () => ({
|
23
25
|
triggerClick: target => {
|
24
26
|
setTarget(target);
|
@@ -54,7 +56,27 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
54
56
|
icon: "emoji"
|
55
57
|
}),
|
56
58
|
icoBtnType: icoBtnType
|
57
|
-
}), /*#__PURE__*/_jsx(
|
59
|
+
}), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
|
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, {
|
58
80
|
style: {
|
59
81
|
zIndex: 10001
|
60
82
|
},
|