@seafile/sdoc-editor 1.0.220 → 1.0.221-alph-0.0.1

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

@@ -94,29 +94,6 @@
   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/commons/insert-element-dialog/index.js

@@ -24,6 +24,7 @@ var _index5 = require("../../plugins/video/constants/index.js");
 var _constants3 = require("../../../../basic-sdk/constants");
 var _index6 = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
 var _index7 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
+var _index8 = _interopRequireDefault(require("../../plugins/seatable-row/dialog/add-seatable-row-dialog/index.js"));
 const InsertElementDialog = _ref => {
   let {
     editor
@@ -37,6 +38,7 @@ const InsertElementDialog = _ref => {
   const [validEditor, setValidEditor] = (0, _react.useState)(editor);
   const [linkTitle, setLinkTitle] = (0, _react.useState)('');
   const [handleSubmit, setHandleSubmit] = (0, _react.useState)(() => void 0);
+  const [data, setData] = (0, _react.useState)({});
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
@@ -96,7 +98,8 @@ const InsertElementDialog = _ref => {
       editor: paramEditor,
       linkTitle,
       // link shortcut wrapping link
-      handleSubmit
+      handleSubmit,
+      data
     } = _ref2;
     setInsertPosition(insertPosition);
     setSlateNode(slateNode);
@@ -113,6 +116,7 @@ const InsertElementDialog = _ref => {
     setHandleSubmit(handleSubmit);
     // Apply for comment editor, as it has a different editor instance
     setValidEditor(paramEditor || editor);
+    setData(data);
     if (type === _constants2.LOCAL_IMAGE) {
       setTimeout(() => {
         uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
@@ -133,6 +137,7 @@ const InsertElementDialog = _ref => {
     setInsertVideoCallback(null);
     setValidEditor(null);
     setLinkTitle('');
+    setData('');
   }, []);
   const props = {
     insertPosition,
@@ -141,7 +146,8 @@ const InsertElementDialog = _ref => {
     element,
     closeDialog,
     linkTitle,
-    handleSubmit
+    handleSubmit,
+    data
   };
   switch (dialogType) {
     case _constants2.ELEMENT_TYPE.TABLE:
@@ -240,6 +246,10 @@ const InsertElementDialog = _ref => {
           closeModule: closeDialog
         });
       }
+    case _constants2.ELEMENT_TYPE.SEATABLE_ROW:
+      {
+        return /*#__PURE__*/_react.default.createElement(_index8.default, props);
+      }
     default:
       {
         return null;

package/dist/basic-sdk/extension/commons/search-list/index.css

@@ -0,0 +1,28 @@
+.sdoc-search-list {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper {
+  padding: 12px;
+}
+
+.sdoc-search-list .sdoc-search-list-wrapper>input {
+  font-size: 12px;
+  max-height: 30px;
+}
+
+.sdoc-search-list .sdoc-search-list-content-wrapper {
+  min-height: 0;
+  min-width: 0;
+  flex: 1;
+  overflow: auto;
+  max-height: 300px;
+}
+
+.sdoc-search-list .sdoc-search-list-with-no-results {
+  font-size: 12px;
+  padding: 4px 16px;
+}

package/dist/basic-sdk/extension/commons/search-list/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SearchList;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _keyCodes = _interopRequireDefault(require("../../../../constants/key-codes"));
+require("./index.css");
+function SearchList(_ref) {
+  let {
+    list: originalList,
+    listItem: ListItem,
+    onListItemClick,
+    onEscClick
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const inputWrapperRef = (0, _react.useRef)(null);
+  const isComposingRef = (0, _react.useRef)(null);
+  const listRefs = (0, _react.useRef)([]);
+  const [searchedList, setSearchedList] = (0, _react.useState)(originalList);
+  const [currentSelectIndex, setCurrentSelectIndex] = (0, _react.useState)(-1);
+
+  // search input
+  const onChange = (0, _react.useCallback)(event => {
+    if (isComposingRef.current) return;
+    const value = event.target.value.trim();
+    if (value) {
+      const list = originalList.filter(item => item.label.indexOf(value) > -1);
+      setSearchedList(list);
+    } else {
+      setSearchedList(originalList);
+    }
+  }, [originalList]);
+  const onCompositionStart = (0, _react.useCallback)(() => {
+    isComposingRef.current = true;
+  }, []);
+  const onCompositionEnd = (0, _react.useCallback)(e => {
+    isComposingRef.current = false;
+    onChange(e);
+  }, [onChange]);
+
+  // search content list
+  const onItemClick = (0, _react.useCallback)(item => {
+    onListItemClick && onListItemClick(item);
+  }, [onListItemClick]);
+  const onHandleInputFocus = (0, _react.useCallback)(isFocus => {
+    if (inputWrapperRef.current) {
+      queueMicrotask(() => {
+        isFocus ? inputWrapperRef.current.focus() : inputWrapperRef.current.blur();
+      });
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (currentSelectIndex === -1) {
+      onHandleInputFocus(true);
+    } else {
+      onHandleInputFocus(false);
+    }
+  }, [currentSelectIndex, onHandleInputFocus]);
+  const handleClick = (0, _react.useCallback)(event => {
+    var _inputWrapperRef$curr;
+    if (inputWrapperRef !== null && inputWrapperRef !== void 0 && (_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(event.target) || inputWrapperRef.current === event.target) {
+      event.stopPropagation();
+      event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+      return;
+    }
+  }, []);
+  const scrollIntoView = (0, _react.useCallback)(index => {
+    if (index === -1) return;
+    listRefs.current[index].scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+  }, []);
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    const {
+      UpArrow,
+      DownArrow,
+      Enter,
+      Esc
+    } = _keyCodes.default;
+    const {
+      keyCode
+    } = e;
+    if (keyCode === UpArrow) {
+      e.preventDefault();
+      if (currentSelectIndex > -1) {
+        setCurrentSelectIndex(currentSelectIndex - 1);
+        scrollIntoView(currentSelectIndex - 1);
+      }
+    }
+    if (keyCode === DownArrow) {
+      e.preventDefault();
+      if (currentSelectIndex === searchedList.length - 1) return;
+      if (currentSelectIndex < searchedList.length - 1) {
+        setCurrentSelectIndex(currentSelectIndex + 1);
+        scrollIntoView(currentSelectIndex + 1);
+      }
+    }
+    if (keyCode === Enter) {
+      e.preventDefault();
+      const item = searchedList[currentSelectIndex];
+      onItemClick(item);
+    }
+    if (keyCode === Esc) {
+      e.preventDefault();
+      onEscClick && onEscClick();
+    }
+  }, [currentSelectIndex, onEscClick, onItemClick, scrollIntoView, searchedList]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, handleKeyDown]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    innerRef: inputWrapperRef,
+    placeholder: t('Search_action'),
+    onChange: onChange,
+    onCompositionStart: onCompositionStart,
+    onCompositionEnd: onCompositionEnd
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-content-wrapper"
+  }, searchedList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-list-with-no-results"
+  }, t('No_results')), searchedList.map((item, index) => {
+    const isSelected = index === currentSelectIndex;
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      innerRef: el => listRefs.current[index] = el,
+      key: index,
+      item: item,
+      onItemClick: onItemClick,
+      isSelected: isSelected
+    });
+  })));
+}

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_ROW = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -44,6 +44,7 @@ const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_li
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
 const VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
+const SEATABLE_ROW = exports.SEATABLE_ROW = 'seatable_row';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
 const ASK_AI = exports.ASK_AI = 'ask_ai';
 

package/dist/basic-sdk/extension/constants/index.js

@@ -349,6 +349,12 @@ Object.defineProperty(exports, "SEATABLE_COLUMN", {
     return _elementType.SEATABLE_COLUMN;
   }
 });
+Object.defineProperty(exports, "SEATABLE_ROW", {
+  enumerable: true,
+  get: function () {
+    return _elementType.SEATABLE_ROW;
+  }
+});
 Object.defineProperty(exports, "SEATABLE_TABLE", {
   enumerable: true,
   get: function () {
@@ -541,7 +547,7 @@ const FILE_TYPE = exports.FILE_TYPE = {
   [_elementType.SDOC_LINK]: 'sdoc',
   [_elementType.VIDEO]: 'video'
 };
-const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN];
+const SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.MULTI_COLUMN, _elementType.SEATABLE_ROW];
 const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = {
   [_elementType.PARAGRAPH]: [_elementType.CALL_OUT],
   [_elementType.TITLE]: [_elementType.CALL_OUT],
@@ -559,4 +565,4 @@ const MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP =
   [_elementType.HEADER6]: [_elementType.CALL_OUT],
   [_elementType.CALL_OUT]: [_elementType.CALL_OUT]
 };
-const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE];
+const ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.SEATABLE_TABLE, _elementType.SEATABLE_ROW];

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -223,6 +223,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-find-replace',
     text: 'Search_and_replace'
   },
