@flozy/editor 1.2.2 → 1.2.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +37 -32
- package/dist/Editor/helper/index.js +10 -0
- package/package.json +2 -1
@@ -1,7 +1,7 @@
|
|
1
1
|
import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
|
2
2
|
import { createEditor } from "slate";
|
3
|
-
import { Slate, Editable } from "slate-react";
|
4
|
-
import
|
3
|
+
import { Slate, Editable, ReactEditor } from "slate-react";
|
4
|
+
import { useDebounce } from "use-debounce";
|
5
5
|
import Toolbar from "./Toolbar/Toolbar";
|
6
6
|
import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
|
7
7
|
import CodeToText from "./Elements/CodeToText/CodeToText";
|
@@ -15,8 +15,10 @@ import DialogWrapper from "./DialogWrapper";
|
|
15
15
|
import useTimeout from "./hooks/useTimeout";
|
16
16
|
import "./Editor.css";
|
17
17
|
import { serialize } from "./utils/serializer";
|
18
|
+
import { getThumbnailImage } from "./helper";
|
18
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
19
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
21
|
+
const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
|
20
22
|
const Element = props => {
|
21
23
|
return getBlock(props);
|
22
24
|
};
|
@@ -46,7 +48,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
46
48
|
data: content
|
47
49
|
});
|
48
50
|
const [value, setValue] = useState(convertedContent);
|
49
|
-
const [
|
51
|
+
const [deboundedValue] = useDebounce(value, 500);
|
50
52
|
const [count] = useTimeout({
|
51
53
|
timeoutInMS: timeoutInMS
|
52
54
|
});
|
@@ -75,16 +77,40 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
75
77
|
}, [id, content]);
|
76
78
|
useEffect(() => {
|
77
79
|
if (count > 0) {
|
78
|
-
|
80
|
+
if (editorWrapper && editorWrapper?.current) {
|
81
|
+
const text = serialize(deboundedValue);
|
82
|
+
onSave(JSON.stringify(deboundedValue), {
|
83
|
+
text: text
|
84
|
+
});
|
85
|
+
}
|
79
86
|
}
|
80
|
-
}, [
|
87
|
+
}, [deboundedValue]);
|
88
|
+
const getPreviewImage = async (needBackground = false, options = {}) => {
|
89
|
+
ReactEditor.blur(editor);
|
90
|
+
const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
|
91
|
+
const c = await getThumbnailImage(dom, {
|
92
|
+
...options,
|
93
|
+
allowTaint: true,
|
94
|
+
backgroundColor: null,
|
95
|
+
proxy: "anonymous",
|
96
|
+
useCORS: true,
|
97
|
+
onclone: document => {
|
98
|
+
// hide class
|
99
|
+
for (let hidedeClass of PREVIEW_IMAGE_HIDE_CLASS) {
|
100
|
+
for (let element of document.getElementsByClassName(hidedeClass)) {
|
101
|
+
element.style.display = "none";
|
102
|
+
}
|
103
|
+
}
|
104
|
+
return document;
|
105
|
+
}
|
106
|
+
});
|
107
|
+
return c;
|
108
|
+
};
|
81
109
|
useImperativeHandle(ref, () => ({
|
82
|
-
async getThumbnail() {
|
110
|
+
async getThumbnail(needBackground = false, options = {}) {
|
83
111
|
try {
|
84
|
-
const c = await
|
85
|
-
|
86
|
-
return c.toDataURL();
|
87
|
-
}
|
112
|
+
const c = await getPreviewImage(needBackground, options);
|
113
|
+
return c;
|
88
114
|
} catch (err) {
|
89
115
|
console.log(err);
|
90
116
|
return null;
|
@@ -118,28 +144,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
118
144
|
const chars = CHARACTERS.filter(c => c.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
|
119
145
|
const handleEditorChange = newValue => {
|
120
146
|
setValue(newValue);
|
121
|
-
const isAstChange = editor.operations.some(op => "set_selection" !== op.type);
|
122
|
-
if (isAstChange && onSave && timeoutInMS === 0) {
|
123
|
-
// send the value to onSave api
|
124
|
-
updateChanges(newValue);
|
125
|
-
}
|
126
|
-
};
|
127
|
-
const updateChanges = newValue => {
|
128
|
-
const stringify = JSON.stringify(newValue);
|
129
|
-
const text = serialize(newValue);
|
130
|
-
if (stringify !== lastUpdated && count > 0 && text?.trim().length > 3 && onSave) {
|
131
|
-
if (editorWrapper && editorWrapper?.current) {
|
132
|
-
html2canvas(editorWrapper?.current, {
|
133
|
-
height: 350
|
134
|
-
}).then(c => {
|
135
|
-
onSave(stringify, {
|
136
|
-
text: text,
|
137
|
-
thumbnail: c.toDataURL()
|
138
|
-
});
|
139
|
-
setLastUpdated(stringify);
|
140
|
-
});
|
141
|
-
}
|
142
|
-
}
|
143
147
|
};
|
144
148
|
const customProps = {
|
145
149
|
...(otherProps || {})
|
@@ -212,6 +216,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
212
216
|
paddingBottom: `${bannerSpacing?.bottom}px`
|
213
217
|
},
|
214
218
|
children: [/*#__PURE__*/_jsx(Editable, {
|
219
|
+
className: "innert-editor-textbox",
|
215
220
|
readOnly: isReadOnly,
|
216
221
|
placeholder: "Write something",
|
217
222
|
renderElement: renderElement,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "1.2.
|
3
|
+
"version": "1.2.3",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -34,6 +34,7 @@
|
|
34
34
|
"slate-history": "^0.93.0",
|
35
35
|
"slate-react": "^0.98.3",
|
36
36
|
"styled-components": "^5.3.11",
|
37
|
+
"use-debounce": "^10.0.0",
|
37
38
|
"web-vitals": "^2.1.4",
|
38
39
|
"y-websocket": "^1.5.0",
|
39
40
|
"yjs": "^13.6.8"
|