@seafile/seafile-sdoc-editor 2.0.0

package/dist/components/doc-operations/revision-operations/revisions/revisions-dialog/index.js

@@ -0,0 +1,265 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../../constants");
+var _model = require("../../../../../model");
+var _utils = require("../../../../../utils");
+var _modalHeader = _interopRequireDefault(require("../../../../modal-header"));
+var _tipDialog = _interopRequireDefault(require("../../../../tip-dialog"));
+var _revisionOperation = _interopRequireDefault(require("./revision-operation"));
+require("./index.css");
+var RevisionsDialog = function RevisionsDialog(_ref) {
+  var _revisionListRef$curr;
+  var updateRevisionsCount = _ref.updateRevisionsCount,
+    toggle = _ref.toggle;
+  var revisionListRef = (0, _react.useRef)(null);
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLoading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    revisions = _useState4[0],
+    setRevisions = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    page = _useState6[0],
+    setPage = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    errorMessage = _useState8[0],
+    setErrorMessage = _useState8[1];
+  var _useState9 = (0, _react.useState)(true),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    hasMore = _useState0[0],
+    setHasMore = _useState0[1];
+  var perPage = 25;
+  var repoID = _sdocEditor.context.getSetting('repoID');
+  var siteRoot = _sdocEditor.context.getSetting('siteRoot');
+  var _useState1 = (0, _react.useState)(''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    activeRevisionId = _useState10[0],
+    setActiveRevision = _useState10[1];
+  var _useState11 = (0, _react.useState)(''),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    operatingRevisionId = _useState12[0],
+    setOperatingRevision = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    showDeleteTipDialog = _useState14[0],
+    setShowDeleteTipDialog = _useState14[1];
+
+  // did mount
+  (0, _react.useEffect)(function () {
+    listRevisions();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var listRevisions = (0, _react.useCallback)(function () {
+    _sdocEditor.context.getSdocRevisions(page, perPage).then(function (res) {
+      var addedRevisions = res.data.revisions.map(function (revision) {
+        return new _model.Revision(revision);
+      });
+      setLoading(false);
+      updateRevisionsCount(res.data.count);
+      var newRevisions = [].concat((0, _toConsumableArray2["default"])(revisions), (0, _toConsumableArray2["default"])(addedRevisions));
+      setRevisions(newRevisions);
+      if (newRevisions.length < res.data.count) {
+        setPage(page + 1);
+      } else {
+        setHasMore(false);
+      }
+    })["catch"](function (error) {
+      var errorMessage = (0, _utils.getErrorMsg)(error);
+      if (page === 1) {
+        setErrorMessage(errorMessage);
+      } else {
+        _sdocEditor.toaster.danger(t(errorMessage));
+      }
+      setLoading(false);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [revisions, page, perPage]);
+  var openRevision = (0, _react.useCallback)(function (event, revisionId) {
+    event.stopPropagation();
+    event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+    if (event.target.className.includes('sdoc-revision-operation-toggle')) return;
+    var url = "".concat(siteRoot, "lib/").concat(repoID, "/revisions/").concat(revisionId, "/");
+    window.open(url, '_blank');
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = (0, _react.useCallback)(function (event) {
+    var _event$target = event.target,
+      scrollTop = _event$target.scrollTop,
+      clientHeight = _event$target.clientHeight;
+    var _ref2 = revisionListRef.current || {
+        clientHeight: 0
+      },
+      revisionListHeight = _ref2.clientHeight;
+    if (isLoading) return;
+    if (!hasMore) return;
+    if (scrollTop + clientHeight + 1 >= revisionListHeight) {
+      setLoading(true);
+      listRevisions();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_revisionListRef$curr = revisionListRef.current) === null || _revisionListRef$curr === void 0 ? void 0 : _revisionListRef$curr.clientHeight, isLoading, hasMore]);
+  var onDeleteOtherRevision = (0, _react.useCallback)(function () {
+    setShowDeleteTipDialog(true);
+  }, []);
+  var closeDeleteTipDialog = (0, _react.useCallback)(function () {
+    setOperatingRevision('');
+    setShowDeleteTipDialog(false);
+  }, []);
+  var deleteOtherRevision = (0, _react.useCallback)(function () {
+    var revisionIndex = revisions.findIndex(function (revision) {
+      return revision.id === operatingRevisionId;
+    });
+    if (revisionIndex === -1) {
+      closeDeleteTipDialog();
+      return;
+    }
+    var revision = revisions[revisionIndex];
+    _sdocEditor.context.deleteSdocOtherRevision(revision.id).then(function (res) {
+      var newRevisions = revisions.slice(0);
+      newRevisions.splice(revisionIndex, 1);
+      updateRevisionsCount(newRevisions.length);
+      setRevisions(newRevisions);
+      closeDeleteTipDialog();
+      _sdocEditor.toaster.success(t('Revision_deleted'));
+    })["catch"](function (error) {
+      var errorMessage = (0, _utils.getErrorMsg)(error);
+      _sdocEditor.toaster.danger(t(errorMessage));
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [operatingRevisionId, revisions, closeDeleteTipDialog]);
+  var renderContent = (0, _react.useCallback)(function () {
+    if (page === 1 && isLoading) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revisions-container loading"
+      }, /*#__PURE__*/_react["default"].createElement(_sdocEditor.FileLoading, null));
+    }
+    if (page === 1 && errorMessage) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revisions-container error"
+      }, t(errorMessage));
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revisions-container"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revisions-header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revision-name-header",
+      style: {
+        width: '40%'
+      }
+    }, t('ID')), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revision-user-header",
+      style: {
+        width: '25%'
+      }
+    }, t('Creator')), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revision-time-header",
+      style: {
+        width: '30%'
+      }
+    }, t('Created_time')), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revision-time-header",
+      style: {
+        width: '5%'
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revisions-content",
+      onScroll: onScroll
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revisions-list",
+      ref: revisionListRef
+    }, revisions.map(function (revision) {
+      var revisionId = revision.id;
+      var isOperating = operatingRevisionId === revisionId;
+      var isActive = activeRevisionId === revisionId;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: revision.id,
+        className: (0, _classnames["default"])('sdoc-revision', {
+          'operating': isOperating
+        }),
+        onClick: function onClick(event) {
+          return openRevision(event, revisionId);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setActiveRevision(revisionId);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setActiveRevision('');
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revision-name",
+        style: {
+          width: '40%'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revision-name-content"
+      }, t('Revision') + ' ' + revisionId)), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revision-user",
+        style: {
+          width: '25%'
+        }
+      }, revision.nickname), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revision-time",
+        style: {
+          width: '30%'
+        }
+      }, revision.createdTime), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-revision-operations",
+        style: {
+          width: '5%'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_revisionOperation["default"], {
+        isActive: isActive,
+        isOperating: isOperating,
+        revision: revision,
+        updateOperatingRevision: setOperatingRevision,
+        onDeleteOtherRevision: onDeleteOtherRevision
+      })));
+    }), isLoading && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-revision loading"
+    }, /*#__PURE__*/_react["default"].createElement(_sdocEditor.FileLoading, null)))));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, revisions, isLoading, errorMessage, activeRevisionId, operatingRevisionId]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
+    isOpen: true,
+    toggle: toggle,
+    className: "revisions-dialog"
+  }, /*#__PURE__*/_react["default"].createElement(_modalHeader["default"], {
+    toggle: toggle
+  }, t('Revision')), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, {
+    className: "revisions-body"
+  }, renderContent())), showDeleteTipDialog && /*#__PURE__*/_react["default"].createElement(_tipDialog["default"], {
+    tipType: _constants.TIP_TYPE.DELETE_REVISION,
+    onSubmit: deleteOtherRevision,
+    onClose: closeDeleteTipDialog,
+    zIndex: 1071
+  }, t(_constants.TIP_CONTENT[_constants.TIP_TYPE.DELETE_REVISION], {
+    content: "".concat(t('revision'), " ").concat(operatingRevisionId)
+  })));
+};
+var _default = exports["default"] = RevisionsDialog;

