@seafile/sdoc-editor 0.2.18 → 0.2.19

package/dist/basic-sdk/assets/css/code-block.css

@@ -18,16 +18,16 @@
 .sdoc-code-block-code .sdoc-code-line {
   position: relative;
   counter-increment: number;
+  margin-left: 32px;
 }
 
 .sdoc-code-block-code .sdoc-code-line::before {
   content: counter(number);
   color: #ccc;
-  display: inline-block;
   width: 40px;
   text-align: end;
-  margin-left: -16px;
-  margin-right: 20px;
+  position: absolute;
+  left: -50px;
 }
 
 .sdoc-code-line

package/dist/basic-sdk/assets/css/default.css

@@ -15,3 +15,24 @@
 .element-icon {
   color: #444 !important;
 }
+
+.sdoc-icon-btn {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-icon-btn:hover {
+  cursor: pointer;
+}
+
+.sdoc-icon-btn .sdocfont {
+  color: #999;
+  font-size: 16px;
+}
+
+.sdoc-icon-btn:hover .sdocfont {
+  color: #5a5a5a;
+}

package/dist/basic-sdk/comment/components/{global-comment-header.js → global-comment/global-comment-body-header.js}

@@ -1,15 +1,35 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
-import { eventStopPropagation } from '../../utils/mouse-event';
-import { COMMENT_TYPES } from '../constants';
-import CommentAllParticipants from './comment-all-participants';
-function GlobalCommentHeader(_ref) {
-  var commentType = _ref.commentType,
-    commentList = _ref.commentList,
-    t = _ref.t,
-    onCommentTypeChanged = _ref.onCommentTypeChanged;
+import { eventStopPropagation } from '../../../utils/mouse-event';
+import { COMMENT_TYPES } from '../../constants';
+import CommentAllParticipants from '../comment-all-participants';
+var CommentTypeDropdownItem = function CommentTypeDropdownItem(_ref) {
+  var type = _ref.type,
+    setCommentType = _ref.setCommentType;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleCommentTypeChanged = useCallback(function (event, type) {
+    eventStopPropagation(event);
+    setCommentType(type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    tag: 'div',
+    onClick: function onClick(event) {
+      return handleCommentTypeChanged(event, type);
+    }
+  }, t(type));
+};
+var GlobalCommentBodyHeader = function GlobalCommentBodyHeader(_ref2) {
+  var commentList = _ref2.commentList,
+    commentType = _ref2.commentType,
+    setCommentType = _ref2.setCommentType;
+  var _useTranslation2 = useTranslation(),
+    t = _useTranslation2.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isDropdownOpen = _useState2[0],
@@ -22,12 +42,6 @@ function GlobalCommentHeader(_ref) {
       count: commentList.length
     });
   }
-  var handleCommentTypeChanged = useCallback(function (event, type) {
-    eventStopPropagation(event);
-    onCommentTypeChanged(type);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var id = 'comment-type-controller';
   return /*#__PURE__*/React.createElement("div", {
     className: "comments-panel-body__header"
@@ -50,26 +64,20 @@ function GlobalCommentHeader(_ref) {
   }, t(commentType))), /*#__PURE__*/React.createElement(DropdownMenu, {
     className: "sdoc-dropdown-menu",
     container: "comment-types"
-  }, /*#__PURE__*/React.createElement(DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: 'div',
-    onClick: function onClick(event) {
-      return handleCommentTypeChanged(event, COMMENT_TYPES.all);
-    }
-  }, t(COMMENT_TYPES.all)), /*#__PURE__*/React.createElement(DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: 'div',
-    onClick: function onClick(event) {
-      return handleCommentTypeChanged(event, COMMENT_TYPES.resolved);
-    }
-  }, t(COMMENT_TYPES.resolved)), /*#__PURE__*/React.createElement(DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: 'div',
-    onClick: function onClick(event) {
-      return handleCommentTypeChanged(event, COMMENT_TYPES.unresolved);
-    }
-  }, t(COMMENT_TYPES.unresolved))))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
+    type: COMMENT_TYPES.ALL,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
+    type: COMMENT_TYPES.DOC,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
+    type: COMMENT_TYPES.RESOLVED,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
+    type: COMMENT_TYPES.UNRESOLVED,
+    setCommentType: setCommentType
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "comment-count-tip"
   }, commentTip)));
