@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/comment/comment-decorate.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.commentDecorate = void 0;
+var _slate = require("@seafile/slate");
+const commentDecorate = editor => _ref => {
+  var _editor$element_comme;
+  let [node, path] = _ref;
+  const decorations = [];
+  const comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[node.id]) || [];
+  const unresolvedComments = comments && comments.filter(item => !(item !== null && item !== void 0 && item.resolved));
+  for (const comment of unresolvedComments) {
+    if (comment.detail.element_id) {
+      const commentedContextId = comment.detail.text_comment_id;
+      // rgba prevents occlusion of the cursor
+      decorations.push({
+        anchor: {
+          path,
+          offset: 0
+        },
+        focus: {
+          path: path,
+          offset: _slate.Node.string(node).length
+        },
+        [`sdoc_comment_${commentedContextId}`]: true
+      });
+    }
+  }
+  return decorations;
+};
+exports.commentDecorate = commentDecorate;

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

@@ -0,0 +1,83 @@
+.sdoc-comment-drawer .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;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comments-participants-editor-target {
+  position: absolute;
+  left: -1px;
+  top: 0;
+  z-index: -1;
+  height: 100%;
+  width: 1px;
+  background-color: transparent;
+}
+
+.sdoc-comment-drawer .comments-panel-body__header .comment-participant-avatar {
+  border-radius: 50%;
+  vertical-align: middle;
+  margin-right: -0.5rem;
+}
+
+.sdoc-comment-drawer .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;
+}
+
+.sdoc-comment-drawer .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;
+}
+
+.sdoc-comment-drawer .add-comments-participants .sdocfont {
+  font-size: 16px;
+  color: #ff8000;
+  border-radius: 50%;
+}
+
+.sdoc-comment-drawer .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;
+}
+
+.sdoc-comment-drawer .comment-participants-more .sdocfont {
+  color: #fff;
+  font-size: 12px;
+}

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

@@ -0,0 +1,67 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slateReact = require("@seafile/slate-react");
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var _useParticipants = require("../../hooks/use-participants");
+var _commentParticipantsEditor = _interopRequireDefault(require("../comment-participants-editor"));
+var _participantAvatar = _interopRequireDefault(require("./participant-avatar"));
+require("./index.css");
+const CommentAllParticipants = () => {
+  const popoverRef = (0, _react.useRef)();
+  const {
+    participants
+  } = (0, _useParticipants.useParticipantsContext)();
+  const editor = (0, _slateReact.useSlateStatic)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const addParticipantId = 'sdoc-add-participants';
+  const commentsParticipantsId = 'sdoc-comments-participants';
+  const [isDidMount, setDidMount] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setDidMount(true);
+  }, []);
+  const toggle = (0, _react.useCallback)(() => {
+    popoverRef.current && popoverRef.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popoverRef.current]);
+  const participantsCount = participants.length;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-participants-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-participants-editor-target",
+    id: commentsParticipantsId
+  }), participants.slice(0, 14).map((participant, index) => {
+    const {
+      username
+    } = participant;
+    return /*#__PURE__*/_react.default.createElement(_participantAvatar.default, {
+      key: username,
+      participant: participant,
+      index: index,
+      showMore: participantsCount > 13 && index === 13
+    });
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "add-comments-participants",
+    id: addParticipantId,
+    onClick: toggle
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-add"
+  })), isDidMount && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: addParticipantId
+  }, t('Add_participants'))), isDidMount && /*#__PURE__*/_react.default.createElement(_commentParticipantsEditor.default, {
+    target: commentsParticipantsId,
+    ref: popoverRef,
+    editor: editor
+  }));
+};
+var _default = exports.default = CommentAllParticipants;

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

@@ -0,0 +1,43 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+const ParticipantAvatar = _ref => {
+  let {
+    participant,
+    index,
+    showMore
+  } = _ref;
+  const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setShowTooltip(true);
+  }, []);
+  const {
+    name,
+    avatar_url
+  } = participant;
+  const id = `comment-participant-avatar-${index}-${Math.floor(Math.random() * 1000)}`;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('comment-participant-avatar', {
+      'position-relative': showMore
+    }),
+    id: id
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: avatar_url,
+    alt: ""
+  }), showTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: id
+  }, name), showMore && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-participants-more"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-more"
+  })));
+};
+var _default = exports.default = ParticipantAvatar;

