@seafile/sdoc-editor 1.0.218 → 1.0.219

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -62,6 +62,61 @@
   caret-color: transparent;
 }
 
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-placeholder-wrapper {
+  width: 100%;
+  aspect-ratio: 1;
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  padding: 0 3%;
+  max-width: 100%;
+  user-select: all;
+  pointer-events: all;
+}
+
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-tip-content,
+.sdoc-editor__article .sdoc-image-wrapper .sdoc-image-title {
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-exclamation-circle {
+  font-size: 18px;
+  align-items: center;
+  justify-content: center;
+  color: red;
+  display: flex;
+}
+
+.sdoc-editor__article .sdoc-image-title .sdoc-image-tip-title {
+  color: red;
+  font-size: 18px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-editor__article .sdoc-image-process-container {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-editor__article .sdoc-image-process-container .loading-spinner {
+  border: 5px solid #d8d8d8;
+  border-top: 5px solid #939393;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  user-select: none;
+  pointer-events: none;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .sdoc-editor__article .sdoc-image-inner {
   position: relative;
   display: inline-block;

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.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = void 0;
+exports.updateImageNode = exports.updateImage = exports.selectImageWhenSelectPartial = exports.resetCursor = exports.queryCopyMoveProgressView = exports.isInsertImageMenuDisabled = exports.insertImageFiles = exports.insertImage = exports.hasSdocImages = exports.handleBase64Image = exports.getSingleImageFromFragment = exports.getImageURL = exports.getImageData = exports.generateImageNode = void 0;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -133,6 +133,24 @@ const updateImage = (editor, data) => {
   });
 };
 exports.updateImage = updateImage;
+const updateImageNode = (editor, originalUrl, newUrl) => {
+  _slate.Editor.nodes(editor, {
+    match: n => n.type === _constants2.IMAGE && n.data.src === originalUrl,
+    at: []
+  }).forEach(_ref => {
+    let [node, path] = _ref;
+    const newData = {
+      ...node.data,
+      src: newUrl
+    };
+    _slate.Transforms.setNodes(editor, {
+      data: newData
+    }, {
+      at: path
+    });
+  });
+};
+exports.updateImageNode = updateImageNode;
 const getImageURL = (data, editor) => {
   const {
     src: url,

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

@@ -21,6 +21,8 @@ var _constants2 = require("./constants");
 var _constants3 = require("../../constants");
 var _constants4 = require("../../../../constants");
 var _imagePlaceholder = _interopRequireDefault(require("../../../assets/images/image-placeholder.png"));
+var _context = _interopRequireDefault(require("../../../../context"));
+var _copyImageErrorSvg = _interopRequireDefault(require("../../../../components/copy-image-error-svg"));
 const Image = _ref => {
   var _imageRef$current, _imageRef$current2;
   let {
@@ -50,6 +52,7 @@ const Image = _ref => {
   const imageRef = (0, _react.useRef)(null);
   const resizerRef = (0, _react.useRef)(null);
   const imageCaptionInputRef = (0, _react.useRef)(null);
+  const isLoadingRef = (0, _react.useRef)(false);
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const [movingWidth, setMovingWidth] = (0, _react.useState)(null);
   const [isResizing, setIsResizing] = (0, _react.useState)(false);
@@ -57,6 +60,8 @@ const Image = _ref => {
   const [isShowImageHoverMenu, setIsShowImageHoverMenu] = (0, _react.useState)(false);
   const [menuPosition, setMenuPosition] = (0, _react.useState)({});
   const [caption, setCaption] = (0, _react.useState)((data === null || data === void 0 ? void 0 : data.caption) || '');
+  const [isLoading, setIsLoading] = (0, _react.useState)(false);
+  const [isCopyError, setIsCopyError] = (0, _react.useState)(false);
   const registerEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
@@ -202,6 +207,15 @@ const Image = _ref => {
     if (data.src.startsWith('data:image/jpeg;base64')) {
       return (0, _helpers.handleBase64Image)(editor, path, data);
     }
+
+    // Check whether copying images is wrong
+    if (data.src.startsWith('attachment') || data.src.endsWith('_copy_error')) {
+      if (!isCopyError) {
+        setIsCopyError(true);
+      }
+      return;
+    }
+    if (isLoadingRef.current) return;
     setIsShowImagePlaceholder(true);
     // External network images do not reload after failure to load
     if (!data.src.startsWith('http')) {
@@ -224,7 +238,66 @@ const Image = _ref => {
       });
     }
   }, [data, editor, element]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
+  (0, _react.useEffect)(() => {
+    isLoadingRef.current = isLoading;
+    if (data.src.endsWith('_copy_error') && !isCopyError) {
+      setIsCopyError(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading, data.src]);
+  (0, _react.useEffect)(() => {
+    const {
+      src: url
+    } = data;
+    if (url && !url.startsWith('http')) return;
+    if (url && url.endsWith('_copy_error')) {
+      setIsCopyError(true);
+      return;
+    }
+    // Return if copying image from local server
+    const serviceUrl = _context.default.getSetting('serviceUrl');
+    if (url && url.startsWith(serviceUrl)) return;
+    if (url && url.startsWith('http')) {
+      setIsLoading(true);
+      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]) {
+              (0, _helpers.updateImageNode)(editor, url, imageUrl[0]);
+            }
+          } else {
+            console.error(response.status);
+            const newUrl = url + '_copy_error';
+            (0, _helpers.updateImageNode)(editor, url, newUrl);
+          }
+        } catch (error) {
+          console.error(error);
+          const newUrl = url + '_copy_error';
+          (0, _helpers.updateImageNode)(editor, url, newUrl);
+        } finally {
+          setIsLoading(false);
+        }
+      };
+      downloadAndUploadImages(url);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-image-process-container",
+    style: {
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  }))), isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
@@ -239,7 +312,20 @@ const Image = _ref => {
     style: getImageStyle(),
     draggable: false,
     alt: ""
-  }), children), !isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
+  }), children), isCopyError && /*#__PURE__*/_react.default.createElement("span", Object.assign({
+    className: (0, _classnames.default)('sdoc-image-wrapper', className)
+  }, attributes, {
+    style: {
+      ...style
+    },
+    onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
+    contentEditable: "false",
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react.default.createElement(_copyImageErrorSvg.default, {
+    t: t,
+    isSelected: isSelected,
+    imageRef: imageRef
+  }), children), !isShowImagePlaceholder && !isCopyError && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", Object.assign({
     "data-id": element.id,
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {

package/dist/components/copy-image-error-svg/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+const Svg = _ref => {
+  let {
+    t,
+    isSelected,
+    imageRef
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 360 360",
+    preserveAspectRatio: "xMinYMin meet",
+    className: (0, _classnames.default)('sdoc-image-placeholder-wrapper', {
+      'image-selected': isSelected
+    }),
+    ref: imageRef,
+    draggable: false
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "100%",
+    height: "100%",
+    fill: "#f0f0f0"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-content-wrapper",
+    transform: "translate(180, 180) scale(1)"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    className: "sdoc-image-title",
+    transform: "translate(0, 0)"
+  }, /*#__PURE__*/_react.default.createElement("foreignObject", {
+    x: "-85",
+    y: "-16",
+    width: "20",
+    height: "28"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdocfont sdoc-exclamation-circle"
+  })), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-title",
+    transform: "translate(-55, 4)",
+    fontSize: "20",
+    fill: "red",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_copy_error'))), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 35)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('Image_cannot_be_copied_Please_download_the_source_image')), /*#__PURE__*/_react.default.createElement("text", {
+    className: "sdoc-image-tip-content",
+    transform: "translate(0, 55)",
+    fontSize: "12",
+    textAnchor: "middle",
+    fill: "black",
+    fontFamily: "Arial, sans-serif"
+  }, t('And_select_insert_-_image_to_upload'))));
+};
+var _default = exports.default = Svg;

