@seafile/sdoc-editor 0.2.17 → 0.2.18

package/dist/api/seafile-api.js

@@ -11,8 +11,6 @@ var SeafileAPI = /*#__PURE__*/function () {
     };
     this.deleteSdocOtherRevision = function (docUuid, revisionId) {
       var url = 'api/v2.1/seadoc/delete-revision/' + docUuid + '/' + revisionId + '/';
-      // let formData = new FormData();
-      // formData.append('revision_id', revisionId);
       return _this.req.delete(url);
     };
     this.req = axios.create({
@@ -153,6 +151,42 @@ var SeafileAPI = /*#__PURE__*/function () {
       var url = 'api/v2.1/seadoc/query-copy-move-progress/' + docUuid + '/?&doc_uuid=' + docUuid + '&task_id=' + taskId;
       return this.req.get(url);
     }
+
+    // participants
+  }, {
+    key: "listParticipants",
+    value: function listParticipants(docUuid) {
+      var url = 'api/v2.1/seadoc/participants/' + docUuid + '/';
+      return this.req.get(url);
+    }
+  }, {
+    key: "addParticipants",
+    value: function addParticipants(docUuid, emails) {
+      var url = 'api/v2.1/seadoc/participants/' + docUuid + '/';
+      var params = {
+        emails: emails
+      };
+      return this._sendPostRequest(url, params);
+    }
+  }, {
+    key: "deleteParticipants",
+    value: function deleteParticipants(docUuid, email) {
+      var url = 'api/v2.1/seadoc/participant/' + docUuid + '/';
+      var params = {
+        email: email
+      };
+      return this.req.delete(url, {
+        data: params
+      });
+    }
+
+    // related-users
+  }, {
+    key: "listRelatedUsers",
+    value: function listRelatedUsers(docUuid) {
+      var url = 'api/v2.1/seadoc/related-users/' + docUuid + '/';
+      return this.req.get(url);
+    }
   }]);
   return SeafileAPI;
 }();

package/dist/assets/css/simple-editor.css

@@ -1,35 +1,3 @@
-.sdoc-editor-page-header .doc-info {
-  display: flex;
-  align-items: center;
-}
-
-.sdoc-editor-page-header .doc-info .doc-name {
-  font-size: 18px;
-  font-weight: 700;
-  color: #212529;
-}
-
-.sdoc-editor-page-header .doc-info .doc-icon {
-  margin-left: 0.5rem;
-  color: #999;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-}
-
-.sdoc-editor-page-header .doc-info .doc-icon:hover {
-  margin-left: 0.5rem;
-  color: #333;
-}
-
-.sdoc-editor-page-header .doc-info .sdoc-link {
-  font-size: 14px;
-}
-
-.sdoc-editor-page-header .doc-state {
-  font-size: 0.8125rem;
-}
-
 /* reset common css */
 .sdoc-editor-page-wrapper .dropdown-item,
 .sdoc-context-menu .dropdown-item {

package/dist/basic-sdk/comment/components/comment-all-participants/index.css

@@ -0,0 +1,83 @@
+.global-comments-popover .comments-panel-body__header .comments-participants-container {
+  width: fit-content;
+  max-width: 100%;
+  height: 42px;
+  padding-top: 6px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.global-comments-popover .comments-panel-body__header .comments-participants-editor-target {
+  position: absolute;
+  left: -1px;
+  top: 0;
+  z-index: -1;
+  height: 100%;
+  width: 1px;
+  background-color: transparent;
+}
+
+.global-comments-popover .comments-panel-body__header .comment-participant-avatar {
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: -0.5rem;
+}
+
+.global-comments-popover .comments-panel-body__header .comment-participant-avatar img {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #fff;
+  line-height: 2rem;
+  border-radius: 50%;
+  display: inline-block;
+  background: #ced4da no-repeat center/cover;
+  position: relative;
+  text-align: center;
+  color: #868e96;
+  font-weight: 600;
+  vertical-align: bottom;
+  font-size: .875rem;
+  user-select: none;
+}
+
+.global-comments-popover .comments-panel-body__header .add-comments-participants {
+  position: relative;
+  bottom: -3px;
+  cursor: pointer;
+  margin-right: -0.5rem;
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.global-comments-popover .add-comments-participants .sdocfont {
+  font-size: 16px;
+  color: #ff8000;
+  border-radius: 50%;
+}
+
+.global-comments-popover .comment-participants-more {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, .6);
+  border: 2px solid #fff;
+}
+
+.global-comments-popover .comment-participants-more .sdocfont {
+  color: #fff;
+  font-size: 12px;
+}

package/dist/basic-sdk/comment/components/comment-all-participants/index.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParticipantsContext } from '../../hooks/use-participants';
+import ParticipantAvatar from './participant-avatar';
+import Tooltip from '../../../../components/tooltip';
+import CommentParticipantsEditor from '../comment-participants-editor';
+import './index.css';
+var CommentAllParticipants = function CommentAllParticipants() {
+  var popoverRef = useRef();
+  var _useParticipantsConte = useParticipantsContext(),
+    participants = _useParticipantsConte.participants;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var addParticipantId = 'sdoc-add-participants';
+  var commentsParticipantsId = 'sdoc-comments-participants';
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDidMount = _useState2[0],
+    setDidMount = _useState2[1];
+  useEffect(function () {
+    setDidMount(true);
+  }, []);
+  var toggle = useCallback(function () {
+    popoverRef.current && popoverRef.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popoverRef.current]);
+  var participantsCount = participants.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "comments-participants-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comments-participants-editor-target",
+    id: commentsParticipantsId
+  }), participants.slice(0, 14).map(function (participant, index) {
+    var username = participant.username;
+    return /*#__PURE__*/React.createElement(ParticipantAvatar, {
+      key: username,
+      participant: participant,
+      index: index,
+      showMore: participantsCount > 13 && index === 13
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "add-comments-participants",
+    id: addParticipantId,
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-add"
+  })), isDidMount && /*#__PURE__*/React.createElement(Tooltip, {
+    target: addParticipantId
+  }, t('Add_participants'))), isDidMount && /*#__PURE__*/React.createElement(CommentParticipantsEditor, {
+    target: commentsParticipantsId,
+    ref: popoverRef
+  }));
+};
+export default CommentAllParticipants;

