@seafile/sdoc-editor 0.1.149 → 0.1.150

package/dist/api/seafile-api.js

@@ -87,6 +87,15 @@ var SeafileAPI = /*#__PURE__*/function () {
       var url = 'api/v2.1/seadoc/dir/' + docUuid + '/?p=' + p + '&doc_uuid=' + docUuid;
       return this.req.get(url);
     }
+  }, {
+    key: "asyncCopyImages",
+    value: function asyncCopyImages(docUuid, originDocUuid, imageList) {
+      var url = '/api/v2.1/seadoc/async-copy-images/' + docUuid + '/';
+      return this.req.post(url, {
+        origin_doc_uuid: originDocUuid,
+        image_list: imageList
+      });
+    }
   }]);
   return SeafileAPI;
 }();

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

@@ -3,6 +3,7 @@ export var INTERNAL_EVENT = {
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
   HIDDEN_CODE_BLOCK_HOVER_MENU: 'hidden_code_block_hover_menu',
   ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
-  INSERT_ELEMENT: 'insert_element'
+  INSERT_ELEMENT: 'insert_element',
+  OUTLINE_STATE_CHANGED: 'outline_state_changed'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

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

@@ -1,12 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import InsertWebImageDialog from '../../plugins/image/dialogs/insert-web-image-dialog';
 import CustomTableSizeDialog from '../../plugins/table/dialog/custom-table-size-dialog';
 import AddLinkDialog from '../../plugins/link/dialog/add-link-dialog';
 import SelectSdocFileDialog from '../../plugins/sdoc-link/dialog/select-sdoc-file-dialog';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
-import { ELEMENT_TYPE, INSERT_POSITION, INSERT_IMAGE_TYPE } from '../../constants';
+import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE } from '../../constants';
 import context from '../../../../context';
 import { insertImage } from '../../plugins/image/helpers';
 var InsertElementDialog = function InsertElementDialog(_ref) {
@@ -57,7 +56,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     setSlateNode(slateNode);
     setElement(element);
     setDialogType(type);
-    if (type === INSERT_IMAGE_TYPE.LOCAL_IMAGE) {
+    if (type === LOCAL_IMAGE) {
       setTimeout(function () {
         uploadLocalImageInputRef.current && uploadLocalImageInputRef.current.click();
       }, 0);
@@ -89,11 +88,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
       {
         return /*#__PURE__*/React.createElement(SelectSdocFileDialog, props);
       }
-    case INSERT_IMAGE_TYPE.WEB_IMAGE:
-      {
-        return /*#__PURE__*/React.createElement(InsertWebImageDialog, props);
-      }
-    case INSERT_IMAGE_TYPE.LOCAL_IMAGE:
+    case LOCAL_IMAGE:
       {
         return /*#__PURE__*/React.createElement("input", {
           ref: uploadLocalImageInputRef,

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

@@ -236,10 +236,7 @@ export var INSERT_POSITION = {
   CURRENT: 'current',
   AFTER: 'after'
 };
-export var INSERT_IMAGE_TYPE = {
-  LOCAL_IMAGE: 'local-image',
-  WEB_IMAGE: 'web-image'
-};
+export var LOCAL_IMAGE = 'local-image';
 export var LIST_ITEM_CORRELATION_TYPE = ['unordered_list', 'ordered_list', 'list-item'];
 export var LIST_ITEM_SUPPORTED_TRANSFORMATION = ['unordered_list', 'ordered_list', 'left', 'center', 'right', 'blockquote'];
 export { BLOCKQUOTE, HEADER, TITLE, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE, SDOC_LINK };

package/dist/basic-sdk/extension/core/queries/index.js

@@ -471,4 +471,25 @@ export var isLastNode = function isLastNode(editor, node) {
   var editorChildren = editor.children || [];
   var editorChildrenLength = editorChildren.length;
   return editorChildren[editorChildrenLength - 1] === node;
+};
+export var isHasImg = function isHasImg(editor) {
+  var hasImg = false;
+  var _iterator5 = _createForOfIteratorHelper(Editor.nodes(editor, {
+      at: editor.selection
+    })),
+    _step5;
+  try {
+    for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+      var _step5$value = _slicedToArray(_step5.value, 1),
+        node = _step5$value[0];
+      if ((node === null || node === void 0 ? void 0 : node.type) === 'image') {
+        hasImg = true;
+      }
+    }
+  } catch (err) {
+    _iterator5.e(err);
+  } finally {
+    _iterator5.f();
+  }
+  return hasImg;
 };

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

@@ -32,9 +32,11 @@ export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor
 };
 export var generateImageNode = function generateImageNode(src) {
   var element = generateEmptyElement(IMAGE);
+  var docUuid = context.getSetting('docUuid');
   return _objectSpread(_objectSpread({}, element), {}, {
     data: {
-      src: src
+      src: src,
+      origin_doc_uuid: docUuid
     }
   });
 };

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
 import { isInsertImageMenuDisabled } from '../helpers';
-import { IMAGE, MENUS_CONFIG_MAP, INSERT_IMAGE_TYPE } from '../../../constants';
+import { IMAGE, MENUS_CONFIG_MAP, LOCAL_IMAGE } from '../../../constants';
 import DropdownMenuItem from '../../../commons/dropdown-menu-item';
 import { INTERNAL_EVENT } from '../../../../constants';
 var ImageMenu = function ImageMenu(_ref) {
@@ -15,16 +15,9 @@ var ImageMenu = function ImageMenu(_ref) {
     t = _useTranslation.t;
   var openInsertLocalImage = useCallback(function () {
     eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: INSERT_IMAGE_TYPE.LOCAL_IMAGE
+      type: LOCAL_IMAGE
     });
   }, [eventBus]);
-  var openInsertWebImageDialog = useCallback(function () {
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: INSERT_IMAGE_TYPE.WEB_IMAGE
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventBus]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
@@ -41,9 +34,6 @@ var ImageMenu = function ImageMenu(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-insert-image-menu-popover-container sdoc-dropdown-menu-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-dropdown-menu-item",
-    onClick: openInsertWebImageDialog
-  }, t('Insert_network_image')), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openInsertLocalImage
   }, t('Upload_local_image')))));

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

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Transforms, Path, Editor, Element } from '@seafile/slate';
 import context from '../../../../context';
