@seafile/comment-editor 0.0.1-alpha.5 → 0.0.1-alpha.7

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

@@ -18,13 +18,13 @@ var _context = _interopRequireDefault(require("../context"));
 var _useCursors = require("../cursor/use-cursors");
 var _decorates = require("../decorates");
 var _extension = require("../extension");
+var _insertElementDialog = _interopRequireDefault(require("../extension/commons/insert-element-dialog"));
 var _constants2 = require("../extension/constants");
 var _core = require("../extension/core");
 var _renderCommentEditorElement = _interopRequireDefault(require("../extension/render/render-comment-editor-element"));
 var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
 var _useComment = require("../hooks/use-comment");
 var _useScrollContext = require("../hooks/use-scroll-context");
-var _layout = require("../layout");
 var _nodeId = _interopRequireDefault(require("../node-id"));
 var _mdToSlate = _interopRequireDefault(require("../slate-convert/md-to-slate"));
 var _slateToMd = _interopRequireDefault(require("../slate-convert/slate-to-md"));
@@ -38,29 +38,28 @@ const getSubmitTip = (type, content) => {
 const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
 const CommentEditor = _ref => {
   let {
-    type,
     content,
     commentContent,
     placeholder = DEFAULT_PLACEHOLDER,
     insertContent,
     updateContent,
+    onContentChange,
     setIsEditing,
     hiddenComment,
     hiddenUserInfo,
-    onContentChange,
-    isContextComment,
-    closeComment
+    closeComment,
+    addParticipants
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
-    addParticipants,
-    className
+    className,
+    userInfo,
+    type
   } = (0, _useComment.useComment)();
   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;
@@ -283,6 +282,8 @@ const CommentEditor = _ref => {
     onSubmit: onSubmit,
     submitBtnText: t(submitTip),
     onCancel: onCancel
-  }))));
+  }))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+    editor: editor
+  }));
 };
 var _default = exports.default = CommentEditor;

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