package/dist/basic-sdk/comment/components/comment-all-participants/participant-avatar.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Tooltip from '../../../../components/tooltip';
+var ParticipantAvatar = function ParticipantAvatar(_ref) {
+  var participant = _ref.participant,
+    index = _ref.index,
+    showMore = _ref.showMore;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTooltip = _useState2[0],
+    setShowTooltip = _useState2[1];
+  useEffect(function () {
+    setShowTooltip(true);
+  }, []);
+  var name = participant.name,
+    avatar_url = participant.avatar_url;
+  var id = "comment-participant-avatar-".concat(index, "-").concat(Math.floor(Math.random() * 1000));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('comment-participant-avatar', {
+      'position-relative': showMore
+    }),
+    id: id
+  }, /*#__PURE__*/React.createElement("img", {
+    src: avatar_url,
+    alt: ""
+  }), showTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    target: id
+  }, name), showMore && /*#__PURE__*/React.createElement("div", {
+    className: "comment-participants-more"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-more"
+  })));
+};
+export default ParticipantAvatar;

package/dist/basic-sdk/comment/{comment → components}/comment-editor.js

@@ -6,6 +6,8 @@ import { useScrollContext } from '../../hooks/use-scroll-context';
 import context from '../../../context';
 import EventBus from '../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../constants';