-}
-export default withTranslation('sdoc-editor')(GlobalCommentHeader);
+};
+export default GlobalCommentBodyHeader;

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

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import CommentEditor from '../comment-editor';
+var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
+  var insertDocComment = _ref.insertDocComment,
+    hiddenCommentEditor = _ref.hiddenCommentEditor;
+  var ref = useRef(null);
+  useEffect(function () {
+    var hidden = function hidden(event) {
+      if (!ref.current.contains(event.target)) {
+        hiddenCommentEditor();
+      }
+    };
+    document.addEventListener('click', hidden);
+    return function () {
+      document.removeEventListener('click', hidden);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-doc-comment-editor-container sdoc-comment-list-container",
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "comment-ui-container active"
+  }, /*#__PURE__*/React.createElement(CommentEditor, {
+    type: "comment",
+    className: "sdoc-doc-comment-editor",
+    insertContent: insertDocComment,
+    hiddenComment: hiddenCommentEditor
+  })));
+};
+export default GlobalCommentEditor;

package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { eventStopPropagation } from '../../../utils/mouse-event';
+var GlobalCommentHeader = function GlobalCommentHeader(_ref) {
+  var toggle = _ref.toggle,
+    toggleGlobalCommentEditor = _ref.toggleGlobalCommentEditor;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var toggleADDComment = useCallback(function (event) {
+    eventStopPropagation(event);
+    toggleGlobalCommentEditor();
+  }, [toggleGlobalCommentEditor]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "title"
+  }, t('Comments')), /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-header-right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-icon-btn",
+    onClick: toggleADDComment
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-add-comment"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-icon-btn",
+    onClick: toggle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-sm-close"
+  }))));
+};
+export default GlobalCommentHeader;

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

