@seafile/sdoc-editor 2.0.41 → 2.0.43

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -45,13 +45,11 @@ const InsertElementDialog = _ref => {
   const uploadLocalImageInputRef = (0, _react.useRef)();
   const uploadLocalVideoInputRef = (0, _react.useRef)();
   const onFileChanged = (0, _react.useCallback)(event => {
-    const files = event.target.files;
-    _context.default.uploadLocalImage(files).then(fileUrl => {
-      (0, _helpers.insertImage)(validEditor, fileUrl, validEditor.selection, insertPosition);
-      if (uploadLocalImageInputRef.current) {
-        uploadLocalImageInputRef.current.value = '';
-      }
-    });
+    const imgInfos = (0, _helpers.generateImageInfos)(event.target.files);
+    (0, _helpers.insertImage)(validEditor, imgInfos, validEditor.selection, insertPosition);
+    if (uploadLocalImageInputRef.current) {
+      uploadLocalImageInputRef.current.value = '';
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
   const handleDisplayAlert = (0, _react.useCallback)(() => {

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.removeImageBlockNode = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.isImageUrlIsFromCopy = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = void 0;
+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;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -17,6 +17,7 @@ var _helpers = require("../seatable-column/helpers");
 var _constants = require("../../../constants");
 var _constants2 = require("../../constants");
 var _base64ToUnit8array = _interopRequireDefault(require("../../../../utils/base64-to-unit8array"));
+var _imageCache = _interopRequireDefault(require("../../../../utils/image-cache"));
 const isInsertImageMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   const {
@@ -46,28 +47,36 @@ const isInsertImageMenuDisabled = (editor, readonly) => {
   return false;
 };
 exports.isInsertImageMenuDisabled = isInsertImageMenuDisabled;
-const generateImageNode = src => {
+const generateImageNode = (src, file_uuid) => {
   const element = (0, _core.generateEmptyElement)(_constants2.IMAGE);
+  let data = {
+    src
+  };
+  if (file_uuid) {
+    data.file_uuid = file_uuid;
+  }
   return {
     ...element,
-    data: {
-      src
-    }
+    data
   };
 };
 exports.generateImageNode = generateImageNode;
-const insertImage = function (editor, srcList, selection) {
+const insertImage = function (editor, imgInfos, selection) {
   let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _constants2.INSERT_POSITION.CURRENT;
-  if (!srcList) return;
+  if (!imgInfos) return;
   if (position !== _constants2.INSERT_POSITION.AFTER) {
     if (isInsertImageMenuDisabled(editor)) return;
   }
-  const imageNodes = srcList.map(src => {
+  const imageNodes = imgInfos.map(_ref => {
+    let {
+      src,
+      file_uuid
+    } = _ref;
     const isCommentEditor = editor.editorType === _constants.COMMENT_EDITOR;
     const imgSrc = isCommentEditor ? getImageURL({
       src
     }) : src;
-    return generateImageNode(imgSrc);
+    return generateImageNode(imgSrc, file_uuid);
   });
   const validSelection = selection || editor.selection;
   let path = _slate.Editor.path(editor, validSelection);
@@ -153,6 +162,11 @@ const getImageURL = (data, editor) => {
       return imgUrl;
     }
   }
+
+  // upload image | drag drop image | cut image
+  if (isImageUrlIsFromUpload(url)) return url;
+
+  // copy from others doc
   if (isImageUrlIsFromCopy(url)) return url;
   const serviceUrl = _context.default.getSetting('serviceUrl');
   const assetsUrl = _context.default.getSetting('assetsUrl');
@@ -223,9 +237,8 @@ const getSingleImageFromFragment = data => {
 };
 exports.getSingleImageFromFragment = getSingleImageFromFragment;
 const insertImageFiles = (files, editor, targetPath) => {
-  _context.default.uploadLocalImage(files).then(fileUrl => {
-    insertImage(editor, fileUrl, targetPath, _constants2.INSERT_POSITION.AFTER);
-  });
+  const imgInfos = generateImageInfos(files);
+  insertImage(editor, imgInfos, targetPath, _constants2.INSERT_POSITION.AFTER);
 };
 exports.insertImageFiles = insertImageFiles;
 const selectImageWhenSelectPartial = (event, editor, imageNode, isImageSelected) => {
@@ -284,6 +297,29 @@ const isImageUrlIsFromCopy = url => {
   return false;
 };
 exports.isImageUrlIsFromCopy = isImageUrlIsFromCopy;
+const isImageUrlIsFromUpload = url => {
+  if (url && url.startsWith('blob:http')) return true;
+  return false;
+};
+exports.isImageUrlIsFromUpload = isImageUrlIsFromUpload;
+const generateImageInfos = files => {
+  const newFiles = Array.from(files);
+  const imgInfos = newFiles.filter(item => {
+    if (item && !item.type.startsWith('image/')) return false;
+    if (item && item.type === 'image/svg+xml') return false;
+    return true;
+  }).map(file => {
+    const url = window.URL.createObjectURL(file);
+    const file_uuid = _slugid.default.nice();
+    _imageCache.default.saveImage(file_uuid, file);
+    return {
+      src: url,
+      file_uuid: file_uuid
+    };
+  });
+  return imgInfos;
+};
+exports.generateImageInfos = generateImageInfos;
 const removeImageBlockNode = (editor, path) => {
   _slate.Transforms.removeNodes(editor, {
     at: path

package/dist/basic-sdk/extension/plugins/image/image-loader/index.css

@@ -37,4 +37,13 @@
 
 .sdoc-image-process-container .copyright {
   margin-top: 4px;
+  color: #fff;
+}
+
+.sdoc-image-content.upload-error>span {
+  min-height: 300px;
+  min-width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/dist/basic-sdk/extension/plugins/image/image-loader/index.js

@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 require("./index.css");
 function ImageLoader(_ref) {
   let {
-    copyright
+    copyright,
+    isError
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-image-process-container"
@@ -18,6 +19,6 @@ function ImageLoader(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "spinner"
   })), copyright && /*#__PURE__*/_react.default.createElement("div", {
-    className: "copyright"
+    className: `copyright ${isError && 'error'}`
   }, copyright));
 }

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -75,9 +75,8 @@ const withImage = editor => {
       }
     }
     if (data.types && data.types.includes('Files') && data.files[0].type.includes(_constants.IMAGE)) {
-      _context.default.uploadLocalImage(data.files).then(fileUrl => {
-        (0, _helpers.insertImage)(newEditor, fileUrl, editor.selection, _constants.INSERT_POSITION.CURRENT);
-      });
+      const imgInfos = (0, _helpers.generateImageInfos)(data.files);
+      (0, _helpers.insertImage)(newEditor, imgInfos, editor.selection, _constants.INSERT_POSITION.CURRENT);
       return;
     }
     insertData(data);

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -22,8 +22,9 @@ var _constants3 = require("../../constants");
 var _constants4 = require("../../../../constants");
 var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
 var _copyImageErrorSvg = _interopRequireDefault(require("../../../../components/copy-image-error-svg"));
-var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
 var _imageLoader = _interopRequireDefault(require("./image-loader"));
+var _useCopyImage = _interopRequireDefault(require("./use-copy-image"));
+var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
 const Image = _ref => {
   var _imageRef$current, _imageRef$current2;
   let {
@@ -64,6 +65,13 @@ const Image = _ref => {
     isCopyImageLoading,
     isCopyImageError,
     setCopyImageLoading
+  } = (0, _useCopyImage.default)({
+    editor,
+    element
+  });
+  const {
+    isUploadLoading,
+    isUploadError
   } = (0, _useUploadImage.default)({
     editor,
     element
@@ -283,7 +291,9 @@ const Image = _ref => {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdoc-image-inner"
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdoc-image-content"
+    className: (0, _classnames.default)('sdoc-image-content', {
+      'upload-error': isUploadError
+    })
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: imageStyle
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -298,8 +308,11 @@ const Image = _ref => {
     onLoad: onImageLoaded,
     onError: onImageLoadError,
     alt: ""
-  }), isCopyImageLoading && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
+  }), (isCopyImageLoading || isUploadLoading) && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
     copyright: t('Image_is_uploading')
+  }), isUploadError && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
+    copyright: t('Image_is_upload_error'),
+    isError: true
   }), isSelected && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-resizer",
     ref: resizerRef,

package/dist/basic-sdk/extension/plugins/image/use-copy-image.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _helpers = require("./helpers");
+const updateImageNode = async function (editor, element, newUrl) {
+  let isError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const nodePath = _slateReact.ReactEditor.findPath(editor, element);
+  const newData = {
+    ...element.data,
+    src: newUrl,
+    is_copy_error: isError
+  };
+  _slate.Transforms.setNodes(editor, {
+    data: newData
+  }, {
+    at: nodePath
+  });
+};
+const useCopyImage = _ref => {
+  let {
+    editor,
+    element
+  } = _ref;
+  const {
+    data
+  } = element;
+  const {
+    is_copy_error = false
+  } = data;
+  const [isLoading, setIsLoading] = (0, _react.useState)();
+  const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
+  (0, _react.useEffect)(() => {
+    const {
+      src: url
+    } = data;
+    if (isCopyError) return;
+    if (!(0, _helpers.isImageUrlIsFromCopy)(url)) return;
+    const downloadAndUploadImages = async url => {
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          const blob = await response.blob();
+          const file = new File([blob], 'downloaded_image.png', {
+            type: blob.type
+          });
+          const imageUrl = await _context.default.uploadLocalImage([file]);
+          if (imageUrl && imageUrl[0]) {
+            updateImageNode(editor, element, imageUrl[0]);
+          }
+        } else {
+          throw new Error(`HTTP error status: ${response.status}`);
+        }
+      } catch (error) {
+        console.error(error);
+        updateImageNode(editor, element, url, true);
+        setIsCopyError(true);
+      } finally {
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 500);
+      }
+    };
+    downloadAndUploadImages(url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    isCopyImageLoading: isLoading,
+    setCopyImageLoading: setIsLoading,
+    isCopyImageError: isCopyError
+  };
+};
+var _default = exports.default = useCopyImage;

package/dist/basic-sdk/extension/plugins/image/use-upload-image.js

@@ -10,13 +10,11 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _context = _interopRequireDefault(require("../../../../context"));
 var _helpers = require("./helpers");
-const updateImageNode = async function (editor, element, newUrl) {
-  let isError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+var _imageCache = _interopRequireDefault(require("../../../../utils/image-cache"));
+const updateImageNode = async (editor, element, newUrl) => {
   const nodePath = _slateReact.ReactEditor.findPath(editor, element);
   const newData = {
-    ...element.data,
-    src: newUrl,
-    is_copy_error: isError
+    src: newUrl
   };
   _slate.Transforms.setNodes(editor, {
     data: newData
@@ -24,7 +22,7 @@ const updateImageNode = async function (editor, element, newUrl) {
     at: nodePath
   });
 };
-const useImageUpload = _ref => {
+const useUploadImage = _ref => {
   let {
     editor,
     element
@@ -32,49 +30,38 @@ const useImageUpload = _ref => {
   const {
     data
   } = element;
-  const {
-    is_copy_error = false
-  } = data;
   const [isLoading, setIsLoading] = (0, _react.useState)();
-  const [isCopyError, setIsCopyError] = (0, _react.useState)(is_copy_error);
+  const [isUploadError, setIsUploadError] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     const {
-      src: url
+      src: url,
+      file_uuid
     } = data;
-    if (isCopyError) return;
-    if (!(0, _helpers.isImageUrlIsFromCopy)(url)) return;
-    const downloadAndUploadImages = async url => {
+    if (!(0, _helpers.isImageUrlIsFromUpload)(url)) return;
+    setIsLoading(true);
+    const uploadCurrentImage = async () => {
       try {
-        const response = await fetch(url);
-        if (response.ok) {
-          const blob = await response.blob();
-          const file = new File([blob], 'downloaded_image.png', {
-            type: blob.type
-          });
-          const imageUrl = await _context.default.uploadLocalImage([file]);
-          if (imageUrl && imageUrl[0]) {
-            updateImageNode(editor, element, imageUrl[0]);
-          }
-        } else {
-          throw new Error(`HTTP error status: ${response.status}`);
+        const fileItem = _imageCache.default.getImage(file_uuid);
+        const imageUrl = await _context.default.uploadLocalImage([fileItem]);
+        if (imageUrl && imageUrl[0]) {
+          updateImageNode(editor, element, imageUrl[0]);
         }
       } catch (error) {
-        console.error(error);
-        updateImageNode(editor, element, url, true);
-        setIsCopyError(true);
+        console.error(error.message);
+        setIsUploadError(true);
       } finally {
+        _imageCache.default.deleteImage(file_uuid);
         setTimeout(() => {
           setIsLoading(false);
         }, 500);
       }
     };
-    downloadAndUploadImages(url);
+    uploadCurrentImage(url);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return {
-    isCopyImageLoading: isLoading,
-    setCopyImageLoading: setIsLoading,
-    isCopyImageError: isCopyError
+    isUploadLoading: isLoading,
+    isUploadError: isUploadError
   };
 };
-var _default = exports.default = useImageUpload;
+var _default = exports.default = useUploadImage;

package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.js

@@ -48,7 +48,7 @@ const Column = _ref => {
         setColumnValue(displayValue);
       });
     }
-  }, [editor, element.data, isLongTextColumn]);
+  }, [editor, element.data, isLongTextColumn, editor.currentRowIdx]);
   const [isClicked, setIsClicked] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     if (isSelected && !isReadOnly) {

package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js

@@ -274,7 +274,7 @@ const SideToolbar = () => {
     targetElement = event.currentTarget;
     targetElement.classList.remove('sdoc-draging');
     const dragTypes = event.dataTransfer.types;
-    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT)) return;
+    if (!dragTypes.includes(_event.DRAG_SDOC_EDITOR_ELEMENT) && dragTypes[0] !== 'Files') return;
 
     // Prevent dragging table data to the editor
     if (dragTypes.includes(_constants2.TABLE_DRAG_KEY)) return;

package/dist/pages/document-plugin-editor.js

@@ -29,6 +29,7 @@ const DocumentPluginEditor = _ref => {
     tableId,
     columns,
     getColumnCellValue,
+    currentRowIdx,
     tables,
     getTableById,
     collaborators,
@@ -55,12 +56,12 @@ const DocumentPluginEditor = _ref => {
     const {
       cursors
     } = document;
-    newEditor.getColumnCellValue = getColumnCellValue;
 
     // insert column
     newEditor.table_id = tableId;
     newEditor.columns = columns || [];
     newEditor.getColumnCellValue = getColumnCellValue;
+    newEditor.currentRowIdx = currentRowIdx;
 
     // insert table
     newEditor.tables = tables || [];
@@ -87,8 +88,9 @@ const DocumentPluginEditor = _ref => {
   (0, _react.useEffect)(() => {
     validEditor.getColumnCellValue = getColumnCellValue ? getColumnCellValue : null;
     validEditor.getArticleStyle = getArticleStyle;
+    validEditor.currentRowIdx = currentRowIdx;
     forceUpdate();
-  }, [forceUpdate, getColumnCellValue, getArticleStyle, validEditor]);
+  }, [forceUpdate, getColumnCellValue, getArticleStyle, validEditor, currentRowIdx]);
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, !isReadOnly && /*#__PURE__*/_react.default.createElement(_hooks.PluginsProvider, {
     plugins: [],
     showComment: false

package/dist/utils/image-cache.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class ImageCache {
+  constructor() {
+    this.imageCache = null;
+  }
+  static saveImage(key, item) {
+    if (!this.imageCache) {
+      this.imageCache = new Map();
+    }
+    this.imageCache.set(key, item);
+  }
+  static getImage(key) {
+    if (!this.imageCache) {
+      this.imageCache = new Map();
+    }
+    return this.imageCache.get(key);
+  }
+  static deleteImage(key) {
+    if (!this.imageCache) {
+      this.imageCache = new Map();
+    }
+    this.imageCache.delete(key);
+  }
+}
+var _default = exports.default = ImageCache;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.41",
+  "version": "2.0.43",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/en/sdoc-editor.json

@@ -626,5 +626,6 @@
   "Insert_chart": "Insert chart",
   "Edit_chart": "Edit chart",
   "Please_complete_the_chart_configuration_first": "Please complete the chart configuration first",
-  "chart": "chart"
+  "chart": "chart",
+  "Image_is_upload_error": "Image upload failed, please delete it and try again"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -622,5 +622,7 @@
   "Double_click_then_adjust_field_width": "双击后调节字段宽度",
   "Insert_chart": "插入图表",
   "Edit_chart": "编辑图表",
-  "Please_complete_the_chart_configuration_first": "请先完成图表配置"
+  "Please_complete_the_chart_configuration_first": "请先完成图表配置",
+  "chart": "图表",
+  "Image_is_upload_error": "图片上传失败，请删除后重新尝试"
 }