@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _commons = require("../../commons");
+var _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("../../plugins/blockquote/menu"));
+var _menu2 = _interopRequireDefault(require("../../plugins/image/menu"));
+var _menu3 = _interopRequireDefault(require("../../plugins/link/menu"));
+var _menu4 = _interopRequireDefault(require("../../plugins/list/menu"));
+var _comemntEditorMenu = _interopRequireDefault(require("../../plugins/text-style/menu/comemnt-editor-menu"));
+var _postComment = _interopRequireDefault(require("./post-comment"));
+const CommentEditorToolbar = _ref => {
+  let {
+    editor,
+    readonly = false,
+    onSubmit,
+    submitBtnText,
+    onCancel
+  } = _ref;
+  (0, _useSelectionUpdate.default)();
+  const eventBus = _eventBus.default.getInstance();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-comment-editor-toolbar"
+  }, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
+    className: "menu-group sdoc-comment-editor-menu-group"
+  }, /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
+    editor: editor,
+    readonly: readonly
+  }), /*#__PURE__*/_react.default.createElement(_menu.default, {
+    editor: editor,
+    readonly: readonly
+  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+    editor: editor,
+    type: _constants.UNORDERED_LIST,
+    readonly: readonly
+  }), /*#__PURE__*/_react.default.createElement(_menu4.default, {
+    editor: editor,
+    type: _constants.ORDERED_LIST,
+    readonly: readonly
+  }), /*#__PURE__*/_react.default.createElement(_menu3.default, {
+    editor: editor,
+    readonly: readonly,
+    eventBus: eventBus
+  }), /*#__PURE__*/_react.default.createElement(_menu2.default, {
+    editor: editor,
+    readonly: readonly,
+    eventBus: eventBus
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-comment-editor-toolbar-right"
+  }, /*#__PURE__*/_react.default.createElement(_postComment.default, {
+    editor: editor,
+    onSubmit: onSubmit,
+    submitBtnText: submitBtnText,
+    onCancel: onCancel
+  })));
+};
+var _default = exports.default = CommentEditorToolbar;

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/index.js

@@ -0,0 +1,36 @@
+"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 _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+require("./style.css");
+const PostCommentBtn = _ref => {
+  let {
+    onSubmit,
+    submitBtnText,
+    onCancel
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onCancel, false);
+    document.addEventListener('click', onCancel, false);
+    return () => {
+      document.removeEventListener('keydown', onCancel, false);
+      document.removeEventListener('click', onCancel, false);
+    };
+  }, [onCancel]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    id: "sdoc-comment-editor-comment-btn"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-save sdoc-comment-btn",
+    onClick: onSubmit
+  }), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc-comment-editor-comment-btn"
+  }, submitBtnText));
+};
+var _default = exports.default = PostCommentBtn;

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/style.css