@@ -0,0 +1,130 @@
+.global-comments-popover {
+  position: absolute;
+  right: 10px;
+  top: 50px;
+  z-index: 103;
+  width: 340px;
+  height: 540px;
+}
+
+.global-comments-popover .comments-panel-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #EAECEF;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
+}
+
+.global-comments-popover .comments-panel-header {
+  padding: 0 16px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #EAECEF;
+}
+
+.global-comments-popover .comments-panel-header .title {
+  color: #212529;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.global-comments-popover .comments-panel-header .comments-panel-header-right {
+  display: flex;
+}
+
+.global-comments-popover .comments-panel-header-right .sdoc-icon-btn:not(:last-child) {
+  margin-right: 4px;
+}
+
+.global-comments-popover .comments-panel-header .sdoc-icon-btn .sdocfont {
+  font-weight: 700;
+}
+
+.global-comments-popover .comments-panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+
+.global-comments-popover .comments-panel-body__header {
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+}
+
+.global-comments-popover .comments-panel-body__header .comments-types-count {
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.global-comments-popover .comments-panel-body__header .comment-type {
+  color: #212529;
+  font-size: 12px;
+}
+
+.global-comments-popover .comments-panel-body__header .comment-type{
+  color: #212529;
+  font-size: 12px;
+}
+
+.global-comments-popover .comments-panel-body__header .comment-count-tip {
+  color: #999;
+  font-size: 12px;
+}
+
+.global-comments-popover .comments-panel-body__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  overflow: auto;
+}
+
+.global-comments-popover .comments-panel-body__content .sdoc-comment-list-container {
+  position: relative;
+}
+
+.global-comments-popover .comments-panel-body__content .comment-item-list {
+  max-width: 308px;
+}
+
+.global-comments-popover .comments-panel-body__content .comment-ui-container.active {
+  left: 0;
+}
+
+.global-comments-popover .comments-panel-body__content .comment-ui-container.sdoc-resolved {
+  background: #f5f5f5;
+}
+
+.global-comments-popover .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
+  background: #f5f5f5;
+}
+
+.sdoc-dropdown-menu .dropdown-item {
+  font-size: 14px;
+  color: #212529;
+}
+
+/* doc comment add editor */
+.global-comments-popover .comments-panel-body .sdoc-doc-comment-editor-container {
+  position: absolute;
+  left: 16px;
+  width: calc(100% - 32px);
+  background-color: #fff;
+  top: 78px;
+}
+
+.global-comments-popover .sdoc-doc-comment-editor-container .comment-ui-container.active {
+  left: 0;
+  margin-bottom: 0;
+}

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -0,0 +1,176 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { ElementPopover } from '../../../extension/commons';
+import EventBus from '../../../utils/event-bus';
+import useCommentList from '../../hooks/use-comment-list';
+import CommentItemWrapper from '../comment-item-wrapper';
+import GlobalCommentHeader from './global-comment-header';
+import GlobalCommentBodyHeader from './global-comment-body-header';
+import { DOC_COMMENT_ELEMENT_ID } from '../../constants';
+import context from '../../../../context';
+import { useCommentContext } from '../../hooks/use-comment-context';
+import GlobalCommentEditor from './global-comment-editor';
+import './index.css';
+var GlobalComment = function GlobalComment() {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeComment = _useState2[0],
+    setActiveComment = _useState2[1];
+  var commentRef = useRef(null);
+  var contentRef = useRef(null);
+  var _useCommentList = useCommentList(),
+    commentList = _useCommentList.commentList,
+    commentType = _useCommentList.commentType,
+    setCommentType = _useCommentList.setCommentType;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isShowCommentList = _useState4[0],
+    setShowCommentList = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showEditor = _useState6[0],
+    setShowEditor = _useState6[1];
+  var toggle = useCallback(function () {
+    if (isShowCommentList) {
+      setActiveComment(null);
+      setShowCommentList(false);
+      setShowEditor(false);
+      return;
+    }
+    setShowCommentList(true);
+  }, [isShowCommentList]);
+  useEffect(function () {
+    if (!isShowCommentList) return;
+    var toggleOuterSide = function toggleOuterSide(e) {
+      var commentWrapper = commentRef.current;
+      var clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
+      if (clickIsInComment) return;
+      toggle();
+    };
+    document.addEventListener('click', toggleOuterSide);
+    return function () {
+      document.removeEventListener('click', toggleOuterSide);
+    };
+  }, [isShowCommentList, toggle]);
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var unsubscribe = eventBus.subscribe('COMMENT_LIST_CLICK', toggle);
+    return function () {
+      unsubscribe();
+    };
+  }, [toggle]);
+  var updateScrollPosition = useCallback(function () {
+    var resolvedDom = document.querySelector('.sdoc-resolved');
+    contentRef.current.scrollTo({
+      top: resolvedDom.offsetTop,
+      behavior: 'smooth'
+    });
+  }, []);
+  var hiddenComment = useCallback(function () {
+    setActiveComment(null);
+  }, []);
+  var onCommentClick = useCallback(function (comment) {
+    if (activeComment && activeComment.id === comment.id) return;
+    setActiveComment(comment);
+  }, [activeComment]);
+  var _useCommentContext = useCommentContext(),
+    dispatch = _useCommentContext.dispatch;
+  var insertComment = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(elementId, comment) {
+      var res, returnComment, newComment;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return context.insertComment(comment);
+          case 2:
+            res = _context.sent;
+            returnComment = res.data.comment;
+            newComment = _objectSpread(_objectSpread({}, comment), {}, {
+              id: returnComment.id,
+              user_name: returnComment.user_name,
+              avatar_url: returnComment.avatar_url,
+              replies: []
+            });
+            dispatch({
+              type: 'INSERT_COMMENT',
+              payload: {
+                element_id: elementId,
+                comment: newComment
+              }
+            });
+            setShowEditor(false);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [dispatch]);
+  var insertDocComment = useCallback(function (commentDetail) {
+    var user = context.getUserInfo();
+    var elementId = DOC_COMMENT_ELEMENT_ID;
+    var time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    var comment = {
+      comment: commentDetail,
+      detail: {
+        element_id: elementId,
+        comment: commentDetail
+      },
+      author: user.username,
+      updated_at: time
+    };
+    insertComment(elementId, comment);
+  }, [insertComment]);
+  var toggleGlobalCommentEditor = useCallback(function () {
+    setShowEditor(!showEditor);
+    setActiveComment(null);
+  }, [showEditor]);
+  var hiddenCommentEditor = useCallback(function () {
+    setShowEditor(false);
+  }, []);
+  if (!isShowCommentList) return null;
+  return /*#__PURE__*/React.createElement(ElementPopover, {
+    className: "global-comments-popover"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: commentRef,
+    className: "comments-panel-wrapper"
+  }, /*#__PURE__*/React.createElement(GlobalCommentHeader, {
+    toggle: toggle,
+    toggleGlobalCommentEditor: toggleGlobalCommentEditor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "comments-panel-body"
+  }, /*#__PURE__*/React.createElement(GlobalCommentBodyHeader, {
+    commentList: commentList,
+    commentType: commentType,
+    setCommentType: setCommentType
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: "comments-panel-body__content"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "global-comment-list-container",
+    className: "sdoc-comment-list-container"
+  }, commentList.map(function (comment) {
+    var isActive = activeComment && activeComment.id === comment.id;
+    return /*#__PURE__*/React.createElement(CommentItemWrapper, {
+      key: comment.id,
+      container: "global-comment-list-container",
+      comment: comment,
+      isActive: isActive,
+      onCommentClick: onCommentClick,
+      hiddenComment: hiddenComment,
+      updateScrollPosition: updateScrollPosition
+    });
+  }))), showEditor && /*#__PURE__*/React.createElement(GlobalCommentEditor, {
+    hiddenCommentEditor: hiddenCommentEditor,
+    insertDocComment: insertDocComment
+  }))));
+};
+export default GlobalComment;