package/dist/basic-sdk/comment/components/comment-context-menu/index.css

@@ -0,0 +1,16 @@
+.menu-group-item.sdoc-comment-menu-container {
+  width: auto;
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-comment-menu-item .sdoc-comments {
+  margin-right: 4px;
+}
+
+.sdoc-context-menu-divider {
+  margin-right: 8px;
+  border-left: 1px solid #e5e5e5;
+  width: 1px;
+  height: 24px;
+}

package/dist/basic-sdk/comment/components/comment-context-menu/index.js

@@ -0,0 +1,43 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+require("./index.css");
+const CommentContextMenu = _ref => {
+  let {
+    isRichEditor
+  } = _ref;
+  const onCommentClick = (0, _react.useCallback)(event => {
+    // Make context toolbar disappear
+    const contextToolBarDom = document.querySelector('.sdoc-context-toolbar');
+    if (contextToolBarDom) {
+      contextToolBarDom.removeAttribute('style');
+    }
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT);
+  }, []);
+  const commentProps = {
+    id: 'context-toolbar-comment',
+    isRichEditor,
+    className: 'menu-group-item sdoc-comment-menu-container',
+    disabled: false,
+    isActive: false,
+    onMouseDown: onCommentClick,
+    iconClass: 'sdocfont sdoc-comments',
+    text: 'Comment',
+    ariaLabel: 'Add_Comment',
+    type: 'sdoc-add-comment'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-context-menu-divider"
+  }), /*#__PURE__*/_react.default.createElement(_menuItem.default, commentProps));
+};
+var _default = exports.default = CommentContextMenu;

package/dist/basic-sdk/comment/components/comment-context-menu/menu-item.js

@@ -0,0 +1,57 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+const MenuItem = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    disabled,
+    isActive,
+    type,
+    onMouseDown,
+    id,
+    text,
+    ariaLabel,
+    iconClass
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onClick = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  const validClassName = (0, _classnames.default)('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: id,
+    type: "button",
+    "aria-label": ariaLabel,
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-comment-menu-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/_react.default.createElement("span", null, t(text)))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: id
+  }, t(ariaLabel)));
+};
+var _default = exports.default = MenuItem;

package/dist/basic-sdk/comment/components/comment-delete-popover.js

@@ -0,0 +1,80 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _utils = require("../utils");
+require("./comment-list.css");
+const CommentDeletePopover = _ref => {
+  let {
+    type,
+    setIsShowDeletePopover,
+    deleteConfirm,
+    targetId,
+    parentDom
+  } = _ref;
+  const popoverRef = (0, _react.useRef)(null);
+  const hide = (0, _react.useCallback)(event => {
+    if (popoverRef.current && !(0, _utils.getEventClassName)(event).includes('popover') && !popoverRef.current.contains(event.target)) {
+      setIsShowDeletePopover(false);
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  }, [setIsShowDeletePopover]);
+  const onHotKey = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('esc', event)) {
+      event.preventDefault();
+      setIsShowDeletePopover(false);
+    }
+  }, [setIsShowDeletePopover]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', hide, true);
+    document.addEventListener('keydown', onHotKey);
+    return () => {
+      document.removeEventListener('click', hide, true);
+      document.removeEventListener('keydown', onHotKey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onDeleteCancel = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    setIsShowDeletePopover(false);
+  }, [setIsShowDeletePopover]);
+  const handleConfirm = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    deleteConfirm();
+  }, [deleteConfirm]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    container: parentDom,
+    target: targetId,
+    onClick: event => event.stopPropagation(),
+    placement: "left",
+    className: "comment-delete-popover",
+    isOpen: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-delete-popover-container",
+    ref: popoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "delete-tip"
+  }, t(`Are_you_sure_to_delete_this_${type === 'comment' ? 'comment' : 'reply'}`)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "delete-control mt-5"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    className: "btn btn-secondary mr-2",
+    onClick: onDeleteCancel
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
+    className: "btn btn-primary",
+    onClick: handleConfirm
+  }, t('Confirm')))));
+};
+var _default = exports.default = CommentDeletePopover;

package/dist/basic-sdk/comment/components/comment-editor.js

