@seafile/comment-editor 0.0.1-alpha.6 → 0.0.1-alpha.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/comment-editor",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.61",
   "private": false,
   "description": "This is a comment editor",
   "main": "dist/index.js",
@@ -115,10 +115,10 @@
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "8.0.3",
-    "i18next": "22.4.9",
-    "i18next-browser-languagedetector": "7.0.1",
-    "i18next-xhr-backend": "3.2.2",
-    "identity-obj-proxy": "3.0.0",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
+    "identity-obj-proxy": "^3.0.0",
     "is-wsl": "^1.1.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -141,7 +141,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dev-utils": "^12.0.1",
     "react-dom": "18.3.1",
-    "react-i18next": "12.1.4",
+    "react-i18next": "15.5.2",
     "react-refresh": "^0.11.0",
     "react-router": "7.5.2",
     "react-router-dom": "7.1.3",

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"));

package/dist/basic-sdk/model/notification.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _utils = require("../comment/utils");
-class Notification {
-  constructor(options) {
-    var _options$detail, _options$detail2, _options$detail3;
-    this.id = options.id || '';
-    this.comment_id = (options === null || options === void 0 ? void 0 : (_options$detail = options.detail) === null || _options$detail === void 0 ? void 0 : _options$detail.comment_id) || '';
-    this.reply_id = (options === null || options === void 0 ? void 0 : (_options$detail2 = options.detail) === null || _options$detail2 === void 0 ? void 0 : _options$detail2.reply_id) || '';
-    this.type = (options === null || options === void 0 ? void 0 : (_options$detail3 = options.detail) === null || _options$detail3 === void 0 ? void 0 : _options$detail3.msg_type) || '';
-    this.key = this.type !== 'reply' ? (0, _utils.generatorNotificationKey)(this.comment_id) : (0, _utils.generatorNotificationKey)(this.comment_id, this.reply_id);
-  }
-}
-var _default = exports.default = Notification;

package/dist/components/tip-message/index.js

