@flozy/editor 1.7.9 → 1.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +12 -11
- package/dist/Editor/Elements/Attachments/Attachments.js +1 -1
- package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -1
- package/dist/Editor/Elements/SimpleText.js +4 -2
- package/dist/Editor/Elements/Table/TableCell.js +0 -1
- package/dist/Editor/MiniEditor.js +14 -12
- package/dist/Editor/Toolbar/Basic/index.js +53 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +4 -2
- package/dist/Editor/common/ColorPickerButton.js +8 -3
- package/dist/Editor/helper/index.js +5 -2
- package/dist/Editor/utils/attachments.js +0 -1
- package/dist/Editor/utils/helper.js +19 -0
- package/dist/Editor/utils/serializeToHTML.js +19 -2
- package/dist/Editor/utils/table.js +10 -12
- package/package.json +1 -1
@@ -346,11 +346,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
346
346
|
onChange: handleEditorChange,
|
347
347
|
children: [/*#__PURE__*/_jsx(DragAndDrop, {
|
348
348
|
children: /*#__PURE__*/_jsx(Overlay, {
|
349
|
-
children: /*#__PURE__*/
|
349
|
+
children: /*#__PURE__*/_jsx(Box, {
|
350
350
|
className: `${hasTopBanner() ? "has-topbanner" : ""}`,
|
351
351
|
sx: classes.slateWrapper,
|
352
352
|
id: "slate-wrapper-scroll-container",
|
353
|
-
children:
|
353
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
354
354
|
component: "div",
|
355
355
|
className: "max-content",
|
356
356
|
children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
|
@@ -397,15 +397,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
397
397
|
}), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
|
398
398
|
customProps: customProps,
|
399
399
|
toolbarOptions: toolbarOptions
|
400
|
-
}) : null
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
400
|
+
}) : null, footer && /*#__PURE__*/_jsx(Typography, {
|
401
|
+
sx: {
|
402
|
+
color: "rgb(100, 116, 139)",
|
403
|
+
fontSize: "13px",
|
404
|
+
paddingBottom: "12px"
|
405
|
+
},
|
406
|
+
align: "center",
|
407
|
+
children: footer
|
408
|
+
})]
|
409
|
+
})
|
409
410
|
})
|
410
411
|
})
|
411
412
|
}), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
|
@@ -17,7 +17,7 @@ const Attachments = props => {
|
|
17
17
|
date
|
18
18
|
} = element;
|
19
19
|
const getLastName = url?.split("/").pop();
|
20
|
-
const fileName = `${getLastName}`;
|
20
|
+
const fileName = `${decodeURI(getLastName)}`;
|
21
21
|
return /*#__PURE__*/_jsxs(Box, {
|
22
22
|
component: "div",
|
23
23
|
className: "attachment-wrpr-ev2",
|
@@ -3,6 +3,7 @@ import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
|
|
3
3
|
import { Box } from "@mui/material";
|
4
4
|
import { getPageSettings } from "../utils/pageSettings";
|
5
5
|
import { invertColor } from "../helper";
|
6
|
+
import { isTextSelected } from "../utils/helper";
|
6
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
8
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
9
|
const SimpleTextStyle = ({
|
@@ -68,8 +69,9 @@ const SimpleText = props => {
|
|
68
69
|
});
|
69
70
|
const selected = useSelected();
|
70
71
|
const path = ReactEditor.findPath(editor, element);
|
71
|
-
const showPlaceHolder = !readOnly && path.length === 1 && isEmpty
|
72
|
+
const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
|
72
73
|
const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
|
74
|
+
const opacity = !isTextSelected(editor?.selection);
|
73
75
|
return /*#__PURE__*/_jsxs(Box, {
|
74
76
|
...element.attr,
|
75
77
|
...attributes,
|
@@ -77,7 +79,7 @@ const SimpleText = props => {
|
|
77
79
|
sx: classes.root,
|
78
80
|
children: [children, /*#__PURE__*/_jsx("span", {
|
79
81
|
className: "placeholder-simple-text",
|
80
|
-
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? "Type / to browse elements" : ""
|
82
|
+
children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
|
81
83
|
})]
|
82
84
|
});
|
83
85
|
};
|
@@ -109,7 +109,6 @@ const TableCell = props => {
|
|
109
109
|
width: size?.width || tableSize?.cellWidth
|
110
110
|
} : {};
|
111
111
|
const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
|
112
|
-
console.log(borderColor, entireBorderColor);
|
113
112
|
return /*#__PURE__*/_jsxs("td", {
|
114
113
|
...element.attr,
|
115
114
|
...attributes,
|
@@ -1,12 +1,15 @@
|
|
1
1
|
import React, { useCallback, useRef, useState } from "react";
|
2
2
|
import { createEditor } from "slate";
|
3
|
-
import { Slate, Editable
|
3
|
+
import { Slate, Editable } from "slate-react";
|
4
4
|
import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
|
5
5
|
import { commands, mentionsEvent } from "./utils/events";
|
6
6
|
import useMentions from "./hooks/useMentions";
|
7
7
|
import Shorthands from "./common/Shorthands";
|
8
|
-
|
8
|
+
import BasicToolbar from "./Toolbar/Basic";
|
9
|
+
import withCommon from "./hooks/withCommon";
|
10
|
+
import "./Editor.css";
|
9
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
13
|
const initialValue = [{
|
11
14
|
type: "paragraph",
|
12
15
|
children: [{
|
@@ -21,6 +24,7 @@ const MiniEditor = props => {
|
|
21
24
|
// editor: collaborativeEditor,
|
22
25
|
readOnly,
|
23
26
|
miniEditorPlaceholder,
|
27
|
+
toolbars,
|
24
28
|
otherProps
|
25
29
|
} = props;
|
26
30
|
const {
|
@@ -28,13 +32,9 @@ const MiniEditor = props => {
|
|
28
32
|
// needLayout = true,
|
29
33
|
} = otherProps || {};
|
30
34
|
const mentionsRef = useRef();
|
31
|
-
const [editor] = useState(() =>
|
32
|
-
|
33
|
-
|
34
|
-
// if (collaborativeEditor) return collaborativeEditor;
|
35
|
-
// return withCommon(createEditor(), { needLayout });
|
36
|
-
// }, [collaborativeEditor]);
|
37
|
-
|
35
|
+
const [editor] = useState(() => withCommon(createEditor(), {
|
36
|
+
needLayout: false
|
37
|
+
}));
|
38
38
|
const isReadOnly = readOnly === "readonly";
|
39
39
|
const customProps = {
|
40
40
|
...(otherProps || {}),
|
@@ -102,14 +102,16 @@ const MiniEditor = props => {
|
|
102
102
|
customProps: customProps
|
103
103
|
});
|
104
104
|
}, []);
|
105
|
-
return /*#__PURE__*/
|
105
|
+
return /*#__PURE__*/_jsxs(Slate, {
|
106
106
|
editor: editor,
|
107
107
|
initialValue: initialValue,
|
108
|
-
children: /*#__PURE__*/_jsx(
|
108
|
+
children: [/*#__PURE__*/_jsx(BasicToolbar, {
|
109
|
+
toolbars: toolbars || []
|
110
|
+
}), /*#__PURE__*/_jsx(Editable, {
|
109
111
|
renderElement: renderElement,
|
110
112
|
renderLeaf: renderLeaf,
|
111
113
|
onKeyDown: onKeyDown
|
112
|
-
})
|
114
|
+
})]
|
113
115
|
});
|
114
116
|
};
|
115
117
|
MiniEditor.displayName = "MiniEditor";
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { useSlateStatic } from "slate-react";
|
3
|
+
import { Box, Tooltip } from "@mui/material";
|
4
|
+
import { toolbarGroups } from "../toolbarGroups";
|
5
|
+
import { MarkButton } from "../FormatTools";
|
6
|
+
import LinkButton from "../../Elements/Link/LinkButton";
|
7
|
+
import { addMarkData, isBlockActive } from "../../utils/SlateUtilityFunctions";
|
8
|
+
import ColorPickerButton from "../../common/ColorPickerButton";
|
9
|
+
import { colors } from "../../Elements/Color Picker/defaultColors";
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
11
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
12
|
+
const allTools = toolbarGroups.flat();
|
13
|
+
const BasicToolbar = ({
|
14
|
+
toolbars
|
15
|
+
}) => {
|
16
|
+
const editor = useSlateStatic();
|
17
|
+
|
18
|
+
// state
|
19
|
+
const [activeColor, setActiveColor] = useState("#000000");
|
20
|
+
const fontStyle = allTools.filter(f => f.basic);
|
21
|
+
const link = allTools.find(f => f.format?.indexOf("link") >= 0);
|
22
|
+
const handleTextColor = color => {
|
23
|
+
setActiveColor(color);
|
24
|
+
addMarkData(editor, {
|
25
|
+
format: 'color',
|
26
|
+
value: color
|
27
|
+
});
|
28
|
+
};
|
29
|
+
return /*#__PURE__*/_jsxs(Box, {
|
30
|
+
component: 'div',
|
31
|
+
className: "basic-toolbar",
|
32
|
+
children: [fontStyle?.map((m, i) => {
|
33
|
+
return /*#__PURE__*/_jsx(MarkButton, {
|
34
|
+
editor: editor,
|
35
|
+
...m
|
36
|
+
}, `pptool_mark_${i}_${m.id}`);
|
37
|
+
}), /*#__PURE__*/_jsx(LinkButton, {
|
38
|
+
active: isBlockActive(editor, link.format),
|
39
|
+
editor: editor
|
40
|
+
}, link.id), /*#__PURE__*/_jsx(Tooltip, {
|
41
|
+
arrow: true,
|
42
|
+
title: "Current Color",
|
43
|
+
children: /*#__PURE__*/_jsx(ColorPickerButton, {
|
44
|
+
value: activeColor || "#0000",
|
45
|
+
onSave: color => {
|
46
|
+
handleTextColor(color);
|
47
|
+
},
|
48
|
+
defaultColors: colors
|
49
|
+
})
|
50
|
+
})]
|
51
|
+
});
|
52
|
+
};
|
53
|
+
export default BasicToolbar;
|
@@ -45,12 +45,14 @@ export const toolbarGroups = [[{
|
|
45
45
|
id: 3,
|
46
46
|
format: "bold",
|
47
47
|
type: "mark",
|
48
|
-
title: "Bold"
|
48
|
+
title: "Bold",
|
49
|
+
basic: true
|
49
50
|
}, {
|
50
51
|
id: 4,
|
51
52
|
format: "italic",
|
52
53
|
type: "mark",
|
53
|
-
title: "Italic"
|
54
|
+
title: "Italic",
|
55
|
+
basic: true
|
54
56
|
}, {
|
55
57
|
id: 5,
|
56
58
|
format: "underline",
|
@@ -1,14 +1,15 @@
|
|
1
1
|
import React, { useState } from "react";
|
2
2
|
import { Grid, Button, Popover } from "@mui/material";
|
3
|
-
// import ColorPicker from "react-best-gradient-color-picker";
|
4
3
|
import ColorPickerTool from "react-gcolor-picker";
|
4
|
+
import { colors } from "../Elements/Color Picker/defaultColors";
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
7
7
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
8
8
|
const ColorPickerButton = props => {
|
9
9
|
const {
|
10
10
|
value,
|
11
|
-
onSave
|
11
|
+
onSave,
|
12
|
+
defaultColors = []
|
12
13
|
} = props;
|
13
14
|
const [anchorEl, setAnchorEl] = useState(null);
|
14
15
|
const [color, setColor] = useState(value);
|
@@ -60,7 +61,8 @@ const ColorPickerButton = props => {
|
|
60
61
|
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
61
62
|
gradient: true,
|
62
63
|
value: color,
|
63
|
-
onChange: setColor
|
64
|
+
onChange: setColor,
|
65
|
+
defaultColors: defaultColors || []
|
64
66
|
})
|
65
67
|
}), /*#__PURE__*/_jsxs("div", {
|
66
68
|
style: {
|
@@ -83,4 +85,7 @@ const ColorPickerButton = props => {
|
|
83
85
|
})]
|
84
86
|
});
|
85
87
|
};
|
88
|
+
ColorPickerButton.defaultProps = {
|
89
|
+
defaultColors: [...colors]
|
90
|
+
};
|
86
91
|
export default ColorPickerButton;
|
@@ -76,8 +76,11 @@ export function getEmbedURL(element) {
|
|
76
76
|
}
|
77
77
|
export const isEmptyTextNode = element => {
|
78
78
|
try {
|
79
|
-
|
80
|
-
|
79
|
+
if (element) {
|
80
|
+
const showPlaceholder = element?.children?.filter(f => HIDE_PLACHOLDERS.indexOf(f.type) > -1).length === 0;
|
81
|
+
return Node.string(element)?.length === 0 && showPlaceholder;
|
82
|
+
}
|
83
|
+
return false;
|
81
84
|
} catch (err) {
|
82
85
|
console.log(err);
|
83
86
|
return false;
|
@@ -52,4 +52,23 @@ export const absoluteLink = url => {
|
|
52
52
|
console.log(err);
|
53
53
|
return url;
|
54
54
|
}
|
55
|
+
};
|
56
|
+
export const isTextSelected = selection => {
|
57
|
+
try {
|
58
|
+
const {
|
59
|
+
anchor,
|
60
|
+
focus
|
61
|
+
} = selection || {};
|
62
|
+
if (anchor && focus) {
|
63
|
+
if (JSON.stringify(anchor?.path) !== JSON.stringify(focus?.path)) {
|
64
|
+
return true;
|
65
|
+
}
|
66
|
+
return false;
|
67
|
+
} else {
|
68
|
+
return false;
|
69
|
+
}
|
70
|
+
} catch (err) {
|
71
|
+
console.log(err);
|
72
|
+
return false;
|
73
|
+
}
|
55
74
|
};
|
@@ -1,5 +1,22 @@
|
|
1
|
-
import {
|
1
|
+
import { renderToString } from "react-dom/server";
|
2
|
+
import { getBlock } from "./SlateUtilityFunctions";
|
2
3
|
const serializeToHTML = nodes => {
|
3
|
-
|
4
|
+
try {
|
5
|
+
const htmlString = nodes.map(n => {
|
6
|
+
if (n) {
|
7
|
+
const props = {
|
8
|
+
element: n,
|
9
|
+
children: n?.children
|
10
|
+
};
|
11
|
+
const reactString = renderToString(getBlock(props));
|
12
|
+
return reactString;
|
13
|
+
} else {
|
14
|
+
return "";
|
15
|
+
}
|
16
|
+
});
|
17
|
+
console.log(htmlString);
|
18
|
+
} catch (err) {
|
19
|
+
console.log(err);
|
20
|
+
}
|
4
21
|
};
|
5
22
|
export default serializeToHTML;
|
@@ -219,24 +219,21 @@ export class TableUtil {
|
|
219
219
|
});
|
220
220
|
|
221
221
|
// cell bg entire
|
222
|
-
if (cellProps?.entireBgColor || tableProps?.borderColor) {
|
222
|
+
if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
|
223
223
|
const {
|
224
|
-
rows
|
225
|
-
columns
|
224
|
+
rows
|
226
225
|
} = tableProps;
|
227
226
|
for (let r = 0; r < rows; r++) {
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
});
|
234
|
-
}
|
227
|
+
Transforms.setNodes(this.editor, {
|
228
|
+
entireBgColor: cellProps?.entireBgColor
|
229
|
+
}, {
|
230
|
+
at: [currentCellPath[0], r, currentCellPath[2]]
|
231
|
+
});
|
235
232
|
}
|
236
233
|
}
|
237
234
|
|
238
235
|
// cell border all
|
239
|
-
if (tableProps?.borderColor) {
|
236
|
+
if (tableProps?.borderColor || rowProps?.borderColor) {
|
240
237
|
const {
|
241
238
|
rows,
|
242
239
|
columns
|
@@ -244,7 +241,8 @@ export class TableUtil {
|
|
244
241
|
for (let r = 0; r < rows; r++) {
|
245
242
|
for (let c = 0; c < columns; c++) {
|
246
243
|
Transforms.setNodes(this.editor, {
|
247
|
-
entireBorderColor: tableProps?.borderColor
|
244
|
+
entireBorderColor: tableProps?.borderColor,
|
245
|
+
rowBorder: rowProps?.borderColor
|
248
246
|
}, {
|
249
247
|
at: [currentCellPath[0], r, c]
|
250
248
|
});
|