package/dist/components/doc-operations/revision-operations/revisions/revisions-dialog/revision-operation/index.css

@@ -0,0 +1,34 @@
+.sdoc-revision-operation-toggle-container {
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.sdoc-revision-operation-toggle-container:hover {
+  background-color: #E5E5E5;
+  cursor: pointer;
+}
+
+.sdoc-revision-operation-toggle {
+  display: none;
+  font-size: 16px;
+  color: #999;
+}
+
+.revisions-body .sdoc-revision:hover .sdoc-revision-operation-toggle,
+.revisions-dialog .revisions-body .sdoc-revision.operating .sdoc-revision-operation-toggle {
+  display: inline-block;
+}
+
+.sdoc-revision-operation-toggle:hover {
+  cursor: pointer;
+  color: #333;
+}
+
+.sdoc-revision-menu-popover .popover {
+  margin-top: 0;
+}
+

package/dist/components/doc-operations/revision-operations/revisions/revisions-dialog/revision-operation/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _sdocEditor = require("@seafile/sdoc-editor");
+require("./index.css");
+var RevisionOperation = function RevisionOperation(_ref) {
+  var isActive = _ref.isActive,
+    isOperating = _ref.isOperating,
+    revision = _ref.revision,
+    updateOperatingRevision = _ref.updateOperatingRevision,
+    onDeleteOtherRevision = _ref.onDeleteOtherRevision;
+  var targetId = "sdoc-revision-".concat(revision.id);
+  var popoverRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isPopoverShow = _useState2[0],
+    setPopoverShow = _useState2[1];
+  var toggle = (0, _react.useCallback)(function () {
+    popoverRef.current.toggle();
+    var nextPopoverShow = !isPopoverShow;
+    setPopoverShow(nextPopoverShow);
+    updateOperatingRevision(nextPopoverShow ? revision.id : '');
+  }, [isPopoverShow, updateOperatingRevision, revision]);
+  var deleteRevision = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+    onDeleteOtherRevision();
+    popoverRef.current.toggle();
+  }, [onDeleteOtherRevision]);
+  if (!isActive && !isOperating) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-revision-operation-toggle-container"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-more sdoc-revision-operation-toggle",
+    id: targetId
+  }), /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: targetId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-revision-menu-popover",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    modifiers: [{
+      name: 'preventOverflow',
+      options: {
+        boundariesElement: document.body
+      }
+    }],
+    ref: popoverRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement(_sdocEditor.DropdownMenuItem, {
+    onClick: deleteRevision,
+    menuConfig: {
+      iconClass: 'sdocfont sdoc-delete',
+      text: 'Delete'
+    }
+  }))));
+};
+var _default = exports["default"] = RevisionOperation;