@@ -17,6 +17,8 @@ const CommentContext = /*#__PURE__*/_react.default.createContext(null);
 const CommentProvider = _ref => {
   let {
     children,
+    type,
+    userInfo,
     pluginName = '',
     className = '',
     pluginEventBus,
@@ -27,14 +29,10 @@ const CommentProvider = _ref => {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const [collaborators, setCollaborators] = (0, _react.useState)([]);
-
-  // Mount
-  (0, _react.useEffect)(() => {
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return /*#__PURE__*/_react.default.createElement(CommentContext.Provider, {
     value: {
+      type,
+      userInfo,
       pluginName,
       className,
       api,

package/dist/pages/seafile-comment-editor.js

@@ -11,32 +11,36 @@ var _basicSdk = require("../basic-sdk");
 var _errorBoundary = _interopRequireDefault(require("../components/error-boundary"));
 const SeafileCommentEditor = _ref => {
   let {
+    type,
+    userInfo,
     pluginName = '',
     className = '',
-    type,
     commentContent,
     hiddenUserInfo,
     insertContent,
     hiddenComment,
     onContentChange,
+    addParticipants,
     pluginEventBus,
     pluginEvent,
     api
   } = _ref;
   _basicSdk.context.init();
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentProvider, {
+    type: type,
+    userInfo: userInfo,
     pluginName: pluginName,
     className: className,
     pluginEventBus: pluginEventBus,
     pluginEvent: pluginEvent,
     api: api
   }, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentEditor, {
-    type: type,
     commentContent: commentContent,
     hiddenUserInfo: hiddenUserInfo,
     insertContent: insertContent,
     hiddenComment: hiddenComment,
-    onContentChange: onContentChange
+    onContentChange: onContentChange,
+    addParticipants: addParticipants
   })));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(SeafileCommentEditor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/comment-editor",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.7",
   "private": false,
   "description": "This is a comment editor",
   "main": "dist/index.js",

package/dist/basic-sdk/layout/comment-layout/index.css

@@ -1,15 +0,0 @@
-.comment-layout-wrapper {
-  display: flex;
-  flex-direction: row;
-  max-width: 620px;
-  min-width: 360px;
-  position: relative;
-  right: 0;
-}
-
-.comment-layout-wrapper .sdoc-content-right-panel {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-left: 1px solid #d8d8d8;
-}

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

@@ -1,87 +0,0 @@
-"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 _comment = _interopRequireDefault(require("../../comment"));
-var _constants = require("../../constants");
-var _useComment = require("../../hooks/use-comment");
-var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
-var _resizeWidth = _interopRequireDefault(require("./resize-width"));
-require("./index.css");
-const MIN_PANEL_WIDTH = 360;
-const MAX_PANEL_WIDTH = 620;
-const CommentLayout = _ref => {
-  let {
-    editor
-  } = _ref;
-  const {
-    className,
-    pluginName,
-    pluginEventBus,
-    pluginEvent
-  } = (0, _useComment.useComment)();
-  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
-  const panelWrapperStyle = (0, _react.useMemo)(() => {
-    if (!pluginName) return null;
-    let style = {
-      width,
-      zIndex: 101
-    };
-    if (!style.width || style.width < MIN_PANEL_WIDTH) {
-      style.width = MIN_PANEL_WIDTH;
-    } else if (style.width > MAX_PANEL_WIDTH) {
-      style.width = MAX_PANEL_WIDTH;
-    }
-    return style;
-  }, [width, pluginName]);
-  const resizeWidth = (0, _react.useCallback)(width => {
-    setWidth(width);
-  }, []);
-  const resizeWidthEnd = (0, _react.useCallback)(width => {
-    const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
-    _localStorageUtils.default.setItem(_constants.SDOC_STORAGE, JSON.stringify({
-      ...settings,
-      panelWidth: width
-    }));
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
-  }, []);
-  (0, _react.useEffect)(() => {
-    const isShowGlobalComments = pluginName === 'sdoc' ? true : false;
-    const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
-    _localStorageUtils.default.setItem(_constants.SDOC_STORAGE, {
-      ...settings,
-      isShowGlobalComments
-    });
-    const eventBus = pluginEventBus.getInstance();
-    eventBus.dispatch(pluginEvent.RESIZE_ARTICLE);
-  }, [pluginEvent.RESIZE_ARTICLE, pluginEventBus, pluginName]);
-  (0, _react.useEffect)(() => {
-    const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
-    const {
-      panelWidth
-    } = settings;
-    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
-    setWidth(width);
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: `comment-layout-wrapper ${className}`,
-    style: panelWrapperStyle
-  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
-    minWidth: MIN_PANEL_WIDTH,
-    maxWidth: MAX_PANEL_WIDTH,
-    resizeWidth: resizeWidth,
-    resizeWidthEnd: resizeWidthEnd
-  }), /*#__PURE__*/_react.default.createElement(_comment.default, {
-    editor: editor,
-    type: "global",
-    width: width
-  }));
-};
-var _default = exports.default = CommentLayout;

package/dist/basic-sdk/layout/comment-layout/resize-width/index.css

@@ -1,38 +0,0 @@
-.comment-layout-resize-width-handler {
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 6px;
-}
-
-.comment-layout-resize-width-handler.resize-handler-placement-right {
-  left: 0;
-  right: auto;
-}
-
-.comment-layout-resize-width-handler:hover {
-  cursor: col-resize;
-}
-
-.comment-layout-resize-width-handler .comment-layout-resize-width-handler-content {
-  background-color: initial;
-  height: 100%;
-  position: relative;
-  width: 2px;
-}
-
-.comment-layout-resize-width-handler:hover .comment-layout-resize-width-handler-content {
-  background-color: #ccc;
-}
-
-.comment-layout-resize-width-handler .comment-layout-resize-width-handler-bar {
-  background-color: #2d7ff9;
-  border-radius: 3px;
-  content: "";
-  left: 50%;
-  margin-left: -3px;
-  position: absolute;
-  width: 6px;
-}
-

package/dist/basic-sdk/layout/comment-layout/resize-width/index.js

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-require("./index.css");
-const ResizeWidth = _ref => {
-  let {
-    minWidth,
-    maxWidth,
-    resizeWidth: resizeWidthAPI,
-    resizeWidthEnd
-  } = _ref;
-  const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
-  const [drag, setDrag] = (0, _react.useState)(null);
-  const handlerRef = (0, _react.useRef)(null);
-  const handlerBarRef = (0, _react.useRef)(null);
-  const setHandlerBarTop = handlerTop => {
-    if (!handlerBarRef.current || handlerTop < 0) return;
-    handlerBarRef.current.style.top = handlerTop + 'px';
-  };
-  const setHandlerBarPosition = event => {
-    if (!handlerRef.current) return;
-    const {
-      top
-    } = handlerRef.current.getBoundingClientRect();
-    const handlerTop = event.pageY - top - 26 / 2;
-    setHandlerBarTop(handlerTop);
-  };
-  const getWidthFromMouseEvent = event => {
-    return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
-  };
-  const calculateResizedWidth = event => {
-    const width = getWidthFromMouseEvent(event);
-    const resizedWidth = document.body.clientWidth - width;
-    if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
-    return resizedWidth;
-  };
-  const onResizeWidth = event => {
-    const resizedWidth = calculateResizedWidth(event);
-    if (resizedWidth < 0) return;
-    if (resizeWidthAPI) {
-      resizeWidthAPI(resizedWidth);
-    }
-  };
-  const onDrag = event => {
-    onResizeWidth(event);
-  };
-  const onDragStart = (0, _react.useCallback)(event => {
-    if (event && event.dataTransfer && event.dataTransfer.setData) {
-      event.dataTransfer.setData('text/plain', 'dummy');
-    }
-  }, []);
-  const onDragEnd = event => {
-    onResizeWidth(event);
-  };
-  const onMouseLeave = () => {
-    setIsShowHandlerBar(false);
-  };
-  const onMouseEnter = event => {
-    setIsShowHandlerBar(true);
-    setHandlerBarPosition(event);
-    if (handlerRef.current) {
-      handlerRef.current.addEventListener('mouseleave', onMouseLeave);
-    }
-  };
-  const onMouseOver = event => {
-    setHandlerBarPosition(event);
-  };
-  const onMouseDown = event => {
-    event.preventDefault && event.preventDefault();
-    const currDrag = onDragStart(event);
-    if (currDrag === null && event.button !== 0) return;
-    window.addEventListener('mouseup', onMouseUp);
-    window.addEventListener('mousemove', onMouseMove);
-    if (handlerRef.current) {
-      handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
-    }
-    setDrag(currDrag);
-  };
-  const onMouseMove = event => {
-    event.preventDefault && event.preventDefault();
-    if (!drag === null) return;
-    onDrag(event);
-  };
-  const onMouseUp = event => {
-    window.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('mousemove', onMouseMove);
-    onDragEnd(event, drag);
-    setHandlerBarTop(-9999);
-    setDrag(null);
-    setIsShowHandlerBar(false);
-    if (resizeWidthEnd) {
-      const resizeWidth = calculateResizedWidth(event);
-      if (resizeWidth < 0) return;
-      resizeWidthEnd(resizeWidth);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    return () => {
-      window.removeEventListener('mouseup', onMouseUp);
-      window.removeEventListener('mousemove', onMouseMove);
-    };
-
-    // eslint-disable-next-line
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-layout-resize-width-handler resize-handler-placement-right",
-    ref: handlerRef,
-    onMouseDown: onMouseDown,
-    onMouseOver: onMouseOver,
-    onMouseEnter: onMouseEnter,
-    onDrag: onDrag,
-    onDragStart: onDragStart,
-    onDragEnd: onDragEnd,
-    style: {
-      zIndex: 4
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-layout-resize-width-handler-content"
-  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-layout-resize-width-handler-bar",
-    ref: handlerBarRef,
-    style: {
-      height: 26
-    }
-  })));
-};
-var _default = exports.default = ResizeWidth;

package/dist/basic-sdk/layout/editor-container.js

@@ -1,32 +0,0 @@
-"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 _classnames = _interopRequireDefault(require("classnames"));
-var _commonUtils = require("../utils/common-utils");
-require("../assets/css/layout.css");
-require("../assets/css/default.css");
-require("../assets/css/sdoc-editor-article.css");
-require("../assets/css/sdoc-editor-plugins.css");
-require("../assets/css/sdoc-comment-editor-plugin.css");
-require("../assets/css/dropdown-menu.css");
-const EditorContainer = _ref => {
-  let {
-    children,
-    readonly,
-    fullscreen
-  } = _ref;
-  const className = (0, _classnames.default)('sdoc-editor-container', {
-    'mobile': _commonUtils.isMobile,
-    'readonly': readonly,
-    'fullscreen': fullscreen
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: className
-  }, children);
-};
-var _default = exports.default = EditorContainer;

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

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EditorContainer", {
-  enumerable: true,
-  get: function () {
-    return _editorContainer.default;
-  }
-});
-var _editorContainer = _interopRequireDefault(require("./editor-container"));