@flozy/editor 4.4.0 → 4.4.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/ChatEditor.js +14 -2
- package/dist/Editor/CommonEditor.js +24 -11
- package/dist/Editor/Editor.css +1 -7
- package/dist/Editor/Elements/AI/Styles.js +1 -0
- package/dist/Editor/Elements/Button/EditorButton.js +4 -8
- package/dist/Editor/Elements/Embed/Embed.css +1 -1
- package/dist/Editor/Elements/Embed/Image.js +2 -3
- package/dist/Editor/Elements/Embed/Video.js +2 -3
- package/dist/Editor/Elements/Form/Form.js +1 -0
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -3
- package/dist/Editor/Elements/Mentions/Mentions.js +3 -2
- package/dist/Editor/Elements/SimpleText/index.js +2 -3
- package/dist/Editor/Elements/Table/TableRow.js +1 -1
- package/dist/Editor/Styles/EditorStyles.js +1 -1
- 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 +2 -0
- 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/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js +0 -1
- package/dist/Editor/common/RnD/index.js +2 -3
- package/dist/Editor/common/Section/index.js +1 -11
- package/dist/Editor/common/Section/styles.js +0 -14
- package/dist/Editor/common/Shorthands/mentions.js +1 -1
- package/dist/Editor/helper/index.js +2 -4
- package/dist/Editor/hooks/useBreakpoints.js +1 -1
- package/dist/Editor/hooks/useMentions.js +39 -13
- package/dist/Editor/hooks/withCommon.js +7 -2
- package/dist/Editor/plugins/withHTML.js +29 -0
- package/dist/Editor/utils/SlateUtilityFunctions.js +0 -9
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +1 -24
- package/dist/Editor/utils/customHooks/useResize.js +3 -2
- package/dist/Editor/utils/events.js +0 -36
- package/package.json +1 -1
- package/dist/Editor/helper/RnD/focusNode.js +0 -70
@@ -46,7 +46,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
46
46
|
const [deboundedValue] = useDebounce(value, 500);
|
47
47
|
const editor = useMemo(() => {
|
48
48
|
return withCommon(createEditor(), {
|
49
|
-
needLayout
|
49
|
+
needLayout,
|
50
|
+
isChatEditor: true
|
50
51
|
});
|
51
52
|
}, []);
|
52
53
|
const isReadOnly = readOnly === "readonly";
|
@@ -248,6 +249,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
248
249
|
restVal
|
249
250
|
});
|
250
251
|
};
|
252
|
+
const handlePaste = event => {
|
253
|
+
const items = event.clipboardData.items;
|
254
|
+
for (let i = 0; i < items.length; i++) {
|
255
|
+
if (items[i].type.startsWith("image/")) {
|
256
|
+
event.preventDefault(); // Prevent the default paste behavior
|
257
|
+
return; // Exit early to keep the editor empty
|
258
|
+
}
|
259
|
+
}
|
260
|
+
};
|
261
|
+
|
251
262
|
return /*#__PURE__*/_jsx(EditorProvider, {
|
252
263
|
theme: theme,
|
253
264
|
editor: editor,
|
@@ -267,7 +278,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
267
278
|
placeholder: "Start typing ...",
|
268
279
|
spellCheck: true,
|
269
280
|
onBlur: handleBlur,
|
270
|
-
onKeyDown: onKeyDown
|
281
|
+
onKeyDown: onKeyDown,
|
282
|
+
onPaste: handlePaste
|
271
283
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
272
284
|
ref: mentionsRef,
|
273
285
|
mentions: mentions,
|
@@ -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, Transforms } from "slate";
|
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";
|
@@ -33,10 +33,10 @@ 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(({
|
@@ -365,10 +365,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
365
365
|
});
|
366
366
|
} else if (event.key === "Enter") {
|
367
367
|
enterEvent(event, editor, customProps?.isMobile);
|
368
|
-
} else if (event.key ===
|
369
|
-
|
370
|
-
|
371
|
-
|
368
|
+
} else if (event.key === 'Backspace') {
|
369
|
+
const {
|
370
|
+
selection
|
371
|
+
} = editor;
|
372
|
+
event.preventDefault();
|
373
|
+
if (selection) {
|
374
|
+
if (!Range.isCollapsed(selection)) {
|
375
|
+
editor.deleteFragment();
|
376
|
+
} else {
|
377
|
+
editor.deleteBackward({
|
378
|
+
unit: 'character'
|
379
|
+
});
|
380
|
+
}
|
381
|
+
}
|
372
382
|
}
|
373
383
|
}, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
|
374
384
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
@@ -433,19 +443,22 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
433
443
|
const selection = window?.getSelection();
|
434
444
|
if (selection && selection.rangeCount > 0) {
|
435
445
|
const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
|
436
|
-
const
|
446
|
+
const containerRect = container?.getBoundingClientRect();
|
447
|
+
const containerBottom = containerRect?.bottom;
|
437
448
|
if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
|
449
|
+
// Calculate dynamic scroll based on remaining space
|
450
|
+
const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
|
438
451
|
container?.scrollBy({
|
439
|
-
top:
|
452
|
+
top: scrollAmount,
|
440
453
|
behavior: "smooth"
|
441
454
|
});
|
442
455
|
}
|
443
456
|
} else {
|
444
|
-
console.warn(
|
457
|
+
console.warn('No valid selection range found');
|
445
458
|
}
|
446
459
|
}
|
447
460
|
} catch (err) {
|
448
|
-
console.log(
|
461
|
+
console.log('handleCursorScroll', err);
|
449
462
|
}
|
450
463
|
};
|
451
464
|
return /*#__PURE__*/_jsx(EditorProvider, {
|
package/dist/Editor/Editor.css
CHANGED
@@ -244,13 +244,6 @@ blockquote {
|
|
244
244
|
width: 17px !important;
|
245
245
|
}
|
246
246
|
|
247
|
-
.react-datepicker__input-container input {
|
248
|
-
height: 40px !important;
|
249
|
-
border: 1px solid #ccc;
|
250
|
-
border-radius: 5px;
|
251
|
-
width: 100%;
|
252
|
-
}
|
253
|
-
|
254
247
|
.close-popupbtn {
|
255
248
|
border-radius: 4px !important;
|
256
249
|
width: 24px;
|
@@ -891,6 +884,7 @@ blockquote {
|
|
891
884
|
/* For Firefox */
|
892
885
|
.removeScroll {
|
893
886
|
-moz-appearance: textfield;
|
887
|
+
appearance: none;
|
894
888
|
}
|
895
889
|
|
896
890
|
.borderInput:focus-visible {
|
@@ -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,
|
@@ -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";
|
@@ -179,7 +179,7 @@ const Video = ({
|
|
179
179
|
const getWidth = () => {
|
180
180
|
if (resizing) {
|
181
181
|
return {
|
182
|
-
width: size.
|
182
|
+
width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
|
183
183
|
height: url ? `${size.height || 370}px` : "auto"
|
184
184
|
};
|
185
185
|
} else {
|
@@ -220,7 +220,6 @@ const Video = ({
|
|
220
220
|
alignContent: vertical
|
221
221
|
},
|
222
222
|
...element.attr,
|
223
|
-
contentEditable: false,
|
224
223
|
children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
|
225
224
|
element: element,
|
226
225
|
onSave: onSave,
|
@@ -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,
|
@@ -14,9 +14,10 @@ const Mentions = ({
|
|
14
14
|
verticalAlign: "baseline",
|
15
15
|
display: "inline-block",
|
16
16
|
borderRadius: "4px",
|
17
|
-
backgroundColor: "#
|
17
|
+
backgroundColor: "#2563EB",
|
18
18
|
fontSize: "0.9em",
|
19
|
-
boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
|
19
|
+
boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
|
20
|
+
color: "#FFF"
|
20
21
|
};
|
21
22
|
// See if our empty text child has any styling marks applied and apply those
|
22
23
|
if (element.children[0].bold) {
|
@@ -6,7 +6,6 @@ import { isTextSelected } from "../../utils/helper";
|
|
6
6
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
7
7
|
import SimpleTextStyle from "./style";
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
9
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
10
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
11
10
|
import { createElement as _createElement } from "react";
|
12
11
|
const SimpleText = props => {
|
@@ -48,9 +47,9 @@ const SimpleText = props => {
|
|
48
47
|
sx: classes.root,
|
49
48
|
key: `para_${path.join("|")}`
|
50
49
|
}, children, openAI ? null : /*#__PURE__*/_jsx("span", {
|
51
|
-
contentEditable: false,
|
52
50
|
className: "placeholder-simple-text",
|
53
|
-
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(
|
51
|
+
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
|
52
|
+
className: "placeholder-simple-text-default",
|
54
53
|
children: ["Type ", /*#__PURE__*/_jsx("span", {
|
55
54
|
style: {
|
56
55
|
backgroundColor: '#F2F6FA',
|
@@ -123,7 +123,8 @@ const MiniToolbar = props => {
|
|
123
123
|
label,
|
124
124
|
icon: Icon
|
125
125
|
}) => {
|
126
|
-
const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
|
126
|
+
const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
|
127
|
+
|
127
128
|
return /*#__PURE__*/_jsx(Tooltip, {
|
128
129
|
arrow: true,
|
129
130
|
title: label,
|
@@ -1,28 +1,22 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Box,
|
2
|
+
import { Box, Card, CardMedia, Grid } from "@mui/material";
|
3
|
+
|
4
|
+
// const Select = (props) => {
|
5
|
+
// const { classes, data, onSelectTemplate } = props;
|
6
|
+
// return (
|
7
|
+
// <Box
|
8
|
+
// className="template-card-action"
|
9
|
+
// component={"div"}
|
10
|
+
// sx={classes.templateCardBtnGrp}
|
11
|
+
// style={{ padding: 0, background: "transparent"}}
|
12
|
+
// >
|
13
|
+
// <Button className="blueBtn" onClick={onSelectTemplate(data)}>
|
14
|
+
// Select
|
15
|
+
// </Button>
|
16
|
+
// </Box>
|
17
|
+
// );
|
18
|
+
// };
|
3
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
-
const Select = props => {
|
6
|
-
const {
|
7
|
-
classes,
|
8
|
-
data,
|
9
|
-
onSelectTemplate
|
10
|
-
} = props;
|
11
|
-
return /*#__PURE__*/_jsx(Box, {
|
12
|
-
className: "template-card-action",
|
13
|
-
component: "div",
|
14
|
-
sx: classes.templateCardBtnGrp,
|
15
|
-
style: {
|
16
|
-
padding: 0,
|
17
|
-
background: "transparent"
|
18
|
-
},
|
19
|
-
children: /*#__PURE__*/_jsx(Button, {
|
20
|
-
className: "blueBtn",
|
21
|
-
onClick: onSelectTemplate(data),
|
22
|
-
children: "Select"
|
23
|
-
})
|
24
|
-
});
|
25
|
-
};
|
26
20
|
const ButtonTemplateCard = props => {
|
27
21
|
const {
|
28
22
|
classes,
|
@@ -34,19 +28,19 @@ const ButtonTemplateCard = props => {
|
|
34
28
|
xs: 3,
|
35
29
|
children: /*#__PURE__*/_jsx(Card, {
|
36
30
|
sx: classes.paperOverrides,
|
37
|
-
children: /*#__PURE__*/
|
31
|
+
children: /*#__PURE__*/_jsx(Box, {
|
38
32
|
sx: classes.buttonCardMediaWrpr,
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
})
|
33
|
+
onClick: onSelectTemplate(m),
|
34
|
+
children: /*#__PURE__*/_jsx("div", {
|
35
|
+
className: "img-wrapper",
|
36
|
+
children: /*#__PURE__*/_jsx(CardMedia, {
|
37
|
+
className: `template-card-media`,
|
38
|
+
component: "div",
|
39
|
+
image: m?.thumbnail,
|
40
|
+
alt: m?.title,
|
41
|
+
sx: classes.buttonCardMedia
|
42
|
+
})
|
43
|
+
})
|
50
44
|
})
|
51
45
|
})
|
52
46
|
}, `template_${m.id}`);
|
@@ -1,27 +1,22 @@
|
|
1
1
|
import React from "react";
|
2
|
-
import { Box,
|
2
|
+
import { Box, Card, CardMedia, Grid } from "@mui/material";
|
3
|
+
|
4
|
+
// const Select = (props) => {
|
5
|
+
// const { classes, data, onSelectTemplate } = props;
|
6
|
+
// return (
|
7
|
+
// <Box
|
8
|
+
// className="template-card-action"
|
9
|
+
// component={"div"}
|
10
|
+
// sx={classes.templateCardBtnGrp}
|
11
|
+
// style={{background: "transparent"}}
|
12
|
+
// >
|
13
|
+
// <Button className="blueBtn" onClick={onSelectTemplate(data)}>
|
14
|
+
// Select
|
15
|
+
// </Button>
|
16
|
+
// </Box>
|
17
|
+
// );
|
18
|
+
// };
|
3
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
5
|
-
const Select = props => {
|
6
|
-
const {
|
7
|
-
classes,
|
8
|
-
data,
|
9
|
-
onSelectTemplate
|
10
|
-
} = props;
|
11
|
-
return /*#__PURE__*/_jsx(Box, {
|
12
|
-
className: "template-card-action",
|
13
|
-
component: "div",
|
14
|
-
sx: classes.templateCardBtnGrp,
|
15
|
-
style: {
|
16
|
-
background: "transparent"
|
17
|
-
},
|
18
|
-
children: /*#__PURE__*/_jsx(Button, {
|
19
|
-
className: "blueBtn",
|
20
|
-
onClick: onSelectTemplate(data),
|
21
|
-
children: "Select"
|
22
|
-
})
|
23
|
-
});
|
24
|
-
};
|
25
20
|
const FullViewCard = props => {
|
26
21
|
const {
|
27
22
|
classes,
|
@@ -35,19 +30,19 @@ const FullViewCard = props => {
|
|
35
30
|
children: /*#__PURE__*/_jsx(Card, {
|
36
31
|
sx: classes.paperOverrides,
|
37
32
|
className: "paperOverrides",
|
38
|
-
children: /*#__PURE__*/
|
39
|
-
sx: classes.
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
})
|
33
|
+
children: /*#__PURE__*/_jsx(Box, {
|
34
|
+
sx: classes.fullViewCardMediaWrpr,
|
35
|
+
onClick: onSelectTemplate(m),
|
36
|
+
children: /*#__PURE__*/_jsx("div", {
|
37
|
+
className: "img-wrapper",
|
38
|
+
children: /*#__PURE__*/_jsx(CardMedia, {
|
39
|
+
component: "div",
|
40
|
+
image: m?.thumbnail,
|
41
|
+
alt: m?.title,
|
42
|
+
sx: classes.fullViewCardMedia,
|
43
|
+
className: height
|
44
|
+
})
|
45
|
+
})
|
51
46
|
})
|
52
47
|
})
|
53
48
|
}, `template_${m.id}`);
|
@@ -13,6 +13,7 @@ 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";
|
16
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
17
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
18
19
|
const DEFAULT_COLOR = {
|
@@ -27,6 +28,7 @@ const MiniTextFormat = props => {
|
|
27
28
|
classes,
|
28
29
|
editor,
|
29
30
|
closeMainPopup
|
31
|
+
// customProps
|
30
32
|
} = props;
|
31
33
|
const [anchorEl, setAnchorEl] = useState(null);
|
32
34
|
const open = Boolean(anchorEl);
|
@@ -3,10 +3,9 @@ const usePopupStyle = theme => ({
|
|
3
3
|
boxShadow: "1px 2px 15px 0px #2563EB40",
|
4
4
|
zIndex: 1300,
|
5
5
|
marginBottom: "12px !important",
|
6
|
-
borderRadius: "6px",
|
7
6
|
border: "1px solid #D8DDE1",
|
7
|
+
borderRadius: "6px",
|
8
8
|
maxWidth: "100%",
|
9
|
-
// maxHeight: "40px",
|
10
9
|
"&.fullscreen": {
|
11
10
|
marginBottom: "0px !important",
|
12
11
|
"& .papper-wrpr": {
|
@@ -482,9 +481,10 @@ const usePopupStyle = theme => ({
|
|
482
481
|
}
|
483
482
|
},
|
484
483
|
fullViewCardMedia: {
|
484
|
+
margin: "5px 0px",
|
485
485
|
width: "100%",
|
486
486
|
backgroundPosition: "left top",
|
487
|
-
backgroundSize: "100
|
487
|
+
backgroundSize: "100%, auto",
|
488
488
|
zIndex: 1,
|
489
489
|
position: "relative",
|
490
490
|
"&.fullscreen": {
|
@@ -499,9 +499,10 @@ const usePopupStyle = theme => ({
|
|
499
499
|
}
|
500
500
|
},
|
501
501
|
buttonCardMedia: {
|
502
|
+
margin: "5px 0px",
|
502
503
|
width: "100%",
|
503
|
-
height: "
|
504
|
-
backgroundPosition: "
|
504
|
+
height: "40px",
|
505
|
+
backgroundPosition: "center",
|
505
506
|
backgroundSize: "contain",
|
506
507
|
zIndex: 1,
|
507
508
|
position: "relative",
|
@@ -510,26 +511,25 @@ const usePopupStyle = theme => ({
|
|
510
511
|
}
|
511
512
|
},
|
512
513
|
buttonCardMediaWrpr: {
|
514
|
+
padding: "5px",
|
513
515
|
position: "relative",
|
514
516
|
margin: "8px",
|
515
|
-
|
516
|
-
"
|
517
|
-
"
|
518
|
-
|
517
|
+
height: "50px",
|
518
|
+
"& .img-wrapper": {
|
519
|
+
"&:hover": {
|
520
|
+
padding: "0px 2px 0px 2px",
|
521
|
+
backgroundColor: "#E9F3FE",
|
522
|
+
border: "1px solid #2563EB40",
|
523
|
+
borderRadius: "5px",
|
524
|
+
// height: "100%",
|
525
|
+
margin: "0px"
|
526
|
+
// "& .template-card-action": {
|
527
|
+
// display: "flex",
|
528
|
+
// },
|
519
529
|
}
|
520
|
-
},
|
521
|
-
"& .img-loader-wrapper": {
|
522
|
-
position: "absolute",
|
523
|
-
width: "12px",
|
524
|
-
height: "12px",
|
525
|
-
left: 0,
|
526
|
-
right: 0,
|
527
|
-
top: 0,
|
528
|
-
bottom: 0,
|
529
|
-
margin: "auto",
|
530
|
-
zIndex: 0
|
531
530
|
}
|
532
531
|
},
|
532
|
+
|
533
533
|
paperOverrides: {
|
534
534
|
"&.MuiPaper-root": {
|
535
535
|
background: "transparent",
|
@@ -587,12 +587,13 @@ const usePopupStyle = theme => ({
|
|
587
587
|
},
|
588
588
|
customSelectPopoverWrapper: {
|
589
589
|
"& .MuiPopover-paper": {
|
590
|
-
maxHeight: "140px",
|
591
590
|
// minWidth: "130px",
|
592
591
|
border: "1px solid #E4E8EB",
|
592
|
+
maxHeight: "140px",
|
593
593
|
background: `${theme?.palette?.editor?.background} !important`,
|
594
|
-
overflowY: "
|
594
|
+
// overflowY: "hidden",
|
595
595
|
padding: "6px 12px 6px 0px",
|
596
|
+
overflowY: "scroll",
|
596
597
|
"@media only screen and (max-width: 600px)": {
|
597
598
|
marginTop: "-40px"
|
598
599
|
}
|
@@ -642,6 +643,21 @@ const usePopupStyle = theme => ({
|
|
642
643
|
"& fieldset": {
|
643
644
|
border: "none !important"
|
644
645
|
}
|
646
|
+
},
|
647
|
+
fullViewCardMediaWrpr: {
|
648
|
+
padding: "5px",
|
649
|
+
position: "relative",
|
650
|
+
margin: "8px",
|
651
|
+
height: "140px",
|
652
|
+
"& .img-wrapper": {
|
653
|
+
"&:hover": {
|
654
|
+
padding: "0px 2px 0px 2px",
|
655
|
+
backgroundColor: "#E9F3FE",
|
656
|
+
border: "1px solid #2563EB40",
|
657
|
+
borderRadius: "5px",
|
658
|
+
margin: "0px"
|
659
|
+
}
|
660
|
+
}
|
645
661
|
}
|
646
662
|
});
|
647
663
|
export default usePopupStyle;
|
@@ -80,16 +80,16 @@ const PopupTool = props => {
|
|
80
80
|
updateAnchorEl();
|
81
81
|
}
|
82
82
|
}, [selection]);
|
83
|
-
useEffect(() => {
|
84
|
-
if (selectedElement?.enable === 1) {
|
85
|
-
setAnchorEl(null);
|
86
|
-
}
|
87
|
-
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
88
83
|
const handleClose = () => {
|
89
84
|
setAnchorEl(null);
|
90
85
|
setOpen(false);
|
91
86
|
setPopupType("");
|
92
87
|
};
|
88
|
+
useEffect(() => {
|
89
|
+
if (selectedElement?.enable === 1) {
|
90
|
+
setAnchorEl(null);
|
91
|
+
}
|
92
|
+
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
93
93
|
return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
94
94
|
onClickAway: e => {
|
95
95
|
// close the mini toolbar, if user clicks outside the editor (in Flozy app.)
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { useEffect } from "react";
|
2
2
|
import WebFont from "webfontloader";
|
3
3
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
4
|
-
const defaultFonts = [
|
4
|
+
const defaultFonts = ['PoppinsRegular', 'PoppinsBold', 'Helvetica', 'Georgia', 'Times New Roman', 'Monaco', 'Courier New', 'Qwitcher Grypen', 'EB Garamond', 'Anton', 'DM Serif Text', 'Libre Baskerville', 'Montserrat', 'Open Sans', 'Public Sans', 'Raleway', 'Space Mono', 'Bulgarian Garamond', 'Impact', 'Redacted Script', 'Great Vibes', 'Zeyada', 'Allura', 'Pinyon Script', 'Herr Von Muellerhoff', 'Dawning of a New Day', 'Coming Soon', 'Dancing Script', 'Engagement', 'Gaegu', 'Ingrid Darling', 'Kite One', 'La Belle Aurore', 'Mea Culpa', 'Meddon', 'Merriweather', 'The Girl Next Door'];
|
5
5
|
const FontLoader = props => {
|
6
6
|
const {
|
7
7
|
otherProps,
|
@@ -15,7 +15,7 @@ const FontLoader = props => {
|
|
15
15
|
let retryCount = 0;
|
16
16
|
function loadNextBatch() {
|
17
17
|
if (currentIndex >= families?.length) {
|
18
|
-
console.log(
|
18
|
+
console.log('All fonts have been loaded');
|
19
19
|
return;
|
20
20
|
}
|
21
21
|
const batch = families?.slice(currentIndex, currentIndex + batchSize);
|
@@ -68,13 +68,13 @@ const FontLoader = props => {
|
|
68
68
|
});
|
69
69
|
} else {
|
70
70
|
function correctFontArray(fontString) {
|
71
|
-
let fontsArray = fontString.split(
|
71
|
+
let fontsArray = fontString.split(',');
|
72
72
|
let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
|
73
73
|
return cleanedFontsArray;
|
74
74
|
}
|
75
75
|
function sanitizeFontFamily(fontFamily) {
|
76
76
|
const correctedFonts = correctFontArray(fontFamily);
|
77
|
-
return correctedFonts.join(
|
77
|
+
return correctedFonts.join(', ');
|
78
78
|
}
|
79
79
|
const elements = Array.from(document?.querySelectorAll("*"));
|
80
80
|
const fontSet = new Set();
|
@@ -83,8 +83,8 @@ const FontLoader = props => {
|
|
83
83
|
fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
|
84
84
|
});
|
85
85
|
let families = Array.from(fontSet);
|
86
|
-
families = correctFontArray(families.join(
|
87
|
-
families = families.map(font => font.replace(/\"/g,
|
86
|
+
families = correctFontArray(families.join(', '));
|
87
|
+
families = families.map(font => font.replace(/\"/g, ''));
|
88
88
|
loadFontsInBatches(families);
|
89
89
|
}
|
90
90
|
}, []);
|
@@ -224,6 +224,7 @@ const iconList = {
|
|
224
224
|
fill: "#64748B"
|
225
225
|
}
|
226
226
|
}),
|
227
|
+
calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
|
227
228
|
freegrid: /*#__PURE__*/_jsx(CiGrid32, {
|
228
229
|
size: 20,
|
229
230
|
style: {
|
@@ -233,7 +234,6 @@ const iconList = {
|
|
233
234
|
text: /*#__PURE__*/_jsx(Text, {
|
234
235
|
stroke: "#64748B"
|
235
236
|
}),
|
236
|
-
calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
|
237
237
|
textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
|
238
238
|
phone: /*#__PURE__*/_jsx(Phone, {}),
|
239
239
|
briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
|
@@ -155,7 +155,6 @@ const RnD = props => {
|
|
155
155
|
switch (e.detail) {
|
156
156
|
case 1:
|
157
157
|
if (!enable) {
|
158
|
-
// focusSelection(editor, { path });
|
159
158
|
setSelectedElement({
|
160
159
|
path: str_path,
|
161
160
|
enable: 1,
|
@@ -163,6 +162,7 @@ const RnD = props => {
|
|
163
162
|
anchorEl: rndRef?.current
|
164
163
|
});
|
165
164
|
}
|
165
|
+
// ReactEditor.focus(editor);
|
166
166
|
break;
|
167
167
|
case 2:
|
168
168
|
focusSelection(editor, {
|
@@ -270,9 +270,7 @@ const RnD = props => {
|
|
270
270
|
dragOver: null
|
271
271
|
}, null);
|
272
272
|
}
|
273
|
-
// focusSelection(editor, { path: updated_at });
|
274
273
|
};
|
275
|
-
|
276
274
|
const onDragStart = e => {
|
277
275
|
e.preventDefault();
|
278
276
|
if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
|
@@ -314,6 +312,7 @@ const RnD = props => {
|
|
314
312
|
const onDrag = (e, d) => {
|
315
313
|
e.preventDefault();
|
316
314
|
const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
|
315
|
+
console.log(lines);
|
317
316
|
setAbsPosition({
|
318
317
|
...absPosition,
|
319
318
|
"--zIndex": 2000
|
@@ -104,13 +104,6 @@ const Section = props => {
|
|
104
104
|
};
|
105
105
|
const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
|
106
106
|
const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
|
107
|
-
let tempProps = {};
|
108
|
-
if (element?.type === "temp") {
|
109
|
-
tempProps = {
|
110
|
-
"--left": `${element?.left}px`,
|
111
|
-
"--top": `${element?.top}px`
|
112
|
-
};
|
113
|
-
}
|
114
107
|
const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
|
115
108
|
backgroundImage: `url(${sectionBackgroundImage})`
|
116
109
|
} : {};
|
@@ -129,10 +122,7 @@ const Section = props => {
|
|
129
122
|
}, theme);
|
130
123
|
return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
|
131
124
|
component: "div",
|
132
|
-
className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}
|
133
|
-
style: {
|
134
|
-
...tempProps
|
135
|
-
},
|
125
|
+
className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
|
136
126
|
sx: {
|
137
127
|
...classes.root,
|
138
128
|
background: sectionBgColor,
|
@@ -52,20 +52,6 @@ const SectionStyle = theme => ({
|
|
52
52
|
[theme.breakpoints.between("xs", "md")]: {
|
53
53
|
maxWidth: `320px !important`
|
54
54
|
}
|
55
|
-
},
|
56
|
-
"&.is-temp": {
|
57
|
-
position: "fixed",
|
58
|
-
background: "red",
|
59
|
-
padding: "12px",
|
60
|
-
width: "10px",
|
61
|
-
height: "10px",
|
62
|
-
// left: 0,
|
63
|
-
// top: 0,
|
64
|
-
margin: "auto",
|
65
|
-
left: "var(--left)",
|
66
|
-
top: "var(--top)",
|
67
|
-
zIndex: 1000,
|
68
|
-
pointerEvents: "none"
|
69
55
|
}
|
70
56
|
}
|
71
57
|
});
|
@@ -3,6 +3,6 @@ const mentions = props => {
|
|
3
3
|
CHARACTERS,
|
4
4
|
search
|
5
5
|
} = props;
|
6
|
-
return CHARACTERS.filter(c => c
|
6
|
+
return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
|
7
7
|
};
|
8
8
|
export default mentions;
|
@@ -4,7 +4,6 @@ import html2canvas from "html2canvas";
|
|
4
4
|
import { rectIntersection, closestCenter } from "@dnd-kit/core";
|
5
5
|
import { getQueryStrings } from "../utils/SlateUtilityFunctions";
|
6
6
|
import { Node } from "slate";
|
7
|
-
// import { focusUsingTemporaryNode } from "./RnD/focusNode";
|
8
7
|
const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
|
9
8
|
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
|
10
9
|
const RND_ITEMS = ["freegridItem", "freegridBox"];
|
@@ -255,9 +254,8 @@ export const focusSelection = (editor, {
|
|
255
254
|
const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
|
256
255
|
selectedDOM.scrollIntoView({
|
257
256
|
behavior: "smooth",
|
258
|
-
block: "
|
257
|
+
block: "center"
|
259
258
|
});
|
260
|
-
// focusUsingTemporaryNode(editor, selectedDOM);
|
261
259
|
} catch (err) {
|
262
260
|
console.log(err);
|
263
261
|
}
|
@@ -304,7 +302,7 @@ export const getTextColor = (color = "") => {
|
|
304
302
|
WebkitTextFillColor: "transparent !important",
|
305
303
|
color: "transparent !important",
|
306
304
|
caretColor: "black",
|
307
|
-
|
305
|
+
'& span': {
|
308
306
|
color: "transparent !important"
|
309
307
|
}
|
310
308
|
} : {
|
@@ -13,7 +13,7 @@ const getStartEnd = ({
|
|
13
13
|
// Get start and end, modify it as we move along.
|
14
14
|
let [start, end] = Range.edges(selection);
|
15
15
|
|
16
|
-
// Move backwards
|
16
|
+
// Move backwards to find the start of the word
|
17
17
|
while (true) {
|
18
18
|
const before = Editor.before(editor, start, {
|
19
19
|
unit: "character"
|
@@ -22,16 +22,15 @@ const getStartEnd = ({
|
|
22
22
|
anchor: before,
|
23
23
|
focus: start
|
24
24
|
});
|
25
|
-
if (before
|
26
|
-
|
27
|
-
|
28
|
-
|
25
|
+
if (before) {
|
26
|
+
if (wordBefore.trim() === "") {
|
27
|
+
break;
|
28
|
+
} else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
|
29
|
+
start = before;
|
30
|
+
} else {
|
31
|
+
start = before;
|
29
32
|
break;
|
30
33
|
}
|
31
|
-
} else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
|
32
|
-
// reached the character end
|
33
|
-
start = before;
|
34
|
-
break;
|
35
34
|
} else {
|
36
35
|
break;
|
37
36
|
}
|
@@ -41,11 +40,38 @@ const getStartEnd = ({
|
|
41
40
|
focus: end
|
42
41
|
};
|
43
42
|
const word = Editor.string(editor, wordRange);
|
43
|
+
const firstChar = word[0];
|
44
|
+
|
45
|
+
// Handle the commands
|
46
|
+
if (firstChar === '@') {
|
47
|
+
// Only trigger @ if preceded by a space
|
48
|
+
const isPrecededBySpace = Editor.string(editor, {
|
49
|
+
anchor: {
|
50
|
+
path: start.path,
|
51
|
+
offset: start.offset - 1
|
52
|
+
},
|
53
|
+
focus: start
|
54
|
+
}).trim() === "";
|
55
|
+
if (isPrecededBySpace) {
|
56
|
+
return {
|
57
|
+
word,
|
58
|
+
search: word.substring(1),
|
59
|
+
target: wordRange,
|
60
|
+
type: TYPES[firstChar]
|
61
|
+
};
|
62
|
+
}
|
63
|
+
} else if (firstChar === '/') {
|
64
|
+
return {
|
65
|
+
word,
|
66
|
+
search: word.substring(1),
|
67
|
+
target: wordRange,
|
68
|
+
type: TYPES[firstChar]
|
69
|
+
};
|
70
|
+
}
|
44
71
|
return {
|
45
|
-
word,
|
46
|
-
|
47
|
-
|
48
|
-
type: TYPES[word[0]]
|
72
|
+
word: "",
|
73
|
+
wordRange: null,
|
74
|
+
type: null
|
49
75
|
};
|
50
76
|
} catch (err) {
|
51
77
|
return {
|
@@ -9,7 +9,12 @@ import withLayout from "../plugins/withLayout";
|
|
9
9
|
import withHtml from "../plugins/withHTML";
|
10
10
|
import withErrorHandling from "./withErrorHandling";
|
11
11
|
import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
|
12
|
-
const withCommon = (props,
|
13
|
-
|
12
|
+
const withCommon = (props, {
|
13
|
+
needLayout = false,
|
14
|
+
isChatEditor = false
|
15
|
+
}) => {
|
16
|
+
const editor = needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
|
17
|
+
editor.isChatEditor = isChatEditor;
|
18
|
+
return editor;
|
14
19
|
};
|
15
20
|
export default withCommon;
|
@@ -114,6 +114,23 @@ const withHtml = editor => {
|
|
114
114
|
const defaultInsert = loopChildren(decoded, true);
|
115
115
|
if (defaultInsert) {
|
116
116
|
insertData(data);
|
117
|
+
// } else if (editor.isChatEditor) {
|
118
|
+
// // Only convert table to paragraphs if in chat editor mode
|
119
|
+
// const paragraphs = decoded.map(row =>
|
120
|
+
// row.children.map(cell =>
|
121
|
+
// cell.children.map(paragraph =>
|
122
|
+
// paragraph.children.map(textNode => textNode.text).join('')
|
123
|
+
// ).join(' ')
|
124
|
+
// ).join(' ')
|
125
|
+
// ).join('\n'); // Joining with a newline for separate paragraphs
|
126
|
+
|
127
|
+
// // Insert text as paragraphs
|
128
|
+
// const textNodes = paragraphs.split('\n').map(text => ({
|
129
|
+
// type: 'paragraph',
|
130
|
+
// children: [{ text }]
|
131
|
+
// }));
|
132
|
+
|
133
|
+
// Transforms.insertNodes(editor, textNodes);
|
117
134
|
} else {
|
118
135
|
// do not paste table, grid inside table cell
|
119
136
|
// only plain text for internal paste
|
@@ -127,6 +144,9 @@ const withHtml = editor => {
|
|
127
144
|
const parsed = new DOMParser().parseFromString(html, "text/html");
|
128
145
|
const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
|
129
146
|
if (isGoogleSheet) {
|
147
|
+
if (editor.isChatEditor) {
|
148
|
+
return;
|
149
|
+
}
|
130
150
|
const table = parsed.body.querySelector("table");
|
131
151
|
const colGrp = table.querySelector("colgroup");
|
132
152
|
if (colGrp) {
|
@@ -138,6 +158,15 @@ const withHtml = editor => {
|
|
138
158
|
}
|
139
159
|
const fragment = deserialize(parsed.body);
|
140
160
|
const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
|
161
|
+
let is_img_table = false;
|
162
|
+
formattedFragment.map(f => {
|
163
|
+
if (f.type === 'image' || f?.type?.includes('table')) {
|
164
|
+
is_img_table = true;
|
165
|
+
}
|
166
|
+
});
|
167
|
+
if (editor.isChatEditor && is_img_table) {
|
168
|
+
return;
|
169
|
+
}
|
141
170
|
handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
|
142
171
|
return;
|
143
172
|
} else {
|
@@ -529,15 +529,6 @@ export const getBlock = props => {
|
|
529
529
|
return /*#__PURE__*/_jsx(Code, {
|
530
530
|
...props
|
531
531
|
});
|
532
|
-
// RnD Focus Node
|
533
|
-
case "temp":
|
534
|
-
return /*#__PURE__*/_jsx("span", {
|
535
|
-
...attributes,
|
536
|
-
...element.attr,
|
537
|
-
contentEditable: false,
|
538
|
-
className: "temp-focus-node",
|
539
|
-
children: children
|
540
|
-
});
|
541
532
|
default:
|
542
533
|
return /*#__PURE__*/_jsx(SimpleText, {
|
543
534
|
...props,
|
@@ -1,9 +1,6 @@
|
|
1
1
|
import { Editor, Transforms, Element as SlateElement } from "slate";
|
2
2
|
import { Box } from "@mui/material";
|
3
3
|
import { fontFamilyMap, sizeMap } from "../font";
|
4
|
-
import Table from "../../Elements/Table/Table";
|
5
|
-
import TableRow from "../../Elements/Table/TableRow";
|
6
|
-
import TableCell from "../../Elements/Table/TableCell";
|
7
4
|
import Mentions from "../../Elements/Mentions/Mentions";
|
8
5
|
import CheckList from "../../Elements/List/CheckList";
|
9
6
|
import { isEmptyTextNode } from "../../helper";
|
@@ -340,31 +337,11 @@ export const getBlock = props => {
|
|
340
337
|
...props,
|
341
338
|
isEmpty: isEmpty
|
342
339
|
});
|
343
|
-
case "table":
|
344
|
-
return /*#__PURE__*/_jsx(Table, {
|
345
|
-
...props
|
346
|
-
});
|
347
|
-
case "table-head":
|
348
|
-
return /*#__PURE__*/_jsx("thead", {
|
349
|
-
children: children
|
350
|
-
});
|
351
|
-
case "table-body":
|
352
|
-
return /*#__PURE__*/_jsx("tbody", {
|
353
|
-
children: children
|
354
|
-
});
|
355
|
-
case "table-row":
|
356
|
-
return /*#__PURE__*/_jsx(TableRow, {
|
357
|
-
...props
|
358
|
-
});
|
359
|
-
case "table-cell":
|
360
|
-
return /*#__PURE__*/_jsx(TableCell, {
|
361
|
-
...props
|
362
|
-
});
|
363
340
|
case "mention":
|
364
341
|
return /*#__PURE__*/_jsx(Mentions, {
|
365
342
|
...props
|
366
343
|
});
|
367
344
|
default:
|
368
|
-
return;
|
345
|
+
return null;
|
369
346
|
}
|
370
347
|
};
|
@@ -50,9 +50,10 @@ const useResize = ({
|
|
50
50
|
setSize(currentSize => {
|
51
51
|
const calcWidth = (currentSize.width || width) + e.movementX;
|
52
52
|
const cWP = calcWidth / width * 100;
|
53
|
+
const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
|
53
54
|
const calc = {
|
54
|
-
width: calcWidth,
|
55
|
-
height: (
|
55
|
+
width: Math.max(calcWidth, 140),
|
56
|
+
height: Math.max(calcHeight, 50),
|
56
57
|
widthInPercent: cWP > 100 ? 100 : cWP
|
57
58
|
};
|
58
59
|
latest = calc;
|
@@ -285,40 +285,4 @@ export const enterEvent = (e, editor, isMobile) => {
|
|
285
285
|
} catch (err) {
|
286
286
|
console.log(err);
|
287
287
|
}
|
288
|
-
};
|
289
|
-
export const upDownArrowKeyEvents = (e, editor) => {
|
290
|
-
try {
|
291
|
-
const {
|
292
|
-
selection
|
293
|
-
} = editor;
|
294
|
-
if (!selection || Range.isCollapsed(selection)) {
|
295
|
-
return;
|
296
|
-
}
|
297
|
-
const parentPath = selection.anchor.path.slice(0, -1);
|
298
|
-
const nextNodePath = [...parentPath];
|
299
|
-
const index = parentPath[parentPath.length - 1];
|
300
|
-
const parentNode = Editor.parent(editor, parentPath);
|
301
|
-
if (parentNode.children[index + 1]) {
|
302
|
-
nextNodePath[parentPath.length - 1] += 1;
|
303
|
-
} else {
|
304
|
-
return;
|
305
|
-
}
|
306
|
-
Transforms.move(editor, {
|
307
|
-
distance: 0,
|
308
|
-
unit: 'offset',
|
309
|
-
reverse: false
|
310
|
-
});
|
311
|
-
Transforms.select(editor, {
|
312
|
-
anchor: {
|
313
|
-
path: nextNodePath,
|
314
|
-
offset: 0
|
315
|
-
},
|
316
|
-
focus: {
|
317
|
-
path: nextNodePath,
|
318
|
-
offset: 0
|
319
|
-
}
|
320
|
-
});
|
321
|
-
} catch (err) {
|
322
|
-
console.log(err);
|
323
|
-
}
|
324
288
|
};
|
package/package.json
CHANGED
@@ -1,70 +0,0 @@
|
|
1
|
-
import { Editor, Transforms } from "slate";
|
2
|
-
import { ReactEditor } from "slate-react";
|
3
|
-
const TEMP_NODE_ID = "temp-focus-node";
|
4
|
-
const ensureTemporaryFocusNode = (editor, selectedDOM) => {
|
5
|
-
// Check if the temporary focus node already exists
|
6
|
-
const {
|
7
|
-
left,
|
8
|
-
top
|
9
|
-
} = selectedDOM?.getBoundingClientRect();
|
10
|
-
const [tempNodeEntry] = Editor.nodes(editor, {
|
11
|
-
at: [],
|
12
|
-
match: n => n.temp === TEMP_NODE_ID
|
13
|
-
});
|
14
|
-
if (!tempNodeEntry) {
|
15
|
-
// If not, insert the temporary focus node at the start of the editor
|
16
|
-
Transforms.insertNodes(editor, {
|
17
|
-
type: "temp",
|
18
|
-
temp: TEMP_NODE_ID,
|
19
|
-
children: [{
|
20
|
-
text: ""
|
21
|
-
}],
|
22
|
-
left,
|
23
|
-
top
|
24
|
-
}, {
|
25
|
-
at: [editor.children.length]
|
26
|
-
});
|
27
|
-
} else {
|
28
|
-
Transforms.setNodes(editor, {
|
29
|
-
type: "temp",
|
30
|
-
temp: TEMP_NODE_ID,
|
31
|
-
children: [{
|
32
|
-
text: ""
|
33
|
-
}],
|
34
|
-
left,
|
35
|
-
top
|
36
|
-
}, {
|
37
|
-
at: tempNodeEntry[1]
|
38
|
-
});
|
39
|
-
}
|
40
|
-
};
|
41
|
-
export const focusUsingTemporaryNode = (editor, selectedDOM) => {
|
42
|
-
// de-select and select
|
43
|
-
Transforms.deselect(editor);
|
44
|
-
|
45
|
-
// Ensure the temporary node exists
|
46
|
-
ensureTemporaryFocusNode(editor, selectedDOM);
|
47
|
-
|
48
|
-
// Select the temporary node without causing scroll
|
49
|
-
const [tempNodeEntry] = Editor.nodes(editor, {
|
50
|
-
at: [],
|
51
|
-
match: n => n.temp === TEMP_NODE_ID
|
52
|
-
});
|
53
|
-
if (tempNodeEntry) {
|
54
|
-
const [, path] = tempNodeEntry;
|
55
|
-
Transforms.select(editor, path); // Move selection to the temp node
|
56
|
-
}
|
57
|
-
|
58
|
-
ReactEditor.focus(editor);
|
59
|
-
};
|
60
|
-
export const cleanupTemporaryFocusNode = editor => {
|
61
|
-
// Remove the temporary focus node if it exists
|
62
|
-
for (const [node, path] of Editor.nodes(editor, {
|
63
|
-
at: [],
|
64
|
-
match: n => n.temp === TEMP_NODE_ID
|
65
|
-
})) {
|
66
|
-
Transforms.removeNodes(editor, {
|
67
|
-
at: path
|
68
|
-
});
|
69
|
-
}
|
70
|
-
};
|