package/dist/components/doc-operations/revision-operations/view-changes/index.css

@@ -0,0 +1,3 @@
+.sdoc-toggle-revision-changes .custom-switch {
+  padding-left: 0;
+}

package/dist/components/doc-operations/revision-operations/view-changes/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _switch = _interopRequireDefault(require("../../../switch"));
+require("./index.css");
+var REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
+var REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';
+var ViewChanges = function ViewChanges(_ref) {
+  var isShowChanges = _ref.isShowChanges,
+    propsOnViewChangesToggle = _ref.onViewChangesToggle;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  (0, _react.useEffect)(function () {
+    var url = new URL(window.location.href);
+    var searchParams = new URLSearchParams(url.search);
+    if (!searchParams.has(REVISION_DIFF_KEY)) return;
+    var firstLoadValue = searchParams.get(REVISION_DIFF_KEY);
+    if (firstLoadValue === REVISION_DIFF_VALUE) {
+      propsOnViewChangesToggle(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onViewChangesToggle = (0, _react.useCallback)(function () {
+    var nextIsShowChanges = !isShowChanges;
+    var url = new URL(window.location.href);
+    var searchParams = new URLSearchParams(url.search);
+    var newParamsString = '';
+    var _iterator = (0, _createForOfIteratorHelper2["default"])(searchParams.entries()),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if (item[0] !== REVISION_DIFF_KEY) {
+          if (newParamsString) {
+            newParamsString = newParamsString + "&".concat(item[0], "=").concat(item[1]);
+          } else {
+            newParamsString = "".concat(item[0], "=").concat(item[1]);
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    if (!searchParams.has(REVISION_DIFF_KEY) && nextIsShowChanges) {
+      if (newParamsString) {
+        newParamsString = newParamsString + "&".concat(REVISION_DIFF_KEY, "=").concat(REVISION_DIFF_VALUE);
+      } else {
+        newParamsString = "".concat(REVISION_DIFF_KEY, "=").concat(REVISION_DIFF_VALUE);
+      }
+    }
+    var validPathName = url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+    var newURL = "".concat(url.origin).concat(validPathName).concat(newParamsString ? '?' + newParamsString : '');
+    window.history.replaceState(null, null, newURL);
+    propsOnViewChangesToggle(nextIsShowChanges);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowChanges, propsOnViewChangesToggle]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sdoc-toggle-revision-changes-container",
+    className: "h-100 ml-4 d-flex align-items-center "
+  }, /*#__PURE__*/_react["default"].createElement(_switch["default"], {
+    checked: isShowChanges,
+    onChange: onViewChangesToggle,
+    className: "sdoc-toggle-revision-changes d-flex align-items-center"
+  })), /*#__PURE__*/_react["default"].createElement(_sdocEditor.Tooltip, {
+    target: "sdoc-toggle-revision-changes-container"
+  }, t('View_changes')));
+};
+var _default = exports["default"] = ViewChanges;

package/dist/components/doc-operations/share-operation/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ShareOperation;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _constants = require("../../../constants");
+function ShareOperation() {
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var id = 'sdoc-share';
+  var onShareToggle = (0, _react.useCallback)(function () {
+    var eventBus = _sdocEditor.EventBus.getInstance();
+    eventBus.dispatch(_constants.EXTERNAL_EVENT.SHARE_SDOC);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: "op-item",
+    id: id,
+    onClick: onShareToggle
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-share"
+  }), /*#__PURE__*/_react["default"].createElement(_sdocEditor.Tooltip, {
+    target: id
+  }, t('Share')));
+}

package/dist/components/doc-operations/style.css

@@ -0,0 +1,93 @@
+.doc-ops {
+  display: flex;
+  align-items: center;
+}
+
+.doc-ops .op-item {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+}
+
+.doc-ops .collaborators-op-item {
+  width: 40px;
+}
+
+.doc-ops .op-item .sdocfont {
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+}
+
+.doc-ops .op-item:hover {
+  background-color: #EFEFEF;
+  cursor: pointer;
+}
+
+.doc-ops .popover-wrapper {
+  width: 300px;
+}
+
+.sdoc-dropdown-print-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu {
+  padding: 8px 0;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item {
+  padding: 4px 16px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-operator-folder-divider {
+  margin: 8px 0;
+  border-top: 1px solid #e6e9ed;
+  height: 1px;
+  width: 100%;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch {
+  padding-left: 0px;
+  width: 100%;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-description {
+  margin-left: 0px;
+  color: unset;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-indicator:before {
+  height: 8px;
+  width: 8px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:checked~.custom-switch-indicator {
+  background: #ff8000;
+}
+
+.sdoc-operator-folder .sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdoc-full-width-mode-wrapper .custom-switch .custom-switch-input:focus~.custom-switch-indicator {
+  box-shadow: 0 0 0 2px rgba(255, 128, 0, .25);
+  border-color: #ff8000;
+}

package/dist/components/draft-dropdown/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _constants = require("../../constants");
+require("./style.css");
+var DraftDropdownMenu = /*#__PURE__*/function (_React$Component) {
+  function DraftDropdownMenu(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DraftDropdownMenu);
+    _this = (0, _callSuper2["default"])(this, DraftDropdownMenu, [props]);
+    (0, _defineProperty2["default"])(_this, "registerEventHandler", function () {
+      document.addEventListener('click', _this.onHideDraftDropdownMenu);
+    });
+    (0, _defineProperty2["default"])(_this, "unregisterEventHandler", function () {
+      document.removeEventListener('click', _this.onHideDraftDropdownMenu);
+    });
+    (0, _defineProperty2["default"])(_this, "onHideDraftDropdownMenu", function () {
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onToggleClick", function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
+      if (isDropdownMenuOpen) {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "unmark", function () {
+      var eventBus = _sdocEditor.EventBus.getInstance();
+      eventBus.dispatch(_constants.EXTERNAL_EVENT.UNMARK_AS_DRAFT);
+    });
+    _this.state = {
+      isDropdownMenuOpen: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(DraftDropdownMenu, _React$Component);
+  return (0, _createClass2["default"])(DraftDropdownMenu, [{
+    key: "render",
+    value: function render() {
+      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+      var t = this.props.t;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sdoc-draft-menu"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "draft-toggle sdoc-draft-identifier",
+        onClick: this.onToggleClick
+      }, t('Draft')), isDropdownMenuOpen && /*#__PURE__*/_react["default"].createElement("ul", {
+        className: "draft-popover list-unstyled m-0"
+      }, /*#__PURE__*/_react["default"].createElement("li", {
+        className: "draft-menu-item",
+        onClick: this.unmark
+      }, t('Unmark_as_draft'))));
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(DraftDropdownMenu);