@seafile/seafile-editor 1.0.85-beta → 1.0.85-beta10
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.
- package/dist/editors/inline-editor/index.css +87 -0
- package/dist/editors/inline-editor/index.js +143 -0
- package/dist/editors/inline-editor/with-props-editor.js +21 -0
- package/dist/editors/simple-slate-editor/index.js +8 -16
- package/dist/extension/core/queries/index.js +18 -2
- package/dist/extension/editor.js +10 -6
- package/dist/extension/index.js +6 -0
- package/dist/extension/plugins/link/render-elem/index.js +1 -4
- package/dist/extension/plugins/link/render-elem/link-popover.js +1 -0
- package/dist/extension/plugins/link/render-elem/style.css +1 -1
- package/dist/extension/plugins/table/render-elem/index.js +6 -2
- package/dist/pages/longtext-inline-editor/click-outside.js +86 -0
- package/dist/pages/longtext-inline-editor/fallback-editor.js +69 -0
- package/dist/pages/longtext-inline-editor/formatter/index.css +31 -0
- package/dist/pages/longtext-inline-editor/formatter/index.js +66 -0
- package/dist/pages/longtext-inline-editor/index.js +89 -107
- package/dist/pages/longtext-inline-editor/normal-editor.js +132 -0
- package/dist/pages/markdown-preview/index.js +4 -12
- package/dist/pages/simple-editor.js +4 -1
- package/package.json +1 -1
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.sf-simple-slate-editor-container {
|
|
2
|
+
flex: 1;
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
min-height: 0;
|
|
6
|
+
min-width: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.sf-simple-slate-editor-container .sf-slate-editor-toolbar {
|
|
10
|
+
display: flex;
|
|
11
|
+
justify-content: flex-start;
|
|
12
|
+
height: 44px;
|
|
13
|
+
align-items: center;
|
|
14
|
+
padding: 0 10px;
|
|
15
|
+
background-color: #fff;
|
|
16
|
+
user-select: none;
|
|
17
|
+
border-bottom: 1px solid #e5e6e8;
|
|
18
|
+
position: relative;
|
|
19
|
+
z-index: 102;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content {
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: calc(100% - 44px);
|
|
25
|
+
display: flex;
|
|
26
|
+
background: #f5f5f5;
|
|
27
|
+
position: relative;
|
|
28
|
+
min-height: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.sf-simple-slate-editor-container .sf-slate-scroll-container {
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 100%;
|
|
34
|
+
overflow: auto;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar {
|
|
38
|
+
width: 8px;
|
|
39
|
+
height: 8px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-button {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sf-simple-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar-thumb {
|
|
47
|
+
background-color: rgb(206, 206, 212);
|
|
48
|
+
border-radius: 10px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* .sf-simple-slate-editor-container .sf-slate-article-container {
|
|
52
|
+
flex: 1;
|
|
53
|
+
position: relative;
|
|
54
|
+
max-width: 950px;
|
|
55
|
+
min-width: 400px;
|
|
56
|
+
margin: 0 auto;
|
|
57
|
+
padding-top: 20px;
|
|
58
|
+
padding-bottom: 20px;
|
|
59
|
+
} */
|
|
60
|
+
|
|
61
|
+
.sf-simple-slate-editor-container .sf-slate-article-container {
|
|
62
|
+
height: 100%;
|
|
63
|
+
width: 100%;
|
|
64
|
+
overflow: auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article {
|
|
68
|
+
margin: 0;
|
|
69
|
+
padding: 10px;
|
|
70
|
+
border: none;
|
|
71
|
+
background-color: #fff;
|
|
72
|
+
min-height: 100%;
|
|
73
|
+
color: #212529;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h1,
|
|
77
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h2,
|
|
78
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h3,
|
|
79
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h4,
|
|
80
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h5,
|
|
81
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article h6 {
|
|
82
|
+
color: #212529;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sf-simple-slate-editor-container .sf-slate-editor-content .article div:first-child {
|
|
86
|
+
outline: none;
|
|
87
|
+
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _slateReact = require("slate-react");
|
|
11
|
+
var _slate = require("slate");
|
|
12
|
+
var _extension = require("../../extension");
|
|
13
|
+
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
|
|
14
|
+
var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
|
|
15
|
+
var _withPropsEditor = _interopRequireDefault(require("./with-props-editor"));
|
|
16
|
+
var _core = require("../../extension/core");
|
|
17
|
+
var _common = require("../../utils/common");
|
|
18
|
+
require("./index.css");
|
|
19
|
+
const isMacOS = (0, _common.isMac)();
|
|
20
|
+
const InlineEditor = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
focusNodePath,
|
|
23
|
+
value,
|
|
24
|
+
editorApi,
|
|
25
|
+
onSave,
|
|
26
|
+
columns,
|
|
27
|
+
onContentChanged,
|
|
28
|
+
isSupportFormula,
|
|
29
|
+
onExpandEditorToggle
|
|
30
|
+
} = _ref;
|
|
31
|
+
const [slateValue, setSlateValue] = (0, _react.useState)(value);
|
|
32
|
+
const editor = (0, _react.useMemo)(() => {
|
|
33
|
+
const baseEditor = (0, _extension.inlineEditor)();
|
|
34
|
+
return (0, _withPropsEditor.default)(baseEditor, {
|
|
35
|
+
editorApi,
|
|
36
|
+
onSave,
|
|
37
|
+
columns
|
|
38
|
+
});
|
|
39
|
+
}, [columns, editorApi, onSave]);
|
|
40
|
+
const eventProxy = (0, _react.useMemo)(() => {
|
|
41
|
+
return new _eventHandler.default(editor);
|
|
42
|
+
}, [editor]);
|
|
43
|
+
const decorate = (0, _extension.useHighlight)(editor);
|
|
44
|
+
const onChange = (0, _react.useCallback)(value => {
|
|
45
|
+
setSlateValue(value);
|
|
46
|
+
if (editor.forceNormalize) return;
|
|
47
|
+
const operations = editor.operations;
|
|
48
|
+
const modifyOps = operations.filter(o => o.type !== 'set_selection');
|
|
49
|
+
if (modifyOps.length > 0) {
|
|
50
|
+
onContentChanged && onContentChanged(value);
|
|
51
|
+
}
|
|
52
|
+
const eventBus = _eventBus.default.getInstance();
|
|
53
|
+
eventBus.dispatch('change');
|
|
54
|
+
}, [editor, onContentChanged]);
|
|
55
|
+
const focusNode = (0, _react.useCallback)((editor, focusNodePath) => {
|
|
56
|
+
const [firstNode] = editor.children;
|
|
57
|
+
if (!firstNode) return;
|
|
58
|
+
if (focusNodePath) {
|
|
59
|
+
const customFocusNodePath = (0, _core.getNode)(editor, focusNodePath);
|
|
60
|
+
if (customFocusNodePath) {
|
|
61
|
+
const startOfFirstNode = _slate.Editor.start(editor, focusNodePath);
|
|
62
|
+
const range = {
|
|
63
|
+
anchor: startOfFirstNode,
|
|
64
|
+
focus: startOfFirstNode
|
|
65
|
+
};
|
|
66
|
+
(0, _core.focusEditor)(editor, range);
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
const [firstNodeFirstChild] = firstNode.children;
|
|
71
|
+
if (firstNodeFirstChild) {
|
|
72
|
+
const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
|
|
73
|
+
const range = {
|
|
74
|
+
anchor: startOfFirstNode,
|
|
75
|
+
focus: startOfFirstNode
|
|
76
|
+
};
|
|
77
|
+
(0, _core.focusEditor)(editor, range);
|
|
78
|
+
}
|
|
79
|
+
}, []);
|
|
80
|
+
|
|
81
|
+
// useMount: focus editor
|
|
82
|
+
(0, _react.useEffect)(() => {
|
|
83
|
+
editor.forceNormalize = true;
|
|
84
|
+
_slate.Editor.normalize(editor, {
|
|
85
|
+
force: true
|
|
86
|
+
});
|
|
87
|
+
const timer = setTimeout(() => {
|
|
88
|
+
editor.forceNormalize = false;
|
|
89
|
+
focusNode(editor, focusNodePath);
|
|
90
|
+
}, 300);
|
|
91
|
+
return () => {
|
|
92
|
+
editor.forceNormalize = false;
|
|
93
|
+
clearTimeout(timer);
|
|
94
|
+
};
|
|
95
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
96
|
+
}, []);
|
|
97
|
+
|
|
98
|
+
// willUnmount
|
|
99
|
+
(0, _react.useEffect)(() => {
|
|
100
|
+
return () => {
|
|
101
|
+
editor.selection = null;
|
|
102
|
+
editor.history = {
|
|
103
|
+
redos: [],
|
|
104
|
+
undos: []
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
108
|
+
}, []);
|
|
109
|
+
const onEditorClick = (0, _react.useCallback)(() => {
|
|
110
|
+
const value = editor.children;
|
|
111
|
+
if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
|
|
112
|
+
focusNode(editor);
|
|
113
|
+
}
|
|
114
|
+
}, [editor, focusNode]);
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
116
|
+
className: "sf-simple-slate-editor-container"
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_extension.InlineToolbar, {
|
|
118
|
+
editor: editor,
|
|
119
|
+
isSupportFormula: isSupportFormula,
|
|
120
|
+
isSupportColumn: !!columns,
|
|
121
|
+
onExpandEditorToggle: onExpandEditorToggle
|
|
122
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
+
className: "sf-slate-editor-content",
|
|
124
|
+
onClick: onEditorClick
|
|
125
|
+
}, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
|
|
126
|
+
editor: editor,
|
|
127
|
+
initialValue: slateValue,
|
|
128
|
+
onChange: onChange
|
|
129
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
130
|
+
className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
|
|
131
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
132
|
+
className: "sf-slate-article-container"
|
|
133
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
134
|
+
className: "article"
|
|
135
|
+
}, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
|
|
136
|
+
decorate: decorate,
|
|
137
|
+
renderElement: _extension.renderElement,
|
|
138
|
+
renderLeaf: _extension.renderLeaf,
|
|
139
|
+
onKeyDown: eventProxy.onKeyDown,
|
|
140
|
+
onCopy: eventProxy.onCopy
|
|
141
|
+
})))))));
|
|
142
|
+
};
|
|
143
|
+
var _default = exports.default = InlineEditor;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
const withPropsEditor = function (editor) {
|
|
8
|
+
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
9
|
+
let newEditor = editor;
|
|
10
|
+
if (props.editorApi) {
|
|
11
|
+
newEditor.api = props.editorApi;
|
|
12
|
+
}
|
|
13
|
+
if (props.onSave) {
|
|
14
|
+
newEditor.onSave = props.onSave;
|
|
15
|
+
}
|
|
16
|
+
if (props.columns) {
|
|
17
|
+
newEditor.columns = props.columns;
|
|
18
|
+
}
|
|
19
|
+
return newEditor;
|
|
20
|
+
};
|
|
21
|
+
var _default = exports.default = withPropsEditor;
|
|
@@ -19,7 +19,6 @@ require("./style.css");
|
|
|
19
19
|
const isMacOS = (0, _common.isMac)();
|
|
20
20
|
const SimpleSlateEditor = _ref => {
|
|
21
21
|
let {
|
|
22
|
-
isInline,
|
|
23
22
|
value,
|
|
24
23
|
editorApi,
|
|
25
24
|
onSave,
|
|
@@ -29,17 +28,14 @@ const SimpleSlateEditor = _ref => {
|
|
|
29
28
|
onExpandEditorToggle
|
|
30
29
|
} = _ref;
|
|
31
30
|
const [slateValue, setSlateValue] = (0, _react.useState)(value);
|
|
32
|
-
const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(
|
|
31
|
+
const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
|
|
33
32
|
editorApi,
|
|
34
33
|
onSave,
|
|
35
34
|
columns
|
|
36
|
-
}), [columns, editorApi, onSave
|
|
35
|
+
}), [columns, editorApi, onSave]);
|
|
37
36
|
const eventProxy = (0, _react.useMemo)(() => {
|
|
38
37
|
return new _eventHandler.default(editor);
|
|
39
38
|
}, [editor]);
|
|
40
|
-
const ToolbarComponent = (0, _react.useMemo)(() => {
|
|
41
|
-
return isInline ? _extension.InlineToolbar : _extension.Toolbar;
|
|
42
|
-
}, [isInline]);
|
|
43
39
|
const decorate = (0, _extension.useHighlight)(editor);
|
|
44
40
|
const onChange = (0, _react.useCallback)(value => {
|
|
45
41
|
setSlateValue(value);
|
|
@@ -52,7 +48,7 @@ const SimpleSlateEditor = _ref => {
|
|
|
52
48
|
const eventBus = _eventBus.default.getInstance();
|
|
53
49
|
eventBus.dispatch('change');
|
|
54
50
|
}, [editor, onContentChanged]);
|
|
55
|
-
const
|
|
51
|
+
const focusNode = (0, _react.useCallback)(editor => {
|
|
56
52
|
const [firstNode] = editor.children;
|
|
57
53
|
if (!firstNode) return;
|
|
58
54
|
const [firstNodeFirstChild] = firstNode.children;
|
|
@@ -90,7 +86,7 @@ const SimpleSlateEditor = _ref => {
|
|
|
90
86
|
});
|
|
91
87
|
const timer = setTimeout(() => {
|
|
92
88
|
editor.forceNormalize = false;
|
|
93
|
-
|
|
89
|
+
focusNode(editor);
|
|
94
90
|
}, 300);
|
|
95
91
|
return () => {
|
|
96
92
|
editor.forceNormalize = false;
|
|
@@ -113,16 +109,15 @@ const SimpleSlateEditor = _ref => {
|
|
|
113
109
|
const onEditorClick = (0, _react.useCallback)(() => {
|
|
114
110
|
const value = editor.children;
|
|
115
111
|
if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
|
|
116
|
-
|
|
112
|
+
focusNode(editor);
|
|
117
113
|
}
|
|
118
|
-
}, [editor,
|
|
114
|
+
}, [editor, focusNode]);
|
|
119
115
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
120
116
|
className: "sf-simple-slate-editor-container"
|
|
121
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
|
|
122
118
|
editor: editor,
|
|
123
119
|
isSupportFormula: isSupportFormula,
|
|
124
|
-
isSupportColumn: !!columns
|
|
125
|
-
onExpandEditorToggle: onExpandEditorToggle
|
|
120
|
+
isSupportColumn: !!columns
|
|
126
121
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
127
122
|
className: "sf-slate-editor-content",
|
|
128
123
|
onClick: onEditorClick
|
|
@@ -144,7 +139,4 @@ const SimpleSlateEditor = _ref => {
|
|
|
144
139
|
onCopy: eventProxy.onCopy
|
|
145
140
|
})))))));
|
|
146
141
|
};
|
|
147
|
-
SimpleSlateEditor.defaultProps = {
|
|
148
|
-
isInline: false
|
|
149
|
-
};
|
|
150
142
|
var _default = exports.default = SimpleSlateEditor;
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeAcrossBlocks = exports.isLastNode = exports.isLastChild = exports.isFirstNode = exports.isFirstChild = exports.isEndPoint = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getSelectedNodeEntryByTypes = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodeEntries = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getInlineNodes = exports.getEditorString = exports.getDeepInlineChildren = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
|
|
7
|
+
exports.isTextNode = exports.isStartPoint = exports.isSelectionAtBlockStart = exports.isSelectionAtBlockEnd = exports.isRangeAcrossBlocks = exports.isLastNode = exports.isLastChild = exports.isFirstNode = exports.isFirstChild = exports.isEndPoint = exports.isBlockTextEmptyAfterSelection = exports.isBlockAboveEmpty = exports.isAncestorEmpty = exports.getSelectedNodeEntryByTypes = exports.getSelectedNodeEntryByType = exports.getSelectedNodeByTypes = exports.getSelectedNodeByType = exports.getSelectedElems = exports.getQueryOptions = exports.getPreviousPath = exports.getPrevNode = exports.getParentNode = exports.getNodes = exports.getNodeType = exports.getNodePathById = exports.getNodeEntries = exports.getNode = exports.getNextSiblingNodes = exports.getNextNode = exports.getLastChildPath = exports.getLastChild = exports.getInlineNodes = exports.getEditorString = exports.getDeepInlineChildren = exports.getCommonNode = exports.getChildren = exports.getAboveNode = exports.getAboveBlockNode = exports.findPath = exports.findNode = exports.findDescendant = void 0;
|
|
8
8
|
var _slate = require("slate");
|
|
9
9
|
var _slateReact = require("slate-react");
|
|
10
10
|
var _slugid = _interopRequireDefault(require("slugid"));
|
|
@@ -476,4 +476,20 @@ const getInlineNodes = node => {
|
|
|
476
476
|
});
|
|
477
477
|
return result.flat();
|
|
478
478
|
};
|
|
479
|
-
exports.getInlineNodes = getInlineNodes;
|
|
479
|
+
exports.getInlineNodes = getInlineNodes;
|
|
480
|
+
const getNodePathById = function (rootNode, nodeId) {
|
|
481
|
+
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
482
|
+
if (rootNode.id === nodeId) return path;
|
|
483
|
+
const {
|
|
484
|
+
children = []
|
|
485
|
+
} = rootNode;
|
|
486
|
+
for (let i = 0; i < children.length; i++) {
|
|
487
|
+
const child = children[i];
|
|
488
|
+
path.push(i);
|
|
489
|
+
const nodePath = getNodePathById(child, nodeId, path);
|
|
490
|
+
if (nodePath) return nodePath;
|
|
491
|
+
path.pop();
|
|
492
|
+
}
|
|
493
|
+
return null;
|
|
494
|
+
};
|
|
495
|
+
exports.getNodePathById = getNodePathById;
|
package/dist/extension/editor.js
CHANGED
|
@@ -16,13 +16,17 @@ const baseEditor = exports.baseEditor = _plugins.default.reduce((editor, pluginI
|
|
|
16
16
|
}
|
|
17
17
|
return editor;
|
|
18
18
|
}, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
|
|
19
|
-
const inlineEditor =
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
const inlineEditor = () => {
|
|
20
|
+
const editor = _plugins.default.reduce((editor, pluginItem) => {
|
|
21
|
+
const withPlugin = pluginItem.editorPlugin;
|
|
22
|
+
if (withPlugin) {
|
|
23
|
+
return withPlugin(editor);
|
|
24
|
+
}
|
|
25
|
+
return editor;
|
|
26
|
+
}, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
|
|
24
27
|
return editor;
|
|
25
|
-
}
|
|
28
|
+
};
|
|
29
|
+
exports.inlineEditor = inlineEditor;
|
|
26
30
|
const createSlateEditor = () => {
|
|
27
31
|
const editor = _plugins.default.reduce((editor, pluginItem) => {
|
|
28
32
|
const withPlugin = pluginItem.editorPlugin;
|
package/dist/extension/index.js
CHANGED
|
@@ -40,6 +40,12 @@ Object.defineProperty(exports, "createSlateEditor", {
|
|
|
40
40
|
return _editor.createSlateEditor;
|
|
41
41
|
}
|
|
42
42
|
});
|
|
43
|
+
Object.defineProperty(exports, "getNodePathById", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _core.getNodePathById;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
43
49
|
Object.defineProperty(exports, "inlineEditor", {
|
|
44
50
|
enumerable: true,
|
|
45
51
|
get: function () {
|
|
@@ -28,9 +28,6 @@ const renderLink = (_ref, editor) => {
|
|
|
28
28
|
left: 0
|
|
29
29
|
});
|
|
30
30
|
const isReadonly = (0, _slateReact.useReadOnly)();
|
|
31
|
-
|
|
32
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
33
|
-
const isLinkActive = (0, _react.useMemo)(() => (0, _helper.isLinkType)(editor), [editor.selection]);
|
|
34
31
|
const onClosePopover = (0, _react.useCallback)(e => {
|
|
35
32
|
unregisterClickEvent();
|
|
36
33
|
setIsShowPopover(false);
|
|
@@ -80,7 +77,7 @@ const renderLink = (_ref, editor) => {
|
|
|
80
77
|
}, attributes), /*#__PURE__*/_react.default.createElement("a", {
|
|
81
78
|
href: element.url,
|
|
82
79
|
onClick: onHrefClick
|
|
83
|
-
}, children)),
|
|
80
|
+
}, children)), isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
|
|
84
81
|
popoverPosition: popoverPosition,
|
|
85
82
|
linkUrl: element.url,
|
|
86
83
|
editor: editor,
|
|
@@ -14,6 +14,7 @@ var _helper = require("../helper");
|
|
|
14
14
|
var _common = require("../../../../utils/common");
|
|
15
15
|
var _eventTypes = require("../../../../constants/event-types");
|
|
16
16
|
var _constants = require("../../../../constants");
|
|
17
|
+
require("./style.css");
|
|
17
18
|
const LinkPopover = _ref => {
|
|
18
19
|
let {
|
|
19
20
|
linkUrl,
|
|
@@ -172,7 +172,8 @@ const RenderTableContainer = (_ref, editor) => {
|
|
|
172
172
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
173
173
|
style: {
|
|
174
174
|
position: 'relative'
|
|
175
|
-
}
|
|
175
|
+
},
|
|
176
|
+
"data-id": element.id
|
|
176
177
|
}, /*#__PURE__*/_react.default.createElement("table", {
|
|
177
178
|
ref: tableRef,
|
|
178
179
|
onMouseDown: handleMouseDown,
|
|
@@ -191,7 +192,9 @@ const RenderTableRow = _ref2 => {
|
|
|
191
192
|
children,
|
|
192
193
|
element
|
|
193
194
|
} = _ref2;
|
|
194
|
-
return /*#__PURE__*/_react.default.createElement("tr", attributes,
|
|
195
|
+
return /*#__PURE__*/_react.default.createElement("tr", Object.assign({}, attributes, {
|
|
196
|
+
"data-id": element.id
|
|
197
|
+
}), children);
|
|
195
198
|
};
|
|
196
199
|
exports.RenderTableRow = RenderTableRow;
|
|
197
200
|
const RenderTableCell = _ref3 => {
|
|
@@ -216,6 +219,7 @@ const RenderTableCell = _ref3 => {
|
|
|
216
219
|
}
|
|
217
220
|
return /*#__PURE__*/_react.default.createElement("td", Object.assign({
|
|
218
221
|
"data-root": "true",
|
|
222
|
+
"data-id": element.id,
|
|
219
223
|
style: style
|
|
220
224
|
}, attributes), children);
|
|
221
225
|
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
/**
|
|
11
|
+
* Detecting outside click on a react component is surprisingly hard.
|
|
12
|
+
* A general approach is to have a global click handler on the document
|
|
13
|
+
* which checks if the click target is inside the editor container or
|
|
14
|
+
* not using editorContainer.contains(e.target). This approach works well
|
|
15
|
+
* until portals are used for editors. Portals render children into a DOM
|
|
16
|
+
* node that exists outside the DOM hierarchy of the parent component so
|
|
17
|
+
* editorContainer.contains(e.target) does not work. Here are some examples
|
|
18
|
+
* of the DOM structure with different types of editors
|
|
19
|
+
*
|
|
20
|
+
*
|
|
21
|
+
* SimpleEditor for example Texbox (No Portals)
|
|
22
|
+
* <div react-data-grid>..<div>
|
|
23
|
+
* <div portal-created-by-the-grid-for-editors>
|
|
24
|
+
* <div editor-container>
|
|
25
|
+
* <div simple-editor>..</div>
|
|
26
|
+
* </div>
|
|
27
|
+
* <div>
|
|
28
|
+
*
|
|
29
|
+
* ComplexEditor for example Modals (using Portals)
|
|
30
|
+
* <div react-data-grid>..<div>
|
|
31
|
+
* <div portal-created-by-the-grid-for-editors>
|
|
32
|
+
* <div editor-container>
|
|
33
|
+
* // Nothing here
|
|
34
|
+
* </div>
|
|
35
|
+
* <div>
|
|
36
|
+
* <div portal-created-by-the-editor>
|
|
37
|
+
* <div complex-editor>..</div>
|
|
38
|
+
* </div>
|
|
39
|
+
*
|
|
40
|
+
*
|
|
41
|
+
* One approach to detect outside click is to use event bubbling through
|
|
42
|
+
* portals. An event fired from inside a portal will propagate to ancestors
|
|
43
|
+
* in the containing React tree, even if those elements are not ancestors
|
|
44
|
+
* in the DOM tree. This means a click handler can be attached on the document
|
|
45
|
+
* and on the editor container. The editor container can set a flag to notify
|
|
46
|
+
* that the click was inside the editor and the document click handler can use
|
|
47
|
+
* this flag to call onClickOutside. This approach however has a few caveats
|
|
48
|
+
* - Click handler on the document is set using document.addEventListener
|
|
49
|
+
* - Click handler on the editor container is set using onClick prop
|
|
50
|
+
*
|
|
51
|
+
* This means if a child component inside the editor calls e.stopPropagation
|
|
52
|
+
* then the click handler on the editor container will not be called whereas
|
|
53
|
+
* document click handler will be called.
|
|
54
|
+
* https://github.com/facebook/react/issues/12518
|
|
55
|
+
*
|
|
56
|
+
* To solve this issue onClickCapture event is used.
|
|
57
|
+
*/
|
|
58
|
+
|
|
59
|
+
class ClickOutside extends _react.default.Component {
|
|
60
|
+
constructor() {
|
|
61
|
+
super(...arguments);
|
|
62
|
+
(0, _defineProperty2.default)(this, "isClickedInside", false);
|
|
63
|
+
(0, _defineProperty2.default)(this, "handleDocumentClick", e => {
|
|
64
|
+
if (this.isClickedInside) {
|
|
65
|
+
this.isClickedInside = false;
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
this.props.onClickOutside(e);
|
|
69
|
+
});
|
|
70
|
+
(0, _defineProperty2.default)(this, "handleMouseDown", () => {
|
|
71
|
+
this.isClickedInside = true;
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
componentDidMount() {
|
|
75
|
+
document.addEventListener('mousedown', this.handleDocumentClick);
|
|
76
|
+
}
|
|
77
|
+
componentWillUnmount() {
|
|
78
|
+
document.removeEventListener('mousedown', this.handleDocumentClick);
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
return /*#__PURE__*/_react.default.cloneElement(_react.default.Children.only(this.props.children), {
|
|
82
|
+
onMouseDownCapture: this.handleMouseDown
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
var _default = exports.default = ClickOutside;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _isHotkey = _interopRequireDefault(require("is-hotkey"));
|
|
11
|
+
const FallbackEditor = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
isShowEditor,
|
|
14
|
+
value: propsValue,
|
|
15
|
+
onChange: propsOnChange,
|
|
16
|
+
closeEditor
|
|
17
|
+
} = _ref;
|
|
18
|
+
const [value, setValue] = (0, _react.useState)(propsValue);
|
|
19
|
+
const showEditorRef = (0, _react.useRef)(false);
|
|
20
|
+
const inputRef = (0, _react.useRef)(null);
|
|
21
|
+
(0, _react.useEffect)(() => {
|
|
22
|
+
if (isShowEditor === showEditorRef.current) return;
|
|
23
|
+
if (isShowEditor && !showEditorRef.current) {
|
|
24
|
+
setTimeout(() => inputRef.current.focus());
|
|
25
|
+
}
|
|
26
|
+
}, [isShowEditor]);
|
|
27
|
+
const onChange = (0, _react.useCallback)(event => {
|
|
28
|
+
const newValue = event.target.value;
|
|
29
|
+
if (newValue === value) return;
|
|
30
|
+
setValue(newValue);
|
|
31
|
+
propsOnChange && propsOnChange({
|
|
32
|
+
text: newValue,
|
|
33
|
+
preview: newValue ? newValue.slice(0, 30) : '',
|
|
34
|
+
links: [],
|
|
35
|
+
images: []
|
|
36
|
+
});
|
|
37
|
+
}, [value, propsOnChange]);
|
|
38
|
+
const onKeyDown = (0, _react.useCallback)(e => {
|
|
39
|
+
let {
|
|
40
|
+
selectionStart,
|
|
41
|
+
selectionEnd,
|
|
42
|
+
value
|
|
43
|
+
} = e.currentTarget;
|
|
44
|
+
if ((0, _isHotkey.default)('enter', e)) {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
closeEditor && closeEditor();
|
|
47
|
+
inputRef.current.blur();
|
|
48
|
+
} else if (e.keyCode === 37 && selectionStart === 0 || e.keyCode === 39 && selectionEnd === value.length) {
|
|
49
|
+
e.stopPropagation();
|
|
50
|
+
}
|
|
51
|
+
}, [closeEditor]);
|
|
52
|
+
const onPaste = (0, _react.useCallback)(e => {
|
|
53
|
+
e.stopPropagation();
|
|
54
|
+
}, []);
|
|
55
|
+
const onCut = (0, _react.useCallback)(e => {
|
|
56
|
+
e.stopPropagation();
|
|
57
|
+
}, []);
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement("textarea", {
|
|
59
|
+
className: "form-control sf-long-text-inline-fallback-editor-container",
|
|
60
|
+
ref: inputRef,
|
|
61
|
+
rows: 5,
|
|
62
|
+
value: value,
|
|
63
|
+
onChange: onChange,
|
|
64
|
+
onKeyDown: onKeyDown,
|
|
65
|
+
onPaste: onPaste,
|
|
66
|
+
onCut: onCut
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
var _default = exports.default = FallbackEditor;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.longtext-preview-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
padding: 16px;
|
|
5
|
+
overflow: auto;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.longtext-preview-container .sf-slate-viewer-scroll-container {
|
|
9
|
+
overflow-y: auto;
|
|
10
|
+
height: fit-content;
|
|
11
|
+
padding: 0;
|
|
12
|
+
background: #fff;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.longtext-preview-container .sf-slate-viewer-article-container {
|
|
16
|
+
height: 100%;
|
|
17
|
+
width: 100%;
|
|
18
|
+
margin: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.longtext-preview-container .sf-slate-viewer-article-container .article {
|
|
22
|
+
padding: 0;
|
|
23
|
+
height: auto;
|
|
24
|
+
min-height: 100% !important;
|
|
25
|
+
border: 0;
|
|
26
|
+
color: #212529;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.longtext-preview-container .article :first-child {
|
|
30
|
+
margin-top: 0;
|
|
31
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _loading = _interopRequireDefault(require("../../../containers/loading"));
|
|
11
|
+
var _slateConvert = require("../../../slate-convert");
|
|
12
|
+
var _slateViewer = _interopRequireDefault(require("../../../editors/slate-viewer"));
|
|
13
|
+
require("./index.css");
|
|
14
|
+
// Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
|
|
15
|
+
// Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
|
|
16
|
+
// so use dangerouslySetInnerHTML to preview
|
|
17
|
+
class Formatter extends _react.default.PureComponent {
|
|
18
|
+
constructor(props) {
|
|
19
|
+
super(props);
|
|
20
|
+
(0, _defineProperty2.default)(this, "convertMarkdown", mdFile => {
|
|
21
|
+
_slateConvert.processor.process(mdFile).then(result => {
|
|
22
|
+
let innerHtml = String(result).replace(/<a /ig, '<a target="_blank" tabindex="-1"');
|
|
23
|
+
this.setState({
|
|
24
|
+
innerHtml
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
this.state = {
|
|
29
|
+
innerHtml: null
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
componentDidMount() {
|
|
33
|
+
const {
|
|
34
|
+
isWindowsWechat,
|
|
35
|
+
value
|
|
36
|
+
} = this.props;
|
|
37
|
+
if (isWindowsWechat) {
|
|
38
|
+
this.convertMarkdown(value);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
const {
|
|
43
|
+
isWindowsWechat,
|
|
44
|
+
value,
|
|
45
|
+
isShowOutline
|
|
46
|
+
} = this.props;
|
|
47
|
+
const {
|
|
48
|
+
innerHtml
|
|
49
|
+
} = this.state;
|
|
50
|
+
if (isWindowsWechat && innerHtml === null) {
|
|
51
|
+
return /*#__PURE__*/_react.default.createElement(_loading.default, null);
|
|
52
|
+
}
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
54
|
+
className: "longtext-preview-container"
|
|
55
|
+
}, isWindowsWechat && /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
+
className: "article",
|
|
57
|
+
dangerouslySetInnerHTML: {
|
|
58
|
+
__html: this.state.innerHtml
|
|
59
|
+
}
|
|
60
|
+
}), !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_slateViewer.default, {
|
|
61
|
+
value: value,
|
|
62
|
+
isShowOutline: isShowOutline
|
|
63
|
+
}));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
var _default = exports.default = Formatter;
|
|
@@ -7,132 +7,114 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var
|
|
11
|
-
var
|
|
10
|
+
var _isHotkey = _interopRequireDefault(require("is-hotkey"));
|
|
11
|
+
var _clickOutside = _interopRequireDefault(require("./click-outside"));
|
|
12
|
+
var _formatter = _interopRequireDefault(require("./formatter"));
|
|
13
|
+
var _fallbackEditor = _interopRequireDefault(require("./fallback-editor"));
|
|
14
|
+
var _normalEditor = _interopRequireDefault(require("./normal-editor"));
|
|
15
|
+
var _slateConvert = require("../../slate-convert");
|
|
12
16
|
var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
|
|
13
|
-
var
|
|
14
|
-
var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
|
|
17
|
+
var _extension = require("../../extension");
|
|
15
18
|
require("./index.css");
|
|
16
|
-
const LongTextInlineEditor = _ref => {
|
|
19
|
+
const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
17
20
|
let {
|
|
21
|
+
autoSave,
|
|
22
|
+
isCheckBrowser,
|
|
23
|
+
saveDelay,
|
|
24
|
+
value,
|
|
18
25
|
lang,
|
|
19
26
|
headerName,
|
|
20
|
-
|
|
21
|
-
autoSave = true,
|
|
22
|
-
saveDelay = 60000,
|
|
23
|
-
isCheckBrowser = false,
|
|
24
|
-
editorApi,
|
|
27
|
+
onPreviewClick,
|
|
25
28
|
onSaveEditorValue,
|
|
26
|
-
|
|
29
|
+
editorApi
|
|
27
30
|
} = _ref;
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
const
|
|
33
|
-
const [
|
|
34
|
-
text: propsValue
|
|
35
|
-
} : propsValue);
|
|
31
|
+
const [isShowEditor, setShowEditor] = (0, _react.useState)(false);
|
|
32
|
+
const valueRef = (0, _react.useRef)(typeof value === 'string' ? {
|
|
33
|
+
text: value
|
|
34
|
+
} : value);
|
|
35
|
+
const longTextValueChangedRef = (0, _react.useRef)(false);
|
|
36
|
+
const [focusNodePath, setFocusNodePath] = (0, _react.useState)([0, 0]);
|
|
36
37
|
const {
|
|
37
38
|
isWindowsWechat
|
|
38
39
|
} = (0, _react.useMemo)(() => {
|
|
39
40
|
return (0, _getBrowserInfo.default)(isCheckBrowser);
|
|
40
41
|
}, [isCheckBrowser]);
|
|
41
|
-
const
|
|
42
|
-
let
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}, [onSaveEditorValue, onEditorValueChanged]);
|
|
50
|
-
const handelAutoSave = (0, _react.useCallback)(() => {
|
|
51
|
-
if (!isValueChanged) return;
|
|
52
|
-
saveValue(value, true);
|
|
53
|
-
}, [isValueChanged, value, saveValue]);
|
|
54
|
-
const onContentChanged = (0, _react.useCallback)(() => {
|
|
55
|
-
// delay to update editor's content
|
|
56
|
-
setTimeout(() => {
|
|
57
|
-
var _editorRef$current, _editorRef$current2;
|
|
58
|
-
// update parent's component cache value
|
|
59
|
-
const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
|
|
60
|
-
const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
|
|
61
|
-
const {
|
|
62
|
-
previewText,
|
|
63
|
-
images,
|
|
64
|
-
links,
|
|
65
|
-
checklist
|
|
66
|
-
} = (0, _getPreviewContent.default)(slateNodes, false);
|
|
67
|
-
const value = {
|
|
68
|
-
text: markdownString,
|
|
69
|
-
preview: previewText,
|
|
70
|
-
images: images,
|
|
71
|
-
links: links,
|
|
72
|
-
checklist
|
|
73
|
-
};
|
|
74
|
-
saveValue(value);
|
|
75
|
-
}, 0);
|
|
76
|
-
}, [saveValue]);
|
|
77
|
-
const openEditorDialog = (0, _react.useCallback)(() => {
|
|
78
|
-
const {
|
|
79
|
-
height
|
|
80
|
-
} = editorContainerRef.current.getBoundingClientRect();
|
|
81
|
-
setStyle({
|
|
82
|
-
height
|
|
83
|
-
});
|
|
84
|
-
setShowExpandEditor(true);
|
|
85
|
-
}, [editorContainerRef]);
|
|
86
|
-
const onCloseEditorDialog = (0, _react.useCallback)(value => {
|
|
87
|
-
value && saveValue(value);
|
|
88
|
-
setStyle({});
|
|
89
|
-
setShowExpandEditor(false);
|
|
90
|
-
}, [saveValue]);
|
|
91
|
-
(0, _react.useEffect)(() => {
|
|
92
|
-
let timer = null;
|
|
93
|
-
if (autoSave) {
|
|
94
|
-
timer = setTimeout(() => {
|
|
95
|
-
handelAutoSave();
|
|
96
|
-
}, saveDelay);
|
|
42
|
+
const openEditor = (0, _react.useCallback)(function () {
|
|
43
|
+
let focusNodePath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
|
|
44
|
+
setFocusNodePath(focusNodePath);
|
|
45
|
+
setShowEditor(true);
|
|
46
|
+
}, []);
|
|
47
|
+
const closeEditor = (0, _react.useCallback)(() => {
|
|
48
|
+
if (longTextValueChangedRef.current) {
|
|
49
|
+
onSaveEditorValue(valueRef.current);
|
|
97
50
|
}
|
|
98
|
-
|
|
99
|
-
|
|
51
|
+
setShowEditor(false);
|
|
52
|
+
}, [longTextValueChangedRef, valueRef, onSaveEditorValue]);
|
|
53
|
+
const getAttributeNode = (0, _react.useCallback)(function (node, attribute) {
|
|
54
|
+
let deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
|
|
55
|
+
if (!node || !node.getAttribute) return null;
|
|
56
|
+
if (deep === -1) return null;
|
|
57
|
+
if (node.getAttribute(attribute)) return node.getAttribute(attribute);
|
|
58
|
+
if (node.parentNode) return getAttributeNode(node.parentNode, attribute, deep--);
|
|
59
|
+
}, []);
|
|
60
|
+
const previewClick = (0, _react.useCallback)((event, richValue) => {
|
|
61
|
+
if (event.target.nodeName === 'A') return;
|
|
62
|
+
const nodeId = getAttributeNode(event.target, 'data-id');
|
|
63
|
+
onPreviewClick && onPreviewClick();
|
|
64
|
+
openEditor((0, _extension.getNodePathById)({
|
|
65
|
+
children: richValue
|
|
66
|
+
}, nodeId));
|
|
67
|
+
}, [onPreviewClick, openEditor, getAttributeNode]);
|
|
68
|
+
const onEditorValueChanged = (0, _react.useCallback)(value => {
|
|
69
|
+
valueRef.current = value;
|
|
70
|
+
longTextValueChangedRef.current = true;
|
|
71
|
+
}, []);
|
|
72
|
+
const onHotKey = (0, _react.useCallback)(event => {
|
|
73
|
+
const keyCode = event.keyCode;
|
|
74
|
+
const isModP = (0, _isHotkey.default)('mod+p', event);
|
|
75
|
+
if (keyCode === 27 || isModP) {
|
|
76
|
+
event.preventDefault();
|
|
77
|
+
!isModP && event.stopPropagation();
|
|
78
|
+
closeEditor();
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
}, [closeEditor]);
|
|
82
|
+
(0, _react.useImperativeHandle)(ref, () => {
|
|
83
|
+
return {
|
|
84
|
+
openEditor: openEditor,
|
|
85
|
+
closeEditor: closeEditor
|
|
100
86
|
};
|
|
101
|
-
}, [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
onExpandEditorToggle: openEditorDialog
|
|
114
|
-
}) : /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
-
className: "sf-simple-slate-editor-container"
|
|
87
|
+
}, [openEditor, closeEditor]);
|
|
88
|
+
if (!isShowEditor) {
|
|
89
|
+
const richValue = (0, _slateConvert.mdStringToSlate)(valueRef.current.text);
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
91
|
+
className: "sf-long-text-inline-editor-container preview",
|
|
92
|
+
onClick: event => previewClick(event, richValue)
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_formatter.default, {
|
|
94
|
+
value: isWindowsWechat ? valueRef.current : richValue
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
return /*#__PURE__*/_react.default.createElement(_clickOutside.default, {
|
|
98
|
+
onClickOutside: closeEditor
|
|
116
99
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
-
className: "
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
})
|
|
100
|
+
className: "w-100",
|
|
101
|
+
onKeyDown: onHotKey
|
|
102
|
+
}, isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_fallbackEditor.default, {
|
|
103
|
+
isShowEditor: isShowEditor,
|
|
104
|
+
value: valueRef.current.text,
|
|
105
|
+
onChange: onEditorValueChanged,
|
|
106
|
+
closeEditor: closeEditor
|
|
107
|
+
}) : /*#__PURE__*/_react.default.createElement(_normalEditor.default, {
|
|
125
108
|
lang: lang,
|
|
126
|
-
readOnly: false,
|
|
127
109
|
headerName: headerName,
|
|
128
|
-
|
|
110
|
+
focusNodePath: focusNodePath,
|
|
111
|
+
value: valueRef.current.text,
|
|
129
112
|
autoSave: autoSave,
|
|
130
113
|
saveDelay: saveDelay,
|
|
131
114
|
isCheckBrowser: isCheckBrowser,
|
|
132
115
|
editorApi: editorApi,
|
|
133
|
-
onSaveEditorValue:
|
|
134
|
-
onEditorValueChanged:
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
};
|
|
116
|
+
onSaveEditorValue: onSaveEditorValue,
|
|
117
|
+
onEditorValueChanged: onEditorValueChanged
|
|
118
|
+
})));
|
|
119
|
+
});
|
|
138
120
|
var _default = exports.default = LongTextInlineEditor;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
|
|
11
|
+
var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
|
|
12
|
+
var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
|
|
13
|
+
var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
|
|
14
|
+
const NormalEditor = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
focusNodePath,
|
|
17
|
+
lang,
|
|
18
|
+
headerName,
|
|
19
|
+
value: propsValue,
|
|
20
|
+
autoSave = true,
|
|
21
|
+
saveDelay = 60000,
|
|
22
|
+
isCheckBrowser = false,
|
|
23
|
+
editorApi,
|
|
24
|
+
onSaveEditorValue,
|
|
25
|
+
onEditorValueChanged
|
|
26
|
+
} = _ref;
|
|
27
|
+
const editorContainerRef = (0, _react.useRef)(null);
|
|
28
|
+
const editorRef = (0, _react.useRef)(null);
|
|
29
|
+
const [style, setStyle] = (0, _react.useState)({});
|
|
30
|
+
const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
|
|
31
|
+
const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
|
|
32
|
+
const [value, setValue] = (0, _react.useState)(typeof propsValue === 'string' ? {
|
|
33
|
+
text: propsValue
|
|
34
|
+
} : propsValue);
|
|
35
|
+
const saveValue = (0, _react.useCallback)(function (value) {
|
|
36
|
+
let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
37
|
+
setValueChanged(true);
|
|
38
|
+
setValue(value);
|
|
39
|
+
onEditorValueChanged && onEditorValueChanged(value);
|
|
40
|
+
if (!save) return;
|
|
41
|
+
onSaveEditorValue && onSaveEditorValue(value);
|
|
42
|
+
setValueChanged(false);
|
|
43
|
+
}, [onSaveEditorValue, onEditorValueChanged]);
|
|
44
|
+
const handelAutoSave = (0, _react.useCallback)(() => {
|
|
45
|
+
if (!isValueChanged) return;
|
|
46
|
+
saveValue(value, true);
|
|
47
|
+
}, [isValueChanged, value, saveValue]);
|
|
48
|
+
const onContentChanged = (0, _react.useCallback)(() => {
|
|
49
|
+
// delay to update editor's content
|
|
50
|
+
setTimeout(() => {
|
|
51
|
+
var _editorRef$current, _editorRef$current2;
|
|
52
|
+
// update parent's component cache value
|
|
53
|
+
const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
|
|
54
|
+
const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
|
|
55
|
+
const {
|
|
56
|
+
previewText,
|
|
57
|
+
images,
|
|
58
|
+
links,
|
|
59
|
+
checklist
|
|
60
|
+
} = (0, _getPreviewContent.default)(slateNodes, false);
|
|
61
|
+
const value = {
|
|
62
|
+
text: markdownString,
|
|
63
|
+
preview: previewText,
|
|
64
|
+
images: images,
|
|
65
|
+
links: links,
|
|
66
|
+
checklist
|
|
67
|
+
};
|
|
68
|
+
saveValue(value);
|
|
69
|
+
}, 0);
|
|
70
|
+
}, [saveValue]);
|
|
71
|
+
const openEditorDialog = (0, _react.useCallback)(() => {
|
|
72
|
+
const {
|
|
73
|
+
height
|
|
74
|
+
} = editorContainerRef.current.getBoundingClientRect();
|
|
75
|
+
setStyle({
|
|
76
|
+
height
|
|
77
|
+
});
|
|
78
|
+
setShowExpandEditor(true);
|
|
79
|
+
}, [editorContainerRef]);
|
|
80
|
+
const onCloseEditorDialog = (0, _react.useCallback)(value => {
|
|
81
|
+
value && saveValue(value);
|
|
82
|
+
setStyle({});
|
|
83
|
+
setShowExpandEditor(false);
|
|
84
|
+
}, [saveValue]);
|
|
85
|
+
(0, _react.useEffect)(() => {
|
|
86
|
+
let timer = null;
|
|
87
|
+
if (autoSave) {
|
|
88
|
+
timer = setTimeout(() => {
|
|
89
|
+
handelAutoSave();
|
|
90
|
+
}, saveDelay);
|
|
91
|
+
}
|
|
92
|
+
return () => {
|
|
93
|
+
timer && clearTimeout(timer);
|
|
94
|
+
};
|
|
95
|
+
}, [autoSave, saveDelay, handelAutoSave]);
|
|
96
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
97
|
+
className: "sf-long-text-inline-editor-container",
|
|
98
|
+
style: style,
|
|
99
|
+
ref: editorContainerRef
|
|
100
|
+
}, !showExpandEditor ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
|
|
101
|
+
ref: editorRef,
|
|
102
|
+
isInline: true,
|
|
103
|
+
focusNodePath: focusNodePath,
|
|
104
|
+
value: value.text,
|
|
105
|
+
onSave: handelAutoSave,
|
|
106
|
+
editorApi: editorApi,
|
|
107
|
+
onContentChanged: onContentChanged,
|
|
108
|
+
onExpandEditorToggle: openEditorDialog
|
|
109
|
+
}) : /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
+
className: "sf-simple-slate-editor-container"
|
|
111
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
|
+
className: "sf-slate-editor-toolbar"
|
|
113
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
114
|
+
className: "sf-slate-editor-content"
|
|
115
|
+
}, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
|
|
116
|
+
value: value.text,
|
|
117
|
+
isShowOutline: false
|
|
118
|
+
})))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
|
|
119
|
+
lang: lang,
|
|
120
|
+
readOnly: false,
|
|
121
|
+
headerName: headerName,
|
|
122
|
+
value: value.text,
|
|
123
|
+
autoSave: autoSave,
|
|
124
|
+
saveDelay: saveDelay,
|
|
125
|
+
isCheckBrowser: isCheckBrowser,
|
|
126
|
+
editorApi: editorApi,
|
|
127
|
+
onSaveEditorValue: saveValue,
|
|
128
|
+
onEditorValueChanged: saveValue,
|
|
129
|
+
onCloseEditorDialog: onCloseEditorDialog
|
|
130
|
+
}));
|
|
131
|
+
};
|
|
132
|
+
var _default = exports.default = NormalEditor;
|
|
@@ -26,8 +26,7 @@ class MarkdownPreview extends _react.default.PureComponent {
|
|
|
26
26
|
});
|
|
27
27
|
});
|
|
28
28
|
this.state = {
|
|
29
|
-
innerHtml: null
|
|
30
|
-
richValue: null
|
|
29
|
+
innerHtml: null
|
|
31
30
|
};
|
|
32
31
|
}
|
|
33
32
|
componentDidMount() {
|
|
@@ -37,27 +36,20 @@ class MarkdownPreview extends _react.default.PureComponent {
|
|
|
37
36
|
} = this.props;
|
|
38
37
|
if (isWindowsWechat) {
|
|
39
38
|
this.convertMarkdown(value);
|
|
40
|
-
} else {
|
|
41
|
-
const richValue = (0, _slateConvert.mdStringToSlate)(value);
|
|
42
|
-
this.setState({
|
|
43
|
-
richValue
|
|
44
|
-
});
|
|
45
|
-
this.props.beforeRenderCallback && this.props.beforeRenderCallback(richValue);
|
|
46
39
|
}
|
|
47
40
|
}
|
|
48
41
|
render() {
|
|
49
42
|
const {
|
|
50
43
|
isWindowsWechat,
|
|
44
|
+
value,
|
|
51
45
|
isShowOutline
|
|
52
46
|
} = this.props;
|
|
53
47
|
const {
|
|
54
|
-
innerHtml
|
|
55
|
-
richValue
|
|
48
|
+
innerHtml
|
|
56
49
|
} = this.state;
|
|
57
50
|
if (isWindowsWechat && innerHtml === null) {
|
|
58
51
|
return /*#__PURE__*/_react.default.createElement(_loading.default, null);
|
|
59
52
|
}
|
|
60
|
-
if (!isWindowsWechat && !richValue) return null;
|
|
61
53
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
62
54
|
className: "longtext-preview-container"
|
|
63
55
|
}, isWindowsWechat && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -66,7 +58,7 @@ class MarkdownPreview extends _react.default.PureComponent {
|
|
|
66
58
|
__html: this.state.innerHtml
|
|
67
59
|
}
|
|
68
60
|
}), !isWindowsWechat && /*#__PURE__*/_react.default.createElement(_slateViewer.default, {
|
|
69
|
-
value:
|
|
61
|
+
value: (0, _slateConvert.mdStringToSlate)(value),
|
|
70
62
|
isShowOutline: isShowOutline
|
|
71
63
|
}));
|
|
72
64
|
}
|
|
@@ -11,6 +11,7 @@ var _loading = _interopRequireDefault(require("../containers/loading"));
|
|
|
11
11
|
var _slateConvert = require("../slate-convert");
|
|
12
12
|
var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
|
|
13
13
|
var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor"));
|
|
14
|
+
var _inlineEditor = _interopRequireDefault(require("../editors/inline-editor"));
|
|
14
15
|
const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
15
16
|
let {
|
|
16
17
|
isInline,
|
|
@@ -51,7 +52,6 @@ const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
51
52
|
propsOnContentChanged && propsOnContentChanged();
|
|
52
53
|
}, [propsOnContentChanged]);
|
|
53
54
|
const props = {
|
|
54
|
-
isInline,
|
|
55
55
|
isSupportFormula: !!mathJaxSource,
|
|
56
56
|
value: richValue,
|
|
57
57
|
editorApi: editorApi,
|
|
@@ -62,6 +62,9 @@ const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
62
62
|
if (isFetching || isLoading || isLoadingMathJax) {
|
|
63
63
|
return /*#__PURE__*/_react.default.createElement(_loading.default, null);
|
|
64
64
|
}
|
|
65
|
+
if (isInline) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement(_inlineEditor.default, props);
|
|
67
|
+
}
|
|
65
68
|
return /*#__PURE__*/_react.default.createElement(_simpleSlateEditor.default, props);
|
|
66
69
|
});
|
|
67
70
|
var _default = exports.default = SimpleEditor;
|