@seafile/sdoc-editor 0.3.6 → 0.3.7

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

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Transforms, Path, Editor, Element } from '@seafile/slate';
 import toaster from '../../../../components/toast';
 import context from '../../../../context';
@@ -7,17 +6,21 @@ import { focusEditor } from '../../core';
 import { getErrorMsg } from '../../../../utils';
 import { getSlateFragmentAttribute } from '../../../utils/document-utils';
 import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE } from '../../constants';
-var withImage = function withImage(editor) {
-  var isInline = editor.isInline,
-    isVoid = editor.isVoid,
-    insertData = editor.insertData,
-    deleteBackward = editor.deleteBackward,
-    insertFragment = editor.insertFragment;
-  var newEditor = editor;
+const withImage = editor => {
+  const {
+    isInline,
+    isVoid,
+    insertData,
+    deleteBackward,
+    insertFragment
+  } = editor;
+  const newEditor = editor;
 
   // rewrite isInline
-  newEditor.isInline = function (elem) {
-    var type = elem.type;
+  newEditor.isInline = elem => {
+    const {
+      type
+    } = elem;
     if (type === IMAGE) {
       return true;
     }
@@ -25,33 +28,35 @@ var withImage = function withImage(editor) {
   };
 
   // rewrite isVoid
-  newEditor.isVoid = function (elem) {
-    var type = elem.type;
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
     if (type === IMAGE) {
       return true;
     }
     return isVoid(elem);
   };
-  newEditor.insertData = function (data) {
-    var fragment = data.getData("application/".concat(CLIPBOARD_FORMAT_KEY)) || getSlateFragmentAttribute(data);
-    var originSdocUuid = data.getData("text/".concat(CLIPBOARD_ORIGIN_SDOC_KEY));
+  newEditor.insertData = data => {
+    const fragment = data.getData("application/".concat(CLIPBOARD_FORMAT_KEY)) || getSlateFragmentAttribute(data);
+    const originSdocUuid = data.getData("text/".concat(CLIPBOARD_ORIGIN_SDOC_KEY));
     if (fragment && originSdocUuid) {
-      var decoded = decodeURIComponent(window.atob(fragment));
-      var fragmentData = JSON.parse(decoded);
+      const decoded = decodeURIComponent(window.atob(fragment));
+      const fragmentData = JSON.parse(decoded);
       if (hasSdocImages(originSdocUuid, fragmentData)) {
-        var imageData = getImageData(fragmentData);
-        context.copyImage(originSdocUuid, imageData).then(function (res) {
+        const imageData = getImageData(fragmentData);
+        context.copyImage(originSdocUuid, imageData).then(res => {
           if (res.status === 200) {
             queryCopyMoveProgressView(res.data.task_id);
           }
-        }).catch(function (error) {
-          var errorMessage = getErrorMsg(error);
+        }).catch(error => {
+          const errorMessage = getErrorMsg(error);
           toaster.danger(errorMessage);
         });
       }
     }
     if (data.types && data.types.includes('Files') && data.files[0].type.includes(IMAGE)) {
-      context.uploadLocalImage(data.files[0]).then(function (fileUrl) {
+      context.uploadLocalImage(data.files[0]).then(fileUrl => {
         insertImage(newEditor, fileUrl, editor.selection, INSERT_POSITION.CURRENT);
         resetCursor(newEditor);
       });
@@ -59,19 +64,23 @@ var withImage = function withImage(editor) {
     }
     insertData(data);
   };
-  newEditor.insertFragment = function (data) {
+  newEditor.insertFragment = data => {
     if (isSingleImage(data)) {
       resetCursor(newEditor);
     }
     return insertFragment(data);
   };
-  newEditor.imageOnKeyDown = function (e) {
+  newEditor.imageOnKeyDown = e => {
     if (e.keyCode === 13) {
-      var selection = newEditor.selection;
-      var focus = selection.focus;
-      var parentPath = Path.parent(focus.path);
-      var nextPath = Path.next(parentPath);
-      var nextSelection = {
+      const {
+        selection
+      } = newEditor;
+      const {
+        focus
+      } = selection;
+      const parentPath = Path.parent(focus.path);
+      const nextPath = Path.next(parentPath);
+      const nextSelection = {
         anchor: {
           offset: 0,
           path: nextPath
@@ -85,14 +94,13 @@ var withImage = function withImage(editor) {
       return;
     }
   };
-  newEditor.deleteBackward = function (unit) {
+  newEditor.deleteBackward = unit => {
     deleteBackward(unit);
     // After the delete operation, if the selected image is selected, the cursor moves backward one position
-    var selection = editor.selection;
-    var _Editor$parent = Editor.parent(editor, selection),
-      _Editor$parent2 = _slicedToArray(_Editor$parent, 2),
-      node = _Editor$parent2[0],
-      path = _Editor$parent2[1];
+    const {
+      selection
+    } = editor;
+    const [node, path] = Editor.parent(editor, selection);
     if (Element.isElement(node) && node.type === IMAGE) {
       focusEditor(editor, Path.next(path));
     }

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

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { ReactEditor, useSelected, useReadOnly } from '@seafile/slate-react';
@@ -13,83 +12,63 @@ import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { IMAGE_BORDER_TYPE } from './constants';
 import { ADDED_STYLE, DELETED_STYLE } from '../../constants';
 import imagePlaceholder from '../../../assets/images/image-placeholder.png';
-var Image = function Image(_ref) {
-  var element = _ref.element,
-    editor = _ref.editor,
-    style = _ref.style,
-    className = _ref.className,
-    attributes = _ref.attributes,
-    children = _ref.children,
-    isSelected = _ref.isSelected,
-    t = _ref.t;
-  var data = element.data,
-    display_type = element.display_type,
-    align = element.align,
-    _element$border_type = element.border_type,
-    border_type = _element$border_type === void 0 ? IMAGE_BORDER_TYPE[0].type : _element$border_type;
-  var imageWrapStyle = _objectSpread(_objectSpread({}, style), {}, {
+const Image = _ref => {
+  let {
+    element,
+    editor,
+    style,
+    className,
+    attributes,
+    children,
+    isSelected,
+    t
+  } = _ref;
+  const {
+    data,
+    display_type,
+    align,
+    border_type = IMAGE_BORDER_TYPE[0].type
+  } = element;
+  const imageWrapStyle = _objectSpread(_objectSpread({}, style), {}, {
     display: display_type === 'Block' ? 'block' : 'inline-block',
     paddingTop: display_type === 'Block' ? '8px' : '',
     textAlign: display_type === 'Block' ? align : ''
   });
-  var imageStyle = {
-    border: IMAGE_BORDER_TYPE.find(function (item) {
-      return item.type === border_type;
-    }).value
+  const imageStyle = {
+    border: IMAGE_BORDER_TYPE.find(item => item.type === border_type).value
   };
-  var readOnly = useReadOnly();
-  var imageRef = useRef(null);
-  var resizerRef = useRef(null);
-  var scrollRef = useScrollContext();
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    movingWidth = _useState2[0],
-    setMovingWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isResizing = _useState4[0],
-    setIsResizing = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isShowImagePlaceholder = _useState6[0],
-    setIsShowImagePlaceholder = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isShowImageHoverMenu = _useState8[0],
-    setIsShowImageHoverMenu = _useState8[1];
-  var _useState9 = useState({}),
-    _useState10 = _slicedToArray(_useState9, 2),
-    menuPosition = _useState10[0],
-    setMenuPosition = _useState10[1];
-  var _useState11 = useState((data === null || data === void 0 ? void 0 : data.caption) || ''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    caption = _useState12[0],
-    setCaption = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    isShowCaption = _useState14[0],
-    setIsShowCaption = _useState14[1];
-  var registerEvent = useCallback(function (eventList) {
-    eventList.forEach(function (element) {
+  const readOnly = useReadOnly();
+  const imageRef = useRef(null);
+  const resizerRef = useRef(null);
+  const scrollRef = useScrollContext();
+  const [movingWidth, setMovingWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isShowImagePlaceholder, setIsShowImagePlaceholder] = useState(false);
+  const [isShowImageHoverMenu, setIsShowImageHoverMenu] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({});
+  const [caption, setCaption] = useState((data === null || data === void 0 ? void 0 : data.caption) || '');
+  const [isShowCaption, setIsShowCaption] = useState(false);
+  const registerEvent = useCallback(eventList => {
+    eventList.forEach(element => {
       document.addEventListener(element.eventName, element.event);
     });
   }, []);
-  var unregisterEvent = useCallback(function (eventList) {
-    eventList.forEach(function (element) {
+  const unregisterEvent = useCallback(eventList => {
+    eventList.forEach(element => {
       document.removeEventListener(element.eventName, element.event);
     });
   }, []);
-  var onMouseMove = useCallback(function (event) {
+  const onMouseMove = useCallback(event => {
     var _resizerRef$current;
     event.preventDefault();
     event.stopPropagation();
-    var changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
-    var imageWidth = imageRef.current.width + changeX;
+    const changeX = event.clientX - ((_resizerRef$current = resizerRef.current) === null || _resizerRef$current === void 0 ? void 0 : _resizerRef$current.getBoundingClientRect().left) - 5;
+    const imageWidth = imageRef.current.width + changeX;
     if (imageWidth < 20) return;
     imageRef.current.width = imageWidth;
     setMovingWidth(imageWidth);
   }, []);
-  var onResizeEnd = useCallback(function (event) {
+  const onResizeEnd = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
     unregisterEvent([{
@@ -99,20 +78,20 @@ var Image = function Image(_ref) {
       'eventName': 'mouseup',
       'event': onResizeEnd
     }]);
-    var newData = _objectSpread(_objectSpread({}, element.data), {}, {
+    const newData = _objectSpread(_objectSpread({}, element.data), {}, {
       width: imageRef.current.width
     });
     updateImage(editor, newData);
 
     // Reset hover menu position
-    setTimeout(function () {
+    setTimeout(() => {
       setIsResizing(false);
       setIsShowImageHoverMenu(true);
       setPosition();
     }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, element.data, imageRef.current]);
-  var onResizeStart = useCallback(function (event) {
+  const onResizeStart = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
     setIsShowImageHoverMenu(false);
@@ -125,26 +104,26 @@ var Image = function Image(_ref) {
       'event': onResizeEnd
     }]);
   }, [onMouseMove, onResizeEnd, registerEvent]);
-  var getImageStyle = useCallback(function () {
-    var imageWidth = element.data.width || '';
+  const getImageStyle = useCallback(() => {
+    let imageWidth = element.data.width || '';
     if (movingWidth) imageWidth = movingWidth;
     return {
       width: imageWidth
     };
   }, [element.data, movingWidth]);
-  var onScroll = useCallback(function () {
+  const onScroll = useCallback(() => {
     setPosition();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onHideImageHoverMenu = useCallback(function (e) {
+  const onHideImageHoverMenu = useCallback(e => {
     var _imagePreviewer$;
     if (isResizing) return;
-    var imagePreviewer = document.getElementsByClassName('sf-editor-image-previewer');
+    const imagePreviewer = document.getElementsByClassName('sf-editor-image-previewer');
     if (e.target === imageRef.current || ((_imagePreviewer$ = imagePreviewer[0]) === null || _imagePreviewer$ === void 0 ? void 0 : _imagePreviewer$.contains(e.target))) return;
     setIsShowImageHoverMenu(false);
   }, [isResizing]);
-  useEffect(function () {
-    var observerRefValue = null;
+  useEffect(() => {
+    let observerRefValue = null;
     if (isShowImageHoverMenu) {
       registerEvent([{
         'eventName': 'click',
@@ -159,7 +138,7 @@ var Image = function Image(_ref) {
       }]);
       scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
     }
-    return function () {
+    return () => {
       unregisterEvent([{
         'eventName': 'click',
         'event': onHideImageHoverMenu
@@ -170,38 +149,39 @@ var Image = function Image(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowImageHoverMenu, onHideImageHoverMenu]);
-  var setPosition = useCallback(function () {
+  const setPosition = useCallback(() => {
     if (imageRef.current) {
-      var _imageRef$current$get = imageRef.current.getBoundingClientRect(),
-        top = _imageRef$current$get.top,
-        left = _imageRef$current$get.left;
+      const {
+        top,
+        left
+      } = imageRef.current.getBoundingClientRect();
       setMenuPosition({
         top: top - 42,
         left: left - 3
       });
     }
   }, []);
-  var onClickImage = useCallback(function (e) {
+  const onClickImage = useCallback(e => {
     setPosition();
     setIsShowImageHoverMenu(true);
   }, [setPosition]);
-  var reloadImage = useCallback(function () {
+  const reloadImage = useCallback(() => {
     if (imageRef) {
       imageRef.current['src'] = getImageURL(data.src);
     }
   }, [data.src]);
-  var onImageLoadError = useCallback(function () {
+  const onImageLoadError = useCallback(() => {
     setIsShowImagePlaceholder(true);
     // External network images do not reload after failure to load
     if (!data.src.startsWith('http')) {
-      var eventBus = EventBus.getInstance();
+      const eventBus = EventBus.getInstance();
       eventBus.subscribe(INTERNAL_EVENT.RELOAD_IMAGE, reloadImage);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onSetCaption = useCallback(function (e) {
-    var path = ReactEditor.findPath(editor, element);
-    var newData = _objectSpread(_objectSpread({}, data), {}, {
+  const onSetCaption = useCallback(e => {
+    const path = ReactEditor.findPath(editor, element);
+    const newData = _objectSpread(_objectSpread({}, data), {}, {
       caption: e.target.value.trim()
     });
     if (path) {
@@ -258,33 +238,35 @@ var Image = function Image(_ref) {
     placeholder: t('Insert_caption'),
     value: caption,
     onBlur: onSetCaption,
-    onChange: function onChange(e) {
+    onChange: e => {
       setCaption(e.target.value.trim());
     },
-    onCompositionStart: function onCompositionStart(e) {
+    onCompositionStart: e => {
       e.stopPropagation();
     }
   }))), children), isShowImageHoverMenu && !readOnly && /*#__PURE__*/React.createElement(ImageHoverMenu, {
     editor: editor,
     menuPosition: menuPosition,
     element: element,
-    onHideImageHoverMenu: function onHideImageHoverMenu() {
+    onHideImageHoverMenu: () => {
       setIsShowImageHoverMenu(false);
     },
-    onShowCaption: function onShowCaption() {
+    onShowCaption: () => {
       setIsShowCaption(true);
     }
   })));
 };
-var SdocImage = withTranslation('sdoc-editor')(Image);
+const SdocImage = withTranslation('sdoc-editor')(Image);
 function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  var isSelected = useSelected();
+  const isSelected = useSelected();
 
   // decorate diff-viewer
-  var element = props.element,
-    leaf = props.leaf;
-  var style = _objectSpread({}, props.style);
+  const {
+    element,
+    leaf
+  } = props;
+  let style = _objectSpread({}, props.style);
   if (leaf && leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;
   }

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

@@ -14,6 +14,6 @@ import FontPlugin from './font';
 import SdocLinkPlugin from './sdoc-link';
 import FileLinkPlugin from './file-link';
 import ParagraphPlugin from './paragraph';
-var Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin];
+const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin];
 export default Plugins;
 export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin };

package/dist/basic-sdk/extension/plugins/link/dialog/add-link-dialog/index.js

@@ -1,40 +1,31 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { Fragment, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Label } from 'reactstrap';
 import { insertLink, updateLink, checkLink } from '../../helpers';
-var AddLinkDialog = function AddLinkDialog(_ref) {
-  var editor = _ref.editor,
-    className = _ref.className,
-    element = _ref.element,
-    insertPosition = _ref.insertPosition,
-    slateNode = _ref.slateNode,
-    closeDialog = _ref.closeDialog;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    linkErrorMessage = _useState2[0],
-    setLinkErrorMessage = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    titleErrorMessage = _useState4[0],
-    setTitleErrorMessage = _useState4[1];
-  var _ref2 = element || {
-      title: '',
-      href: ''
-    },
-    oldTitle = _ref2.title,
-    oldURL = _ref2.href;
-  var _useState5 = useState(oldTitle),
-    _useState6 = _slicedToArray(_useState5, 2),
-    title = _useState6[0],
-    setTitle = _useState6[1];
-  var _useState7 = useState(oldURL),
-    _useState8 = _slicedToArray(_useState7, 2),
-    url = _useState8[0],
-    setURL = _useState8[1];
-  var submit = useCallback(function () {
+const AddLinkDialog = _ref => {
+  let {
+    editor,
+    className,
+    element,
+    insertPosition,
+    slateNode,
+    closeDialog
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const [linkErrorMessage, setLinkErrorMessage] = useState('');
+  const [titleErrorMessage, setTitleErrorMessage] = useState('');
+  const {
+    title: oldTitle,
+    href: oldURL
+  } = element || {
+    title: '',
+    href: ''
+  };
+  const [title, setTitle] = useState(oldTitle);
+  const [url, setURL] = useState(oldURL);
+  const submit = useCallback(() => {
     setLinkErrorMessage('');
     setTitleErrorMessage('');
     if (!url) {
@@ -49,7 +40,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
       setLinkErrorMessage(t('The_link_address_is_invalid'));
       return;
     }
-    var isEdit = oldURL && oldTitle;
+    const isEdit = oldURL && oldTitle;
     if (isEdit) {
       updateLink(editor, title, url);
     } else {
@@ -59,7 +50,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, url, title, oldTitle, oldURL, insertPosition]);
-  var onKeyDown = useCallback(function (event) {
+  const onKeyDown = useCallback(event => {
     if (event.keyCode === 13) {
       event.preventDefault();
       submit();
@@ -68,13 +59,13 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, url, title, oldTitle, oldURL, insertPosition]);
-  var handleUrlChange = useCallback(function (event) {
-    var value = event.target.value.trim();
+  const handleUrlChange = useCallback(event => {
+    const value = event.target.value.trim();
     if (value === url) return;
     setURL(value);
   }, [url]);
-  var handleTitleChange = useCallback(function (event) {
-    var value = event.target.value;
+  const handleTitleChange = useCallback(event => {
+    const value = event.target.value;
     if (value === title) return;
     setTitle(value);
   }, [title]);