@seafile/seafile-sdoc-editor 2.0.0

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

@@ -0,0 +1,256 @@
+"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 _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _constants = require("../../../constants");
+var _hooks = require("../../../hooks");
+var _tipDialog = _interopRequireDefault(require("../../tip-dialog"));
+var _changesCount = _interopRequireDefault(require("./changes-count"));
+var _moreRevisionOperations = _interopRequireDefault(require("./more-revision-operations"));
+var _publishRevision = _interopRequireDefault(require("./publish-revision"));
+var _revisions = _interopRequireDefault(require("./revisions"));
+var _viewChanges = _interopRequireDefault(require("./view-changes"));
+var RevisionOperations = function RevisionOperations(_ref) {
+  var isShowChanges = _ref.isShowChanges,
+    _ref$isPublished = _ref.isPublished,
+    isPublished = _ref$isPublished === void 0 ? false : _ref$isPublished,
+    changes = _ref.changes,
+    handleViewChangesToggle = _ref.handleViewChangesToggle,
+    handleRevisionMerged = _ref.handleRevisionMerged,
+    handleRevisionPublished = _ref.handleRevisionPublished;
+  var isSdocRevision = _sdocEditor.context.getSetting('isSdocRevision');
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowTip = _useState2[0],
+    setShowTip = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    tipType = _useState4[0],
+    setTipType = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    mergeValue = _useState6[0],
+    setMergeValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    isLoading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useDocument = (0, _hooks.useDocument)(false),
+    loadDocument = _useDocument.loadDocument;
+  (0, _react.useEffect)(function () {
+    if (!isSdocRevision) return;
+    if (isShowChanges) return;
+    if (isPublished) return;
+    var revisionPromise = loadDocument();
+    var baseVersionPromise = _sdocEditor.context.getRevisionBaseVersionContent();
+    var originVersionPromise = _sdocEditor.context.getSeadocOriginFileContent();
+    Promise.all([revisionPromise, baseVersionPromise, originVersionPromise]).then(function (results) {
+      var _results = (0, _slicedToArray2["default"])(results, 3),
+        revisionContent = _results[0],
+        baseRes = _results[1],
+        masterRes = _results[2];
+      var baseContent = JSON.parse(baseRes.data.content);
+      var masterContent = JSON.parse(masterRes.data.content);
+
+      // no changes
+      if (masterContent.version === baseContent.version) return;
+      setShowTip(true);
+      var _getRebase = (0, _sdocEditor.getRebase)(masterContent, baseContent, revisionContent),
+        value = _getRebase.value;
+      setMergeValue(value);
+      setTipType(_constants.TIP_TYPE.SOURCE_DOCUMENT_CHANGED);
+    })["catch"](function (error) {
+      if (typeof error === 'string') {
+        _sdocEditor.toaster.danger(t(error));
+        return;
+      }
+      _sdocEditor.toaster.danger(t('Error'));
+      setShowTip(false);
+      setTipType('');
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDocumentReplaced = (0, _react.useCallback)(function () {
+    if (isShowTip) return;
+    setTipType(_constants.TIP_TYPE.HAS_BEEN_REPLACED);
+    setShowTip(true);
+  }, [isShowTip]);
+  var hasPublishRevision = (0, _react.useCallback)(function () {
+    handleRevisionPublished();
+    _sdocEditor.toaster.success(t(_constants.TIP_CONTENT[_constants.TIP_TYPE.HAS_BEEN_PUBLISHED]));
+  }, [handleRevisionPublished, t]);
+  var onDocumentRemoved = (0, _react.useCallback)(function () {
+    if (isShowTip) return;
+    setTipType(_constants.TIP_TYPE.HAS_BEEN_REMOVED);
+    setShowTip(true);
+  }, [isShowTip]);
+  var onError = (0, _react.useCallback)(function () {
+    _sdocEditor.toaster.danger(t('Error'));
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var eventBus = _sdocEditor.EventBus.getInstance();
+    var unsubscribeMergeDocument = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.DOCUMENT_REPLACED, onDocumentReplaced);
+    var unsubscribeMergeDocumentError = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.DOCUMENT_REPLACED_ERROR, onError);
+    var unsubscribePublishDocument = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.PUBLISH_DOCUMENT, hasPublishRevision);
+    var unsubscribePublishDocumentError = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.PUBLISH_DOCUMENT_ERROR, onError);
+    var unsubscribeRemoveDocument = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.REMOVE_DOCUMENT, onDocumentRemoved);
+    var unsubscribeRemoveDocumentError = eventBus.subscribe(_sdocEditor.INTERNAL_EVENT.REMOVE_DOCUMENT_ERROR, onError);
+    return function () {
+      unsubscribeMergeDocument();
+      unsubscribeMergeDocumentError();
+      unsubscribePublishDocument();
+      unsubscribePublishDocumentError();
+      unsubscribeRemoveDocument();
+      unsubscribeRemoveDocumentError();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // solve show change view in revision editor
+  var onViewChangesToggle = (0, _react.useCallback)(function (isShowChanges) {
+    if (isLoading) return;
+    setLoading(true);
+    if (!isPublished && isShowChanges) {
+      // The trick here is to send one more api request in order to use the same information box.
+      loadDocument().then(function (revisionContent) {
+        // Prevent users from switching if document contains conflicting content
+        if ((0, _sdocEditor.hasConflict)(revisionContent.elements)) {
+          setTipType(_constants.TIP_TYPE.HAS_CONFLICT_BEFORE_VIEW_CHANGES);
+          setShowTip(true);
+        } else {
+          handleViewChangesToggle(isShowChanges);
+        }
+        setLoading(false);
+      })["catch"](function (errorMessage) {
+        _sdocEditor.toaster.danger(t(errorMessage));
+        setLoading(false);
+      });
+      return;
+    }
+    handleViewChangesToggle(isShowChanges);
+    setLoading(false);
+  }, [handleViewChangesToggle, loadDocument, t, isPublished, isLoading]);
+
+  // publish revision
+  var publishRevision = (0, _react.useCallback)(function () {
+    setShowTip(true);
+    setTipType(_constants.TIP_TYPE.CHECKING);
+    var revisionPromise = loadDocument();
+    var baseVersionPromise = _sdocEditor.context.getRevisionBaseVersionContent();
+    var originVersionPromise = _sdocEditor.context.getSeadocOriginFileContent();
+    Promise.all([revisionPromise, baseVersionPromise, originVersionPromise]).then(function (results) {
+      var _results2 = (0, _slicedToArray2["default"])(results, 3),
+        revisionContent = _results2[0],
+        baseRes = _results2[1],
+        masterRes = _results2[2];
+      var baseContent = JSON.parse(baseRes.data.content);
+      var masterContent = JSON.parse(masterRes.data.content);
+      if ((0, _sdocEditor.hasConflict)(revisionContent.elements)) {
+        setTipType(_constants.TIP_TYPE.HAS_CONFLICT_BEFORE_PUBLISH);
+        return;
+      }
+      var _getRebase2 = (0, _sdocEditor.getRebase)(masterContent, baseContent, revisionContent),
+        canMerge = _getRebase2.canMerge,
+        isNeedReplaceMaster = _getRebase2.isNeedReplaceMaster,
+        value = _getRebase2.value;
+      // change to HAS_BEEN_PUBLISHED
+      if (canMerge && isNeedReplaceMaster) {
+        setTipType(_constants.TIP_TYPE.PUBLISHING);
+        _sdocEditor.context.publishRevision().then(function (res) {
+          setShowTip(false);
+          setTipType('');
+        })["catch"](function (error) {
+          _sdocEditor.toaster.danger(t('Error'));
+        });
+        return;
+      }
+
+      // change to DELETE_NO_CHANGES_REVISION
+      if (canMerge && !isNeedReplaceMaster) {
+        setTipType(_constants.TIP_TYPE.DELETE_NO_CHANGES_REVISION);
+        return;
+      }
+
+      // change to MERGE
+      setMergeValue(value);
+      setTipType(_constants.TIP_TYPE.MERGE);
+    })["catch"](function (error) {
+      if (typeof error === 'string') {
+        _sdocEditor.toaster.danger(t(error));
+        return;
+      }
+      _sdocEditor.toaster.danger(t('Error'));
+    });
+  }, [loadDocument, t]);
+
+  // confirm publish
+  var onSubmit = (0, _react.useCallback)(function () {
+    if (tipType === _constants.TIP_TYPE.HAS_BEEN_PUBLISHED) {
+      // nothing todo
+      return;
+    }
+    if (tipType === _constants.TIP_TYPE.DELETE_NO_CHANGES_REVISION) {
+      _sdocEditor.context.deleteSdocRevision().then(function (res) {
+        // update current location
+        var originFileURL = _sdocEditor.context.getSetting('originFileURL');
+        window.location.href = originFileURL;
+      })["catch"](function (error) {
+        _sdocEditor.toaster.danger(t('Error'));
+      });
+      return;
+    }
+    if (tipType === _constants.TIP_TYPE.MERGE || tipType === _constants.TIP_TYPE.SOURCE_DOCUMENT_CHANGED) {
+      var _context$getUserInfo = _sdocEditor.context.getUserInfo(),
+        username = _context$getUserInfo.username;
+      var doc = {
+        elements: mergeValue.elements,
+        version: mergeValue.version,
+        format_version: mergeValue.format_version,
+        last_modify_user: username
+      };
+      _sdocEditor.context.updateSdocRevision(doc).then(function (res) {
+        var origin_file_version = res.data.origin_file_version;
+        _sdocEditor.context.updateSettings({
+          'originFileVersion': origin_file_version
+        });
+        handleRevisionMerged && handleRevisionMerged(mergeValue);
+        setShowTip(false);
+      })["catch"](function (error) {
+        _sdocEditor.toaster.danger(t('Error'));
+      });
+      return;
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tipType, mergeValue, document]);
+  var onClose = (0, _react.useCallback)(function () {
+    setShowTip(false);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isSdocRevision && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_moreRevisionOperations["default"], null), /*#__PURE__*/_react["default"].createElement(_revisions["default"], null)), isSdocRevision && isShowChanges && /*#__PURE__*/_react["default"].createElement(_changesCount["default"], {
+    allChanges: changes
+  }), isSdocRevision && /*#__PURE__*/_react["default"].createElement(_viewChanges["default"], {
+    isShowChanges: isShowChanges,
+    onViewChangesToggle: onViewChangesToggle
+  }), isSdocRevision && !isPublished && /*#__PURE__*/_react["default"].createElement(_publishRevision["default"], {
+    publishRevision: publishRevision
+  }), isShowTip && /*#__PURE__*/_react["default"].createElement(_tipDialog["default"], {
+    tipType: tipType,
+    onSubmit: onSubmit,
+    onClose: onClose,
+    zIndex: 1072
+  }));
+};
+var _default = exports["default"] = RevisionOperations;

package/dist/components/doc-operations/revision-operations/more-revision-operations/index.css

@@ -0,0 +1,53 @@
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle {
+  width: 66px;
+  height: 28px;
+  border-radius: 14px;
+  background-color: #F0F0F0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle:hover {
+  cursor: pointer;
+  background-color: #E4E4E4;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle .sdoc-revise {
+  margin-right: 10px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle .sdocfont {
+  font-size: 14px;
+}
+
+.sdoc-more-revision-operations-dropdown .dropdown-item {
+  padding: 12px;
+  height: 64px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation {
+  width: 373px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-title .sdocfont {
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-title-name {
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-describe {
+  padding-left: 20px;
+  color: #999;
+  font-size: 13px;
+  width: 100%;
+  white-space: break-spaces;
+}

package/dist/components/doc-operations/revision-operations/more-revision-operations/index.js

@@ -0,0 +1,73 @@
+"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 _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _constants = require("../../../../constants");
+require("./index.css");
+var MoreRevisionOperations = function MoreRevisionOperations(_ref) {
+  var t = _ref.t;
+  var id = 'sdoc_revisions';
+  var eventBus = _sdocEditor.EventBus.getInstance();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsDropdownOpen = _useState2[1];
+  var toggleDropdown = (0, _react.useCallback)(function (isDropdownOpen) {
+    setIsDropdownOpen(!isDropdownOpen);
+  }, []);
+  var startRevise = (0, _react.useCallback)(function () {
+    _sdocEditor.context.startRevise().then(function (res) {
+      var repoID = _sdocEditor.context.getSetting('repoID');
+      var siteRoot = _sdocEditor.context.getSetting('siteRoot');
+      var revisionURL = "".concat(siteRoot, "lib/").concat(repoID, "/revisions/").concat(res.data.revision_id, "/");
+      window.open(revisionURL, '_blank');
+      eventBus.dispatch(_constants.NEW_REVISION);
+    })["catch"](function (error) {
+      _sdocEditor.toaster.danger(t('Error'));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Dropdown, {
+    isOpen: isDropdownOpen,
+    toggle: function toggle() {
+      return toggleDropdown(isDropdownOpen);
+    },
+    className: "sdoc-more-revision-operations-dropdown"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownToggle, {
+    id: id,
+    className: "ml-4 sdoc-more-revision-operations-toggle",
+    tag: "div"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-revise"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdocfont sdoc-".concat(isDropdownOpen ? 'caret-up' : 'drop-down')
+  })), /*#__PURE__*/_react["default"].createElement(_sdocEditor.Tooltip, {
+    target: id
+  }, t('Revise')), /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownMenu, {
+    className: "sdoc-dropdown-menu",
+    end: true
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.DropdownItem, {
+    className: "sdoc-dropdown-menu-item",
+    onClick: startRevise
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-more-revision-operation"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-more-revision-operation-title"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-revise"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-more-revision-operation-title-name"
+  }, t('Revise'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-more-revision-operation-describe"
+  }, t('Start_revise_tip'))))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(MoreRevisionOperations);

package/dist/components/doc-operations/revision-operations/publish-revision/index.js

@@ -0,0 +1,28 @@
+"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"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var PublishRevision = function PublishRevision(_ref) {
+  var publishRevision = _ref.publishRevision;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var onPublishRevision = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    publishRevision();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    color: "success",
+    onClick: onPublishRevision,
+    className: "ml-4"
+  }, t('Publish'));
+};
+var _default = exports["default"] = PublishRevision;

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

@@ -0,0 +1,16 @@
+.sdoc-revisions-count {
+  height: 28px;
+  width: fit-content;
+  border: 1px solid #E5E5E5;
+  border-radius: 3px;
+  line-height: 26px;
+  text-align: center;
+  padding: 0 16px;
+  margin-left: 1rem;
+  color: #666;
+}
+
+.sdoc-revisions-count:hover {
+  cursor: pointer;
+  color: #333;
+}

package/dist/components/doc-operations/revision-operations/revisions/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 _reactI18next = require("react-i18next");
+var _sdocEditor = require("@seafile/sdoc-editor");
+var _constants = require("../../../../constants");
+var _utils = require("../../../../utils");
+var _revisionsDialog = _interopRequireDefault(require("./revisions-dialog"));
+require("./index.css");
+var Revisions = function Revisions() {
+  var eventBus = _sdocEditor.EventBus.getInstance();
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    revisionsCount = _useState2[0],
+    setRevisionsCount = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowRevisions = _useState4[0],
+    setShowRevisions = _useState4[1];
+  var autoIncrementRevisionsCount = (0, _react.useCallback)(function () {
+    setRevisionsCount(revisionsCount + 1);
+  }, [revisionsCount]);
+
+  // did mount
+  (0, _react.useEffect)(function () {
+    _sdocEditor.context.getSdocRevisionsCount().then(function (res) {
+      var count = res.data.count;
+      setRevisionsCount(count);
+    })["catch"](function (error) {
+      var errorMessage = (0, _utils.getErrorMsg)(error);
+      _sdocEditor.toaster.danger(t(errorMessage));
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var autoIncrementRevisionSubscribe = eventBus.subscribe(_constants.NEW_REVISION, autoIncrementRevisionsCount);
+    return function () {
+      autoIncrementRevisionSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoIncrementRevisionsCount]);
+  var showRevisions = (0, _react.useCallback)(function () {
+    setShowRevisions(true);
+  }, []);
+  var closeRevisions = (0, _react.useCallback)(function () {
+    setShowRevisions(false);
+  }, []);
+  if (revisionsCount === 0) return null;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-revisions-count",
+    onClick: showRevisions
+  }, revisionsCount === 1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, t('1_revision')), revisionsCount > 1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, t('x_revisions', {
+    count: revisionsCount
+  }))), isShowRevisions && /*#__PURE__*/_react["default"].createElement(_revisionsDialog["default"], {
+    updateRevisionsCount: setRevisionsCount,
+    toggle: closeRevisions
+  }));
+};
+var _default = exports["default"] = Revisions;

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

@@ -0,0 +1,126 @@
+.revisions-dialog {
+  width: 700px;
+  max-width: 700px;
+  height: calc(100% - 56px);
+}
+
+.revisions-dialog .modal-content {
+  height: 100%;
+  overflow: hidden;
+}
+
+.revisions-dialog .revisions-body {
+  height: calc(100% - 50px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.revisions-dialog .sdoc-revisions-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.revisions-dialog .sdoc-revisions-container .sdoc-revisions-header {
+  height: 41px;
+  width: calc(100% - 32px);
+  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+  margin: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.revisions-dialog .sdoc-revisions-container .sdoc-revisions-content {
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 0 16px 16px 16px;
+}
+
+.revisions-dialog .sdoc-revisions-container .sdoc-revisions-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.revisions-dialog .sdoc-revisions-container.loading {
+  align-items: center;
+  justify-content: center;
+}
+
+.revisions-dialog .revisions-body .sdoc-revision {
+  height: 41px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
+}
+
+.revisions-dialog .revisions-body .sdoc-revision.operating {
+  background-color: #f5f5f5;
+}
+
+.revisions-dialog .revisions-body .sdoc-revision:hover {
+  cursor: pointer;
+  background-color: #f5f5f5;
+}
+
+.revisions-dialog .sdoc-revision-name-header,
+.revisions-dialog .sdoc-revision-user-header,
+.revisions-dialog .sdoc-revision-time-header {
+  padding-left: 9px;
+  color: #999;
+}
+
+.revisions-dialog .sdoc-revision .sdoc-revision-user {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding-left: 9px;
+}
+
+.revisions-dialog .sdoc-revision .sdoc-revision-name {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  padding-left: 9px;
+}
+
+.revisions-dialog .sdoc-revision .sdoc-revision-name-content {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.revisions-dialog .sdoc-revision .sdoc-revision-time {
+  height: 100%;
+  padding-left: 9px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.revisions-dialog .revisions-body .sdoc-revision.loading {
+  height: 40px;
+  align-items: center;
+  border-bottom: none;
+}
+
+.revisions-dialog .sdoc-revision.loading:hover {
+  background-color: unset;
+}
+
+.revisions-dialog .sdoc-revision-operations {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}