@@ -1,194 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _reactI18next = require("react-i18next");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _basicSdk = require("../../basic-sdk");
-require("./style.css");
-class TipMessage extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "onOperationExecuteError", () => {
-      const {
-        t
-      } = this.props;
-      const message = t('Failed_to_execute_operation_on_server');
-      _basicSdk.toaster.warning(message, {
-        hasCloseButton: true
-      });
-    });
-    (0, _defineProperty2.default)(this, "onSyncServerOperationError", () => {
-      const {
-        t
-      } = this.props;
-      const message = t('Failed_to_sync_with_server_operations');
-      _basicSdk.toaster.danger(message, {
-        hasCloseButton: false,
-        duration: null
-      });
-    });
-    (0, _defineProperty2.default)(this, "onInternalServerExecError", () => {
-      const {
-        t
-      } = this.props;
-      const message = t('Internal_server_exec_operations_error');
-      _basicSdk.toaster.danger(message, {
-        hasCloseButton: false,
-        duration: null
-      });
-    });
-    (0, _defineProperty2.default)(this, "onTokenExpiredError", msg => {
-      const {
-        t
-      } = this.props;
-      const message = t('Token_expired_Please_refresh_the_page');
-      _basicSdk.toaster.closeAll();
-      _basicSdk.toaster.danger(message, {
-        duration: null
-      });
-    });
-    (0, _defineProperty2.default)(this, "onPendingOpExceedLimit", () => {
-      const {
-        t
-      } = this.props;
-      _basicSdk.toaster.closeAll();
-      const message = t('Pending_operations_exceed_limit');
-      _basicSdk.toaster.warning(message, {
-        duration: 5
-      });
-    });
-    (0, _defineProperty2.default)(this, "onDisconnect", () => {
-      const {
-        t,
-        isEditMode
-      } = this.props;
-      if (!isEditMode) return;
-      const message = t('Server_is_not_connected_Operation_will_be_sent_to_server_later');
-      _basicSdk.toaster.warning(message, {
-        hasCloseButton: true,
-        duration: null
-      });
-    });
-    (0, _defineProperty2.default)(this, "onReconnectError", () => {
-      if (!this.isConnectError) {
-        this.isConnectError = true;
-        const {
-          t
-        } = this.props;
-        const message = t('Server_is_disconnected_Reconnecting');
-        _basicSdk.toaster.closeAll();
-        _basicSdk.toaster.warning(message, {
-          hasCloseButton: true,
-          duration: null
-        });
-      }
-    });
-    (0, _defineProperty2.default)(this, "onReconnect", () => {
-      this.isConnectError = false;
-      const {
-        t
-      } = this.props;
-      const message = t('Server_is_reconnected');
-      _basicSdk.toaster.closeAll();
-      _basicSdk.toaster.success(message); // close after serval seconds
-    });
-    (0, _defineProperty2.default)(this, "onDocumentSaving", () => {
-      this.setState({
-        isSaving: true,
-        isSaved: false
-      });
-    });
-    (0, _defineProperty2.default)(this, "onDocumentSaved", lastSavedAt => {
-      if (this.saveTimer) clearTimeout(this.saveTimer);
-      if (this.resetTimer) clearTimeout(this.resetTimer);
-      this.saveTimer = setTimeout(() => {
-        this.setState({
-          lastSavedAt,
-          isSaving: false,
-          isSaved: true
-        });
-      }, 1000);
-      this.resetTimer = setTimeout(() => {
-        this.setState({
-          isSaving: false,
-          isSaved: false
-        });
-      }, 2000);
-    });
-    (0, _defineProperty2.default)(this, "render", () => {
-      const {
-        t
-      } = this.props;
-      const {
-        isSaved,
-        isSaving,
-        lastSavedAt
-      } = this.state;
-      if (isSaving && !isSaved) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "tip-message"
-        }, t('Saving'));
-      }
-      if (!isSaving && isSaved) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "tip-message"
-        }, t('All_changes_saved'));
-      }
-      if (lastSavedAt) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: "tip-message"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "sdocfont sdoc-save-tip mr-2"
-        }), /*#__PURE__*/_react.default.createElement("span", {
-          className: "save-time"
-        }, (0, _dayjs.default)(lastSavedAt).format('HH:mm')));
-      }
-      return null;
-    });
-    this.state = {
-      isSaved: false,
-      isSaving: false,
-      lastSavedAt: ''
-    };
-    this.saveTimer = null;
-  }
-  componentDidMount() {
-    const eventBus = _basicSdk.EventBus.getInstance();
-    this.unsubscribeSavingEvent = eventBus.subscribe('is-saving', this.onDocumentSaving);
-    this.unsubscribeSavedEvent = eventBus.subscribe('saved', this.onDocumentSaved);
-    // offline reconnect
-    this.unsubscribeDisconnectEvent = eventBus.subscribe('disconnect', this.onDisconnect);
-    this.unsubscribeReconnectErrorEvent = eventBus.subscribe('reconnect_error', this.onReconnectError);
-    this.unsubscribeReconnectEvent = eventBus.subscribe('reconnect', this.onReconnect);
-
-    // server return error
-    this.unsubscribeOpExecError = eventBus.subscribe('execute_client_operations_error', this.onOperationExecuteError);
-    this.unsubscribeSyncServerOpError = eventBus.subscribe('sync_server_operations_error', this.onSyncServerOperationError);
-    this.unsubscribeDocumentLoadError = eventBus.subscribe('load_document_content_error', this.onInternalServerExecError);
-    this.unsubscribeOperationsSaveError = eventBus.subscribe('save_operations_to_database_error', this.onInternalServerExecError);
-    this.unsubscribeOperationsSaveError = eventBus.subscribe('token_expired', this.onTokenExpiredError);
-
-    // local error
-    this.unsubscribePendingOpExceedLimit = eventBus.subscribe('pending_operations_exceed_limit', this.onPendingOpExceedLimit);
-  }
-  componentWillUnmount() {
-    this.unsubscribeSavingEvent();
-    this.unsubscribeSavedEvent();
-    this.unsubscribeDisconnectEvent();
-    this.unsubscribeReconnectErrorEvent();
-    this.unsubscribeReconnectEvent();
-    this.unsubscribeOpExecError();
-    this.unsubscribeSyncServerOpError();
-    this.unsubscribePendingOpExceedLimit();
-    this.unsubscribeDocumentLoadError();
-    this.unsubscribeOperationsSaveError();
-    clearTimeout(this.saveTimer);
-  }
-}
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(TipMessage);

package/dist/components/tip-message/style.css

@@ -1,15 +0,0 @@
-.sdoc-editor-page-wrapper .tip-message {
-  margin-left: 12px;
-  font-size: 12px;
-  opacity: 0.75;
-  color: #999;
-  width: max-content;
-  height: 27px;
-  line-height: 27px;
-  display: inline-flex;
-}
-
-.sdoc-editor-page-wrapper .tip-message .sdocfont {
-  padding-top: 1px;
-  font-size: 14px;
-}