@seafile/sdoc-editor 0.1.60 → 0.1.62

package/dist/basic-sdk/utils/diff.js

@@ -1,122 +1,206 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { DIFF_TYPE, ELEMENT_TYPE } from '../../basic-sdk/extension/constants';
+import slugid from 'slugid';
+import { ELEMENT_TYPE, ADDED_STYLE, DELETED_STYLE } from '../../basic-sdk/extension/constants';
 import ObjectUtils from './object-utils';
-var getElementIndexInDiffDocument = function getElementIndexInDiffDocument(diffValue, element) {
-  if (!diffValue || !element) return -1;
-  return diffValue.findIndex(function (item) {
-    return item.id === element.id;
-  });
+import DiffText from './diff-text';
+import { normalizeChildren } from './document-utils';
+
+// ignore
+var IGNORE_KEYS = ['BOLD', 'ITALIC', 'columns', 'minHeight', 'language', 'white_space'];
+var generatorDiffTextElement = function generatorDiffTextElement(textElement, diffType) {
+  var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!textElement) return null;
+  if (!diffType) return textElement;
+  var id = textElement.id;
+  return _objectSpread(_objectSpread({}, textElement), {}, _defineProperty({
+    id: id || slugid.nice()
+  }, diffType, true), style);
+};
+
+// Depth facilitates each child node, adding diffType to each end node
+var generatorDiffElement = function generatorDiffElement(element, diffType) {
+  var _objectSpread3;
+  var style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!element) return null;
+  if (!Array.isArray(element.children) || element.children.length === 0) {
+    return generatorDiffTextElement(element, diffType, style);
+  }
+  return _objectSpread(_objectSpread({}, element), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, diffType, true), _defineProperty(_objectSpread3, "children", element.children.map(function (item) {
+    return generatorDiffElement(item, diffType, style);
+  })), _objectSpread3));
 };