-import { insertImage } from './helpers';
+import { insertImage, copyImage } from './helpers';
 import { focusEditor } from '../../core';
-import { INSERT_POSITION } from '../../constants';
+import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY } from '../../constants';
 var withImage = function withImage(editor) {
   var isInline = editor.isInline,
     isVoid = editor.isVoid,

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

@@ -3,12 +3,17 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import { useSelected } from '@seafile/slate-react';
+import { ReactEditor, useSelected } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
 import React from 'react';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { getImageURL, updateImage } from './helpers';
 import ImagePreviewer from './dialogs/image-previewer';
+import toaster from '../../../../components/toast';
+import context from '../../../../context';
+import { getErrorMsg } from '../../../../utils';
+import imagePlaceholder from '../../../assets/images/image-placeholder.png';
 var Image = /*#__PURE__*/function (_React$Component) {
   _inherits(Image, _React$Component);
   var _super = _createSuper(Image);
@@ -82,26 +87,78 @@ var Image = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       width: null,
       isResizing: false,
-      isShowImagePreview: false
+      isShowImagePreview: false,
+      isShowImagePlaceholder: false
     };
     return _this;
   }
   _createClass(Image, [{
-    key: "render",
-    value: function render() {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var docUuid = context.getSetting('docUuid');
       var _this$props2 = this.props,
-        className = _this$props2.className,
-        attributes = _this$props2.attributes,
         element = _this$props2.element,
-        children = _this$props2.children,
-        isSelected = _this$props2.isSelected,
-        t = _this$props2.t;
+        editor = _this$props2.editor;
+      var data = element.data;
+      var origin_doc_uuid = data.origin_doc_uuid,
+        src = data.src;
+
+      // Pictures are copied from other documents
+      if (origin_doc_uuid && origin_doc_uuid !== docUuid) {
+        this.setState({
+          isShowImagePlaceholder: true
+        });
+        var originDocUuid = origin_doc_uuid;
+        var imageList = [src.slice(1)];
+        context.copyImage(originDocUuid, imageList).then(function (res) {
+          if (res.status === 200) {
+            var path = ReactEditor.findPath(editor, element);
+            Transforms.setNodes(editor, {
+              data: _objectSpread(_objectSpread({}, data), {}, {
+                origin_doc_uuid: docUuid
+              })
+            }, {
+              at: path
+            });
+            _this2.setState({
+              isShowImagePlaceholder: false
+            });
+          }
+        }).catch(function (error) {
+          var errorMessage = getErrorMsg(error);
+          toaster.danger(errorMessage);
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+        className = _this$props3.className,
+        attributes = _this$props3.attributes,
+        element = _this$props3.element,
+        children = _this$props3.children,
+        isSelected = _this$props3.isSelected,
+        t = _this$props3.t;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
-        isShowImagePreview = _this$state.isShowImagePreview;
+        isShowImagePreview = _this$state.isShowImagePreview,
+        isShowImagePlaceholder = _this$state.isShowImagePlaceholder;
       var data = element.data;
       var imageClassName = isSelected ? 'image-selected' : '';
       var imageStyle = this.getImageStyle();
+      if (isShowImagePlaceholder) {
+        return /*#__PURE__*/React.createElement("span", Object.assign({
+          className: classNames('sdoc-image-wrapper', className)
+        }, attributes), /*#__PURE__*/React.createElement("img", {
+          ref: this.setImageRef,
+          src: imagePlaceholder,
+          style: imageStyle,
+          draggable: false,
+          alt: ""
+        }), children);
+      }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
         className: classNames('sdoc-image-wrapper', className)
       }, attributes), /*#__PURE__*/React.createElement("img", {

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -5,7 +5,7 @@ import { Transforms } from '@seafile/slate';
 import { insertTable } from '../../plugins/table/helpers';
 import TableSizePopover from '../../plugins/table/popover/table-size-popover';
 import { changeToCodeBlock } from '../../plugins/code-block/helpers';
-import { ELEMENT_TYPE, INSERT_POSITION, INSERT_IMAGE_TYPE, MENUS_CONFIG_MAP, LIST_ITEM } from '../../constants';
+import { ELEMENT_TYPE, INSERT_POSITION, LOCAL_IMAGE, MENUS_CONFIG_MAP, LIST_ITEM } from '../../constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import DropdownMenuItem from '../../commons/dropdown-menu-item';
@@ -19,7 +19,7 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
       Transforms.select(editor, editor.selection.focus);
     }
     eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: INSERT_IMAGE_TYPE.LOCAL_IMAGE,
+      type: LOCAL_IMAGE,
       insertPosition: insertPosition,
       slateNode: slateNode
     });

package/dist/basic-sdk/layout/article-container.js

@@ -1,7 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { INTERNAL_EVENT } from '../constants';
 import { useScrollContext } from '../hooks/use-scroll-context';
+import EventBus from '../utils/event-bus';
+import { getOutlineSetting } from '../outline';
 export default function ArticleContainer(_ref) {
   var editor = _ref.editor,
     children = _ref.children;
@@ -18,15 +21,21 @@ export default function ArticleContainer(_ref) {
   var handleWindowResize = useCallback(function () {
     var rect = scrollRef.current.getBoundingClientRect();
     var articleRect = articleRef.current.getBoundingClientRect();
-    if ((rect.width - articleRect.width) / 2 < 280) {
+    // get state from local storage
+    var isShowOutline = getOutlineSetting();
+    if (isShowOutline && (rect.width - articleRect.width) / 2 < 280) {
       setContainerStyle({
         marginLeft: '280px'
       });
     } else {
       setContainerStyle({});
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [scrollRef]);
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var unsubscribeOutline = eventBus.subscribe(INTERNAL_EVENT.OUTLINE_STATE_CHANGED, handleWindowResize);
+    return unsubscribeOutline;
+  }, [handleWindowResize]);
   useEffect(function () {
     handleWindowResize();
     window.addEventListener('resize', handleWindowResize);

package/dist/basic-sdk/outline/index.js

@@ -2,9 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
+import { INTERNAL_EVENT } from '../constants';
+import EventBus from '../utils/event-bus';
 import OutlineItem from './outline-item';
 import './style.css';
-var getOutlineSetting = function getOutlineSetting() {
+export var getOutlineSetting = function getOutlineSetting() {
   var currentValue = localStorage.getItem('sdoc');
   var config = currentValue ? JSON.parse(currentValue) : {};
   var _config$outlineOpen = config.outlineOpen,
@@ -25,15 +27,19 @@ var SDocOutline = function SDocOutline(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isShown = _useState2[0],
     setIsShown = _useState2[1];
-  useEffect(function () {
-    var outlineOpen = getOutlineSetting();
-    setIsShown(outlineOpen);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  var updateOutlineState = useCallback(function (state) {
+    setIsShown(state);
+    setOutlineSetting(state);
+    var eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.OUTLINE_STATE_CHANGED, state);
   }, []);
+  useEffect(function () {
+    var outlineState = getOutlineSetting();
+    updateOutlineState(outlineState);
+  }, [updateOutlineState]);
   var toggleShow = useCallback(function () {
-    setIsShown(!isShown);
-    setOutlineSetting(!isShown);
-  }, [isShown]);
+    updateOutlineState(!isShown);
+  }, [isShown, updateOutlineState]);
   var list = useMemo(function () {
     return doc.filter(function (item) {
       return ['header1', 'header2', 'header3'].includes(item.type);

package/dist/context.js

@@ -189,6 +189,12 @@ var Context = /*#__PURE__*/function () {
       var sdocServer = this.getSetting('serviceUrl');
       return sdocServer + '/api/v2.1/seadoc/file/' + docUuid + '/?doc_uuid=' + docUuid;
     }
+  }, {
+    key: "copyImage",
+    value: function copyImage(originDocUuid, imageList) {
+      var docUuid = this.getSetting('docUuid');
+      return this.api.asyncCopyImages(docUuid, originDocUuid, imageList);
+    }
   }]);
   return Context;
 }();

package/package.json

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

package/dist/basic-sdk/extension/plugins/image/dialogs/insert-web-image-dialog.js

@@ -1,58 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, Input, Button } from 'reactstrap';
-import { insertImage } from '../helpers';
-var InsertWebImageDialog = function InsertWebImageDialog(_ref) {
-  var editor = _ref.editor,
-    insertPosition = _ref.insertPosition,
-    closeDialog = _ref.closeDialog;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    url = _useState2[0],
-    setUrl = _useState2[1];
-  var onValueChanged = useCallback(function (event) {
-    var value = event.target.value;
-    if (value === url) return;
-    setUrl(value);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url]);
-  var onKeyDown = useCallback(function (event) {
-    if (event.keyCode === 13) {
-      submit();
-      return;
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url]);
-  var submit = useCallback(function () {
-    insertImage(editor, url, editor.selection, insertPosition);
-    closeDialog();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, url]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    isOpen: true,
-    toggle: closeDialog,
-    autoFocus: false
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, t('Insert_image')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
-    for: "insert_image"
-  }, t('Image_address')), /*#__PURE__*/React.createElement(Input, {
-    id: "insert_image",
-    autoFocus: true,
-    value: url,
-    onChange: onValueChanged,
-    onKeyDown: onKeyDown
-  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    onClick: closeDialog
-  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    disabled: url.length === 0,
-    onClick: submit
-  }, t('Submit'))));
-};
-export default InsertWebImageDialog;