@@ -0,0 +1,7 @@
+.sdoc-comment-btn {
+  color: #ff8e03;
+}
+
+.sdoc-comment-btn:hover {
+  color: #d47604;
+}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onHandleOverflowScroll = exports.isSameDomain = exports.isOverflowPortByDirection = exports.isImage = exports.getMenuPosition = exports.IMAGE_TYPES = void 0;
+var _isUrl = _interopRequireDefault(require("is-url"));
+const IMAGE_TYPES = exports.IMAGE_TYPES = ['png', 'jpg', 'gif'];
+const isImage = url => {
+  if (!url) return false;
+  if (!(0, _isUrl.default)(url)) return false;
+  const suffix = url.split('.')[1]; // http://xx/mm/*.png
+  if (!suffix) return false;
+  return IMAGE_TYPES.includes(suffix.toLowerCase());
+};
+exports.isImage = isImage;
+const isSameDomain = (currentUrl, targetUrl) => {
+  return String(currentUrl).split('/')[2] === String(targetUrl).split('/')[2];
+};
+exports.isSameDomain = isSameDomain;
+const isOverflowPortByDirection = (element, direction) => {
+  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = element.getBoundingClientRect();
+  if (direction === 'top') {
+    return top <= 0;
+  }
+  if (direction === 'bottom') {
+    return bottom >= viewHeight;
+  }
+  if (direction === 'left') {
+    return left <= 0;
+  }
+  if (direction === 'right') {
+    return right >= viewWidth;
+  }
+};
+exports.isOverflowPortByDirection = isOverflowPortByDirection;
+const onHandleOverflowScroll = (currentSelectItem, downDownWrapperRef) => {
+  const {
+    bottom: curBottom,
+    top: curTop
+  } = currentSelectItem.getBoundingClientRect();
+  const {
+    bottom: containerBottom
+  } = downDownWrapperRef.current.parentNode.getBoundingClientRect();
+  const {
+    top: containerTop
+  } = downDownWrapperRef.current.getBoundingClientRect();
+  if (curBottom > containerBottom) {
+    const scrollTop = downDownWrapperRef.current.scrollTop + 100;
+    downDownWrapperRef.current.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth'
+    });
+  }
+  if (curTop < containerTop) {
+    const scrollTop = downDownWrapperRef.current.scrollTop - 100;
+    downDownWrapperRef.current.scrollTo({
+      top: scrollTop,
+      behavior: 'smooth'
+    });
+  }
+};
+exports.onHandleOverflowScroll = onHandleOverflowScroll;
+const getMenuPosition = (element, editor) => {
+  const {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  const menuTop = top - 42; // top = top distance - menu height
+  let menuPosition = {
+    top: menuTop,
+    left: left // left = callout left distance
+  };
+  // topOffset: the editor container left-top distance with browser top
+  if (editor.topOffset && menuPosition.top < editor.topOffset) {
+    menuPosition['display'] = 'none';
+  }
+  return menuPosition;
+};
+exports.getMenuPosition = getMenuPosition;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SetNodeToDecorations", {
+  enumerable: true,
+  get: function () {
+    return _setNodeToDecorations.SetNodeToDecorations;
+  }
+});
+exports.highlightDecorate = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../extension/constants");
+var _setNodeToDecorations = require("./setNodeToDecorations");
+const highlightDecorate = editor => _ref => {
+  let [node, path] = _ref;
+  let ranges = [];
+  if (_slate.Element.isElement(node) && node.type === _constants.CODE_LINE) {
+    var _editor$nodeToDecorat;
+    ranges = (editor === null || editor === void 0 ? void 0 : (_editor$nodeToDecorat = editor.nodeToDecorations) === null || _editor$nodeToDecorat === void 0 ? void 0 : _editor$nodeToDecorat.get(node)) || [];
+    return ranges;
+  }
+  return ranges;
+};
+exports.highlightDecorate = highlightDecorate;

package/dist/basic-sdk/highlight/setNodeToDecorations.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SetNodeToDecorations = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../extension/constants");
+var _helpers = require("../extension/plugins/code-block/helpers");
+var _prismjs = _interopRequireWildcard(require("../extension/plugins/code-block/prismjs"));
+const mergeMaps = function () {
+  const map = new Map();
+  for (var _len = arguments.length, maps = new Array(_len), _key = 0; _key < _len; _key++) {
+    maps[_key] = arguments[_key];
+  }
+  for (const m of maps) {
+    for (const item of m) {
+      map.set(...item);
+    }
+  }
+  return map;
+};
+const getChildNodeToDecorations = _ref => {
+  let [block, blockPath] = _ref;
+  const nodeToDecorations = new Map();
+  const text = block.children.map(line => _slate.Node.string(line)).join('\n');
+  const language = (0, _helpers.getValidLang)(block.language);
+  let tokens = _prismjs.default.tokenize(text, _prismjs.default.languages[language]);
+  if (Object.keys(_prismjs.normalizeTokensByLanguageType).includes(language)) {
+    tokens = _prismjs.normalizeTokensByLanguageType[language](tokens);
+  }
+  const normalizedTokens = (0, _prismjs.normalizeTokens)(tokens); // make tokens flat and grouped by line
+  const blockChildren = block.children;
+  for (let index = 0; index < normalizedTokens.length; index++) {
+    const tokens = normalizedTokens[index];
+    const element = blockChildren[index];
+    if (element) {
+      if (!nodeToDecorations.has(element)) {
+        nodeToDecorations.set(element, []);
+      }
+    }
+    let start = 0;
+    for (const token of tokens) {
+      const length = token.content.length;
+      if (!length) {
+        continue;
+      }
+      const end = start + length;
+      const path = [...blockPath, index, 0];
+      const range = {
+        anchor: {
+          path,
+          offset: start
+        },
+        focus: {
+          path,
+          offset: end
+        },
+        token: true,
+        ...Object.fromEntries(token.types.map(type => [type, true]))
+      };
+      if (nodeToDecorations.get(element)) {
+        nodeToDecorations.get(element).push(range);
+      }
+      start = end;
+    }
+  }
+  return nodeToDecorations;
+};
+const SetNodeToDecorations = () => {
+  const editor = (0, _slateReact.useSlateStatic)();
+  const blockEntries = Array.from(_slate.Editor.nodes(editor, {
+    at: [],
+    mode: 'highest',
+    match: n => _slate.Element.isElement(n) && n.type === _constants.CODE_BLOCK
+  }));
+  const nodeToDecorations = mergeMaps(...blockEntries.map(getChildNodeToDecorations));
+  editor.nodeToDecorations = nodeToDecorations;
+  return null;
+};
+exports.SetNodeToDecorations = SetNodeToDecorations;

