@seafile/sdoc-editor 2.0.40 → 2.0.42
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/constants/index.js +2 -1
- package/dist/basic-sdk/editor/wiki-editor.js +1 -1
- package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js +5 -7
- package/dist/basic-sdk/extension/plugins/image/helpers.js +51 -15
- package/dist/basic-sdk/extension/plugins/image/image-loader/index.css +16 -5
- package/dist/basic-sdk/extension/plugins/image/image-loader/index.js +3 -2
- package/dist/basic-sdk/extension/plugins/image/plugin.js +2 -3
- package/dist/basic-sdk/extension/plugins/image/render-elem.js +20 -7
- package/dist/basic-sdk/extension/plugins/image/use-copy-image.js +80 -0
- package/dist/basic-sdk/extension/plugins/image/use-upload-image.js +22 -35
- package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js +1 -1
- package/dist/pages/sdoc-wiki-editor.js +1 -1
- package/dist/utils/image-cache.js +30 -0
- package/package.json +1 -1
- package/public/locales/en/sdoc-editor.json +2 -1
- package/public/locales/zh_CN/sdoc-editor.json +2 -1
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "PLUGIN_DISPLAY_TYPE", {
|
|
|
17
17
|
return _plugin.PLUGIN_DISPLAY_TYPE;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
20
|
-
exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR = exports.SDOC_STORAGE = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
|
|
20
|
+
exports.Z_INDEX = exports.WIKI_OUTLINE = exports.WIKI_EDITOR_EDIT_AREA_WIDTH = exports.WIKI_EDITOR = exports.SDOC_STORAGE = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
|
|
21
21
|
var Z_INDEX = _interopRequireWildcard(require("./z-index"));
|
|
22
22
|
exports.Z_INDEX = Z_INDEX;
|
|
23
23
|
var _plugin = require("./plugin");
|
|
@@ -55,6 +55,7 @@ const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
|
|
|
55
55
|
const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';
|
|
56
56
|
const PAGE_EDIT_AREA_WIDTH = exports.PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
|
|
57
57
|
const COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;
|
|
58
|
+
const WIKI_EDITOR_EDIT_AREA_WIDTH = exports.WIKI_EDITOR_EDIT_AREA_WIDTH = 714;
|
|
58
59
|
const COMMENT_EDITOR = exports.COMMENT_EDITOR = 'comment_editor';
|
|
59
60
|
const WIKI_EDITOR = exports.WIKI_EDITOR = 'wiki_editor';
|
|
60
61
|
const DOCUMENT_PLUGIN_EDITOR = exports.DOCUMENT_PLUGIN_EDITOR = 'document_plugin_editor';
|
|
@@ -47,7 +47,7 @@ const WikiEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
47
47
|
cursors
|
|
48
48
|
} = document;
|
|
49
49
|
newEditor.cursors = cursors || {};
|
|
50
|
-
newEditor.width = _constants.
|
|
50
|
+
newEditor.width = _constants.WIKI_EDITOR_EDIT_AREA_WIDTH; // default width
|
|
51
51
|
return newEditor;
|
|
52
52
|
|
|
53
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -45,13 +45,11 @@ const InsertElementDialog = _ref => {
|
|
|
45
45
|
const uploadLocalImageInputRef = (0, _react.useRef)();
|
|
46
46
|
const uploadLocalVideoInputRef = (0, _react.useRef)();
|
|
47
47
|
const onFileChanged = (0, _react.useCallback)(event => {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
});
|
|
48
|
+
const imgInfos = (0, _helpers.generateImageInfos)(event.target.files);
|
|
49
|
+
(0, _helpers.insertImage)(validEditor, imgInfos, validEditor.selection, insertPosition);
|
|
50
|
+
if (uploadLocalImageInputRef.current) {
|
|
51
|
+
uploadLocalImageInputRef.current.value = '';
|
|
52
|
+
}
|
|
55
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
54
|
}, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
|
|
57
55
|
const handleDisplayAlert = (0, _react.useCallback)(() => {
|
|
@@ -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.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.
|
|
7
|
+
exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImageUrlIsFromUpload = exports.isImageUrlIsFromCopy = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = exports.generateImageInfos = 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");
|
|
@@ -17,6 +17,7 @@ var _helpers = require("../seatable-column/helpers");
|
|
|
17
17
|
var _constants = require("../../../constants");
|
|
18
18
|
var _constants2 = require("../../constants");
|
|
19
19
|
var _base64ToUnit8array = _interopRequireDefault(require("../../../../utils/base64-to-unit8array"));
|
|
20
|
+
var _imageCache = _interopRequireDefault(require("../../../../utils/image-cache"));
|
|
20
21
|
const isInsertImageMenuDisabled = (editor, readonly) => {
|
|
21
22
|
if (readonly) return true;
|
|
22
23
|
const {
|
|
@@ -46,28 +47,36 @@ const isInsertImageMenuDisabled = (editor, readonly) => {
|
|
|
46
47
|
return false;
|
|
47
48
|
};
|
|
48
49
|
exports.isInsertImageMenuDisabled = isInsertImageMenuDisabled;
|
|
49
|
-
const generateImageNode = src => {
|
|
50
|
+
const generateImageNode = (src, file_uuid) => {
|
|
50
51
|
const element = (0, _core.generateEmptyElement)(_constants2.IMAGE);
|
|
52
|
+
let data = {
|
|
53
|
+
src
|
|
54
|
+
};
|
|
55
|
+
if (file_uuid) {
|
|
56
|
+
data.file_uuid = file_uuid;
|
|
57
|
+
}
|
|
51
58
|
return {
|
|
52
59
|
...element,
|
|
53
|
-
data
|
|
54
|
-
src
|
|
55
|
-
}
|
|
60
|
+
data
|
|
56
61
|
};
|
|
57
62
|
};
|
|
58
63
|
exports.generateImageNode = generateImageNode;
|
|
59
|
-
const insertImage = function (editor,
|
|
64
|
+
const insertImage = function (editor, imgInfos, selection) {
|
|
60
65
|
let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants2.INSERT_POSITION.CURRENT;
|
|
61
|
-
if (!
|
|
66
|
+
if (!imgInfos) return;
|
|
62
67
|
if (position !== _constants2.INSERT_POSITION.AFTER) {
|
|
63
68
|
if (isInsertImageMenuDisabled(editor)) return;
|
|
64
69
|
}
|
|
65
|
-
const imageNodes =
|
|
70
|
+
const imageNodes = imgInfos.map(_ref => {
|
|
71
|
+
let {
|
|
72
|
+
src,
|
|
73
|
+
file_uuid
|
|
74
|
+
} = _ref;
|
|
66
75
|
const isCommentEditor = editor.editorType === _constants.COMMENT_EDITOR;
|
|
67
76
|
const imgSrc = isCommentEditor ? getImageURL({
|
|
68
77
|
src
|
|
69
78
|
}) : src;
|
|
70
|
-
return generateImageNode(imgSrc);
|
|
79
|
+
return generateImageNode(imgSrc, file_uuid);
|
|
71
80
|
});
|
|
72
81
|
const validSelection = selection || editor.selection;
|
|
73
82
|
let path = _slate.Editor.path(editor, validSelection);
|
|
@@ -153,7 +162,12 @@ const getImageURL = (data, editor) => {
|
|
|
153
162
|
return imgUrl;
|
|
154
163
|
}
|
|
155
164
|
}
|
|
156
|
-
|
|
165
|
+
|
|
166
|
+
// upload image | drag drop image | cut image
|
|
167
|
+
if (isImageUrlIsFromUpload(url)) return url;
|
|
168
|
+
|
|
169
|
+
// copy from others doc
|
|
170
|
+
if (isImageUrlIsFromCopy(url)) return url;
|
|
157
171
|
const serviceUrl = _context.default.getSetting('serviceUrl');
|
|
158
172
|
const assetsUrl = _context.default.getSetting('assetsUrl');
|
|
159
173
|
return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);
|
|
@@ -223,9 +237,8 @@ const getSingleImageFromFragment = data => {
|
|
|
223
237
|
};
|
|
224
238
|
exports.getSingleImageFromFragment = getSingleImageFromFragment;
|
|
225
239
|
const insertImageFiles = (files, editor, targetPath) => {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
});
|
|
240
|
+
const imgInfos = generateImageInfos(files);
|
|
241
|
+
insertImage(editor, imgInfos, targetPath, _constants2.INSERT_POSITION.AFTER);
|
|
229
242
|
};
|
|
230
243
|
exports.insertImageFiles = insertImageFiles;
|
|
231
244
|
const selectImageWhenSelectPartial = (event, editor, imageNode, isImageSelected) => {
|
|
@@ -278,12 +291,35 @@ const handleBase64Image = (editor, path, imgData) => {
|
|
|
278
291
|
});
|
|
279
292
|
};
|
|
280
293
|
exports.handleBase64Image = handleBase64Image;
|
|
281
|
-
const
|
|
294
|
+
const isImageUrlIsFromCopy = url => {
|
|
282
295
|
if (url && url.startsWith('http')) return true;
|
|
283
296
|
if (url && url.startsWith('attachment')) return true; // from yuque
|
|
284
297
|
return false;
|
|
285
298
|
};
|
|
286
|
-
exports.
|
|
299
|
+
exports.isImageUrlIsFromCopy = isImageUrlIsFromCopy;
|
|
300
|
+
const isImageUrlIsFromUpload = url => {
|
|
301
|
+
if (url && url.startsWith('blob:http')) return true;
|
|
302
|
+
return false;
|
|
303
|
+
};
|
|
304
|
+
exports.isImageUrlIsFromUpload = isImageUrlIsFromUpload;
|
|
305
|
+
const generateImageInfos = files => {
|
|
306
|
+
const newFiles = Array.from(files);
|
|
307
|
+
const imgInfos = newFiles.filter(item => {
|
|
308
|
+
if (item && !item.type.startsWith('image/')) return false;
|
|
309
|
+
if (item && item.type === 'image/svg+xml') return false;
|
|
310
|
+
return true;
|
|
311
|
+
}).map(file => {
|
|
312
|
+
const url = window.URL.createObjectURL(file);
|
|
313
|
+
const file_uuid = _slugid.default.nice();
|
|
314
|
+
_imageCache.default.saveImage(file_uuid, file);
|
|
315
|
+
return {
|
|
316
|
+
src: url,
|
|
317
|
+
file_uuid: file_uuid
|
|
318
|
+
};
|
|
319
|
+
});
|
|
320
|
+
return imgInfos;
|
|
321
|
+
};
|
|
322
|
+
exports.generateImageInfos = generateImageInfos;
|
|
287
323
|
const removeImageBlockNode = (editor, path) => {
|
|
288
324
|
_slate.Transforms.removeNodes(editor, {
|
|
289
325
|
at: path
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
.sdoc-image-process-container {
|
|
2
|
+
position: absolute;
|
|
2
3
|
width: 100%;
|
|
3
4
|
height: 100%;
|
|
4
5
|
display: flex;
|
|
5
|
-
flex-direction:
|
|
6
|
+
flex-direction: column;
|
|
6
7
|
align-items: center;
|
|
7
8
|
justify-content: center;
|
|
9
|
+
top: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
bottom: 0;
|
|
12
|
+
left: 0;
|
|
8
13
|
background-color: rgba(0, 0, 0, 0.5);
|
|
9
|
-
min-height: 28px;
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
@keyframes spin {
|
|
@@ -32,7 +36,14 @@
|
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
.sdoc-image-process-container .copyright {
|
|
35
|
-
margin:
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
margin-top: 4px;
|
|
40
|
+
color: #fff;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sdoc-image-content.upload-error>span {
|
|
44
|
+
min-height: 300px;
|
|
45
|
+
min-width: 400px;
|
|
46
|
+
display: flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
38
49
|
}
|
|
@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
require("./index.css");
|
|
10
10
|
function ImageLoader(_ref) {
|
|
11
11
|
let {
|
|
12
|
-
copyright
|
|
12
|
+
copyright,
|
|
13
|
+
isError
|
|
13
14
|
} = _ref;
|
|
14
15
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
15
16
|
className: "sdoc-image-process-container"
|
|
@@ -18,6 +19,6 @@ function ImageLoader(_ref) {
|
|
|
18
19
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
19
20
|
className: "spinner"
|
|
20
21
|
})), copyright && /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
-
className:
|
|
22
|
+
className: `copyright ${isError && 'error'}`
|
|
22
23
|
}, copyright));
|
|
23
24
|
}
|
|
@@ -75,9 +75,8 @@ const withImage = editor => {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants.IMAGE)) {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
});
|
|
78
|
+
const imgInfos = (0, _helpers.generateImageInfos)(data.files);
|
|
79
|
+
(0, _helpers.insertImage)(newEditor, imgInfos, editor.selection, _constants.INSERT_POSITION.CURRENT);
|
|
81
80
|
return;
|
|
82
81
|
}
|
|
83
82
|
insertData(data);
|
|
@@ -22,8 +22,9 @@ var _constants3 = require("../../constants");
|
|
|
22
22
|
var _constants4 = require("../../../../constants");
|
|
23
23
|
var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
|
|
24
24
|
var _copyImageErrorSvg = _interopRequireDefault(require("../../../../components/copy-image-error-svg"));
|
|
25
|
-
var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
|
|
26
25
|
var _imageLoader = _interopRequireDefault(require("./image-loader"));
|
|
26
|
+
var _useCopyImage = _interopRequireDefault(require("./use-copy-image"));
|
|
27
|
+
var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
|
|
27
28
|
const Image = _ref => {
|
|
28
29
|
var _imageRef$current, _imageRef$current2;
|
|
29
30
|
let {
|
|
@@ -64,6 +65,13 @@ const Image = _ref => {
|
|
|
64
65
|
isCopyImageLoading,
|
|
65
66
|
isCopyImageError,
|
|
66
67
|
setCopyImageLoading
|
|
68
|
+
} = (0, _useCopyImage.default)({
|
|
69
|
+
editor,
|
|
70
|
+
element
|
|
71
|
+
});
|
|
72
|
+
const {
|
|
73
|
+
isUploadLoading,
|
|
74
|
+
isUploadError
|
|
67
75
|
} = (0, _useUploadImage.default)({
|
|
68
76
|
editor,
|
|
69
77
|
element
|
|
@@ -209,8 +217,8 @@ const Image = _ref => {
|
|
|
209
217
|
}
|
|
210
218
|
}, [data, editor]);
|
|
211
219
|
const onImageLoaded = (0, _react.useCallback)(() => {
|
|
212
|
-
if (
|
|
213
|
-
setCopyImageLoading(
|
|
220
|
+
if ((0, _helpers.isImageUrlIsFromCopy)(data.src)) {
|
|
221
|
+
setCopyImageLoading(true);
|
|
214
222
|
}
|
|
215
223
|
}, [data.src, setCopyImageLoading]);
|
|
216
224
|
const onImageLoadError = (0, _react.useCallback)(() => {
|
|
@@ -283,12 +291,12 @@ const Image = _ref => {
|
|
|
283
291
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
284
292
|
className: "sdoc-image-inner"
|
|
285
293
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
286
|
-
className:
|
|
294
|
+
className: (0, _classnames.default)('sdoc-image-content', {
|
|
295
|
+
'upload-error': isUploadError
|
|
296
|
+
})
|
|
287
297
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
288
298
|
style: imageStyle
|
|
289
|
-
},
|
|
290
|
-
copyright: t('Image_is_uploading')
|
|
291
|
-
}), /*#__PURE__*/_react.default.createElement("img", {
|
|
299
|
+
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
292
300
|
ref: imageRef,
|
|
293
301
|
className: (0, _classnames.default)({
|
|
294
302
|
'image-selected': isSelected
|
|
@@ -300,6 +308,11 @@ const Image = _ref => {
|
|
|
300
308
|
onLoad: onImageLoaded,
|
|
301
309
|
onError: onImageLoadError,
|
|
302
310
|
alt: ""
|
|
311
|
+
}), (isCopyImageLoading || isUploadLoading) && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
|
|
312
|
+
copyright: t('Image_is_uploading')
|
|
313
|
+
}), isUploadError && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
|
|
314
|
+
copyright: t('Image_is_upload_error'),
|
|
315
|
+
isError: true
|
|
303
316
|
}), isSelected && /*#__PURE__*/_react.default.createElement("span", {
|
|
304
317
|
className: "image-resizer",
|
|
305
318
|
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 useCopyImage = _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)();
|
|
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.isImageUrlIsFromCopy)(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 = useCopyImage;
|
|
@@ -10,13 +10,11 @@ var _slate = require("@seafile/slate");
|
|
|
10
10
|
var _slateReact = require("@seafile/slate-react");
|
|
11
11
|
var _context = _interopRequireDefault(require("../../../../context"));
|
|
12
12
|
var _helpers = require("./helpers");
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
var _imageCache = _interopRequireDefault(require("../../../../utils/image-cache"));
|
|
14
|
+
const updateImageNode = async (editor, element, newUrl) => {
|
|
15
15
|
const nodePath = _slateReact.ReactEditor.findPath(editor, element);
|
|
16
16
|
const newData = {
|
|
17
|
-
|
|
18
|
-
src: newUrl,
|
|
19
|
-
is_copy_error: isError
|
|
17
|
+
src: newUrl
|
|
20
18
|
};
|
|
21
19
|
_slate.Transforms.setNodes(editor, {
|
|
22
20
|
data: newData
|
|
@@ -24,7 +22,7 @@ const updateImageNode = async function (editor, element, newUrl) {
|
|
|
24
22
|
at: nodePath
|
|
25
23
|
});
|
|
26
24
|
};
|
|
27
|
-
const
|
|
25
|
+
const useUploadImage = _ref => {
|
|
28
26
|
let {
|
|
29
27
|
editor,
|
|
30
28
|
element
|
|
@@ -32,49 +30,38 @@ const useImageUpload = _ref => {
|
|
|
32
30
|
const {
|
|
33
31
|
data
|
|
34
32
|
} = element;
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
} = data;
|
|
38
|
-
const [isLoading, setIsLoading] = (0, _react.useState)(true);
|
|
39
|
-
const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
|
|
33
|
+
const [isLoading, setIsLoading] = (0, _react.useState)();
|
|
34
|
+
const [isUploadError, setIsUploadError] = (0, _react.useState)(false);
|
|
40
35
|
(0, _react.useEffect)(() => {
|
|
41
36
|
const {
|
|
42
|
-
src: url
|
|
37
|
+
src: url,
|
|
38
|
+
file_uuid
|
|
43
39
|
} = data;
|
|
44
|
-
if (
|
|
45
|
-
|
|
46
|
-
const
|
|
40
|
+
if (!(0, _helpers.isImageUrlIsFromUpload)(url)) return;
|
|
41
|
+
setIsLoading(true);
|
|
42
|
+
const uploadCurrentImage = async () => {
|
|
47
43
|
try {
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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}`);
|
|
44
|
+
const fileItem = _imageCache.default.getImage(file_uuid);
|
|
45
|
+
const imageUrl = await _context.default.uploadLocalImage([fileItem]);
|
|
46
|
+
if (imageUrl && imageUrl[0]) {
|
|
47
|
+
updateImageNode(editor, element, imageUrl[0]);
|
|
60
48
|
}
|
|
61
49
|
} catch (error) {
|
|
62
|
-
console.error(error);
|
|
63
|
-
|
|
64
|
-
setIsCopyError(true);
|
|
50
|
+
console.error(error.message);
|
|
51
|
+
setIsUploadError(true);
|
|
65
52
|
} finally {
|
|
53
|
+
_imageCache.default.deleteImage(file_uuid);
|
|
66
54
|
setTimeout(() => {
|
|
67
55
|
setIsLoading(false);
|
|
68
56
|
}, 500);
|
|
69
57
|
}
|
|
70
58
|
};
|
|
71
|
-
|
|
59
|
+
uploadCurrentImage(url);
|
|
72
60
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
73
61
|
}, []);
|
|
74
62
|
return {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
isCopyImageError: isCopyError
|
|
63
|
+
isUploadLoading: isLoading,
|
|
64
|
+
isUploadError: isUploadError
|
|
78
65
|
};
|
|
79
66
|
};
|
|
80
|
-
var _default = exports.default =
|
|
67
|
+
var _default = exports.default = useUploadImage;
|
|
@@ -274,7 +274,7 @@ const SideToolbar = () => {
|
|
|
274
274
|
targetElement = event.currentTarget;
|
|
275
275
|
targetElement.classList.remove('sdoc-draging');
|
|
276
276
|
const dragTypes = event.dataTransfer.types;
|
|
277
|
-
if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
|
|
277
|
+
if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT) && dragTypes[0] !== 'Files') return;
|
|
278
278
|
|
|
279
279
|
// Prevent dragging table data to the editor
|
|
280
280
|
if (dragTypes.includes(_constants2.TABLE_DRAG_KEY)) return;
|
|
@@ -42,7 +42,7 @@ const SdocWikiEditor = _ref => {
|
|
|
42
42
|
cursors
|
|
43
43
|
} = document;
|
|
44
44
|
newEditor.cursors = cursors || {};
|
|
45
|
-
newEditor.width = _constants.
|
|
45
|
+
newEditor.width = _constants.WIKI_EDITOR_EDIT_AREA_WIDTH; // default width
|
|
46
46
|
newEditor.editorType = _constants.WIKI_EDITOR;
|
|
47
47
|
return newEditor;
|
|
48
48
|
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
class ImageCache {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.imageCache = null;
|
|
10
|
+
}
|
|
11
|
+
static saveImage(key, item) {
|
|
12
|
+
if (!this.imageCache) {
|
|
13
|
+
this.imageCache = new Map();
|
|
14
|
+
}
|
|
15
|
+
this.imageCache.set(key, item);
|
|
16
|
+
}
|
|
17
|
+
static getImage(key) {
|
|
18
|
+
if (!this.imageCache) {
|
|
19
|
+
this.imageCache = new Map();
|
|
20
|
+
}
|
|
21
|
+
return this.imageCache.get(key);
|
|
22
|
+
}
|
|
23
|
+
static deleteImage(key) {
|
|
24
|
+
if (!this.imageCache) {
|
|
25
|
+
this.imageCache = new Map();
|
|
26
|
+
}
|
|
27
|
+
this.imageCache.delete(key);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
var _default = exports.default = ImageCache;
|
package/package.json
CHANGED
|
@@ -626,5 +626,6 @@
|
|
|
626
626
|
"Insert_chart": "Insert chart",
|
|
627
627
|
"Edit_chart": "Edit chart",
|
|
628
628
|
"Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
|
|
629
|
-
"chart": "chart"
|
|
629
|
+
"chart": "chart",
|
|
630
|
+
"Image_is_upload_error": "Image upload failed, please delete it and try again"
|
|
630
631
|
}
|
|
@@ -622,5 +622,6 @@
|
|
|
622
622
|
"Double_click_then_adjust_field_width": "双击后调节字段宽度",
|
|
623
623
|
"Insert_chart": "插入图表",
|
|
624
624
|
"Edit_chart": "编辑图表",
|
|
625
|
-
"Please_complete_the_chart_configuration_first": "请先完成图表配置"
|
|
625
|
+
"Please_complete_the_chart_configuration_first": "请先完成图表配置",
|
|
626
|
+
"Image_is_upload_error": "图片上传失败,请删除后重新尝试"
|
|
626
627
|
}
|