@seafile/sdoc-editor 2.0.1 → 2.0.2
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/basic-sdk/assets/css/sdoc-editor-plugins.css +0 -23
- package/dist/basic-sdk/extension/plugins/font/helpers.js +7 -0
- package/dist/basic-sdk/extension/plugins/header/render-elem.js +2 -1
- package/dist/basic-sdk/extension/plugins/image/helpers.js +9 -21
- package/dist/basic-sdk/extension/plugins/image/image-loader/index.css +37 -0
- package/dist/basic-sdk/extension/plugins/image/image-loader/index.js +23 -0
- package/dist/basic-sdk/extension/plugins/image/render-elem.js +24 -76
- package/dist/basic-sdk/extension/plugins/image/use-upload-image.js +80 -0
- package/dist/basic-sdk/extension/plugins/multi-column/plugin.js +1 -1
- package/dist/basic-sdk/extension/plugins/seatable-column/plugin.js +9 -1
- package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.js +35 -0
- package/dist/basic-sdk/extension/plugins/text-style/helpers.js +1 -1
- package/dist/basic-sdk/extension/plugins/text-style/menu/index.js +10 -1
- package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js +2 -1
- package/package.json +1 -1
- package/public/locales/en/sdoc-editor.json +2 -1
- package/public/locales/zh_CN/sdoc-editor.json +2 -1
|
@@ -94,29 +94,6 @@
|
|
|
94
94
|
pointer-events: none;
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.sdoc-editor__article .sdoc-image-process-container {
|
|
98
|
-
width: 40px;
|
|
99
|
-
height: 40px;
|
|
100
|
-
display: flex;
|
|
101
|
-
align-items: center;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.sdoc-editor__article .sdoc-image-process-container .loading-spinner {
|
|
105
|
-
border: 5px solid #d8d8d8;
|
|
106
|
-
border-top: 5px solid #939393;
|
|
107
|
-
border-radius: 50%;
|
|
108
|
-
width: 30px;
|
|
109
|
-
height: 30px;
|
|
110
|
-
animation: spin 1s linear infinite;
|
|
111
|
-
user-select: none;
|
|
112
|
-
pointer-events: none;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes spin {
|
|
116
|
-
0% { transform: rotate(0deg); }
|
|
117
|
-
100% { transform: rotate(360deg); }
|
|
118
|
-
}
|
|
119
|
-
|
|
120
97
|
.sdoc-editor__article .sdoc-image-inner {
|
|
121
98
|
position: relative;
|
|
122
99
|
display: inline-block;
|
|
@@ -52,6 +52,13 @@ const getFontSize = editor => {
|
|
|
52
52
|
}
|
|
53
53
|
return false;
|
|
54
54
|
}
|
|
55
|
+
if (!_slate.Editor.isEditor(n) && _slate.Editor.isVoid(editor, n)) {
|
|
56
|
+
const parentNode = (0, _core.getParentNode)(editor.children, n.id);
|
|
57
|
+
if (!parentNode) return false;
|
|
58
|
+
if ([_constants.TITLE, _constants.SUBTITLE, ..._constants.HEADERS, _constants.CODE_LINE].includes(parentNode.type)) {
|
|
59
|
+
return true;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
55
62
|
return false;
|
|
56
63
|
}
|
|
57
64
|
});
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _slate = require("@seafile/slate");
|
|
10
10
|
var _core = require("../../core");
|
|
11
11
|
var _constants = require("../../constants");
|
|
12
|
+
var _helper = require("../paragraph/helper");
|
|
12
13
|
const renderTitle = (props, editor) => {
|
|
13
14
|
const {
|
|
14
15
|
element,
|
|
@@ -69,7 +70,7 @@ const renderHeader = (props, editor) => {
|
|
|
69
70
|
})
|
|
70
71
|
};
|
|
71
72
|
let isShowPlaceHolder = false;
|
|
72
|
-
if (_slate.Node.string(element) === '' && !isComposing) {
|
|
73
|
+
if ((0, _helper.isEmptyNode)(element) && _slate.Node.string(element) === '' && !isComposing) {
|
|
73
74
|
isShowPlaceHolder = true;
|
|
74
75
|
}
|
|
75
76
|
return /*#__PURE__*/_react.default.createElement("div", Object.assign({
|
|
@@ -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.
|
|
7
|
+
exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImagUrlIsFromCopy = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = void 0;
|
|
8
8
|
var _urlJoin = _interopRequireDefault(require("url-join"));
|
|
9
9
|
var _slate = require("@seafile/slate");
|
|
10
10
|
var _slateReact = require("@seafile/slate-react");
|
|
@@ -133,24 +133,6 @@ const updateImage = (editor, data) => {
|
|
|
133
133
|
});
|
|
134
134
|
};
|
|
135
135
|
exports.updateImage = updateImage;
|
|
136
|
-
const updateImageNode = (editor, originalUrl, newUrl) => {
|
|
137
|
-
_slate.Editor.nodes(editor, {
|
|
138
|
-
match: n => n.type === _constants2.IMAGE && n.data.src === originalUrl,
|
|
139
|
-
at: []
|
|
140
|
-
}).forEach(_ref => {
|
|
141
|
-
let [node, path] = _ref;
|
|
142
|
-
const newData = {
|
|
143
|
-
...node.data,
|
|
144
|
-
src: newUrl
|
|
145
|
-
};
|
|
146
|
-
_slate.Transforms.setNodes(editor, {
|
|
147
|
-
data: newData
|
|
148
|
-
}, {
|
|
149
|
-
at: path
|
|
150
|
-
});
|
|
151
|
-
});
|
|
152
|
-
};
|
|
153
|
-
exports.updateImageNode = updateImageNode;
|
|
154
136
|
const getImageURL = (data, editor) => {
|
|
155
137
|
const {
|
|
156
138
|
src: url,
|
|
@@ -171,7 +153,7 @@ const getImageURL = (data, editor) => {
|
|
|
171
153
|
return imgUrl;
|
|
172
154
|
}
|
|
173
155
|
}
|
|
174
|
-
if (url
|
|
156
|
+
if (isImagUrlIsFromCopy(url)) return url;
|
|
175
157
|
const serviceUrl = _context.default.getSetting('serviceUrl');
|
|
176
158
|
const assetsUrl = _context.default.getSetting('assetsUrl');
|
|
177
159
|
return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);
|
|
@@ -295,4 +277,10 @@ const handleBase64Image = (editor, path, imgData) => {
|
|
|
295
277
|
});
|
|
296
278
|
});
|
|
297
279
|
};
|
|
298
|
-
exports.handleBase64Image = handleBase64Image;
|
|
280
|
+
exports.handleBase64Image = handleBase64Image;
|
|
281
|
+
const isImagUrlIsFromCopy = url => {
|
|
282
|
+
if (url && url.startsWith('http')) return true;
|
|
283
|
+
if (url && url.startsWith('attachment')) return true; // from yuque
|
|
284
|
+
return false;
|
|
285
|
+
};
|
|
286
|
+
exports.isImagUrlIsFromCopy = isImagUrlIsFromCopy;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.sdoc-image-process-container {
|
|
2
|
+
position: absolute;
|
|
3
|
+
width: 100%;
|
|
4
|
+
height: 100%;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
top: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
background-color: 'rgba(0, 0, 0, 0.5)'
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes spin {
|
|
15
|
+
0% {
|
|
16
|
+
transform: rotate(0deg);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
100% {
|
|
20
|
+
transform: rotate(360deg);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sdoc-image-process-container .loading-spinner {
|
|
25
|
+
border: 3px solid #d8d8d8;
|
|
26
|
+
border-top: 3px solid #939393;
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
width: 20px;
|
|
29
|
+
height: 20px;
|
|
30
|
+
animation: spin 1s linear infinite;
|
|
31
|
+
user-select: none;
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.sdoc-image-process-container .copyright {
|
|
36
|
+
margin-top: 4px;
|
|
37
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
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 = ImageLoader;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
require("./index.css");
|
|
10
|
+
function ImageLoader(_ref) {
|
|
11
|
+
let {
|
|
12
|
+
copyright
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
15
|
+
className: "sdoc-image-process-container"
|
|
16
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
+
className: "loading-spinner"
|
|
18
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
19
|
+
className: "spinner"
|
|
20
|
+
})), copyright && /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
+
className: "copyright"
|
|
22
|
+
}, copyright));
|
|
23
|
+
}
|
|
@@ -21,8 +21,9 @@ var _constants2 = require("./constants");
|
|
|
21
21
|
var _constants3 = require("../../constants");
|
|
22
22
|
var _constants4 = require("../../../../constants");
|
|
23
23
|
var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
|
|
24
|
-
var _context = _interopRequireDefault(require("../../../../context"));
|
|
25
24
|
var _copyImageErrorSvg = _interopRequireDefault(require("../../../../components/copy-image-error-svg"));
|
|
25
|
+
var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
|
|
26
|
+
var _imageLoader = _interopRequireDefault(require("./image-loader"));
|
|
26
27
|
const Image = _ref => {
|
|
27
28
|
var _imageRef$current, _imageRef$current2;
|
|
28
29
|
let {
|
|
@@ -52,7 +53,6 @@ const Image = _ref => {
|
|
|
52
53
|
const imageRef = (0, _react.useRef)(null);
|
|
53
54
|
const resizerRef = (0, _react.useRef)(null);
|
|
54
55
|
const imageCaptionInputRef = (0, _react.useRef)(null);
|
|
55
|
-
const isLoadingRef = (0, _react.useRef)(false);
|
|
56
56
|
const scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
57
57
|
const [movingWidth, setMovingWidth] = (0, _react.useState)(null);
|
|
58
58
|
const [isResizing, setIsResizing] = (0, _react.useState)(false);
|
|
@@ -60,8 +60,14 @@ const Image = _ref => {
|
|
|
60
60
|
const [isShowImageHoverMenu, setIsShowImageHoverMenu] = (0, _react.useState)(false);
|
|
61
61
|
const [menuPosition, setMenuPosition] = (0, _react.useState)({});
|
|
62
62
|
const [caption, setCaption] = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || '');
|
|
63
|
-
const
|
|
64
|
-
|
|
63
|
+
const {
|
|
64
|
+
isCopyImageLoading,
|
|
65
|
+
isCopyImageError,
|
|
66
|
+
setCopyImageLoading
|
|
67
|
+
} = (0, _useUploadImage.default)({
|
|
68
|
+
editor,
|
|
69
|
+
element
|
|
70
|
+
});
|
|
65
71
|
const registerEvent = (0, _react.useCallback)(eventList => {
|
|
66
72
|
eventList.forEach(element => {
|
|
67
73
|
document.addEventListener(element.eventName, element.event);
|
|
@@ -202,20 +208,16 @@ const Image = _ref => {
|
|
|
202
208
|
setIsShowImagePlaceholder(false);
|
|
203
209
|
}
|
|
204
210
|
}, [data, editor]);
|
|
211
|
+
const onImageLoaded = (0, _react.useCallback)(() => {
|
|
212
|
+
if ((0, _helpers.isImagUrlIsFromCopy)(data.src)) {
|
|
213
|
+
setCopyImageLoading(true);
|
|
214
|
+
}
|
|
215
|
+
}, [data.src, setCopyImageLoading]);
|
|
205
216
|
const onImageLoadError = (0, _react.useCallback)(() => {
|
|
206
217
|
// Check is due to the image is pasted from the clipboard in base64
|
|
207
218
|
if (data.src.startsWith('data:image/jpeg;base64')) {
|
|
208
219
|
return (0, _helpers.handleBase64Image)(editor, path, data);
|
|
209
220
|
}
|
|
210
|
-
|
|
211
|
-
// Check whether copying images is wrong
|
|
212
|
-
if (data.src.startsWith('attachment') || data.src.endsWith('_copy_error')) {
|
|
213
|
-
if (!isCopyError) {
|
|
214
|
-
setIsCopyError(true);
|
|
215
|
-
}
|
|
216
|
-
return;
|
|
217
|
-
}
|
|
218
|
-
if (isLoadingRef.current) return;
|
|
219
221
|
setIsShowImagePlaceholder(true);
|
|
220
222
|
// External network images do not reload after failure to load
|
|
221
223
|
if (!data.src.startsWith('http')) {
|
|
@@ -238,66 +240,7 @@ const Image = _ref => {
|
|
|
238
240
|
});
|
|
239
241
|
}
|
|
240
242
|
}, [data, editor, element]);
|
|
241
|
-
(
|
|
242
|
-
isLoadingRef.current = isLoading;
|
|
243
|
-
if (data.src.endsWith('_copy_error') && !isCopyError) {
|
|
244
|
-
setIsCopyError(true);
|
|
245
|
-
}
|
|
246
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
247
|
-
}, [isLoading, data.src]);
|
|
248
|
-
(0, _react.useEffect)(() => {
|
|
249
|
-
const {
|
|
250
|
-
src: url
|
|
251
|
-
} = data;
|
|
252
|
-
if (url && !url.startsWith('http')) return;
|
|
253
|
-
if (url && url.endsWith('_copy_error')) {
|
|
254
|
-
setIsCopyError(true);
|
|
255
|
-
return;
|
|
256
|
-
}
|
|
257
|
-
// Return if copying image from local server
|
|
258
|
-
const serviceUrl = _context.default.getSetting('serviceUrl');
|
|
259
|
-
if (url && url.startsWith(serviceUrl)) return;
|
|
260
|
-
if (url && url.startsWith('http')) {
|
|
261
|
-
setIsLoading(true);
|
|
262
|
-
const downloadAndUploadImages = async url => {
|
|
263
|
-
try {
|
|
264
|
-
const response = await fetch(url);
|
|
265
|
-
if (response.ok) {
|
|
266
|
-
const blob = await response.blob();
|
|
267
|
-
const file = new File([blob], 'downloaded_image.png', {
|
|
268
|
-
type: blob.type
|
|
269
|
-
});
|
|
270
|
-
const imageUrl = await _context.default.uploadLocalImage([file]);
|
|
271
|
-
if (imageUrl && imageUrl[0]) {
|
|
272
|
-
(0, _helpers.updateImageNode)(editor, url, imageUrl[0]);
|
|
273
|
-
}
|
|
274
|
-
} else {
|
|
275
|
-
console.error(response.status);
|
|
276
|
-
const newUrl = url + '_copy_error';
|
|
277
|
-
(0, _helpers.updateImageNode)(editor, url, newUrl);
|
|
278
|
-
}
|
|
279
|
-
} catch (error) {
|
|
280
|
-
console.error(error);
|
|
281
|
-
const newUrl = url + '_copy_error';
|
|
282
|
-
(0, _helpers.updateImageNode)(editor, url, newUrl);
|
|
283
|
-
} finally {
|
|
284
|
-
setIsLoading(false);
|
|
285
|
-
}
|
|
286
|
-
};
|
|
287
|
-
downloadAndUploadImages(url);
|
|
288
|
-
}
|
|
289
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
290
|
-
}, []);
|
|
291
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
|
|
292
|
-
className: "sdoc-image-process-container",
|
|
293
|
-
style: {
|
|
294
|
-
display: 'inline-block'
|
|
295
|
-
}
|
|
296
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
297
|
-
className: "loading-spinner"
|
|
298
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
299
|
-
className: "spinner"
|
|
300
|
-
}))), isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
|
|
243
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
|
|
301
244
|
className: (0, _classnames.default)('sdoc-image-wrapper', className)
|
|
302
245
|
}, attributes, {
|
|
303
246
|
style: {
|
|
@@ -305,6 +248,7 @@ const Image = _ref => {
|
|
|
305
248
|
},
|
|
306
249
|
onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
|
|
307
250
|
contentEditable: "false",
|
|
251
|
+
"data-src": (0, _helpers.getImageURL)(data, editor),
|
|
308
252
|
suppressContentEditableWarning: true
|
|
309
253
|
}), /*#__PURE__*/_react.default.createElement("img", {
|
|
310
254
|
ref: imageRef,
|
|
@@ -312,7 +256,7 @@ const Image = _ref => {
|
|
|
312
256
|
style: getImageStyle(),
|
|
313
257
|
draggable: false,
|
|
314
258
|
alt: ""
|
|
315
|
-
}), children),
|
|
259
|
+
}), children), isCopyImageError && /*#__PURE__*/_react.default.createElement("span", Object.assign({
|
|
316
260
|
className: (0, _classnames.default)('sdoc-image-wrapper', className)
|
|
317
261
|
}, attributes, {
|
|
318
262
|
style: {
|
|
@@ -320,12 +264,13 @@ const Image = _ref => {
|
|
|
320
264
|
},
|
|
321
265
|
onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
|
|
322
266
|
contentEditable: "false",
|
|
267
|
+
"data-src": data.src,
|
|
323
268
|
suppressContentEditableWarning: true
|
|
324
269
|
}), /*#__PURE__*/_react.default.createElement(_copyImageErrorSvg.default, {
|
|
325
270
|
t: t,
|
|
326
271
|
isSelected: isSelected,
|
|
327
272
|
imageRef: imageRef
|
|
328
|
-
}), children), !isShowImagePlaceholder && !
|
|
273
|
+
}), children), !isShowImagePlaceholder && !isCopyImageError && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
|
|
329
274
|
"data-id": element.id,
|
|
330
275
|
className: (0, _classnames.default)('sdoc-image-wrapper', className)
|
|
331
276
|
}, attributes, {
|
|
@@ -342,16 +287,19 @@ const Image = _ref => {
|
|
|
342
287
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
343
288
|
style: imageStyle
|
|
344
289
|
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
290
|
+
ref: imageRef,
|
|
345
291
|
className: (0, _classnames.default)({
|
|
346
292
|
'image-selected': isSelected
|
|
347
293
|
}),
|
|
348
294
|
onClick: onClickImage,
|
|
349
|
-
ref: imageRef,
|
|
350
295
|
src: (0, _helpers.getImageURL)(data, editor),
|
|
351
296
|
style: getImageStyle(),
|
|
352
297
|
draggable: false,
|
|
298
|
+
onLoad: onImageLoaded,
|
|
353
299
|
onError: onImageLoadError,
|
|
354
300
|
alt: ""
|
|
301
|
+
}), isCopyImageLoading && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
|
|
302
|
+
copyright: t('Image_is_uploading')
|
|
355
303
|
}), isSelected && /*#__PURE__*/_react.default.createElement("span", {
|
|
356
304
|
className: "image-resizer",
|
|
357
305
|
ref: resizerRef,
|
|
@@ -0,0 +1,80 @@
|
|
|
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 _react = require("react");
|
|
9
|
+
var _slate = require("@seafile/slate");
|
|
10
|
+
var _slateReact = require("@seafile/slate-react");
|
|
11
|
+
var _context = _interopRequireDefault(require("../../../../context"));
|
|
12
|
+
var _helpers = require("./helpers");
|
|
13
|
+
const updateImageNode = async function (editor, element, newUrl) {
|
|
14
|
+
let isError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
15
|
+
const nodePath = _slateReact.ReactEditor.findPath(editor, element);
|
|
16
|
+
const newData = {
|
|
17
|
+
...element.data,
|
|
18
|
+
src: newUrl,
|
|
19
|
+
is_copy_error: isError
|
|
20
|
+
};
|
|
21
|
+
_slate.Transforms.setNodes(editor, {
|
|
22
|
+
data: newData
|
|
23
|
+
}, {
|
|
24
|
+
at: nodePath
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
const useImageUpload = _ref => {
|
|
28
|
+
let {
|
|
29
|
+
editor,
|
|
30
|
+
element
|
|
31
|
+
} = _ref;
|
|
32
|
+
const {
|
|
33
|
+
data
|
|
34
|
+
} = element;
|
|
35
|
+
const {
|
|
36
|
+
is_copy_error = false
|
|
37
|
+
} = data;
|
|
38
|
+
const [isLoading, setIsLoading] = (0, _react.useState)(false);
|
|
39
|
+
const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
|
|
40
|
+
(0, _react.useEffect)(() => {
|
|
41
|
+
const {
|
|
42
|
+
src: url
|
|
43
|
+
} = data;
|
|
44
|
+
if (isCopyError) return;
|
|
45
|
+
if (!(0, _helpers.isImagUrlIsFromCopy)(url)) return;
|
|
46
|
+
const downloadAndUploadImages = async url => {
|
|
47
|
+
try {
|
|
48
|
+
const response = await fetch(url);
|
|
49
|
+
if (response.ok) {
|
|
50
|
+
const blob = await response.blob();
|
|
51
|
+
const file = new File([blob], 'downloaded_image.png', {
|
|
52
|
+
type: blob.type
|
|
53
|
+
});
|
|
54
|
+
const imageUrl = await _context.default.uploadLocalImage([file]);
|
|
55
|
+
if (imageUrl && imageUrl[0]) {
|
|
56
|
+
updateImageNode(editor, element, imageUrl[0]);
|
|
57
|
+
}
|
|
58
|
+
} else {
|
|
59
|
+
throw new Error(`HTTP error status: ${response.status}`);
|
|
60
|
+
}
|
|
61
|
+
} catch (error) {
|
|
62
|
+
console.error(error);
|
|
63
|
+
updateImageNode(editor, element, url, true);
|
|
64
|
+
setIsCopyError(true);
|
|
65
|
+
} finally {
|
|
66
|
+
setTimeout(() => {
|
|
67
|
+
setIsLoading(false);
|
|
68
|
+
}, 500);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
downloadAndUploadImages(url);
|
|
72
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
|
+
}, []);
|
|
74
|
+
return {
|
|
75
|
+
isCopyImageLoading: isLoading,
|
|
76
|
+
setCopyImageLoading: setIsLoading,
|
|
77
|
+
isCopyImageError: isCopyError
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
var _default = exports.default = useImageUpload;
|
|
@@ -82,7 +82,7 @@ const withMultiColumn = editor => {
|
|
|
82
82
|
const nextNode = _slate.Editor.next(newEditor);
|
|
83
83
|
const nextColumnIndex = nextNode[1][1];
|
|
84
84
|
const currentMultiColumnEntry = (0, _core.getSelectedNodeEntryByType)(editor, _constants.ELEMENT_TYPE.MULTI_COLUMN);
|
|
85
|
-
if (!currentMultiColumnEntry) return
|
|
85
|
+
if (!currentMultiColumnEntry) return deleteForward(unit);
|
|
86
86
|
const {
|
|
87
87
|
column,
|
|
88
88
|
children: childColumn
|
|
@@ -8,7 +8,8 @@ var _constants = require("../../constants");
|
|
|
8
8
|
const withColumn = editor => {
|
|
9
9
|
const {
|
|
10
10
|
isInline,
|
|
11
|
-
isVoid
|
|
11
|
+
isVoid,
|
|
12
|
+
markableVoid
|
|
12
13
|
} = editor;
|
|
13
14
|
const newEditor = editor;
|
|
14
15
|
newEditor.isInline = element => {
|
|
@@ -25,6 +26,13 @@ const withColumn = editor => {
|
|
|
25
26
|
if (type === _constants.ELEMENT_TYPE.SEATABLE_COLUMN) return true;
|
|
26
27
|
return isVoid(element);
|
|
27
28
|
};
|
|
29
|
+
newEditor.markableVoid = element => {
|
|
30
|
+
const {
|
|
31
|
+
type
|
|
32
|
+
} = element;
|
|
33
|
+
if (type === _constants.ELEMENT_TYPE.SEATABLE_COLUMN) return true;
|
|
34
|
+
return markableVoid(element);
|
|
35
|
+
};
|
|
28
36
|
return newEditor;
|
|
29
37
|
};
|
|
30
38
|
var _default = exports.default = withColumn;
|
|
@@ -36,11 +36,46 @@ const Column = _ref => {
|
|
|
36
36
|
setIsClicked(false);
|
|
37
37
|
}
|
|
38
38
|
}, [isSelected, isReadOnly]);
|
|
39
|
+
const {
|
|
40
|
+
font_size = null,
|
|
41
|
+
font = null,
|
|
42
|
+
bold = null,
|
|
43
|
+
italic = null,
|
|
44
|
+
underline = null,
|
|
45
|
+
color = null,
|
|
46
|
+
highlight_color = null,
|
|
47
|
+
strikethrough = null
|
|
48
|
+
} = element.children[0];
|
|
39
49
|
const style = {
|
|
40
50
|
margin: '0 10px',
|
|
41
51
|
border: '1px solid transparent',
|
|
52
|
+
userSelect: 'none',
|
|
42
53
|
...(isClicked && {
|
|
43
54
|
border: '1px solid red'
|
|
55
|
+
}),
|
|
56
|
+
...(font_size && {
|
|
57
|
+
fontSize: font_size
|
|
58
|
+
}),
|
|
59
|
+
...(font && {
|
|
60
|
+
fontFamily: font
|
|
61
|
+
}),
|
|
62
|
+
...(bold && {
|
|
63
|
+
fontWeight: 600
|
|
64
|
+
}),
|
|
65
|
+
...(italic && {
|
|
66
|
+
fontStyle: 'italic'
|
|
67
|
+
}),
|
|
68
|
+
...(underline && {
|
|
69
|
+
textDecoration: 'underline'
|
|
70
|
+
}),
|
|
71
|
+
...(color && {
|
|
72
|
+
color: color
|
|
73
|
+
}),
|
|
74
|
+
...(highlight_color && {
|
|
75
|
+
backgroundColor: highlight_color
|
|
76
|
+
}),
|
|
77
|
+
...(strikethrough && {
|
|
78
|
+
textDecoration: 'line-through'
|
|
44
79
|
})
|
|
45
80
|
};
|
|
46
81
|
return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
|
|
@@ -16,7 +16,7 @@ const isMenuDisabled = (editor, readonly) => {
|
|
|
16
16
|
match: n => {
|
|
17
17
|
const type = (0, _core.getNodeType)(n);
|
|
18
18
|
if (type === _elementType.CODE_BLOCK) return true; // Code block
|
|
19
|
-
if (_slate.Editor.isVoid(editor, n)) return true; // void node
|
|
19
|
+
if (_slate.Editor.isVoid(editor, n) && (n === null || n === void 0 ? void 0 : n.type) !== _elementType.SEATABLE_COLUMN) return true; // void node
|
|
20
20
|
|
|
21
21
|
return false;
|
|
22
22
|
},
|
|
@@ -49,6 +49,10 @@ const TextStyleMenuList = _ref => {
|
|
|
49
49
|
return (0, _helpers2.isMenuDisabled)(editor, readonly);
|
|
50
50
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
51
|
}, [editor, readonly]);
|
|
52
|
+
const isSelectedSeaTableColumn = (0, _react.useCallback)(() => {
|
|
53
|
+
const entery = (0, _core.getSelectedNodeByType)(editor, _constants.SEATABLE_COLUMN);
|
|
54
|
+
return !!entery;
|
|
55
|
+
}, [editor]);
|
|
52
56
|
const openLinkDialog = (0, _react.useCallback)(() => {
|
|
53
57
|
const eventBus = _eventBus.default.getInstance();
|
|
54
58
|
eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
|
|
@@ -99,11 +103,16 @@ const TextStyleMenuList = _ref => {
|
|
|
99
103
|
}, [editor, selectedFontSize, selectedFontSizeValue]);
|
|
100
104
|
const getTextStyleList = (0, _react.useCallback)(key => {
|
|
101
105
|
return _constants.MENUS_CONFIG_MAP[key].map(item => {
|
|
106
|
+
let disable = isDisabled();
|
|
107
|
+
const disableTypes = [_constants.TEXT_STYLE_MAP.CODE, _constants.TEXT_STYLE_MAP.LINK, _constants.TEXT_STYLE_MAP.SUPERSCRIPT, _constants.TEXT_STYLE_MAP.SUBSCRIPT];
|
|
108
|
+
if (disableTypes.includes(item.type)) {
|
|
109
|
+
disable = isSelectedSeaTableColumn() ? true : disable;
|
|
110
|
+
}
|
|
102
111
|
let itemProps = {
|
|
103
112
|
isRichEditor,
|
|
104
113
|
className,
|
|
105
114
|
ariaLabel: item === null || item === void 0 ? void 0 : item.ariaLabel,
|
|
106
|
-
disabled:
|
|
115
|
+
disabled: disable,
|
|
107
116
|
isActive: isActive(item.type),
|
|
108
117
|
onMouseDown: item.isColor ? () => {} : onMouseDown
|
|
109
118
|
};
|
|
@@ -134,7 +134,8 @@ const isVoidNode = node => {
|
|
|
134
134
|
const isCodeBlock = node.type === _constants.CODE_BLOCK;
|
|
135
135
|
const isCallout = node.type === _constants.CALL_OUT;
|
|
136
136
|
const isSeaTableTable = node.type === _constants.SEATABLE_TABLE;
|
|
137
|
-
|
|
137
|
+
const isSeaTableColumn = node.type === _constants.SEATABLE_COLUMN;
|
|
138
|
+
return _slate.Node.string(node) === '' && !hasImage && !isVideo && !isTable && !isCodeBlock && !isCallout && !isSeaTableTable && !isSeaTableColumn;
|
|
138
139
|
};
|
|
139
140
|
exports.isVoidNode = isVoidNode;
|
|
140
141
|
const isNotSupportTransform = node => {
|
package/package.json
CHANGED
|
@@ -613,5 +613,6 @@
|
|
|
613
613
|
"Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
|
|
614
614
|
"Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
|
|
615
615
|
"And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
|
|
616
|
-
"Image_copy_error": "Image copy error"
|
|
616
|
+
"Image_copy_error": "Image copy error",
|
|
617
|
+
"Image_is_uploading": "Image is uploading..."
|
|
617
618
|
}
|
|
@@ -613,5 +613,6 @@
|
|
|
613
613
|
"Support_Youtube_Tencent_Bilibili_and_more": "支持Youtube,腾讯视频,B站及其他平台",
|
|
614
614
|
"Image_cannot_be_copied_Please_download_the_source_image": "此照片不支持复制,请下载原图",
|
|
615
615
|
"And_select_insert_-_image_to_upload": "后点击工具栏「插入」- 「照片」上传",
|
|
616
|
-
"Image_copy_error": "图片复制错误"
|
|
616
|
+
"Image_copy_error": "图片复制错误",
|
|
617
|
+
"Image_is_uploading": "图片正在上传..."
|
|
617
618
|
}
|