package/dist/basic-sdk/hooks/use-collaborators.js

@@ -0,0 +1,62 @@
+"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.useCollaborators = exports.CollaboratorsProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../context"));
+var _model = require("../model");
+const CollaboratorsContext = /*#__PURE__*/_react.default.createContext(null);
+const CollaboratorsProvider = _ref => {
+  let {
+    collaborators: propsCollaborators,
+    children
+  } = _ref;
+  const isSdocRevision = _context.default.getSetting('isSdocRevision');
+  const isPublished = _context.default.getSetting('isPublished');
+  const [collaborators, setCollaborators] = (0, _react.useState)(propsCollaborators || []);
+  (0, _react.useEffect)(() => {
+    if (isSdocRevision && isPublished) return;
+    if (propsCollaborators) return;
+    _context.default.listRelatedUsers().then(res => {
+      const collaborators = [];
+      res.data.related_users.forEach(user => {
+        const collaborator = new _model.User(user);
+        collaborators.push(collaborator);
+      });
+      setCollaborators(collaborators);
+    }).catch(error => {
+      // eslint-disable-next-line
+      console.log(error);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (Array.isArray(propsCollaborators) && propsCollaborators.length > 0) {
+      setCollaborators(propsCollaborators);
+    }
+  }, [propsCollaborators]);
+  return /*#__PURE__*/_react.default.createElement(CollaboratorsContext.Provider, {
+    value: {
+      collaborators
+    }
+  }, children);
+};
+exports.CollaboratorsProvider = CollaboratorsProvider;
+const useCollaborators = () => {
+  const context = (0, _react.useContext)(CollaboratorsContext);
+  if (!context) {
+    throw new Error('\'CollaboratorsContext\' is null');
+  }
+  const {
+    collaborators
+  } = context;
+  return {
+    collaborators
+  };
+};
+exports.useCollaborators = useCollaborators;

package/dist/basic-sdk/hooks/use-color-context.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorContext = exports.ColorProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../extension/constants");
+const ColorContext = /*#__PURE__*/_react.default.createContext(null);
+const ColorProvider = props => {
+  const [lastUsedFontColor, updateLastUsedFontColor] = (0, _react.useState)(_constants.DEFAULT_LAST_USED_FONT_COLOR);
+  const [lastUsedHighlightColor, updateLastUsedHighlightColor] = (0, _react.useState)(_constants.DEFAULT_LAST_USED_HIGHLIGHT_COLOR);
+  const [lastUsedTableCellBackgroundColor, updateLastUsedTableCellBackgroundColor] = (0, _react.useState)(_constants.DEFAULT_LAST_USED_TABLE_CELL_BACKGROUND_COLOR);
+  return /*#__PURE__*/_react.default.createElement(ColorContext.Provider, {
+    value: {
+      lastUsedFontColor,
+      updateLastUsedFontColor,
+      lastUsedHighlightColor,
+      updateLastUsedHighlightColor,
+      lastUsedTableCellBackgroundColor,
+      updateLastUsedTableCellBackgroundColor
+    }
+  }, props.children);
+};
+exports.ColorProvider = ColorProvider;
+const useColorContext = () => {
+  const context = (0, _react.useContext)(ColorContext);
+  if (!context) {
+    throw new Error('\'ColorContext\' is null');
+  }
+  const {
+    lastUsedFontColor,
+    lastUsedHighlightColor,
+    lastUsedTableCellBackgroundColor,
+    updateLastUsedFontColor,
+    updateLastUsedHighlightColor,
+    updateLastUsedTableCellBackgroundColor
+  } = context;
+  return {
+    lastUsedFontColor,
+    updateLastUsedFontColor,
+    lastUsedHighlightColor,
+    updateLastUsedHighlightColor,
+    lastUsedTableCellBackgroundColor,
+    updateLastUsedTableCellBackgroundColor
+  };
+};
+exports.useColorContext = useColorContext;

package/dist/basic-sdk/hooks/use-force-update.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const useForceUpdate = () => {
+  const [, setState] = (0, _react.useState)(0);
+  const forceUpdate = (0, _react.useCallback)(() => {
+    setState(n => n + 1);
+  }, []);
+  return forceUpdate;
+};
+var _default = exports.default = useForceUpdate;

package/dist/basic-sdk/hooks/use-plugins.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _react = _interopRequireWildcard(require("react"));
+var _comment = _interopRequireDefault(require("../comment"));
+var _commentOperation = _interopRequireDefault(require("../comment/components/comment-operation"));
+var _constants = require("../constants");
+const PluginsContext = /*#__PURE__*/_react.default.createContext(null);

package/dist/basic-sdk/hooks/use-scroll-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScrollContext = exports.ScrollContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+const ScrollContext = exports.ScrollContext = /*#__PURE__*/_react.default.createContext(null);
+const useScrollContext = () => {
+  const context = (0, _react.useContext)(ScrollContext);
+  if (!context) {
+    throw new Error('The \`useScrollContext\` hook must be used inside the <ScrollContext> component\'s context.');
+  }
+  const {
+    scrollRef
+  } = context;
+  return scrollRef;
+};
+exports.useScrollContext = useScrollContext;

package/dist/basic-sdk/hooks/use-selection-element.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectionElement = void 0;
+var _react = require("react");
+var _slate = require("@seafile/slate");
+const useSelectionElement = _ref => {
+  let {
+    editor
+  } = _ref;
+  const nodeEntry = (0, _react.useMemo)(() => {
+    const nodeEntry = _slate.Editor.above(editor, {
+      mode: 'lowest',
+      match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n)
+    });
+    return nodeEntry;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+  if (nodeEntry && nodeEntry[0]) {
+    return nodeEntry[0];
+  }
+  return null;
+};
+exports.useSelectionElement = useSelectionElement;

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCommentListPosition = void 0;
+var _useScrollContext = require("./use-scroll-context");
+const useCommentListPosition = (selectedElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment) => {
+  var _document$querySelect;
+  const headerHeight = 100;
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const {
+    scrollTop = 0
+  } = scrollRef.current || {};
+  if (isContextComment || isClickedContextComment) {
+    let rect;
+    if (isContextComment) {
+      rect = commentedDom.getBoundingClientRect();
+    }
+
+    // rect is the last commented context dom
+    if (isClickedContextComment) {
+      const lastComment = Object.values(commentDetail).map(item => {
+        var _item$detail;
+        return (_item$detail = item.detail) === null || _item$detail === void 0 ? void 0 : _item$detail.text_comment_id;
+      }).flatMap(id => {
+        const elements = Array.from(document.querySelectorAll(`.sdoc_comment_${id}`));
+        return elements.map(el => ({
+          id,
+          el
+        }));
+      }).reduce((last, current) => {
+        if (!last) return current;
+        const position = last.el.compareDocumentPosition(current.el);
+        return position & Node.DOCUMENT_POSITION_FOLLOWING ? current : last;
+      }, null);
+      if (lastComment) {
+        const result = `.sdoc_comment_${lastComment.id}`;
+        const elements = Array.from(document.querySelectorAll(result));
+        if (elements.length === 0) return;
+        const lastTextElement = elements[elements.length - 1];
+        const parentElement = lastTextElement.closest('[data-slate-node="element"]');
+        const firstInSameParent = elements.find(el => parentElement.contains(el));
+        rect = firstInSameParent === null || firstInSameParent === void 0 ? void 0 : firstInSameParent.getBoundingClientRect();
+      } else {
+        closeComment();
+      }
+    }
+    const editorArticleRight = document.getElementById('sdoc-editor-print-wrapper').getBoundingClientRect().right;
+    const topPara = rect.bottom - headerHeight + 10 + scrollTop;
+    const rightPara = editorArticleRight - rect.left - 300; // 300 is comment container's width
+    return {
+      right: rightPara,
+      y: topPara
+    };
+  }
+  const selectionPosition = (_document$querySelect = document.querySelectorAll(`[data-id="${selectedElementIds[0]}"]`)[0]) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+  // Boundary check
+  if (!selectionPosition) closeComment();
+  if (selectionPosition && selectionPosition.y !== 0) {
+    selectionPosition.y = selectionPosition.y - headerHeight + scrollTop;
+  }
+  return {
+    x: selectionPosition === null || selectionPosition === void 0 ? void 0 : selectionPosition.x,
+    y: selectionPosition === null || selectionPosition === void 0 ? void 0 : selectionPosition.y
+  };
+};
+exports.useCommentListPosition = useCommentListPosition;

package/dist/basic-sdk/hooks/use-selection-update.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSelectionUpdate;
+var _react = require("react");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+function useSelectionUpdate() {
+  const [, update] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    const onChange = () => update({});
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribe = eventBus.subscribe('change', onChange);
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+}