-var getNearestElementIndex = function getNearestElementIndex(diff, oldDocument, elementId) {
-  var diffValue = diff.value;
-  var elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, elementId);
-  if (elementInDiffDocumentIdx > -1) return elementInDiffDocumentIdx + 1;
-  var oldElementCount = oldDocument.length;
-  var elementInOldDocumentIndex = oldDocument.findIndex(function (item) {
-    return item.id === elementId;
+var generateIdMapAndIds = function generateIdMapAndIds(elements) {
+  var map = {};
+  var ids = [];
+  if (!Array.isArray(elements) || elements.length === 0) return {
+    map: map,
+    ids: ids
+  };
+  elements.forEach(function (element) {
+    ids.push(element.id);
+    map[element.id] = element;
   });
-  var leftIndex = elementInOldDocumentIndex - 1;
-  leftIndex = leftIndex === -1 ? 0 : leftIndex;
-  var rightIndex = elementInOldDocumentIndex + 1;
-  rightIndex = rightIndex === oldElementCount - 1 ? oldElementCount - 1 : rightIndex;
-  while (elementInDiffDocumentIdx === -1 && leftIndex > -2 && rightIndex < oldElementCount + 1) {
-    if (leftIndex > -1) {
-      var oldLeftElement = oldDocument[leftIndex];
-      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLeftElement);
-      if (elementInDiffDocumentIdx > -1) {
-        return elementInDiffDocumentIdx + 1;
-      }
-    }
-    if (rightIndex < oldElementCount) {
-      var oldLastElement = oldDocument[rightIndex];
-      elementInDiffDocumentIdx = getElementIndexInDiffDocument(diffValue, oldLastElement);
-      if (elementInDiffDocumentIdx > -1) {
-        return elementInDiffDocumentIdx;
-      }
-    }
-    leftIndex--;
-    rightIndex++;
-    if (leftIndex === -2 && rightIndex < oldElementCount) {
-      leftIndex = -1;
-    }
-    if (rightIndex === oldElementCount && leftIndex > -1) {
-      rightIndex = oldElementCount;
+  return {
+    map: map,
+    ids: ids
+  };
+};
+var hasChildren = function hasChildren(element) {
+  if (!element) return false;
+  if (!Array.isArray(element.children) || element.children.length === 0) return false;
+  return true;
+};
+
+// id diffs
+var getIdDiffs = function getIdDiffs(oldIds, newIds) {
+  var diff = new DiffText(oldIds, newIds);
+  return diff.getDiffs();
+};
+
+// text diffs
+var getTextDiff = function getTextDiff(element, oldElement, diff) {
+  var newText = element.text;
+  var oldText = oldElement.text;
+  var textDiff = new DiffText(oldText || '', newText || '');
+  var textDiffs = textDiff.getDiffs();
+  var newChildren = [];
+  textDiffs.forEach(function (item, index) {
+    var id = "".concat(element.id || slugid.nice(), "-").concat(index);
+    var elementItem = {
+      id: id,
+      text: item.value
+    };
+    if (item.added) {
+      diff.changes.push(id);
+      var commonChild = generatorDiffTextElement(elementItem, 'ADD', ADDED_STYLE);
+      newChildren.push(commonChild);
+    } else if (item.removed) {
+      diff.changes.push(id);
+      var _commonChild = generatorDiffTextElement(elementItem, 'DELETE', DELETED_STYLE);
+      newChildren.push(_commonChild);
+    } else {
+      var _commonChild2 = generatorDiffTextElement(elementItem);
+      newChildren.push(_commonChild2);
     }
+  });
+  return newChildren;
+};
+var getCommonDiff = function getCommonDiff(element, oldElement, diff) {
+  if (!hasChildren(element) && !hasChildren(oldElement)) {
+    var _newChildren = getTextDiff(element, oldElement, diff);
+    return [_objectSpread(_objectSpread({}, element), {}, {
+      children: _newChildren
+    })];
   }
-  return diffValue.length - 1;
+  if (!hasChildren(element) || !hasChildren(oldElement)) {
+    var elementId = element.id || slugid.nice();
+    diff.changes.push("".concat(elementId, "_delete"));
+    return [generatorDiffElement(_objectSpread(_objectSpread({}, oldElement), {}, {
+      id: "".concat(elementId, "_delete")
+    }), 'DELETE', DELETED_STYLE), generatorDiffElement(_objectSpread(_objectSpread({}, element), {}, {
+      id: "".concat(elementId, "_add")
+    }), 'ADD', ADDED_STYLE)];
+  }
+
+  // Content does not change
+  if (ObjectUtils.isSameObject(element, oldElement, [].concat(IGNORE_KEYS, ['type']))) {
+    return [element];
+  }
+
+  // Compare content
+  var currentChildren = element.children;
+  var oldChildren = oldElement.children;
+  var _generateIdMapAndIds = generateIdMapAndIds(currentChildren),
+    currentMap = _generateIdMapAndIds.map,
+    currentIds = _generateIdMapAndIds.ids;
+  var _generateIdMapAndIds2 = generateIdMapAndIds(oldChildren),
+    oldMap = _generateIdMapAndIds2.map,
+    oldIds = _generateIdMapAndIds2.ids;
+  var idDiffs = getIdDiffs(oldIds, currentIds);
+  var newChildren = [];
+  idDiffs.forEach(function (idDiff) {
+    var ids = idDiff.value;
+    var isAdded = idDiff.added;
+    var isDelete = idDiff.removed;
+    ids.forEach(function (id) {
+      var newChildrenElement = currentMap[id];
+      var oldChildrenElement = oldMap[id];
+      if (isAdded) {
+        diff.changes.push(id);
+        newChildren.push(generatorDiffElement(newChildrenElement, 'ADD', ADDED_STYLE));
+      } else if (isDelete) {
+        diff.changes.push(id);
+        newChildren.push(generatorDiffElement(oldChildrenElement, 'DELETE', DELETED_STYLE));
+      } else {
+        if (ObjectUtils.isSameObject(newChildrenElement, oldChildrenElement, IGNORE_KEYS)) {
+          newChildren.push(newChildrenElement);
+        } else {
+          if (newChildrenElement.type === oldChildrenElement.type) {
+            if (!newChildrenElement.type) {
+              var textDiffs = getTextDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(textDiffs));
+            } else if (newChildrenElement.type === ELEMENT_TYPE.IMAGE) {
+              if (newChildrenElement.data.src === oldChildrenElement.data.src) {
+                newChildren.push(newChildrenElement);
+              } else {
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, element), {}, {
+                  id: element.id + '_add'
+                }), 'ADD', ADDED_STYLE));
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+                  id: element.id + '_delete'
+                }), 'DELETE', DELETED_STYLE));
+              }
+            } else if (newChildrenElement.type === ELEMENT_TYPE.LINK) {
+              if (newChildrenElement.title !== oldChildrenElement.title) {
+                var diffElements = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+                newChildren.push.apply(newChildren, _toConsumableArray(diffElements));
+              } else if (newChildrenElement.href !== oldChildrenElement.href) {
+                diff.changes.push(oldChildrenElement.id + '_delete');
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+                  id: oldChildrenElement.id + '_delete'
+                }), 'DELETE', DELETED_STYLE));
+                newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, newChildrenElement), {}, {
+                  id: newChildrenElement.id + '_add'
+                }), 'ADD', ADDED_STYLE));
+              } else {
+                newChildren.push(newChildrenElement);
+              }
+            } else if (newChildrenElement.type === ELEMENT_TYPE.TABLE_ROW || newChildrenElement.type === ELEMENT_TYPE.TABLE_CELL) {
+              var newRows = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(newRows));
+            } else {
+              var commonDiffs = getCommonDiff(newChildrenElement, oldChildrenElement, diff);
+              newChildren.push.apply(newChildren, _toConsumableArray(commonDiffs));
+            }
+          } else {
+            diff.changes.push(oldChildrenElement.id + '_delete');
+            newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, oldChildrenElement), {}, {
+              id: oldChildrenElement.id + '_delete'
+            }), 'DELETE', DELETED_STYLE));
+            newChildren.push(generatorDiffTextElement(_objectSpread(_objectSpread({}, newChildrenElement), {}, {
+              id: newChildrenElement.id + '_add'
+            }), 'ADD', ADDED_STYLE));
+          }
+        }
+      }
+    });
+  });
+  return [_objectSpread(_objectSpread({}, element), {}, {
+    children: newChildren
+  })];
 };
 var updateDiffValue = function updateDiffValue(diff, element, oldElement) {
   if (!diff || !element || !oldElement) return;
-  if (ObjectUtils.isSameObject(element, oldElement)) {
-    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-      diff_type: DIFF_TYPE.COMMON
-    }));
-    return;
-  }
-  var currentElementType = element.type;
-  var oldElementType = oldElement.type;
-  if (currentElementType !== oldElementType) {
-    diff.changes.push(oldElement.id);
-    diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-      diff_type: DIFF_TYPE.DELETE
-    }));
-    diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-      diff_type: DIFF_TYPE.ADD
-    }));
+  if (ObjectUtils.isSameObject(element, oldElement, IGNORE_KEYS)) {
+    diff.value.push(element);
     return;
   }