+  [_elementType.SEATABLE_ROW]: {
+    id: `sdoc_${_elementType.SEATABLE_ROW}`,
+    iconClass: 'sdocfont sdoc-seatable-row',
+    text: 'SeaTable_row'
+  },
   [_elementType.SEATABLE_COLUMN]: {
     id: `sdoc_${_elementType.SEATABLE_COLUMN}`,
     iconClass: 'sdocfont sdoc-choose-column',

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

@@ -52,6 +52,13 @@ const getFontSize = editor => {
         }
         return false;
       }
+      if (!_slate.Editor.isEditor(n) && _slate.Editor.isVoid(editor, n)) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        if (!parentNode) return false;
+        if ([_constants.TITLE, _constants.SUBTITLE, ..._constants.HEADERS, _constants.CODE_LINE].includes(parentNode.type)) {
+          return true;
+        }
+      }
       return false;
     }
   });

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _slate = require("@seafile/slate");
 var _core = require("../../core");
 var _constants = require("../../constants");
+var _helper = require("../paragraph/helper");
 const renderTitle = (props, editor) => {
   const {
     element,
@@ -69,7 +70,7 @@ const renderHeader = (props, editor) => {
     })
   };
   let isShowPlaceHolder = false;
-  if (_slate.Node.string(element) === '' && !isComposing) {
+  if ((0, _helper.isEmptyNode)(element) && _slate.Node.string(element) === '' && !isComposing) {
     isShowPlaceHolder = true;
   }
   return /*#__PURE__*/_react.default.createElement("div", Object.assign({

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.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;
+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;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
@@ -133,24 +133,6 @@ 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,
@@ -171,7 +153,7 @@ const getImageURL = (data, editor) => {
       return imgUrl;
     }
   }
-  if (url && url.startsWith('http')) return url;
+  if (isImagUrlIsFromCopy(url)) return url;
   const serviceUrl = _context.default.getSetting('serviceUrl');
   const assetsUrl = _context.default.getSetting('assetsUrl');
   return (0, _urlJoin.default)(serviceUrl, assetsUrl, url);
@@ -295,4 +277,10 @@ const handleBase64Image = (editor, path, imgData) => {
     });
   });
 };
