@seafile/seafile-editor 1.0.85-beta1 → 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 +6 -27
- 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/table/render-elem/index.js +6 -2
- package/dist/pages/longtext-inline-editor/fallback-editor.js +69 -0
- package/dist/pages/longtext-inline-editor/index.js +15 -23
- package/dist/pages/longtext-inline-editor/{editor.js → normal-editor.js} +5 -8
- package/dist/pages/simple-editor.js +4 -1
- package/package.json +1 -1
- /package/dist/pages/longtext-inline-editor/{ClickOutside/index.js → click-outside.js} +0 -0
|
@@ -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,8 +19,6 @@ require("./style.css");
|
|
|
19
19
|
const isMacOS = (0, _common.isMac)();
|
|
20
20
|
const SimpleSlateEditor = _ref => {
|
|
21
21
|
let {
|
|
22
|
-
isInline,
|
|
23
|
-
focusNodePath,
|
|
24
22
|
value,
|
|
25
23
|
editorApi,
|
|
26
24
|
onSave,
|
|
@@ -30,17 +28,14 @@ const SimpleSlateEditor = _ref => {
|
|
|
30
28
|
onExpandEditorToggle
|
|
31
29
|
} = _ref;
|
|
32
30
|
const [slateValue, setSlateValue] = (0, _react.useState)(value);
|
|
33
|
-
const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(
|
|
31
|
+
const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
|
|
34
32
|
editorApi,
|
|
35
33
|
onSave,
|
|
36
34
|
columns
|
|
37
|
-
}), [columns, editorApi, onSave
|
|
35
|
+
}), [columns, editorApi, onSave]);
|
|
38
36
|
const eventProxy = (0, _react.useMemo)(() => {
|
|
39
37
|
return new _eventHandler.default(editor);
|
|
40
38
|
}, [editor]);
|
|
41
|
-
const ToolbarComponent = (0, _react.useMemo)(() => {
|
|
42
|
-
return isInline ? _extension.InlineToolbar : _extension.Toolbar;
|
|
43
|
-
}, [isInline]);
|
|
44
39
|
const decorate = (0, _extension.useHighlight)(editor);
|
|
45
40
|
const onChange = (0, _react.useCallback)(value => {
|
|
46
41
|
setSlateValue(value);
|
|
@@ -53,21 +48,9 @@ const SimpleSlateEditor = _ref => {
|
|
|
53
48
|
const eventBus = _eventBus.default.getInstance();
|
|
54
49
|
eventBus.dispatch('change');
|
|
55
50
|
}, [editor, onContentChanged]);
|
|
56
|
-
const focusNode = (0, _react.useCallback)(
|
|
51
|
+
const focusNode = (0, _react.useCallback)(editor => {
|
|
57
52
|
const [firstNode] = editor.children;
|
|
58
53
|
if (!firstNode) return;
|
|
59
|
-
if (focusNodePath) {
|
|
60
|
-
const customFocusNodePath = (0, _core.getNode)(editor, focusNodePath);
|
|
61
|
-
if (customFocusNodePath) {
|
|
62
|
-
const startOfFirstNode = _slate.Editor.start(editor, focusNodePath);
|
|
63
|
-
const range = {
|
|
64
|
-
anchor: startOfFirstNode,
|
|
65
|
-
focus: startOfFirstNode
|
|
66
|
-
};
|
|
67
|
-
(0, _core.focusEditor)(editor, range);
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
54
|
const [firstNodeFirstChild] = firstNode.children;
|
|
72
55
|
if (firstNodeFirstChild) {
|
|
73
56
|
const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
|
|
@@ -103,7 +86,7 @@ const SimpleSlateEditor = _ref => {
|
|
|
103
86
|
});
|
|
104
87
|
const timer = setTimeout(() => {
|
|
105
88
|
editor.forceNormalize = false;
|
|
106
|
-
focusNode(editor
|
|
89
|
+
focusNode(editor);
|
|
107
90
|
}, 300);
|
|
108
91
|
return () => {
|
|
109
92
|
editor.forceNormalize = false;
|
|
@@ -131,11 +114,10 @@ const SimpleSlateEditor = _ref => {
|
|
|
131
114
|
}, [editor, focusNode]);
|
|
132
115
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
133
116
|
className: "sf-simple-slate-editor-container"
|
|
134
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
|
|
135
118
|
editor: editor,
|
|
136
119
|
isSupportFormula: isSupportFormula,
|
|
137
|
-
isSupportColumn: !!columns
|
|
138
|
-
onExpandEditorToggle: onExpandEditorToggle
|
|
120
|
+
isSupportColumn: !!columns
|
|
139
121
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
140
122
|
className: "sf-slate-editor-content",
|
|
141
123
|
onClick: onEditorClick
|
|
@@ -157,7 +139,4 @@ const SimpleSlateEditor = _ref => {
|
|
|
157
139
|
onCopy: eventProxy.onCopy
|
|
158
140
|
})))))));
|
|
159
141
|
};
|
|
160
|
-
SimpleSlateEditor.defaultProps = {
|
|
161
|
-
isInline: false
|
|
162
|
-
};
|
|
163
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 () {
|
|
@@ -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,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;
|
|
@@ -8,11 +8,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _isHotkey = _interopRequireDefault(require("is-hotkey"));
|
|
11
|
-
var
|
|
11
|
+
var _clickOutside = _interopRequireDefault(require("./click-outside"));
|
|
12
12
|
var _formatter = _interopRequireDefault(require("./formatter"));
|
|
13
|
-
var
|
|
13
|
+
var _fallbackEditor = _interopRequireDefault(require("./fallback-editor"));
|
|
14
|
+
var _normalEditor = _interopRequireDefault(require("./normal-editor"));
|
|
14
15
|
var _slateConvert = require("../../slate-convert");
|
|
15
16
|
var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
|
|
17
|
+
var _extension = require("../../extension");
|
|
18
|
+
require("./index.css");
|
|
16
19
|
const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
17
20
|
let {
|
|
18
21
|
autoSave,
|
|
@@ -49,34 +52,19 @@ const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
|
|
|
49
52
|
}, [longTextValueChangedRef, valueRef, onSaveEditorValue]);
|
|
50
53
|
const getAttributeNode = (0, _react.useCallback)(function (node, attribute) {
|
|
51
54
|
let deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 4;
|
|
52
|
-
if (!node) return null;
|
|
55
|
+
if (!node || !node.getAttribute) return null;
|
|
53
56
|
if (deep === -1) return null;
|
|
54
57
|
if (node.getAttribute(attribute)) return node.getAttribute(attribute);
|
|
55
58
|
if (node.parentNode) return getAttributeNode(node.parentNode, attribute, deep--);
|
|
56
59
|
}, []);
|
|
57
|
-
const getNodePathById = (0, _react.useCallback)(function (rootNode, nodeId) {
|
|
58
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
59
|
-
if (rootNode.id === nodeId) return path;
|
|
60
|
-
const {
|
|
61
|
-
children = []
|
|
62
|
-
} = rootNode;
|
|
63
|
-
for (let i = 0; i < children.length; i++) {
|
|
64
|
-
const child = children[i];
|
|
65
|
-
path.push(i);
|
|
66
|
-
const nodePath = getNodePathById(child, nodeId, path);
|
|
67
|
-
if (nodePath) return nodePath;
|
|
68
|
-
path.pop();
|
|
69
|
-
}
|
|
70
|
-
return null;
|
|
71
|
-
}, []);
|
|
72
60
|
const previewClick = (0, _react.useCallback)((event, richValue) => {
|
|
73
61
|
if (event.target.nodeName === 'A') return;
|
|
74
62
|
const nodeId = getAttributeNode(event.target, 'data-id');
|
|
75
63
|
onPreviewClick && onPreviewClick();
|
|
76
|
-
openEditor(getNodePathById({
|
|
64
|
+
openEditor((0, _extension.getNodePathById)({
|
|
77
65
|
children: richValue
|
|
78
66
|
}, nodeId));
|
|
79
|
-
}, [onPreviewClick, openEditor, getAttributeNode
|
|
67
|
+
}, [onPreviewClick, openEditor, getAttributeNode]);
|
|
80
68
|
const onEditorValueChanged = (0, _react.useCallback)(value => {
|
|
81
69
|
valueRef.current = value;
|
|
82
70
|
longTextValueChangedRef.current = true;
|
|
@@ -106,14 +94,18 @@ const LongTextInlineEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
|
|
|
106
94
|
value: isWindowsWechat ? valueRef.current : richValue
|
|
107
95
|
}));
|
|
108
96
|
}
|
|
109
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
97
|
+
return /*#__PURE__*/_react.default.createElement(_clickOutside.default, {
|
|
110
98
|
onClickOutside: closeEditor
|
|
111
99
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
100
|
className: "w-100",
|
|
113
101
|
onKeyDown: onHotKey
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
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, {
|
|
115
108
|
lang: lang,
|
|
116
|
-
isWindowsWechat: isWindowsWechat,
|
|
117
109
|
headerName: headerName,
|
|
118
110
|
focusNodePath: focusNodePath,
|
|
119
111
|
value: valueRef.current.text,
|
|
@@ -11,14 +11,12 @@ var _simpleEditor = _interopRequireDefault(require("../simple-editor"));
|
|
|
11
11
|
var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
|
|
12
12
|
var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
|
|
13
13
|
var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
|
|
14
|
-
|
|
15
|
-
const Editor = _ref => {
|
|
14
|
+
const NormalEditor = _ref => {
|
|
16
15
|
let {
|
|
16
|
+
focusNodePath,
|
|
17
17
|
lang,
|
|
18
18
|
headerName,
|
|
19
19
|
value: propsValue,
|
|
20
|
-
isWindowsWechat,
|
|
21
|
-
focusNodePath,
|
|
22
20
|
autoSave = true,
|
|
23
21
|
saveDelay = 60000,
|
|
24
22
|
isCheckBrowser = false,
|
|
@@ -99,10 +97,10 @@ const Editor = _ref => {
|
|
|
99
97
|
className: "sf-long-text-inline-editor-container",
|
|
100
98
|
style: style,
|
|
101
99
|
ref: editorContainerRef
|
|
102
|
-
}, !showExpandEditor
|
|
100
|
+
}, !showExpandEditor ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
|
|
101
|
+
ref: editorRef,
|
|
103
102
|
isInline: true,
|
|
104
103
|
focusNodePath: focusNodePath,
|
|
105
|
-
ref: editorRef,
|
|
106
104
|
value: value.text,
|
|
107
105
|
onSave: handelAutoSave,
|
|
108
106
|
editorApi: editorApi,
|
|
@@ -115,7 +113,6 @@ const Editor = _ref => {
|
|
|
115
113
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
116
114
|
className: "sf-slate-editor-content"
|
|
117
115
|
}, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
|
|
118
|
-
isWindowsWechat: isWindowsWechat,
|
|
119
116
|
value: value.text,
|
|
120
117
|
isShowOutline: false
|
|
121
118
|
})))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
|
|
@@ -132,4 +129,4 @@ const Editor = _ref => {
|
|
|
132
129
|
onCloseEditorDialog: onCloseEditorDialog
|
|
133
130
|
}));
|
|
134
131
|
};
|
|
135
|
-
var _default = exports.default =
|
|
132
|
+
var _default = exports.default = NormalEditor;
|
|
@@ -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;
|
package/package.json
CHANGED
|
File without changes
|