package/dist/basic-sdk/comment/components/style.css

@@ -37,122 +37,3 @@
   left: 14px;
   width: 280px;
 }
-
-/* global comment css */
-.global-comments-popover {
-  position: absolute;
-  right: 10px;
-  top: 50px;
-  z-index: 103;
-  width: 340px;
-  height: 540px;
-}
-
-.global-comments-popover .comments-panel-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  border: 1px solid #EAECEF;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
-}
-
-.global-comments-popover .comments-panel-header {
-  padding: 0 16px;
-  height: 46px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #EAECEF;
-}
-
-.global-comments-popover .comments-panel-header .title {
-  color: #212529;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.global-comments-popover .comments-panel-header .sdoc-sm-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 700;
-  color: #999;
-  cursor: pointer;
-}
-
-.global-comments-popover .comments-panel-header .sdoc-sm-close:hover {
-  color: #5a5a5a;
-}
-
-.global-comments-popover .comments-panel-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.global-comments-popover .comments-panel-body__header {
-  height: 80px;
-  display: flex;
-  flex-direction: column;
-  padding: 0 16px;
-}
-
-.global-comments-popover .comments-panel-body__header .comments-types-count {
-  height: 38px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 0;
-}
-
-.global-comments-popover .comments-panel-body__header .comment-type {
-  color: #212529;
-  font-size: 12px;
-}
-
-.global-comments-popover .comments-panel-body__header .comment-type{
-  color: #212529;
-  font-size: 12px;
-}
-
-.global-comments-popover .comments-panel-body__header .comment-count-tip {
-  color: #999;
-  font-size: 12px;
-}
-
-.global-comments-popover .comments-panel-body__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  overflow: auto;
-}
-
-.global-comments-popover .comments-panel-body__content .sdoc-comment-list-container {
-  position: relative;
-}
-
-.global-comments-popover .comments-panel-body__content .comment-item-list {
-  max-width: 308px;
-}
-
-.global-comments-popover .comments-panel-body__content .comment-ui-container.active {
-  left: 0;
-}
-
-.global-comments-popover .comments-panel-body__content .comment-ui-container.sdoc-resolved {
-  background: #f5f5f5;
-}
-
-.global-comments-popover .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
-  background: #f5f5f5;
-}
-
-.sdoc-dropdown-menu .dropdown-item {
-  font-size: 14px;
-  color: #212529;
-}

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

@@ -1,11 +1,13 @@
 export var COMMENT_TYPES = {
-  all: 'All_comments',
-  resolved: 'Resolved_comments',
-  unresolved: 'Unresolved_comments'
+  DOC: 'Doc_comments',
+  ALL: 'All_comments',
+  RESOLVED: 'Resolved_comments',
+  UNRESOLVED: 'Unresolved_comments'
 };
 export var DOWN = 'down';
 export var UP = 'up';
 export var FONT_SIZE_WIDTH = 15;
 export var LINE_HEIGHT = 22;
 export var POPOVER_ADDING_HEIGHT = 10;