-exports.handleBase64Image = handleBase64Image;
+exports.handleBase64Image = handleBase64Image;
+const isImagUrlIsFromCopy = url => {
+  if (url && url.startsWith('http')) return true;
+  if (url && url.startsWith('attachment')) return true; // from yuque
+  return false;
+};
+exports.isImagUrlIsFromCopy = isImagUrlIsFromCopy;

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

@@ -0,0 +1,37 @@
+.sdoc-image-process-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  background-color: 'rgba(0, 0, 0, 0.5)'
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.sdoc-image-process-container .loading-spinner {
+  border: 3px solid #d8d8d8;
+  border-top: 3px solid #939393;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+  user-select: none;
+  pointer-events: none;
+}
+
+.sdoc-image-process-container .copyright {
+  margin-top: 4px;
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ImageLoader;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function ImageLoader(_ref) {
+  let {
+    copyright
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-image-process-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  })), copyright && /*#__PURE__*/_react.default.createElement("div", {
+    className: "copyright"
+  }, copyright));
+}

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

@@ -21,8 +21,9 @@ 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"));
+var _useUploadImage = _interopRequireDefault(require("./use-upload-image"));
+var _imageLoader = _interopRequireDefault(require("./image-loader"));
 const Image = _ref => {
   var _imageRef$current, _imageRef$current2;
   let {
@@ -52,7 +53,6 @@ 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);
@@ -60,8 +60,14 @@ 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 {
+    isCopyImageLoading,
+    isCopyImageError,
+    setCopyImageLoading
+  } = (0, _useUploadImage.default)({
+    editor,
+    element
+  });
   const registerEvent = (0, _react.useCallback)(eventList => {
     eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
@@ -202,20 +208,16 @@ const Image = _ref => {
       setIsShowImagePlaceholder(false);
     }
   }, [data, editor]);
+  const onImageLoaded = (0, _react.useCallback)(() => {
+    if ((0, _helpers.isImagUrlIsFromCopy)(data.src)) {
+      setCopyImageLoading(true);
+    }
+  }, [data.src, setCopyImageLoading]);
   const onImageLoadError = (0, _react.useCallback)(() => {
     // Check is due to the image is pasted from the clipboard in base64
     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')) {
@@ -238,66 +240,7 @@ const Image = _ref => {
       });
     }
   }, [data, editor, element]);
