@flozy/editor 4.2.3 → 4.2.5
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +5 -1
- package/dist/Editor/Elements/Embed/Embed.css +1 -1
- package/dist/Editor/Elements/Embed/Video.js +8 -5
- package/dist/Editor/Elements/Form/Form.js +2 -0
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +5 -5
- package/dist/Editor/Elements/FreeGrid/styles.js +16 -1
- package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +7 -1
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -0
- package/dist/Editor/common/Icon.js +3 -1
- package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +4 -2
- package/dist/Editor/common/RnD/ElementOptions/index.js +6 -2
- package/dist/Editor/common/RnD/ElementOptions/styles.js +15 -7
- package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +0 -1
- package/dist/Editor/common/RnD/ElementSettings/index.js +3 -2
- package/dist/Editor/common/RnD/ElementSettings/styles.js +37 -4
- package/dist/Editor/common/RnD/OptionsPopup/index.js +6 -1
- package/dist/Editor/common/RnD/OptionsPopup/style.js +25 -4
- package/dist/Editor/common/RnD/index.js +2 -1
- package/dist/Editor/common/Section/index.js +1 -0
- package/dist/Editor/common/Shorthands/mentions.js +1 -1
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +1 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +1 -0
- package/dist/Editor/common/StyleBuilder/formStyle.js +1 -0
- package/dist/Editor/common/iconslist.js +3 -3
- package/dist/Editor/plugins/withHTML.js +26 -3
- package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js +0 -23
- package/dist/Editor/utils/events.js +37 -0
- package/package.json +2 -2
@@ -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, upArrowEvent, downArrowEvent } from "./utils/events";
|
14
14
|
import withCommon from "./hooks/withCommon";
|
15
15
|
import DialogWrapper from "./DialogWrapper";
|
16
16
|
import { serializeToText } from "./utils/serializeToText";
|
@@ -379,6 +379,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
379
379
|
});
|
380
380
|
}
|
381
381
|
}
|
382
|
+
} else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
|
383
|
+
upArrowEvent(event, editor);
|
384
|
+
} else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
|
385
|
+
downArrowEvent(event, editor);
|
382
386
|
}
|
383
387
|
}, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
|
384
388
|
const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
|
@@ -176,11 +176,11 @@ const Video = ({
|
|
176
176
|
at: path
|
177
177
|
});
|
178
178
|
};
|
179
|
-
const getWidth =
|
179
|
+
const getWidth = () => {
|
180
180
|
if (resizing) {
|
181
181
|
return {
|
182
|
-
width: `${size.width}px
|
183
|
-
height: url ? `${size.height}px` : "auto"
|
182
|
+
width: size.width ? `${size.width}px` : "100%",
|
183
|
+
height: url ? `${size.height || 300}px` : "auto"
|
184
184
|
};
|
185
185
|
} else {
|
186
186
|
return {
|
@@ -194,7 +194,7 @@ const Video = ({
|
|
194
194
|
}, theme)
|
195
195
|
};
|
196
196
|
}
|
197
|
-
}
|
197
|
+
};
|
198
198
|
const embedURL = getEmbedURL(element);
|
199
199
|
const videoSX = groupByBreakpoint({
|
200
200
|
borderRadius: {
|
@@ -240,7 +240,10 @@ const Video = ({
|
|
240
240
|
...element,
|
241
241
|
embedURL: embedURL,
|
242
242
|
onSettings: onSettings,
|
243
|
-
videoSX: videoSX
|
243
|
+
videoSX: videoSX,
|
244
|
+
url: url,
|
245
|
+
readOnly: readOnly,
|
246
|
+
resizing: resizing
|
244
247
|
}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
|
245
248
|
onPointerDown: onMouseDown,
|
246
249
|
style: {
|
@@ -401,6 +401,7 @@ const Form = props => {
|
|
401
401
|
component: "button",
|
402
402
|
onClick: onSubmitClick,
|
403
403
|
disabled: loading,
|
404
|
+
contentEditable: false,
|
404
405
|
sx: {
|
405
406
|
background: buttonProps?.bgColor || "rgb(30, 75, 122)",
|
406
407
|
borderWidth: "1px",
|
@@ -495,6 +496,7 @@ const Form = props => {
|
|
495
496
|
open: anchorEl !== null,
|
496
497
|
anchorEl: anchorEl,
|
497
498
|
onClose: handleClose,
|
499
|
+
contentEditable: false,
|
498
500
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
499
501
|
onClick: onMenuClick("edit"),
|
500
502
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
@@ -465,15 +465,15 @@ const FreeGrid = props => {
|
|
465
465
|
className: "freegrid-container freegrid-container-parent",
|
466
466
|
sx: {
|
467
467
|
...classes.root,
|
468
|
-
...freegridSX
|
468
|
+
...freegridSX,
|
469
|
+
background: sectionBgColor || "rgba(255,255,255,1)",
|
470
|
+
backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
|
471
|
+
backgroundSize: "cover"
|
469
472
|
},
|
470
473
|
"data-path": path.join("|"),
|
471
474
|
style: {
|
472
475
|
"--cols": `100%`,
|
473
|
-
"--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)
|
474
|
-
background: sectionBgColor,
|
475
|
-
backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
|
476
|
-
backgroundSize: "cover"
|
476
|
+
"--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
|
477
477
|
},
|
478
478
|
children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
|
479
479
|
placeholder: `Section (${sectionName || "Welcome"})`,
|
@@ -8,7 +8,6 @@ const useFreeGridStyles = ({
|
|
8
8
|
gridTemplateColumns: "var(--cols)",
|
9
9
|
gridTemplateRows: "var(--rows)",
|
10
10
|
gridGap: "0px",
|
11
|
-
backgroundColor: "#FFF",
|
12
11
|
padding: "0px",
|
13
12
|
height: "100%",
|
14
13
|
position: "static",
|
@@ -40,6 +39,17 @@ const useFreeGridStyles = ({
|
|
40
39
|
"&.enable-1, &.enable-2": {
|
41
40
|
"&.type_text": {
|
42
41
|
// height: "fit-content !important",
|
42
|
+
// for dark theme
|
43
|
+
// pages needs no color
|
44
|
+
"&.no-color": {
|
45
|
+
backgroundColor: "auto",
|
46
|
+
color: "auto",
|
47
|
+
"& .signed-btn": {
|
48
|
+
"& img": {
|
49
|
+
backgroundColor: "auto"
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
43
53
|
}
|
44
54
|
},
|
45
55
|
"&.enable-1:before, &.enable-2:before": {
|
@@ -158,6 +168,11 @@ const useFreeGridStyles = ({
|
|
158
168
|
},
|
159
169
|
|
160
170
|
"& .fgi_type_form": {
|
171
|
+
"& .form-field": {
|
172
|
+
"& input": {
|
173
|
+
caretColor: "auto !important"
|
174
|
+
}
|
175
|
+
},
|
161
176
|
"& .form-wrapper": {
|
162
177
|
padding: "0px !important"
|
163
178
|
},
|
@@ -152,9 +152,15 @@ function SelectTypography({
|
|
152
152
|
toggleBlock(editor, format);
|
153
153
|
if (option.type === "block") {
|
154
154
|
// reset old font size
|
155
|
+
let updatedValue = !selectedBlock ? {} : {
|
156
|
+
xs: "16px",
|
157
|
+
sm: "16px",
|
158
|
+
md: "16px",
|
159
|
+
lg: "16px"
|
160
|
+
};
|
155
161
|
addMarkData(editor, {
|
156
162
|
format: "fontSize",
|
157
|
-
value:
|
163
|
+
value: updatedValue
|
158
164
|
});
|
159
165
|
} else if (option.type === "mark") {
|
160
166
|
const size = sizeMap[option.value] || "";
|
@@ -231,7 +231,9 @@ const iconList = {
|
|
231
231
|
fill: "#64748B"
|
232
232
|
}
|
233
233
|
}),
|
234
|
-
text: /*#__PURE__*/_jsx(Text, {
|
234
|
+
text: /*#__PURE__*/_jsx(Text, {
|
235
|
+
stroke: "#64748B"
|
236
|
+
}),
|
235
237
|
textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
|
236
238
|
phone: /*#__PURE__*/_jsx(Phone, {}),
|
237
239
|
briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
|
@@ -13,13 +13,15 @@ const LinkIcon = () => {
|
|
13
13
|
stroke: "#000000",
|
14
14
|
strokeWidth: "1.5",
|
15
15
|
strokeLinecap: "round",
|
16
|
-
strokeLinejoin: "round"
|
16
|
+
strokeLinejoin: "round",
|
17
|
+
className: "strokePath"
|
17
18
|
}), /*#__PURE__*/_jsx("path", {
|
18
19
|
d: "M7.8418 10.1582C8.45613 10.7723 9.28918 11.1173 10.1578 11.1173C11.0264 11.1173 11.8595 10.7723 12.4738 10.1582L14.7905 7.84222C15.4049 7.22788 15.75 6.39466 15.75 5.52585C15.75 4.65704 15.4049 3.82381 14.7905 3.20947C14.1762 2.59513 13.343 2.25 12.4742 2.25C11.6054 2.25 10.7721 2.59513 10.1578 3.20947L8.9998 4.36747",
|
19
20
|
stroke: "#000000",
|
20
21
|
strokeWidth: "1.5",
|
21
22
|
strokeLinecap: "round",
|
22
|
-
strokeLinejoin: "round"
|
23
|
+
strokeLinejoin: "round",
|
24
|
+
className: "strokePath"
|
23
25
|
})]
|
24
26
|
});
|
25
27
|
};
|
@@ -15,9 +15,12 @@ const ElementOptions = props => {
|
|
15
15
|
actions,
|
16
16
|
actionsMap,
|
17
17
|
optionsProps,
|
18
|
-
selectedAction
|
18
|
+
selectedAction,
|
19
|
+
theme
|
19
20
|
} = props;
|
20
|
-
const classes = useElementOptionsStyle(
|
21
|
+
const classes = useElementOptionsStyle({
|
22
|
+
theme
|
23
|
+
});
|
21
24
|
const [menu, setMenu] = useState({});
|
22
25
|
const openMenu = Boolean(menu.anchorEl);
|
23
26
|
const {
|
@@ -80,6 +83,7 @@ const ElementOptions = props => {
|
|
80
83
|
children: actions.map(renderAction)
|
81
84
|
})
|
82
85
|
}), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {
|
86
|
+
theme: theme,
|
83
87
|
open: openMenu,
|
84
88
|
...menu,
|
85
89
|
handleClose: handleClose,
|
@@ -1,4 +1,6 @@
|
|
1
|
-
const useElementOptionsStyle = (
|
1
|
+
const useElementOptionsStyle = ({
|
2
|
+
theme
|
3
|
+
}) => ({
|
2
4
|
root: {
|
3
5
|
zIndex: 1200,
|
4
6
|
"& .papper-root": {
|
@@ -10,30 +12,36 @@ const useElementOptionsStyle = () => ({
|
|
10
12
|
fontSize: "10px",
|
11
13
|
textTransform: "none",
|
12
14
|
marginRight: "6px",
|
13
|
-
background:
|
15
|
+
background: theme?.palette?.editor?.background,
|
14
16
|
boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
|
15
17
|
"&.active,&:hover ": {
|
16
|
-
color:
|
18
|
+
color: theme?.palette?.editor?.textColor,
|
17
19
|
background: "#1976d2"
|
18
20
|
}
|
19
21
|
},
|
20
22
|
"& .MuiIconButton-root": {
|
21
23
|
padding: "4px",
|
22
|
-
color:
|
23
|
-
background:
|
24
|
+
color: theme?.palette?.editor?.textColor,
|
25
|
+
background: theme?.palette?.editor?.background,
|
24
26
|
borderRadius: "50%",
|
25
27
|
marginRight: "6px",
|
26
28
|
boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
|
27
29
|
border: "1px solid transparent",
|
30
|
+
"& .strokePath": {
|
31
|
+
stroke: theme?.palette?.editor?.textColor
|
32
|
+
},
|
28
33
|
"& svg": {
|
29
34
|
width: "16px",
|
30
35
|
height: "16px"
|
31
36
|
},
|
32
37
|
"&.active,&:hover ": {
|
33
38
|
color: "#2563EB",
|
34
|
-
background:
|
39
|
+
background: theme?.palette?.editor?.background,
|
35
40
|
border: "1px solid #2563EB",
|
36
|
-
boxShadow: "1px 1px 3px #2563EB"
|
41
|
+
boxShadow: "1px 1px 3px #2563EB",
|
42
|
+
"& .strokePath": {
|
43
|
+
stroke: "#2563EB"
|
44
|
+
}
|
37
45
|
}
|
38
46
|
}
|
39
47
|
}
|
@@ -13,6 +13,7 @@ const ButtonSettings = props => {
|
|
13
13
|
const item_path = path?.split("|").map(m => parseInt(m));
|
14
14
|
const element_path = [...item_path, 0];
|
15
15
|
const element = Node.get(editor, element_path);
|
16
|
+
const styleMaps = buttonStyle?.filter(f => !f?.hideOnFGS);
|
16
17
|
const onChange = data => {
|
17
18
|
const updated_props = {
|
18
19
|
...element,
|
@@ -32,9 +33,9 @@ const ButtonSettings = props => {
|
|
32
33
|
return /*#__PURE__*/_jsx(Box, {
|
33
34
|
component: "div",
|
34
35
|
className: "item-w",
|
35
|
-
children:
|
36
|
+
children: styleMaps?.map((m, i) => {
|
36
37
|
return /*#__PURE__*/_jsx(StyleContent, {
|
37
|
-
renderTabs:
|
38
|
+
renderTabs: styleMaps,
|
38
39
|
value: m.value,
|
39
40
|
element: element,
|
40
41
|
onChange: onChange,
|
@@ -14,6 +14,7 @@ const FormSettings = props => {
|
|
14
14
|
const item_path = path?.split("|").map(m => parseInt(m));
|
15
15
|
const element_path = [...item_path];
|
16
16
|
const element = Node.get(editor, element_path);
|
17
|
+
const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
|
17
18
|
const onChange = data => {
|
18
19
|
const currentPath = ReactEditor.findPath(editor, element);
|
19
20
|
const updateData = {
|
@@ -32,9 +33,9 @@ const FormSettings = props => {
|
|
32
33
|
return /*#__PURE__*/_jsx(Box, {
|
33
34
|
component: "div",
|
34
35
|
className: "item-w",
|
35
|
-
children:
|
36
|
+
children: styleMaps?.map((m, i) => {
|
36
37
|
return /*#__PURE__*/_jsx(StyleContent, {
|
37
|
-
renderTabs:
|
38
|
+
renderTabs: styleMaps,
|
38
39
|
value: m.value,
|
39
40
|
element: element,
|
40
41
|
customElement: element?.children?.[0] || null,
|
@@ -4,9 +4,10 @@ import OtherSettings from "./OtherSettings";
|
|
4
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
5
5
|
const ElementSettings = props => {
|
6
6
|
const {
|
7
|
-
currentAction
|
7
|
+
currentAction,
|
8
|
+
theme
|
8
9
|
} = props;
|
9
|
-
const classes = useElementSettingsStyle();
|
10
|
+
const classes = useElementSettingsStyle(theme);
|
10
11
|
const Settings = OtherSettings[currentAction];
|
11
12
|
return Settings ? /*#__PURE__*/_jsx(Settings, {
|
12
13
|
classes: classes,
|
@@ -1,14 +1,23 @@
|
|
1
1
|
const useElementSettingsStyle = theme => ({
|
2
2
|
root: {
|
3
3
|
zIndex: 1200,
|
4
|
-
background:
|
4
|
+
background: theme?.palette?.editor?.background,
|
5
5
|
borderRadius: "10px",
|
6
6
|
overflow: "hidden",
|
7
7
|
boxShadow: "0px 0px 12px 4px #00000014",
|
8
8
|
padding: "10px 16px",
|
9
9
|
"& .papper-root": {
|
10
10
|
width: "312px",
|
11
|
-
boxShadow: "none"
|
11
|
+
boxShadow: "none",
|
12
|
+
background: theme?.palette?.editor?.background,
|
13
|
+
"& .MuiInputBase-root": {
|
14
|
+
color: theme?.palette?.editor?.textColor
|
15
|
+
}
|
16
|
+
},
|
17
|
+
"& .fw-dd": {
|
18
|
+
"& input": {
|
19
|
+
padding: "7px !important"
|
20
|
+
}
|
12
21
|
},
|
13
22
|
".MuiDivider-root": {
|
14
23
|
background: "#DCE4EC"
|
@@ -17,7 +26,8 @@ const useElementSettingsStyle = theme => ({
|
|
17
26
|
borderRadius: "4px",
|
18
27
|
width: "26px",
|
19
28
|
height: "26px",
|
20
|
-
background:
|
29
|
+
background: theme?.palette?.editor?.background,
|
30
|
+
color: theme?.palette?.editor?.textColor,
|
21
31
|
padding: "7px"
|
22
32
|
},
|
23
33
|
".MuiAccordionSummary-root": {
|
@@ -47,7 +57,29 @@ const useElementSettingsStyle = theme => ({
|
|
47
57
|
"& .item-w": {
|
48
58
|
maxHeight: "300px",
|
49
59
|
overflowX: "hidden",
|
50
|
-
overflowY: "auto"
|
60
|
+
overflowY: "auto",
|
61
|
+
background: theme?.palette?.editor?.background,
|
62
|
+
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
63
|
+
color: theme?.palette?.editor?.textColor
|
64
|
+
},
|
65
|
+
"& .MuiInputBase-root, input": {
|
66
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
67
|
+
},
|
68
|
+
"& .borderInput": {
|
69
|
+
background: theme?.palette?.editor?.background,
|
70
|
+
color: theme?.palette?.editor?.textColor
|
71
|
+
},
|
72
|
+
"& .MuiCheckbox-root": {
|
73
|
+
"& svg": {
|
74
|
+
fill: theme?.palette?.editor?.textColor
|
75
|
+
}
|
76
|
+
},
|
77
|
+
"& .fillPath": {
|
78
|
+
fill: theme?.palette?.editor?.textColor
|
79
|
+
},
|
80
|
+
"& .MuiIconButton-root": {
|
81
|
+
color: theme?.palette?.editor?.textColor
|
82
|
+
}
|
51
83
|
},
|
52
84
|
"& .item-wrapper": {
|
53
85
|
fontFamily: "sans-serif",
|
@@ -62,6 +94,7 @@ const useElementSettingsStyle = theme => ({
|
|
62
94
|
fontWeight: "bold",
|
63
95
|
justifyContent: "space-between",
|
64
96
|
alignItems: "center",
|
97
|
+
color: theme?.palette?.editor?.textColor,
|
65
98
|
"& .MuiIconButton-root": {
|
66
99
|
padding: "4px",
|
67
100
|
"& svg": {
|
@@ -6,7 +6,12 @@ import useOptionsPopupStyle from "./style";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
7
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
8
|
const OptionsPopup = props => {
|
9
|
-
const
|
9
|
+
const {
|
10
|
+
theme
|
11
|
+
} = props;
|
12
|
+
const classes = useOptionsPopupStyle({
|
13
|
+
theme
|
14
|
+
});
|
10
15
|
const {
|
11
16
|
title,
|
12
17
|
children,
|
@@ -1,7 +1,9 @@
|
|
1
|
-
const useOptionsPopupStyle = (
|
1
|
+
const useOptionsPopupStyle = ({
|
2
|
+
theme
|
3
|
+
}) => ({
|
2
4
|
root: {
|
3
5
|
zIndex: 1200,
|
4
|
-
background:
|
6
|
+
background: theme?.palette?.editor?.background,
|
5
7
|
borderRadius: "7px",
|
6
8
|
overflow: "hidden",
|
7
9
|
boxShadow: "1px 1px 3px rgba(0,0,0,0.3)",
|
@@ -9,8 +11,24 @@ const useOptionsPopupStyle = () => ({
|
|
9
11
|
"& .papper-root": {
|
10
12
|
width: "270px",
|
11
13
|
boxShadow: "none",
|
12
|
-
border:
|
13
|
-
borderRadius: "7px"
|
14
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`,
|
15
|
+
borderRadius: "7px",
|
16
|
+
background: theme?.palette?.editor?.background,
|
17
|
+
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
18
|
+
color: theme?.palette?.editor?.textColor
|
19
|
+
},
|
20
|
+
"& .MuiInputBase-root, input": {
|
21
|
+
border: `1px solid ${theme?.palette?.editor?.borderColor}`
|
22
|
+
},
|
23
|
+
"& .borderInput": {
|
24
|
+
background: theme?.palette?.editor?.background,
|
25
|
+
color: theme?.palette?.editor?.textColor
|
26
|
+
},
|
27
|
+
"& .MuiCheckbox-root": {
|
28
|
+
"& svg": {
|
29
|
+
fill: theme?.palette?.editor?.textColor
|
30
|
+
}
|
31
|
+
}
|
14
32
|
},
|
15
33
|
"& .item-list-wrpr": {
|
16
34
|
paddingTop: "0px",
|
@@ -18,6 +36,7 @@ const useOptionsPopupStyle = () => ({
|
|
18
36
|
padding: "12px 12px",
|
19
37
|
"& .MuiListItemButton-root": {
|
20
38
|
borderRadius: "7px",
|
39
|
+
color: theme?.palette?.editor?.textColor,
|
21
40
|
"&:hover": {
|
22
41
|
color: "#000",
|
23
42
|
background: "rgba(233, 243, 254, 1)"
|
@@ -36,6 +55,7 @@ const useOptionsPopupStyle = () => ({
|
|
36
55
|
justifyContent: "space-between",
|
37
56
|
alignItems: "center",
|
38
57
|
position: "relative",
|
58
|
+
color: theme?.palette?.editor?.textColor,
|
39
59
|
"&:after": {
|
40
60
|
position: "absolute",
|
41
61
|
width: "100%",
|
@@ -46,6 +66,7 @@ const useOptionsPopupStyle = () => ({
|
|
46
66
|
},
|
47
67
|
"& .MuiIconButton-root": {
|
48
68
|
padding: "4px",
|
69
|
+
color: theme?.palette?.editor?.textColor,
|
49
70
|
"& svg": {
|
50
71
|
width: "16px",
|
51
72
|
height: "16px"
|
@@ -525,7 +525,8 @@ const RnD = props => {
|
|
525
525
|
actionsMap: actionsMap,
|
526
526
|
optionsProps: optionsProps,
|
527
527
|
selectedAction: currentAction,
|
528
|
-
path: str_path
|
528
|
+
path: str_path,
|
529
|
+
theme: theme
|
529
530
|
}) : null, /*#__PURE__*/_jsx(ElementSettings, {
|
530
531
|
open: Boolean(currentAction),
|
531
532
|
currentAction: currentAction,
|
@@ -62,6 +62,7 @@ const Section = props => {
|
|
62
62
|
return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
|
63
63
|
component: "div",
|
64
64
|
className: `element-toolbar no-border-button hr section-tw sectionIcon`,
|
65
|
+
contentEditable: false,
|
65
66
|
style: fromPopper ? {
|
66
67
|
position: "unset",
|
67
68
|
marginLeft: "28px",
|
@@ -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;
|
@@ -1779,19 +1779,19 @@ export const Text = props => /*#__PURE__*/_jsxs("svg", {
|
|
1779
1779
|
xmlns: "http://www.w3.org/2000/svg",
|
1780
1780
|
children: [/*#__PURE__*/_jsx("path", {
|
1781
1781
|
d: "M2.5 4.1825V3.12083C2.5 2.45 3.0425 1.91333 3.7075 1.91333H12.1775C12.8483 1.91333 13.385 2.45583 13.385 3.12083V4.1825",
|
1782
|
-
stroke: "#000",
|
1782
|
+
stroke: props?.stroke || "#000",
|
1783
1783
|
strokeWidth: "1.5",
|
1784
1784
|
strokeLinecap: "round",
|
1785
1785
|
strokeLinejoin: "round"
|
1786
1786
|
}), /*#__PURE__*/_jsx("path", {
|
1787
1787
|
d: "M7.94531 12.0866V2.39746",
|
1788
|
-
stroke: "#000",
|
1788
|
+
stroke: props?.stroke || "#000",
|
1789
1789
|
strokeWidth: "1.5",
|
1790
1790
|
strokeLinecap: "round",
|
1791
1791
|
strokeLinejoin: "round"
|
1792
1792
|
}), /*#__PURE__*/_jsx("path", {
|
1793
1793
|
d: "M5.64844 12.0867H10.2451",
|
1794
|
-
stroke: "#000",
|
1794
|
+
stroke: props?.stroke || "#000",
|
1795
1795
|
strokeWidth: "1.5",
|
1796
1796
|
strokeLinecap: "round",
|
1797
1797
|
strokeLinejoin: "round"
|
@@ -101,9 +101,6 @@ const withHtml = editor => {
|
|
101
101
|
return element.type === "image" ? true : isVoid(element);
|
102
102
|
};
|
103
103
|
editor.insertData = data => {
|
104
|
-
if (editor.isChatEditor) {
|
105
|
-
return;
|
106
|
-
}
|
107
104
|
const slateHTML = data?.getData("application/x-slate-fragment");
|
108
105
|
const html = data?.getData("text/html");
|
109
106
|
const currentEl = getCurrentElement(editor);
|
@@ -117,6 +114,23 @@ const withHtml = editor => {
|
|
117
114
|
const defaultInsert = loopChildren(decoded, true);
|
118
115
|
if (defaultInsert) {
|
119
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);
|
120
134
|
} else {
|
121
135
|
// do not paste table, grid inside table cell
|
122
136
|
// only plain text for internal paste
|
@@ -141,6 +155,15 @@ const withHtml = editor => {
|
|
141
155
|
}
|
142
156
|
const fragment = deserialize(parsed.body);
|
143
157
|
const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
|
158
|
+
let is_img_table = false;
|
159
|
+
formattedFragment.map(f => {
|
160
|
+
if (f.type === 'image' || f.type === 'table') {
|
161
|
+
is_img_table = true;
|
162
|
+
}
|
163
|
+
});
|
164
|
+
if (editor.isChatEditor && is_img_table) {
|
165
|
+
return;
|
166
|
+
}
|
144
167
|
handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
|
145
168
|
return;
|
146
169
|
} else {
|
@@ -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,26 +337,6 @@ 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
|
@@ -5,6 +5,7 @@ import { insertAccordion } from "./accordion";
|
|
5
5
|
import { isListItem } from "./helper";
|
6
6
|
import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
|
7
7
|
import EDITORCMDS from "../common/EditorCmds";
|
8
|
+
import { ReactEditor } from "slate-react";
|
8
9
|
const HOTKEYS = {
|
9
10
|
b: "bold",
|
10
11
|
i: "italic",
|
@@ -284,4 +285,40 @@ export const enterEvent = (e, editor, isMobile) => {
|
|
284
285
|
} catch (err) {
|
285
286
|
console.log(err);
|
286
287
|
}
|
288
|
+
};
|
289
|
+
export const upArrowEvent = (e, editor) => {
|
290
|
+
try {
|
291
|
+
const {
|
292
|
+
selection
|
293
|
+
} = editor;
|
294
|
+
if (!selection) return;
|
295
|
+
const prevNodePath = Editor.before(editor, selection, {
|
296
|
+
unit: "line"
|
297
|
+
});
|
298
|
+
if (prevNodePath) {
|
299
|
+
e.preventDefault();
|
300
|
+
Transforms.select(editor, prevNodePath);
|
301
|
+
ReactEditor.focus(editor);
|
302
|
+
}
|
303
|
+
} catch (err) {
|
304
|
+
console.log(err);
|
305
|
+
}
|
306
|
+
};
|
307
|
+
export const downArrowEvent = (e, editor) => {
|
308
|
+
try {
|
309
|
+
const {
|
310
|
+
selection
|
311
|
+
} = editor;
|
312
|
+
if (!selection) return;
|
313
|
+
const nextNodePath = Editor.after(editor, selection, {
|
314
|
+
unit: "line"
|
315
|
+
});
|
316
|
+
if (nextNodePath) {
|
317
|
+
e.preventDefault();
|
318
|
+
Transforms.select(editor, nextNodePath);
|
319
|
+
ReactEditor.focus(editor);
|
320
|
+
}
|
321
|
+
} catch (err) {
|
322
|
+
console.log(err);
|
323
|
+
}
|
287
324
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "4.2.
|
3
|
+
"version": "4.2.5",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -68,7 +68,7 @@
|
|
68
68
|
"storybook": "storybook dev -p 6006",
|
69
69
|
"build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
|
70
70
|
"publish:npm": "rm -rf dist && mkdir dist && babel src/components -d dist --copy-files",
|
71
|
-
"publish:local": "rm -rf /Users/
|
71
|
+
"publish:local": "rm -rf /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozyapp/client/node_modules/@flozy/editor/dist --copy-files"
|
72
72
|
},
|
73
73
|
"eslintConfig": {
|
74
74
|
"extends": [
|