@seafile/seafile-editor 1.0.85 → 1.0.86-beta1
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 +162 -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 +4 -1
- package/dist/extension/plugins/link/render-elem/link-popover.js +0 -1
- package/dist/extension/plugins/link/render-elem/style.css +1 -1
- package/dist/extension/plugins/table/plugin.js +14 -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 +68 -0
- package/dist/pages/longtext-inline-editor/formatter/index.js +66 -0
- package/dist/pages/longtext-inline-editor/index.css +5 -10
- package/dist/pages/longtext-inline-editor/index.js +95 -107
- package/dist/pages/longtext-inline-editor/normal-editor.js +141 -0
- package/dist/pages/simple-editor.js +4 -1
- package/package.json +1 -1
- package/public/locales/en/seafile-editor.json +5 -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,162 @@
|
|
|
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
|
+
isShowEditor,
|
|
23
|
+
focusNodePath,
|
|
24
|
+
value,
|
|
25
|
+
editorApi,
|
|
26
|
+
onSave,
|
|
27
|
+
columns,
|
|
28
|
+
onContentChanged,
|
|
29
|
+
isSupportFormula,
|
|
30
|
+
onExpandEditorToggle,
|
|
31
|
+
updateFocus
|
|
32
|
+
} = _ref;
|
|
33
|
+
const [slateValue, setSlateValue] = (0, _react.useState)(value);
|
|
34
|
+
const editor = (0, _react.useMemo)(() => {
|
|
35
|
+
const baseEditor = (0, _extension.inlineEditor)();
|
|
36
|
+
return (0, _withPropsEditor.default)(baseEditor, {
|
|
37
|
+
editorApi,
|
|
38
|
+
onSave,
|
|
39
|
+
columns
|
|
40
|
+
});
|
|
41
|
+
}, [columns, editorApi, onSave]);
|
|
42
|
+
const eventProxy = (0, _react.useMemo)(() => {
|
|
43
|
+
return new _eventHandler.default(editor);
|
|
44
|
+
}, [editor]);
|
|
45
|
+
const decorate = (0, _extension.useHighlight)(editor);
|
|
46
|
+
const onChange = (0, _react.useCallback)(value => {
|
|
47
|
+
setSlateValue(value);
|
|
48
|
+
if (editor.forceNormalize) return;
|
|
49
|
+
const operations = editor.operations;
|
|
50
|
+
const modifyOps = operations.filter(o => o.type !== 'set_selection');
|
|
51
|
+
if (modifyOps.length > 0) {
|
|
52
|
+
onContentChanged && onContentChanged(value);
|
|
53
|
+
}
|
|
54
|
+
const eventBus = _eventBus.default.getInstance();
|
|
55
|
+
eventBus.dispatch('change');
|
|
56
|
+
}, [editor, onContentChanged]);
|
|
57
|
+
const focusNode = (0, _react.useCallback)((editor, focusNodePath) => {
|
|
58
|
+
const [firstNode] = editor.children;
|
|
59
|
+
if (!firstNode) return;
|
|
60
|
+
if (focusNodePath && Array.isArray(focusNodePath)) {
|
|
61
|
+
const customFocusNodePath = (0, _core.getNode)(editor, focusNodePath);
|
|
62
|
+
if (customFocusNodePath) {
|
|
63
|
+
const startOfFirstNode = _slate.Editor.start(editor, focusNodePath);
|
|
64
|
+
const range = {
|
|
65
|
+
anchor: startOfFirstNode,
|
|
66
|
+
focus: startOfFirstNode
|
|
67
|
+
};
|
|
68
|
+
(0, _core.focusEditor)(editor, range);
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
if (focusNodePath && typeof focusNodePath === 'object' && focusNodePath.anchor) {
|
|
73
|
+
(0, _core.focusEditor)(editor, focusNodePath);
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const [firstNodeFirstChild] = firstNode.children;
|
|
77
|
+
if (firstNodeFirstChild) {
|
|
78
|
+
const startOfFirstNode = _slate.Editor.start(editor, [0, 0]);
|
|
79
|
+
const range = {
|
|
80
|
+
anchor: startOfFirstNode,
|
|
81
|
+
focus: startOfFirstNode
|
|
82
|
+
};
|
|
83
|
+
(0, _core.focusEditor)(editor, range);
|
|
84
|
+
}
|
|
85
|
+
}, []);
|
|
86
|
+
|
|
87
|
+
// useMount: focus editor
|
|
88
|
+
(0, _react.useEffect)(() => {
|
|
89
|
+
editor.forceNormalize = true;
|
|
90
|
+
_slate.Editor.normalize(editor, {
|
|
91
|
+
force: true
|
|
92
|
+
});
|
|
93
|
+
const timer = setTimeout(() => {
|
|
94
|
+
editor.forceNormalize = false;
|
|
95
|
+
if (isShowEditor) {
|
|
96
|
+
focusNode(editor, focusNodePath);
|
|
97
|
+
}
|
|
98
|
+
}, 300);
|
|
99
|
+
return () => {
|
|
100
|
+
editor.forceNormalize = false;
|
|
101
|
+
clearTimeout(timer);
|
|
102
|
+
};
|
|
103
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
104
|
+
}, []);
|
|
105
|
+
(0, _react.useEffect)(() => {
|
|
106
|
+
if (focusNodePath) {
|
|
107
|
+
console.log(focusNodePath);
|
|
108
|
+
focusNode(editor, focusNodePath);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
112
|
+
}, [focusNodePath]);
|
|
113
|
+
|
|
114
|
+
// willUnmount
|
|
115
|
+
(0, _react.useEffect)(() => {
|
|
116
|
+
return () => {
|
|
117
|
+
editor.selection = null;
|
|
118
|
+
editor.history = {
|
|
119
|
+
redos: [],
|
|
120
|
+
undos: []
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
|
+
}, []);
|
|
125
|
+
const onEditorClick = (0, _react.useCallback)(() => {
|
|
126
|
+
const value = editor.children;
|
|
127
|
+
if (value.length === 1 && _slate.Node.string(value[0]).length === 0) {
|
|
128
|
+
focusNode(editor);
|
|
129
|
+
}
|
|
130
|
+
if (!isShowEditor) {
|
|
131
|
+
updateFocus(editor.selection);
|
|
132
|
+
}
|
|
133
|
+
}, [isShowEditor, editor, focusNode, updateFocus]);
|
|
134
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
135
|
+
className: "sf-simple-slate-editor-container"
|
|
136
|
+
}, isShowEditor && /*#__PURE__*/_react.default.createElement(_extension.InlineToolbar, {
|
|
137
|
+
editor: editor,
|
|
138
|
+
isSupportFormula: isSupportFormula,
|
|
139
|
+
isSupportColumn: !!columns,
|
|
140
|
+
onExpandEditorToggle: onExpandEditorToggle
|
|
141
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
142
|
+
className: "sf-slate-editor-content",
|
|
143
|
+
onClick: onEditorClick
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
|
|
145
|
+
editor: editor,
|
|
146
|
+
initialValue: slateValue,
|
|
147
|
+
onChange: onChange
|
|
148
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
149
|
+
className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
|
|
150
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
+
className: "sf-slate-article-container"
|
|
152
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
153
|
+
className: "article"
|
|
154
|
+
}, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
|
|
155
|
+
decorate: decorate,
|
|
156
|
+
renderElement: _extension.renderElement,
|
|
157
|
+
renderLeaf: _extension.renderLeaf,
|
|
158
|
+
onKeyDown: eventProxy.onKeyDown,
|
|
159
|
+
onCopy: eventProxy.onCopy
|
|
160
|
+
})))))));
|
|
161
|
+
};
|
|
162
|
+
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,6 +28,9 @@ 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]);
|
|
31
34
|
const onClosePopover = (0, _react.useCallback)(e => {
|
|
32
35
|
unregisterClickEvent();
|
|
33
36
|
setIsShowPopover(false);
|
|
@@ -77,7 +80,7 @@ const renderLink = (_ref, editor) => {
|
|
|
77
80
|
}, attributes), /*#__PURE__*/_react.default.createElement("a", {
|
|
78
81
|
href: element.url,
|
|
79
82
|
onClick: onHrefClick
|
|
80
|
-
}, children)), isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
|
|
83
|
+
}, children)), isLinkActive && isShowPopover && /*#__PURE__*/_react.default.createElement(_linkPopover.default, {
|
|
81
84
|
popoverPosition: popoverPosition,
|
|
82
85
|
linkUrl: element.url,
|
|
83
86
|
editor: editor,
|
|
@@ -14,7 +14,6 @@ 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");
|
|
18
17
|
const LinkPopover = _ref => {
|
|
19
18
|
let {
|
|
20
19
|
linkUrl,
|
|
@@ -286,7 +286,20 @@ const withTable = editor => {
|
|
|
286
286
|
// selected only one cell
|
|
287
287
|
const tableCell = (0, _core.getSelectedNodeByType)(newEditor, _elementTypes.TABLE_CELL);
|
|
288
288
|
if (tableCell) {
|
|
289
|
-
|
|
289
|
+
const selection = window.getSelection();
|
|
290
|
+
const range = selection.getRangeAt(0);
|
|
291
|
+
const selectedContent = range.cloneContents();
|
|
292
|
+
const div = document.createElement('div');
|
|
293
|
+
// Unwrap image wrapper
|
|
294
|
+
selectedContent.childNodes.forEach(node => {
|
|
295
|
+
if (node.classList && node.classList.contains('sf-image-wrapper')) {
|
|
296
|
+
const img = node.querySelector('img');
|
|
297
|
+
div.appendChild(img.cloneNode(true));
|
|
298
|
+
return;
|
|
299
|
+
}
|
|
300
|
+
div.appendChild(node.cloneNode(true));
|
|
301
|
+
});
|
|
302
|
+
(0, _setEventTransfer.default)(event, 'html', div.innerHTML.toString());
|
|
290
303
|
return true;
|
|
291
304
|
}
|
|
292
305
|
return false;
|
|
@@ -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,68 @@
|
|
|
1
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
border-radius: 3px;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
padding: 16px 12px;
|
|
8
|
+
background-color: #FFF;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container .sf-slate-viewer-scroll-container {
|
|
12
|
+
overflow-y: auto;
|
|
13
|
+
height: fit-content;
|
|
14
|
+
padding: 0;
|
|
15
|
+
background: #fff;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container .sf-slate-viewer-article-container {
|
|
19
|
+
height: 100%;
|
|
20
|
+
width: 100%;
|
|
21
|
+
margin: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container .sf-slate-viewer-article-container .article {
|
|
25
|
+
padding: 0;
|
|
26
|
+
height: auto;
|
|
27
|
+
min-height: 100% !important;
|
|
28
|
+
border: 0;
|
|
29
|
+
color: #212529;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ol,
|
|
33
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ul {
|
|
34
|
+
padding-inline-start: 40px;
|
|
35
|
+
margin-bottom: 1em;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ol li a,
|
|
39
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ul li a {
|
|
40
|
+
word-break: break-all;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ul.contains-task-list,
|
|
44
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ol.contains-task-list {
|
|
45
|
+
padding-inline-start: 20px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ul li.task-list-item,
|
|
49
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container ol li.task-list-item {
|
|
50
|
+
min-height: 20px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container li.task-list-item input[type=checkbox] {
|
|
54
|
+
position: absolute;
|
|
55
|
+
left: -1.4em;
|
|
56
|
+
top: .4em;
|
|
57
|
+
display: inline-block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container thead tr {
|
|
61
|
+
min-height: 42px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.sf-long-text-inline-editor-container.preview .longtext-preview-container tbody tr {
|
|
65
|
+
font-weight: normal;
|
|
66
|
+
min-height: 42px;
|
|
67
|
+
}
|
|
68
|
+
|
|
@@ -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;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
.sf-long-text-inline-editor-container {
|
|
2
2
|
width: 100%;
|
|
3
3
|
height: 100%;
|
|
4
|
+
min-height: 38px;
|
|
4
5
|
border: 1px solid rgba(0, 40, 100, .12);
|
|
5
6
|
border-radius: 3px;
|
|
6
7
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
@@ -37,16 +38,6 @@
|
|
|
37
38
|
padding: 16px !important;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
|
-
/* preview */
|
|
41
|
-
.sf-long-text-inline-editor-container .longtext-preview-container {
|
|
42
|
-
padding: 10px;
|
|
43
|
-
background-color: #fff;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.sf-long-text-inline-editor-container .sf-slate-editor-content .article > div[role="textbox"] > :first-child {
|
|
47
|
-
margin-top: 0 !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
41
|
.sf-long-text-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group,
|
|
51
42
|
.sf-editor-menu-popover .popover-inner .sf-menu-group {
|
|
52
43
|
padding: 4px 0 4px 8px !important;
|
|
@@ -69,3 +60,7 @@
|
|
|
69
60
|
.sf-editor-menu-popover .popover-inner {
|
|
70
61
|
display: flex;
|
|
71
62
|
}
|
|
63
|
+
|
|
64
|
+
.sf-long-text-inline-editor-container:not(.preview) .article>div[role=textbox]>:first-child {
|
|
65
|
+
margin-top: 0;
|
|
66
|
+
}
|
|
@@ -7,132 +7,120 @@ 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)(null);
|
|
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
|
+
|
|
65
|
+
// openEditor(getNodePathById({ children: richValue }, nodeId));
|
|
66
|
+
}, [onPreviewClick, openEditor, getAttributeNode]);
|
|
67
|
+
const onEditorValueChanged = (0, _react.useCallback)(value => {
|
|
68
|
+
valueRef.current = value;
|
|
69
|
+
longTextValueChangedRef.current = true;
|
|
70
|
+
}, []);
|
|
71
|
+
const onHotKey = (0, _react.useCallback)(event => {
|
|
72
|
+
const keyCode = event.keyCode;
|
|
73
|
+
const isModP = (0, _isHotkey.default)('mod+p', event);
|
|
74
|
+
if (keyCode === 27 || isModP) {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
!isModP && event.stopPropagation();
|
|
77
|
+
closeEditor();
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
}, [closeEditor]);
|
|
81
|
+
(0, _react.useImperativeHandle)(ref, () => {
|
|
82
|
+
return {
|
|
83
|
+
openEditor: openEditor,
|
|
84
|
+
closeEditor: closeEditor
|
|
100
85
|
};
|
|
101
|
-
}, [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
86
|
+
}, [openEditor, closeEditor]);
|
|
87
|
+
const updateFocus = (0, _react.useCallback)(focusRange => {
|
|
88
|
+
console.log(focusRange);
|
|
89
|
+
openEditor(focusRange);
|
|
90
|
+
}, [openEditor]);
|
|
91
|
+
|
|
92
|
+
// if (!isShowEditor) {
|
|
93
|
+
// const richValue = mdStringToSlate(valueRef.current.text);
|
|
94
|
+
// return (
|
|
95
|
+
// <div className="sf-long-text-inline-editor-container preview" onClick={(event) => previewClick(event, richValue)} >
|
|
96
|
+
// {valueRef.current.text && (<Formatter value={isWindowsWechat ? valueRef.current : richValue} />)}
|
|
97
|
+
// </div>
|
|
98
|
+
// );
|
|
99
|
+
// }
|
|
100
|
+
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_clickOutside.default, {
|
|
102
|
+
onClickOutside: closeEditor
|
|
116
103
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
-
className: "
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
})
|
|
104
|
+
className: "w-100",
|
|
105
|
+
onKeyDown: onHotKey
|
|
106
|
+
}, isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_fallbackEditor.default, {
|
|
107
|
+
isShowEditor: isShowEditor,
|
|
108
|
+
value: valueRef.current.text,
|
|
109
|
+
onChange: onEditorValueChanged,
|
|
110
|
+
closeEditor: closeEditor
|
|
111
|
+
}) : /*#__PURE__*/_react.default.createElement(_normalEditor.default, {
|
|
112
|
+
isShowEditor: isShowEditor,
|
|
113
|
+
updateFocus: updateFocus,
|
|
125
114
|
lang: lang,
|
|
126
|
-
readOnly: false,
|
|
127
115
|
headerName: headerName,
|
|
128
|
-
|
|
116
|
+
focusNodePath: focusNodePath,
|
|
117
|
+
value: valueRef.current.text,
|
|
129
118
|
autoSave: autoSave,
|
|
130
119
|
saveDelay: saveDelay,
|
|
131
120
|
isCheckBrowser: isCheckBrowser,
|
|
132
121
|
editorApi: editorApi,
|
|
133
|
-
onSaveEditorValue:
|
|
134
|
-
onEditorValueChanged:
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
};
|
|
122
|
+
onSaveEditorValue: onSaveEditorValue,
|
|
123
|
+
onEditorValueChanged: onEditorValueChanged
|
|
124
|
+
})));
|
|
125
|
+
});
|
|
138
126
|
var _default = exports.default = LongTextInlineEditor;
|
|
@@ -0,0 +1,141 @@
|
|
|
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
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
const NormalEditor = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
isShowEditor,
|
|
18
|
+
updateFocus,
|
|
19
|
+
focusNodePath,
|
|
20
|
+
lang,
|
|
21
|
+
headerName,
|
|
22
|
+
value: propsValue,
|
|
23
|
+
autoSave = true,
|
|
24
|
+
saveDelay = 60000,
|
|
25
|
+
isCheckBrowser = false,
|
|
26
|
+
editorApi,
|
|
27
|
+
onSaveEditorValue,
|
|
28
|
+
onEditorValueChanged
|
|
29
|
+
} = _ref;
|
|
30
|
+
const editorContainerRef = (0, _react.useRef)(null);
|
|
31
|
+
const editorRef = (0, _react.useRef)(null);
|
|
32
|
+
const [style, setStyle] = (0, _react.useState)({});
|
|
33
|
+
const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
|
|
34
|
+
const valueRef = (0, _react.useRef)(typeof propsValue === 'string' ? {
|
|
35
|
+
text: propsValue
|
|
36
|
+
} : propsValue);
|
|
37
|
+
const valueChangedRef = (0, _react.useRef)(false);
|
|
38
|
+
const saveValue = (0, _react.useCallback)(function (value) {
|
|
39
|
+
let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
40
|
+
valueChangedRef.current = true;
|
|
41
|
+
onEditorValueChanged && onEditorValueChanged(value);
|
|
42
|
+
if (!save) return;
|
|
43
|
+
onSaveEditorValue && onSaveEditorValue(value);
|
|
44
|
+
valueChangedRef.current = false;
|
|
45
|
+
}, [onSaveEditorValue, onEditorValueChanged]);
|
|
46
|
+
const handelAutoSave = (0, _react.useCallback)(() => {
|
|
47
|
+
if (!valueChangedRef.current) return;
|
|
48
|
+
saveValue(valueRef.current, true);
|
|
49
|
+
}, [saveValue]);
|
|
50
|
+
const onContentChanged = (0, _react.useCallback)(() => {
|
|
51
|
+
// delay to update editor's content
|
|
52
|
+
setTimeout(() => {
|
|
53
|
+
var _editorRef$current, _editorRef$current2;
|
|
54
|
+
// update parent's component cache value
|
|
55
|
+
const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
|
|
56
|
+
const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
|
|
57
|
+
const {
|
|
58
|
+
previewText,
|
|
59
|
+
images,
|
|
60
|
+
links,
|
|
61
|
+
checklist
|
|
62
|
+
} = (0, _getPreviewContent.default)(slateNodes, false);
|
|
63
|
+
valueRef.current = {
|
|
64
|
+
text: markdownString,
|
|
65
|
+
preview: previewText,
|
|
66
|
+
images: images,
|
|
67
|
+
links: links,
|
|
68
|
+
checklist
|
|
69
|
+
};
|
|
70
|
+
saveValue(valueRef.current);
|
|
71
|
+
}, 0);
|
|
72
|
+
}, [saveValue]);
|
|
73
|
+
const openEditorDialog = (0, _react.useCallback)(() => {
|
|
74
|
+
const {
|
|
75
|
+
height
|
|
76
|
+
} = editorContainerRef.current.getBoundingClientRect();
|
|
77
|
+
setStyle({
|
|
78
|
+
height
|
|
79
|
+
});
|
|
80
|
+
setShowExpandEditor(true);
|
|
81
|
+
}, [editorContainerRef]);
|
|
82
|
+
const onCloseEditorDialog = (0, _react.useCallback)(value => {
|
|
83
|
+
if (value) {
|
|
84
|
+
valueRef.current = value;
|
|
85
|
+
saveValue(value);
|
|
86
|
+
}
|
|
87
|
+
setStyle({});
|
|
88
|
+
setShowExpandEditor(false);
|
|
89
|
+
}, [saveValue]);
|
|
90
|
+
(0, _react.useEffect)(() => {
|
|
91
|
+
let timer = null;
|
|
92
|
+
if (autoSave) {
|
|
93
|
+
timer = setTimeout(() => {
|
|
94
|
+
handelAutoSave();
|
|
95
|
+
}, saveDelay);
|
|
96
|
+
}
|
|
97
|
+
return () => {
|
|
98
|
+
timer && clearTimeout(timer);
|
|
99
|
+
};
|
|
100
|
+
}, [autoSave, saveDelay, handelAutoSave]);
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
102
|
+
className: (0, _classnames.default)('sf-long-text-inline-editor-container', {
|
|
103
|
+
'preview': !isShowEditor
|
|
104
|
+
}),
|
|
105
|
+
style: style,
|
|
106
|
+
ref: editorContainerRef
|
|
107
|
+
}, !showExpandEditor ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
|
|
108
|
+
ref: editorRef,
|
|
109
|
+
isShowEditor: isShowEditor,
|
|
110
|
+
updateFocus: updateFocus,
|
|
111
|
+
isInline: true,
|
|
112
|
+
focusNodePath: focusNodePath,
|
|
113
|
+
value: valueRef.current.text,
|
|
114
|
+
onSave: handelAutoSave,
|
|
115
|
+
editorApi: editorApi,
|
|
116
|
+
onContentChanged: onContentChanged,
|
|
117
|
+
onExpandEditorToggle: openEditorDialog
|
|
118
|
+
}) : /*#__PURE__*/_react.default.createElement("div", {
|
|
119
|
+
className: "sf-simple-slate-editor-container"
|
|
120
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
121
|
+
className: "sf-slate-editor-toolbar"
|
|
122
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
+
className: "sf-slate-editor-content"
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
|
|
125
|
+
value: valueRef.current.text,
|
|
126
|
+
isShowOutline: false
|
|
127
|
+
})))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
|
|
128
|
+
lang: lang,
|
|
129
|
+
readOnly: false,
|
|
130
|
+
headerName: headerName,
|
|
131
|
+
value: valueRef.current.text,
|
|
132
|
+
autoSave: autoSave,
|
|
133
|
+
saveDelay: saveDelay,
|
|
134
|
+
isCheckBrowser: isCheckBrowser,
|
|
135
|
+
editorApi: editorApi,
|
|
136
|
+
onSaveEditorValue: saveValue,
|
|
137
|
+
onEditorValueChanged: saveValue,
|
|
138
|
+
onCloseEditorDialog: onCloseEditorDialog
|
|
139
|
+
}));
|
|
140
|
+
};
|
|
141
|
+
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
|
@@ -223,5 +223,9 @@
|
|
|
223
223
|
"Open_link": "Open link",
|
|
224
224
|
"Image_is_uploading": "Image is uploading",
|
|
225
225
|
"Image_loading_failed": "Image loading failed",
|
|
226
|
-
"Expand_editor": "Expand editor"
|
|
226
|
+
"Expand_editor": "Expand editor",
|
|
227
|
+
"Insert_below": "Insert below",
|
|
228
|
+
"Insert_above": "Insert above",
|
|
229
|
+
"Insert_on_the_right": "Insert on the right",
|
|
230
|
+
"Insert_on_the_left": "Insert on the left"
|
|
227
231
|
}
|