@@ -0,0 +1,165 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../constants");
+var _context = _interopRequireDefault(require("../../context"));
+var _sdocCommentEditor = _interopRequireDefault(require("../../editor/sdoc-comment-editor"));
+var _extension = require("../../extension");
+var _constants2 = require("../../extension/constants");
+var _core = require("../../extension/core");
+var _nodeId = _interopRequireDefault(require("../../node-id"));
+var _mdToSlate = _interopRequireDefault(require("../../slate-convert/md-to-slate"));
+var _slateToMd = _interopRequireDefault(require("../../slate-convert/slate-to-md"));
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _useParticipants = require("../hooks/use-participants");
+const getSubmitTip = (type, content) => {
+  if (content) return 'Save';
+  return type === 'comment' ? 'Comment' : 'Reply';
+};
+const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
+const CommentEditor = _ref => {
+  let {
+    type,
+    className,
+    content,
+    commentContent,
+    placeholder = DEFAULT_PLACEHOLDER,
+    insertContent,
+    updateContent,
+    setIsEditing,
+    hiddenComment,
+    hiddenUserInfo,
+    onContentChange,
+    isContextComment,
+    closeComment
+  } = _ref;
+  const commentWrapperRef = (0, _react.useRef)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const {
+    addParticipants
+  } = (0, _useParticipants.useParticipantsContext)();
+  const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
+  const userInfo = _context.default.getUserInfo();
+  const document = (0, _react.useMemo)(() => {
+    const cursor = {};
+    let elements = null;
+    elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder
+    })];
+    return {
+      elements,
+      cursor
+    };
+  }, [placeholder]);
+  const editor = (0, _react.useMemo)(() => {
+    const defaultEditor = (0, _extension.createCommentEditor)();
+    const newEditor = (0, _nodeId.default)(defaultEditor);
+    const {
+      cursors
+    } = document;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = _constants.COMMENT_EDITOR;
+    return newEditor;
+  }, [document]);
+  const updateValue = (0, _react.useCallback)(value => {
+    if (!value || value.trim() === '') return;
+    if (!content) return insertContent(value);
+    updateContent && updateContent(value);
+  }, [content, insertContent, updateContent]);
+  const onSubmit = (0, _react.useCallback)(event => {
+    event && event.stopPropagation();
+    const mdString = (0, _slateToMd.default)(editor.children);
+    updateValue(mdString);
+    addParticipants(userInfo.username);
+    editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder
+    })];
+    _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
+    onContentChange && onContentChange(null);
+    closeComment && closeComment();
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
+  const onSubmitByEnterKey = (0, _react.useCallback)(event => {
+    if (!_slateReact.ReactEditor.isFocused(editor)) return;
+    onSubmit(event);
+  }, [editor, onSubmit]);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
+    return () => {
+      unsubscribePostComment();
+    };
+  }, [onSubmitByEnterKey]);
+  const onCancel = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    const {
+      type: eventType,
+      keyCode,
+      target
+    } = event;
+    if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
+    if (eventType === 'click') {
+      const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
+      const listContainer = window.document.querySelector('#global-comment-list-container');
+      const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
+      const isClickOnListContainer = listContainer && listContainer.contains(target);
+      const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
+      const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
+      const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
+      if (isPreventCancel) return;
+    }
+    setIsEditing && setIsEditing(false);
+    hiddenComment && hiddenComment(false);
+    if (onContentChange) {
+      if (editor.children.find(n => _slate.Node.string(n).trim())) {
+        onContentChange((0, _slateToMd.default)(editor.children));
+      } else {
+        onContentChange(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsEditing]);
+  (0, _react.useEffect)(() => {
+    let children = (0, _mdToSlate.default)(content);
+    if (commentContent) {
+      children = (0, _mdToSlate.default)(commentContent);
+    }
+    editor.children = children;
+    _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
+  }, [editor, content, commentContent]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('comment-editor-wrapper', className),
+    ref: commentWrapperRef
+  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-info"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-img"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: userInfo.avatar_url,
+    alt: "",
+    height: "100%",
+    width: "100%"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-user-name"
+  }, userInfo.name)), /*#__PURE__*/_react.default.createElement(_sdocCommentEditor.default, {
+    editor: editor,
+    type: type,
+    document: document,
+    onSubmit: onSubmit,
+    submitBtnText: t(submitTip),
+    onCancel: onCancel
+  }));
+};
+var _default = exports.default = CommentEditor;