-  (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({
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/_react.default.createElement("span", Object.assign({
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
@@ -305,6 +248,7 @@ const Image = _ref => {
     },
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
+    "data-src": (0, _helpers.getImageURL)(data, editor),
     suppressContentEditableWarning: true
   }), /*#__PURE__*/_react.default.createElement("img", {
     ref: imageRef,
@@ -312,7 +256,7 @@ const Image = _ref => {
     style: getImageStyle(),
     draggable: false,
     alt: ""
-  }), children), isCopyError && /*#__PURE__*/_react.default.createElement("span", Object.assign({
+  }), children), isCopyImageError && /*#__PURE__*/_react.default.createElement("span", Object.assign({
     className: (0, _classnames.default)('sdoc-image-wrapper', className)
   }, attributes, {
     style: {
@@ -320,12 +264,13 @@ const Image = _ref => {
     },
     onMouseOver: e => (0, _helpers.selectImageWhenSelectPartial)(e, editor, element, isSelected),
     contentEditable: "false",
+    "data-src": data.src,
     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({
+  }), children), !isShowImagePlaceholder && !isCopyImageError && /*#__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, {
@@ -342,16 +287,19 @@ const Image = _ref => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: imageStyle
   }, /*#__PURE__*/_react.default.createElement("img", {
+    ref: imageRef,
     className: (0, _classnames.default)({
       'image-selected': isSelected
     }),
     onClick: onClickImage,
-    ref: imageRef,
     src: (0, _helpers.getImageURL)(data, editor),
     style: getImageStyle(),
     draggable: false,
+    onLoad: onImageLoaded,
     onError: onImageLoadError,
     alt: ""
+  }), isCopyImageLoading && /*#__PURE__*/_react.default.createElement(_imageLoader.default, {
+    copyright: t('Image_is_uploading')
   }), isSelected && /*#__PURE__*/_react.default.createElement("span", {
     className: "image-resizer",
     ref: resizerRef,