+import { useParticipantsContext } from '../hooks/use-participants';
+import CommentInput from './comment-input';
 var getSubmitTip = function getSubmitTip(type, content) {
   if (content) return 'Save';
   return type === 'comment' ? 'Comment' : 'Reply';
@@ -19,25 +21,13 @@ var CommentEditor = function CommentEditor(_ref) {
     updateContent = _ref.updateContent,
     setIsEditing = _ref.setIsEditing,
     hiddenComment = _ref.hiddenComment;
-  var commentRef = useRef();
+  var commentInputRef = useRef();
   var commentWrapperRef = useRef();
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var scrollRef = useScrollContext();
-
-  // onMount: comment content
-  useEffect(function () {
-    if (!content) return;
-    commentRef.current.textContent = content;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // onMount: set input focus
-  useEffect(function () {
-    if (type !== 'comment') return;
-    commentRef.current && commentRef.current.focus();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  var _useParticipantsConte = useParticipantsContext(),
+    addParticipants = _useParticipantsConte.addParticipants;
 
   // onMount: set scrollLeft
   useEffect(function () {
@@ -70,29 +60,20 @@ var CommentEditor = function CommentEditor(_ref) {
   }, [content, insertContent, updateContent]);
   var onSubmit = useCallback(function (event) {
     event && event.stopPropagation();
-    var value = commentRef.current.textContent;
+    var value = commentInputRef.current.getValue();
     updateValue(value);
-    commentRef.current.textContent = '';
-  }, [updateValue]);
+    var userInfo = context.getUserInfo();
+    addParticipants(userInfo.username);
+    commentInputRef.current.setValue('');
+  }, [updateValue, addParticipants, commentInputRef]);
   var onCancel = useCallback(function (event) {
     event.stopPropagation();
-    commentRef.current.textContent = '';
+    commentInputRef.current.setValue('');
     setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsEditing]);
-  var onKeyDown = useCallback(function (event) {
-    // enter
-    if (event.keyCode === 13) {
-      event.preventDefault();
-      onSubmit();
-    }
-    if (event.keyCode === 27) {
-      event.preventDefault();
-      onCancel();
-    }
-  }, [onCancel, onSubmit]);
   var submitTip = useMemo(function () {
     return getSubmitTip(type, content);
   }, [content, type]);
@@ -111,12 +92,13 @@ var CommentEditor = function CommentEditor(_ref) {
     width: "100%"
   })), /*#__PURE__*/React.createElement("div", {
     className: "comment-editor-user-name"
-  }, userInfo.name)), /*#__PURE__*/React.createElement("div", {
-    ref: commentRef,
-    contentEditable: "true",
-    className: "comment-editor",
-    placeholder: t(placeholder),
-    onKeyDown: onKeyDown
+  }, userInfo.name)), /*#__PURE__*/React.createElement(CommentInput, {
+    ref: commentInputRef,
+    type: type,
+    placeholder: placeholder,
+    content: content,
+    onCancel: onCancel,
+    onSubmit: onSubmit
   }), /*#__PURE__*/React.createElement("div", {
     className: "comment-operations"
   }, /*#__PURE__*/React.createElement(Button, {

package/dist/basic-sdk/comment/components/comment-input/comment-participant-item.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { eventStopPropagation } from '../../../utils/mouse-event';
+var CommentParticipantItem = function CommentParticipantItem(_ref) {
+  var participant = _ref.participant,
+    setScrollTop = _ref.setScrollTop,
+    onSelectParticipant = _ref.onSelectParticipant,
+    participantIndex = _ref.participantIndex,
+    activeParticipantIndex = _ref.activeParticipantIndex;
+  var ref = useRef(null);
+  var oldValueRef = useRef({});
+  useEffect(function () {
+    oldValueRef.current.participantIndex = participantIndex;
+    oldValueRef.current.activeParticipantIndex = activeParticipantIndex;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (activeParticipantIndex === participantIndex && activeParticipantIndex !== oldValueRef.current.activeParticipantIndex) {
+      var offsetHeight = ref.current.offsetHeight;
+      var offsetTop = ref.current.offsetTop;
+      if (activeParticipantIndex > oldValueRef.current.activeParticipantIndex) {
+        setScrollTop(offsetTop, offsetHeight, 'down');
+      } else {
+        setScrollTop(offsetTop, offsetHeight, 'up');
+      }
+    }
+    oldValueRef.current.activeParticipantIndex = activeParticipantIndex;
+  }, [setScrollTop, participantIndex, activeParticipantIndex, ref, oldValueRef]);
+  var selectParticipant = useCallback(function (event) {
+    eventStopPropagation(event);
+    onSelectParticipant(participant);
+  }, [participant, onSelectParticipant]);
+  var active = participantIndex === activeParticipantIndex;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "comment-participant-item ".concat(active ? 'active' : ''),
+    ref: ref,
+    onClick: selectParticipant
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comment-participant-container"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "comment-participant-avatar",
+    alt: participant.name,
+    src: participant.avatar_url
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "comment-participant-name"
+  }, participant.name)));
+};
+export default CommentParticipantItem;

package/dist/basic-sdk/comment/components/comment-input/index.css

@@ -0,0 +1,45 @@
+.sdoc-comment-caret-list {
+  background: #fff;
+  position: absolute;
+  padding: 10px 0;
+  max-height: 200px;
+  overflow: auto;
+  min-width: 150px;
+  /* higher than row expand */
+  z-index: 1049;
+  border-radius: 5px;
+  border: 1px solid #ededed;
+  max-width: 200px;
+}
+
+.sdoc-comment-caret-list .comment-participant-item {
+  padding: 5px 0;
+}
+
+.sdoc-comment-caret-list .comment-participant-item.active,
+.sdoc-comment-caret-list .comment-participant-item:hover {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-container {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comment-caret-list .comment-participant-item .comment-participant-name {
+  margin-left: 4px;
+  font-size: 14px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}