-  switch (currentElementType) {
-    case ELEMENT_TYPE.PARAGRAPH:
-    case ELEMENT_TYPE.HEADER1:
-    case ELEMENT_TYPE.HEADER2:
-    case ELEMENT_TYPE.HEADER3:
-    case ELEMENT_TYPE.HEADER4:
-    case ELEMENT_TYPE.HEADER5:
-    case ELEMENT_TYPE.HEADER6:
-    case ELEMENT_TYPE.BLOCKQUOTE:
-    case ELEMENT_TYPE.LINK:
-    case ELEMENT_TYPE.CHECK_LIST_ITEM:
-    case ELEMENT_TYPE.CODE_BLOCK:
-    case ELEMENT_TYPE.IMAGE:
-      {
-        diff.changes.push(oldElement.id);
-        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-          diff_type: DIFF_TYPE.DELETE
-        }));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          diff_type: DIFF_TYPE.ADD
-        }));
-        break;
-      }
-    case ELEMENT_TYPE.ORDERED_LIST:
-    case ELEMENT_TYPE.UNORDERED_LIST:
-    case ELEMENT_TYPE.LIST_ITEM:
-    case ELEMENT_TYPE.LIST_LIC:
-      {
-        var _diff$changes;
-        var _getElementDiffValue = getElementDiffValue(element.children, oldElement.children),
-          diffValue = _getElementDiffValue.value,
-          diffChanges = _getElementDiffValue.changes;
-        (_diff$changes = diff.changes).push.apply(_diff$changes, _toConsumableArray(diffChanges));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          children: diffValue,
-          diff_type: DIFF_TYPE.MODIFY
-        }));
-        break;
-      }
-    default:
-      {
-        diff.changes.push(oldElement.id);
-        diff.value.push(_objectSpread(_objectSpread({}, oldElement), {}, {
-          diff_type: DIFF_TYPE.DELETE
-        }));
-        diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-          diff_type: DIFF_TYPE.ADD
-        }));
-        break;
-      }
-  }
+  var elements = getCommonDiff(element, oldElement, diff);
+  elements.forEach(function (item) {
+    diff.value.push(item);
+  });
 };
 
 /**
@@ -131,37 +215,34 @@ var getElementDiffValue = function getElementDiffValue(currentContent, oldConten
     value: [],
     changes: []
   };
-  var currentContentMap = {};
-  var oldContentMap = {};
-  currentContent.forEach(function (element) {
-    currentContentMap[element.id] = element;
-  });
-  oldContent.forEach(function (element) {
-    oldContentMap[element.id] = element;
-  });
-
-  // generator diff elements
-  for (var i = 0; i < currentContent.length; i++) {
-    var element = currentContent[i];
-    var isAdded = !oldContentMap[element.id]; // added
-    if (isAdded) {
-      diff.changes.push(element.id);
-      diff.value.push(_objectSpread(_objectSpread({}, element), {}, {
-        diff_type: DIFF_TYPE.ADD
-      }));
-      continue;
-    }
-    updateDiffValue(diff, element, oldContentMap[element.id]);
-  }
-  oldContent.forEach(function (oldElement) {
-    var oldElementId = oldElement.id;
-    if (!currentContentMap[oldElementId]) {
-      // deleted
-      diff.changes.push(oldElementId);
-      var elementIndex = getNearestElementIndex(diff, oldContent, oldElementId);
-      diff.value.splice(elementIndex, 0, _objectSpread(_objectSpread({}, oldElement), {}, {
-        diff_type: DIFF_TYPE.DELETE
-      }));
+  var _generateIdMapAndIds3 = generateIdMapAndIds(currentContent),
+    currentContentMap = _generateIdMapAndIds3.map,
+    currentIds = _generateIdMapAndIds3.ids;
+  var _generateIdMapAndIds4 = generateIdMapAndIds(oldContent),
+    oldContentMap = _generateIdMapAndIds4.map,
+    oldIds = _generateIdMapAndIds4.ids;
+  var diffs = getIdDiffs(oldIds, currentIds);
+  diffs.forEach(function (diffItem) {
+    var elementIds = diffItem.value;
+    if (diffItem.removed) {
+      elementIds.forEach(function (elementId) {
+        diff.changes.push(elementId);
+        var element = oldContentMap[elementId];
+        var diffElement = generatorDiffElement(element, 'DELETE', DELETED_STYLE);
+        diff.value.push(diffElement);
+      });
+    } else if (diffItem.added) {
+      elementIds.forEach(function (elementId) {
+        diff.changes.push(elementId);
+        var element = currentContentMap[elementId];
+        var diffElement = generatorDiffElement(element, 'ADD', ADDED_STYLE);
+        diff.value.push(diffElement);
+      });
+    } else {
+      elementIds.forEach(function (elementId) {
+        var element = currentContentMap[elementId];
+        updateDiffValue(diff, element, oldContentMap[element.id]);
+      });
     }
   });
   return diff;
@@ -180,10 +261,16 @@ export var getDiff = function getDiff() {
   var oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     children: []
   };
-  var currentVersion = currentValue.version,
-    currentContent = currentValue.children;
-  var oldVersion = oldValue.version,
-    oldContent = oldValue.children;
+  var _currentValue$childre = _objectSpread(_objectSpread({}, currentValue), {}, {
+      children: normalizeChildren(currentValue.children)
+    }),
+    currentVersion = _currentValue$childre.version,
+    currentContent = _currentValue$childre.children;
+  var _oldValue$children = _objectSpread(_objectSpread({}, oldValue), {}, {
+      children: normalizeChildren(oldValue.children)
+    }),
+    oldVersion = _oldValue$children.version,
+    oldContent = _oldValue$children.children;
   if (currentVersion === oldVersion) return {
     value: currentContent,
     changes: []

package/dist/basic-sdk/utils/document-utils.js

@@ -0,0 +1,18 @@
+import ObjectUtils from './object-utils';
+import { generateDefaultText } from '../../basic-sdk/extension/core/utils/index';
+export var normalizeChildren = function normalizeChildren(children) {
+  // text
+  if (!Array.isArray(children)) return children;
+
+  // element
+  if (Array.isArray(children) && children.length === 0) return [generateDefaultText()];
+  return children.map(function (child) {
+    // child is text
+    if (ObjectUtils.hasProperty(child, 'text') && !ObjectUtils.hasProperty(child, 'children')) {
+      return child;
+    }
+    // child is element
+    child.children = normalizeChildren(child.children);
+    return child;
+  });
+};

package/dist/basic-sdk/viewer.js

@@ -1,74 +1,56 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
 import { Editable, Slate } from '@seafile/slate-react';
-import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from './extension';
+import defaultEditor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from './extension';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import { generateDefaultDocContent } from '../utils';
-var SDocViewer = /*#__PURE__*/function (_React$Component) {
-  _inherits(SDocViewer, _React$Component);
-  var _super = _createSuper(SDocViewer);
-  function SDocViewer(props) {
-    var _this;
-    _classCallCheck(this, SDocViewer);
-    _this = _super.call(this, props);
-    var _ref = props.document || generateDefaultDocContent(),
-      children = _ref.children;
-    _this.state = {
-      slateValue: children,
-      isLoading: true
-    };
-    _this.socketManager = null;
-    if (!props.isOpenSocket) {
-      _this.editor = withNodeId(editor);
-    } else {
-      var document = props.document,
-        config = props.config;
-      _this.editor = withSocketIO(withNodeId(editor, {
-        document: document,
-        config: config
-      }));
-    }
-    return _this;
-  }
-  _createClass(SDocViewer, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var slateValue = this.state.slateValue;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-container"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-editor-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "flex-fill o-auto"
-      }, /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: slateValue,
-        onChange: function onChange() {}
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "article mx-auto"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        readOnly: true,
-        placeholder: "",
-        renderElement: function renderElement(props) {
-          return _renderElement(props, _this2.editor);
-        },
-        renderLeaf: function renderLeaf(props) {
-          return _renderLeaf(props, _this2.editor);
-        },
-        onDOMBeforeInput: function onDOMBeforeInput(event) {}
-      }))))));
-    }
-  }]);
-  return SDocViewer;
-}(React.Component);
-SDocViewer.defaultProps = {
-  isOpenSocket: false
+var SDocViewer = function SDocViewer(_ref) {
+  var isOpenSocket = _ref.isOpenSocket,
+    document = _ref.document,
+    config = _ref.config,
+    customRenderLeaf = _ref.renderLeaf,
+    customRenderElement = _ref.renderElement;
+  var editor = !isOpenSocket ? withNodeId(defaultEditor) : withSocketIO(withNodeId(defaultEditor, {
+    document: document,
+    config: config
+  }));
+  var slateValue = (document || generateDefaultDocContent()).children;
+  var articleRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    setUpdate = _useState2[1];
+  useEffect(function () {
+    editor.width = articleRef.current.children[0].clientWidth;
+    setUpdate(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-fill o-auto sdoc-editor-article-container",
+    id: "sdoc-editor-article-container"
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: function onChange() {}
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article mx-auto",
+    ref: articleRef
+  }, /*#__PURE__*/React.createElement(Editable, {
+    readOnly: true,
+    placeholder: "",
+    renderElement: function renderElement(props) {
+      return (customRenderElement || _renderElement)(props, editor);
+    },
+    renderLeaf: function renderLeaf(props) {
+      return (customRenderLeaf || _renderLeaf)(props, editor);
+    },
+    onDOMBeforeInput: function onDOMBeforeInput(event) {}
+  }))))));
 };
 export default SDocViewer;

package/dist/constants/index.js

@@ -2,4 +2,5 @@ export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
   TOGGLE_STAR: 'toggle_star',
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
-};
+};
+export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/context.js

@@ -101,6 +101,26 @@ var Context = /*#__PURE__*/function () {
         avatar_url: avatarURL
       };
     }
+  }, {
+    key: "listComments",
+    value: function listComments() {
+      return this.sdocServerApi.listComments();
+    }
+  }, {
+    key: "insertComment",
+    value: function insertComment(comment) {
+      return this.sdocServerApi.insertComment(comment);
+    }
+  }, {
+    key: "deleteComment",
+    value: function deleteComment(commentId) {
+      return this.sdocServerApi.deleteComment(commentId);
+    }
+  }, {
+    key: "updateComment",
+    value: function updateComment(commentId, newComment) {
+      return this.sdocServerApi.updateComment(commentId, newComment);
+    }
   }]);
   return Context;
 }();