@seafile/seafile-editor 1.0.32-2 → 1.0.32-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
-
import { SimpleEditor } from '@seafile/seafile-editor';
|
|
3
2
|
import classNames from 'classnames';
|
|
3
|
+
import SimpleEditor from '../simple-editor';
|
|
4
4
|
import getPreviewContent from '../../utils/get-preview-content';
|
|
5
5
|
import getBrowserInfo from '../../utils/get-browser-Info';
|
|
6
6
|
import LongTextModal from './longtext-modal';
|
|
@@ -14,10 +14,11 @@ export default function LongTextEditorDialog(_ref) {
|
|
|
14
14
|
headerName,
|
|
15
15
|
value,
|
|
16
16
|
autoSave = true,
|
|
17
|
-
saveDelay =
|
|
17
|
+
saveDelay = 60000,
|
|
18
18
|
isCheckBrowser = false,
|
|
19
19
|
editorApi,
|
|
20
|
-
|
|
20
|
+
onSaveEditorValue,
|
|
21
|
+
onEditorValueChanged,
|
|
21
22
|
onCloseEditorDialog,
|
|
22
23
|
valueLimitCallback
|
|
23
24
|
} = _ref;
|
|
@@ -29,14 +30,29 @@ export default function LongTextEditorDialog(_ref) {
|
|
|
29
30
|
var _editorRef$current;
|
|
30
31
|
if (!isValueChanged) return;
|
|
31
32
|
const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
|
|
32
|
-
const isValueValid = valueLimitCallback
|
|
33
|
+
const isValueValid = valueLimitCallback ? valueLimitCallback(markdownString) : true;
|
|
33
34
|
if (isValueValid) {
|
|
34
|
-
|
|
35
|
+
var _editorRef$current2;
|
|
36
|
+
const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
|
|
35
37
|
const value = getPreviewContent(slateNodes);
|
|
36
|
-
|
|
38
|
+
onSaveEditorValue({
|
|
39
|
+
...value,
|
|
40
|
+
text: markdownString
|
|
41
|
+
});
|
|
37
42
|
setValueChanged(false);
|
|
38
43
|
}
|
|
39
|
-
}, [isValueChanged,
|
|
44
|
+
}, [isValueChanged, onSaveEditorValue, valueLimitCallback]);
|
|
45
|
+
const onCloseToggle = useCallback(() => {
|
|
46
|
+
onUpdateEditorValue();
|
|
47
|
+
onCloseEditorDialog();
|
|
48
|
+
}, [onCloseEditorDialog, onUpdateEditorValue]);
|
|
49
|
+
const onHotKey = useCallback(event => {
|
|
50
|
+
if (event.keyCode === 27) {
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
event.stopPropagation();
|
|
53
|
+
onCloseToggle();
|
|
54
|
+
}
|
|
55
|
+
}, [onCloseToggle]);
|
|
40
56
|
useEffect(() => {
|
|
41
57
|
let timer = null;
|
|
42
58
|
if (autoSave) {
|
|
@@ -44,24 +60,18 @@ export default function LongTextEditorDialog(_ref) {
|
|
|
44
60
|
onUpdateEditorValue();
|
|
45
61
|
}, saveDelay);
|
|
46
62
|
}
|
|
63
|
+
document.addEventListener('keydown', onHotKey);
|
|
47
64
|
return () => {
|
|
48
65
|
clearTimeout(timer);
|
|
66
|
+
document.removeEventListener('keydown', onHotKey);
|
|
49
67
|
};
|
|
50
|
-
}, [autoSave, saveDelay, onUpdateEditorValue]);
|
|
68
|
+
}, [autoSave, saveDelay, onUpdateEditorValue, onHotKey]);
|
|
51
69
|
const {
|
|
52
70
|
isValidBrowser,
|
|
53
71
|
isWindowsWechat
|
|
54
72
|
} = useMemo(() => {
|
|
55
73
|
return getBrowserInfo(isCheckBrowser);
|
|
56
74
|
}, [isCheckBrowser]);
|
|
57
|
-
const onCloseToggle = useCallback(() => {
|
|
58
|
-
var _editorRef$current2;
|
|
59
|
-
const value = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getValue();
|
|
60
|
-
if (isValueChanged) {
|
|
61
|
-
updateValue(value);
|
|
62
|
-
}
|
|
63
|
-
onCloseEditorDialog();
|
|
64
|
-
}, [isValueChanged, onCloseEditorDialog, updateValue]);
|
|
65
75
|
const onFullScreenToggle = useCallback(() => {
|
|
66
76
|
let containerStyle = {};
|
|
67
77
|
if (!isFullScreen) {
|
|
@@ -76,8 +86,19 @@ export default function LongTextEditorDialog(_ref) {
|
|
|
76
86
|
setDialogStyle(containerStyle);
|
|
77
87
|
}, [isFullScreen]);
|
|
78
88
|
const onContentChanged = useCallback(() => {
|
|
89
|
+
// update parent's component cache value
|
|
90
|
+
if (onEditorValueChanged && typeof onEditorValueChanged === 'function') {
|
|
91
|
+
var _editorRef$current3, _editorRef$current4;
|
|
92
|
+
const markdownString = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.getValue();
|
|
93
|
+
const slateNodes = (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.getSlateValue();
|
|
94
|
+
const value = getPreviewContent(slateNodes);
|
|
95
|
+
onEditorValueChanged({
|
|
96
|
+
...value,
|
|
97
|
+
text: markdownString
|
|
98
|
+
});
|
|
99
|
+
}
|
|
79
100
|
setValueChanged(true);
|
|
80
|
-
}, []);
|
|
101
|
+
}, [onEditorValueChanged]);
|
|
81
102
|
const onContainerKeyDown = event => {
|
|
82
103
|
if (event.keyCode === 27) {
|
|
83
104
|
event.preventDefault();
|