-export var COMMENT_URL_CLASSNAME = 'sdoc-comment-url';
+export var COMMENT_URL_CLASSNAME = 'sdoc-comment-url';
+export var DOC_COMMENT_ELEMENT_ID = '0';

package/dist/basic-sdk/comment/hooks/use-comment-list.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useEffect, useState } from 'react';
 import { useCommentContext } from './use-comment-context';
-import { COMMENT_TYPES } from '../constants';
+import { COMMENT_TYPES, DOC_COMMENT_ELEMENT_ID } from '../constants';
 var useCommentList = function useCommentList() {
   var _useCommentContext = useCommentContext(),
     commentsInfo = _useCommentContext.commentsInfo;
   var _ref = commentsInfo || [],
     comment_list = _ref.comment_list;
-  var _useState = useState(COMMENT_TYPES.all),
+  var _useState = useState(COMMENT_TYPES.ALL),
     _useState2 = _slicedToArray(_useState, 2),
     commentType = _useState2[0],
     setCommentType = _useState2[1];
@@ -16,18 +16,23 @@ var useCommentList = function useCommentList() {
     commentList = _useState4[0],
     setCommentList = _useState4[1];
   useEffect(function () {
-    if (commentType === COMMENT_TYPES.all) {
+    if (commentType === COMMENT_TYPES.ALL) {
       setCommentList(comment_list);
-    } else if (commentType === COMMENT_TYPES.resolved) {
+    } else if (commentType === COMMENT_TYPES.RESOLVED) {
       var _commentList = comment_list.filter(function (item) {
         return item.resolved;
       });
       setCommentList(_commentList);
-    } else if (commentType === COMMENT_TYPES.unresolved) {
+    } else if (commentType === COMMENT_TYPES.UNRESOLVED) {
       var _commentList2 = comment_list.filter(function (item) {
         return !item.resolved;
       });
       setCommentList(_commentList2);
+    } else if (commentType === COMMENT_TYPES.DOC) {
+      var _commentList3 = comment_list.filter(function (comment) {
+        return comment.detail.element_id === DOC_COMMENT_ELEMENT_ID;
+      });
+      setCommentList(_commentList3);
     }
   }, [commentType, comment_list]);
   return {

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

@@ -8,6 +8,7 @@ import { Editor, Text, Path, Span, Element, Node, Range } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { match } from '../utils';
 import ObjectUtils from '../../../utils/object-utils';
+import { CODE_LINE } from '../../constants';
 
 // options
 export var getQueryOptions = function getQueryOptions(editor, options) {
@@ -479,16 +480,19 @@ export var isBlockAboveEmpty = function isBlockAboveEmpty(editor) {
   return isAncestorEmpty(editor, block);
 };
 export var isSelectionAtBlockStart = function isSelectionAtBlockStart(editor, options) {
-  var _getAboveBlockNode2;
   var selection = editor.selection;
   if (!selection) return false;
-  var path = (_getAboveBlockNode2 = getAboveBlockNode(editor, options)) === null || _getAboveBlockNode2 === void 0 ? void 0 : _getAboveBlockNode2[1];
+  var nodeEntry = getAboveBlockNode(editor, options);
+  var path = nodeEntry === null || nodeEntry === void 0 ? void 0 : nodeEntry[1];
+  if ((nodeEntry === null || nodeEntry === void 0 ? void 0 : nodeEntry[0].type) === CODE_LINE) {
+    path = [path[0]];
+  }
   if (!path) return false;
   return isStartPoint(editor, selection.focus, path) || Range.isExpanded(editor.selection) && isStartPoint(editor, selection.anchor, path);
 };
 export var isSelectionAtBlockEnd = function isSelectionAtBlockEnd(editor, options) {
-  var _getAboveBlockNode3, _editor$selection;
-  var path = (_getAboveBlockNode3 = getAboveBlockNode(editor, options)) === null || _getAboveBlockNode3 === void 0 ? void 0 : _getAboveBlockNode3[1];
+  var _getAboveBlockNode2, _editor$selection;
+  var path = (_getAboveBlockNode2 = getAboveBlockNode(editor, options)) === null || _getAboveBlockNode2 === void 0 ? void 0 : _getAboveBlockNode2[1];
   return !!path && isEndPoint(editor, (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : _editor$selection.focus, path);
 };
 export var isLastNode = function isLastNode(editor, node) {

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

@@ -112,7 +112,7 @@ var FileLink = function FileLink(_ref) {
     className: "sdoc-file-link-icon",
     style: style
   }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-document"
+    className: "sdocfont sdoc-link-file"
   })), /*#__PURE__*/React.createElement("span", {
     className: "sdoc-file-text-link",
     style: style

package/dist/components/doc-operations/collaborators-operation/collaborators-popover.js

@@ -25,6 +25,7 @@ var CollaboratorsPopover = /*#__PURE__*/function (_React$PureComponent) {
         popperClassName: "collaborators-popover",
         trigger: "legacy",
         hideArrow: true,
+        fade: false,
         security: "fixed"
       }, /*#__PURE__*/React.createElement(PopoverHeader, {
         className: "popover-header"

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -391,5 +391,6 @@
   "Delete_failed": "Delete failed",
   "Insert_caption": "Insert caption",
   "No_collaborators_available": "No_collaborators_available",
-  "Find_a_collaborator": "Find a collaborator"
+  "Find_a_collaborator": "Find a collaborator",
+  "Doc_comments": "Document comments"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="check-mark" unicode="&#58971;" d="M329.6 96l-284.8 275.2c-25.6 22.4-25.6 60.8-3.2 86.4 25.6 25.6 64 25.6 89.6 0l265.6-256L892.8 697.6c22.4 22.4 64 25.6 86.4 0 22.4-22.4 25.6-60.8 3.2-83.2L464 99.2c-35.2-38.4-96-38.4-134.4-3.2z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="add" unicode="&#58970;" d="M448 448V832h128v-384h384v-128H576v-384h-128V320H64v128h384z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-add" unicode="&#58968;" d="M512-128C227.2-128 0 99.2 0 384S227.2 896 512 896s512-227.2 512-512-227.2-512-512-512z m-51.2 563.2H291.2c-19.2 0-35.2-12.8-35.2-35.2v-35.2c0-19.2 12.8-35.2 35.2-35.2h169.6V160c0-19.2 12.8-35.2 35.2-35.2h35.2c19.2 0 35.2 12.8 35.2 35.2v169.6H736c19.2 0 35.2 12.8 35.2 35.2v35.2c0 19.2-12.8 35.2-35.2 35.2h-169.6V604.8c0 19.2-12.8 35.2-35.2 35.2h-35.2c-19.2 0-35.2-12.8-35.2-35.2v-169.6z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-tag" unicode="&#58969;" d="M521.353986 860.33363l466.979644-466.979644c22.389435-22.389435 35.183398-51.175851 35.183398-83.160758s-12.793963-60.771324-35.183398-83.160759l-323.047562-319.849071c-22.389435-22.389435-51.175851-35.183398-79.962268-35.183398-31.984907 0-60.771324 12.793963-83.160758 35.183398L35.183398 374.163042c-25.587926 25.587926-38.381889 60.771324-31.984907 95.954721l31.984907 291.062655c6.396981 54.374342 47.977361 95.954721 102.351703 102.351703l291.062654 31.984907c31.984907 3.198491 67.168305-9.595472 92.756231-35.183398zM444.590209 767.577399L159.924536 735.592492l-31.984908-281.467182L578.926819-0.060372l316.65058 313.45209L444.590209 767.577399z m12.793963-127.939628c57.572833-57.572833 57.572833-147.130573 0-204.703406-25.587926-25.587926-63.969814-41.580379-102.351703-41.580379-38.381889 0-73.565286 12.793963-102.351703 41.580379-57.572833 57.572833-57.572833 147.130573 0 204.703406 57.572833 57.572833 150.329063 57.572833 204.703406 0z m-102.351703-70.366796c-6.396981 0-15.992454-3.198491-22.389435-9.595472-12.793963-12.793963-12.793963-31.984907 0-44.77887 12.793963-12.793963 31.984907-12.793963 44.77887 0 12.793963 12.793963 12.793963 31.984907 0 44.77887-6.396981 6.396981-12.793963 9.595472-22.389435 9.595472z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1698637167502'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1698637167502#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1698637167502') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1698637167502') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1698637167502') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1698637167502#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1699007792511'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1699007792511#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1699007792511') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1699007792511') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1699007792511') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1699007792511#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,6 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.check-mark:before {
+  content: "\e65b";
+}
+
+.add:before {
+  content: "\e65a";
+}
+
 .sdoc-add:before {
   content: "\e658";
 }

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

@@ -1,105 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { ElementPopover } from '../../extension/commons';
-import EventBus from '../../utils/event-bus';
-import useCommentList from '../hooks/use-comment-list';
-import CommentItemWrapper from './comment-item-wrapper';
-import { withTranslation } from 'react-i18next';
-import GlobalCommentHeader from './global-comment-header';
-var GlobalComment = function GlobalComment(_ref) {
-  var t = _ref.t;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeComment = _useState2[0],
-    setActiveComment = _useState2[1];
-  var onCommentClick = useCallback(function (comment) {
-    if (activeComment && activeComment.id === comment.id) return;
-    setActiveComment(comment);
-  }, [activeComment]);
-  var commentRef = useRef(null);
-  var _useCommentList = useCommentList(),
-    commentList = _useCommentList.commentList,
-    commentType = _useCommentList.commentType,
-    setCommentType = _useCommentList.setCommentType;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowCommentList = _useState4[0],
-    setShowCommentList = _useState4[1];
-  useEffect(function () {
-    if (!isShowCommentList) return;
-    var toggleOuterSide = function toggleOuterSide(e) {
-      var commentWrapper = commentRef.current;
-      var clickIsInComment = commentWrapper && commentWrapper.contains(e.target) && commentWrapper !== e.target;
-      if (clickIsInComment) return;
-      setActiveComment(null);
-      setShowCommentList(false);
-    };
-    document.addEventListener('click', toggleOuterSide);
-    return function () {
-      document.removeEventListener('click', toggleOuterSide);
-    };
-  }, [isShowCommentList]);
-  useEffect(function () {
-    var eventBus = EventBus.getInstance();
-    var unsubscribe = eventBus.subscribe('COMMENT_LIST_CLICK', function () {
-      setActiveComment(null);
-      setShowCommentList(!isShowCommentList);
-    });
-    return function () {
-      unsubscribe();
-    };
-  }, [isShowCommentList]);
-  var contentRef = useRef(null);
-  var updateScrollPosition = useCallback(function () {
-    var resolvedDom = document.querySelector('.sdoc-resolved');
-    contentRef.current.scrollTo({
-      top: resolvedDom.offsetTop,
-      behavior: 'smooth'
-    });
-  }, []);
-  var hiddenComment = useCallback(function () {
-    setActiveComment(null);
-  }, []);
-  if (!isShowCommentList) return null;
-  return /*#__PURE__*/React.createElement(ElementPopover, {
-    className: "global-comments-popover"
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: commentRef,
-    className: "comments-panel-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "comments-panel-header"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "title"
-  }, t('Comments')), /*#__PURE__*/React.createElement("span", {
-    className: "close-wrapper",
-    onClick: function onClick() {
-      return setShowCommentList(false);
-    }
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-sm-close"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "comments-panel-body"
-  }, /*#__PURE__*/React.createElement(GlobalCommentHeader, {
-    commentType: commentType,
-    commentList: commentList,
-    onCommentTypeChanged: setCommentType
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: contentRef,
-    className: "comments-panel-body__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "global-comment-list-container",
-    className: "sdoc-comment-list-container"
-  }, commentList.map(function (comment) {
-    var isActive = activeComment && activeComment.id === comment.id;
-    return /*#__PURE__*/React.createElement(CommentItemWrapper, {
-      key: comment.id,
-      container: 'global-comment-list-container',
-      comment: comment,
-      isActive: isActive,
-      onCommentClick: onCommentClick,
-      hiddenComment: hiddenComment,
-      updateScrollPosition: updateScrollPosition
-    });
-  }))))));
-};
-export default withTranslation('sdoc-editor')(GlobalComment);