package/package.json

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

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Videolink hinzufügen",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Add video link",
   "Link_Seafile_video_file": "Link Seafile video file",
   "Select_video_file": "Select video file",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Image cannot be copied. Please download the source image,",
+  "And_select_insert_-_image_to_upload": "and select 「insert」 - 「image」 to upload.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "Добавить ссылку на видео",
   "Link_Seafile_video_file": "Ссылка на видео файл Seafile",
   "Select_video_file": "Выбрать видео файл",
-  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more",
+  "Image_cannot_be_copied_Please_download_the_source_image": "Изображение не может быть скопировано. Скачайте исходное изображение,",
+  "And_select_insert_-_image_to_upload": "и выбрать 「вставить」 - 「изображение」 для загрузки.",
+  "Image_copy_error": "Image copy error"
 }

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

@@ -610,5 +610,8 @@
   "Add_video_link": "添加视频链接",
   "Link_Seafile_video_file": "链接Seafile视频文件",
   "Select_video_file": "选择视频文件",
-  "Support_Youtube_Tencent_Bilibili_and_more": "支持Youtube，腾讯视频，B站及其他平台"
+  "Support_Youtube_Tencent_Bilibili_and_more": "支持Youtube，腾讯视频，B站及其他平台",
+  "Image_cannot_be_copied_Please_download_the_source_image": "此照片不支持复制，请下载原图",
+  "And_select_insert_-_image_to_upload": "后点击工具栏「插入」- 「照片」上传",
+  "Image_copy_error": "图片复制错误"
 }