@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/index.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CollaboratorsProvider", {
+  enumerable: true,
+  get: function () {
+    return _useCollaborators.CollaboratorsProvider;
+  }
+});
+Object.defineProperty(exports, "DropdownMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _dropdownMenuItem.default;
+  }
+});
+Object.defineProperty(exports, "EventBus", {
+  enumerable: true,
+  get: function () {
+    return _eventBus.default;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_MODE", {
+  enumerable: true,
+  get: function () {
+    return _constants.FULL_WIDTH_MODE;
+  }
+});
+Object.defineProperty(exports, "FileLoading", {
+  enumerable: true,
+  get: function () {
+    return _fileLoading.default;
+  }
+});
+Object.defineProperty(exports, "INTERNAL_EVENT", {
+  enumerable: true,
+  get: function () {
+    return _constants.INTERNAL_EVENT;
+  }
+});
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function () {
+    return _loading.default;
+  }
+});
+Object.defineProperty(exports, "LocalStorage", {
+  enumerable: true,
+  get: function () {
+    return _localStorageUtils.default;
+  }
+});
+Object.defineProperty(exports, "MenuShortcutPrompt", {
+  enumerable: true,
+  get: function () {
+    return _menuShortcutIndicator.default;
+  }
+});
+Object.defineProperty(exports, "Provider", {
+  enumerable: true,
+  get: function () {
+    return _provider.default;
+  }
+});
+Object.defineProperty(exports, "RightPanel", {
+  enumerable: true,
+  get: function () {
+    return _rightPanel.default;
+  }
+});
+Object.defineProperty(exports, "SDocEditor", {
+  enumerable: true,
+  get: function () {
+    return _sdocEditor.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _tooltip.default;
+  }
+});
+Object.defineProperty(exports, "WIKI_EDITOR_EDIT_AREA_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.WIKI_EDITOR_EDIT_AREA_WIDTH;
+  }
+});
+Object.defineProperty(exports, "context", {
+  enumerable: true,
+  get: function () {
+    return _context.default;
+  }
+});
+Object.defineProperty(exports, "createCommentEditor", {
+  enumerable: true,
+  get: function () {
+    return _extension.createCommentEditor;
+  }
+});
+Object.defineProperty(exports, "createDefaultEditor", {
+  enumerable: true,
+  get: function () {
+    return _extension.createDefaultEditor;
+  }
+});
+Object.defineProperty(exports, "deserializeHtml", {
+  enumerable: true,
+  get: function () {
+    return _slateConvert.deserializeHtml;
+  }
+});
+Object.defineProperty(exports, "getRebase", {
+  enumerable: true,
+  get: function () {
+    return _rebase.getRebase;
+  }
+});
+Object.defineProperty(exports, "isMac", {
+  enumerable: true,
+  get: function () {
+    return _commonUtils.isMac;
+  }
+});
+Object.defineProperty(exports, "isMobile", {
+  enumerable: true,
+  get: function () {
+    return _commonUtils.isMobile;
+  }
+});
+Object.defineProperty(exports, "mdStringToSlate", {
+  enumerable: true,
+  get: function () {
+    return _slateConvert.mdStringToSlate;
+  }
+});
+Object.defineProperty(exports, "processor", {
+  enumerable: true,
+  get: function () {
+    return _slateConvert.processor;
+  }
+});
+Object.defineProperty(exports, "slateToMdString", {
+  enumerable: true,
+  get: function () {
+    return _slateConvert.slateToMdString;
+  }
+});
+Object.defineProperty(exports, "toaster", {
+  enumerable: true,
+  get: function () {
+    return _toast.default;
+  }
+});
+Object.defineProperty(exports, "useCollaborators", {
+  enumerable: true,
+  get: function () {
+    return _useCollaborators.useCollaborators;
+  }
+});
+Object.defineProperty(exports, "withNodeId", {
+  enumerable: true,
+  get: function () {
+    return _nodeId.default;
+  }
+});
+Object.defineProperty(exports, "withSocketIO", {
+  enumerable: true,
+  get: function () {
+    return _socket.withSocketIO;
+  }
+});
+var _provider = _interopRequireDefault(require("./comment/provider"));
+var _fileLoading = _interopRequireDefault(require("./components/file-loading"));
+var _loading = _interopRequireDefault(require("./components/loading"));
+var _toast = _interopRequireDefault(require("./components/toast"));
+var _tooltip = _interopRequireDefault(require("./components/tooltip"));
+var _constants = require("./constants");
+var _context = _interopRequireDefault(require("./context"));
+var _sdocEditor = _interopRequireDefault(require("./editor/sdoc-editor"));
+var _extension = require("./extension");
+var _dropdownMenuItem = _interopRequireDefault(require("./extension/commons/dropdown-menu-item"));
+var _menuShortcutIndicator = _interopRequireDefault(require("./extension/commons/menu-shortcut-indicator"));
+var _useCollaborators = require("./hooks/use-collaborators");
+var _nodeId = _interopRequireDefault(require("./node-id"));
+var _rightPanel = _interopRequireDefault(require("./right-panel"));
+var _slateConvert = require("./slate-convert");
+var _socket = require("./socket");
+var _commonUtils = require("./utils/common-utils");
+var _eventBus = _interopRequireDefault(require("./utils/event-bus"));
+var _localStorageUtils = _interopRequireDefault(require("./utils/local-storage-utils"));
+var _rebase = require("./utils/rebase");

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

@@ -0,0 +1,89 @@
+"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 = ArticleContainer;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _defaultMode = require("../utils/default-mode");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _fullWidthMode = require("../utils/full-width-mode");
+var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
+function ArticleContainer(_ref) {
+  let {
+    editor,
+    children
+  } = _ref;
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const articleRef = (0, _react.useRef)(null);
+  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    editor.width = articleRef.current.children[0].clientWidth;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleWindowResize = (0, _react.useCallback)(function () {
+    let {
+      scrollIntoArticle = false,
+      isFullWidth = _localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // Full width mode
+    if (isFullWidth) {
+      const containerStyle = (0, _fullWidthMode.getStyleByFullWidthMode)(scrollRef, editor);
+      setContainerStyle(containerStyle);
+      return;
+    }
+
+    // Default mode
+    const containerStyle = (0, _defaultMode.getStyleByDefaultMode)(scrollRef, editor);
+    setContainerStyle(containerStyle);
+    if (scrollIntoArticle) {
+      articleRef.current.scrollIntoView({
+        inline: 'start',
+        block: 'nearest'
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.editorType, scrollRef]);
+  (0, _react.useEffect)(() => {
+    if (editor.editorType === _constants.DOCUMENT_PLUGIN_EDITOR) return;
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeOutline = eventBus.subscribe(_constants.INTERNAL_EVENT.OUTLINE_STATE_CHANGED, handleWindowResize);
+    const unsubscribeResizeArticle = eventBus.subscribe(_constants.INTERNAL_EVENT.RESIZE_ARTICLE, handleWindowResize);
+    return () => {
+      unsubscribeOutline();
+      unsubscribeResizeArticle();
+    };
+  }, [editor.editorType, handleWindowResize]);
+  (0, _react.useEffect)(() => {
+    if (editor.editorType === _constants.WIKI_EDITOR) return;
+    if (editor.editorType === _constants.DOCUMENT_PLUGIN_EDITOR) return;
+    handleWindowResize();
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const articleStyle = editor.getArticleStyle && editor.getArticleStyle();
+  const articleContainerStyle = editor.getArticleStyle ? {
+    width: articleStyle.width
+  } : containerStyle;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-article-container",
+    style: articleContainerStyle
+  }, _react.default.Children.count(children) === 1 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "article sdoc-editor__article",
+    style: articleStyle,
+    id: "sdoc-editor-print-wrapper",
+    ref: articleRef
+  }, children), _react.default.Children.count(children) > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "article sdoc-editor__article",
+    style: articleStyle,
+    id: "sdoc-editor-print-wrapper",
+    ref: articleRef
+  }, children[0]), [...children.slice(1)]));
+}

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

@@ -0,0 +1,32 @@
+"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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _notification.default;
+  }
+});
+Object.defineProperty(exports, "User", {
+  enumerable: true,
+  get: function () {
+    return _user.default;
+  }
+});
+var _user = _interopRequireDefault(require("./user"));
+var _notification = _interopRequireDefault(require("./notification"));

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

@@ -0,0 +1,18 @@
+"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/basic-sdk/model/user.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+class User {
+  constructor(options) {
+    this.name = options.name || '';
+    this.username = options.email || options.username || '';
+    this.email = this.username;
+    this.contact_email = options.contact_email || '';
+    this.avatar_url = options.avatar_url || '';
+    this.name_pinyin = options.name_pinyin || '';
+  }
+}
+var _default = exports.default = User;

package/dist/basic-sdk/node-id/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SPLIT_NODE = exports.SET_SELECTION = exports.SET_NODE = exports.REMOVE_TEXT = exports.REMOVE_NODE = exports.MOVE_NODE = exports.MERGE_NODE = exports.INSERT_TEXT = exports.INSERT_NODE = void 0;
+// insert_node & remove_node
+const INSERT_TEXT = exports.INSERT_TEXT = 'insert_text';
+const REMOVE_TEXT = exports.REMOVE_TEXT = 'remove_text';
+
+// insert_node & remove_node
+const INSERT_NODE = exports.INSERT_NODE = 'insert_node';
+const REMOVE_NODE = exports.REMOVE_NODE = 'remove_node';
+
+// merge_node  & split_node
+const MERGE_NODE = exports.MERGE_NODE = 'merge_node';
+const SPLIT_NODE = exports.SPLIT_NODE = 'split_node';
+
+// set_node & move_node
+const SET_NODE = exports.SET_NODE = 'set_node';
+const MOVE_NODE = exports.MOVE_NODE = 'move_node';
+
+// set_selection
+const SET_SELECTION = exports.SET_SELECTION = 'set_selection';

package/dist/basic-sdk/node-id/helpers.js

@@ -0,0 +1,160 @@
+"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.replacePastedDataId = exports.replaceNodeId = exports.removeCommentMarks = exports.decorateOperation = void 0;
+var _slate = require("@seafile/slate");
+var _deepCopy = _interopRequireDefault(require("deep-copy"));
+var _slugid = _interopRequireDefault(require("slugid"));
+var _objectUtils = _interopRequireDefault(require("../utils/object-utils"));
+var OPERATION = _interopRequireWildcard(require("./constants"));
+const decorateOperation = (editor, operation) => {
+  let newOperation = (0, _deepCopy.default)(operation);
+  const {
+    type
+  } = newOperation;
+  switch (type) {
+    case OPERATION.INSERT_TEXT:
+    case OPERATION.REMOVE_TEXT:
+      {
+        const {
+          path
+        } = newOperation;
+        const node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id;
+        break;
+      }
+    case OPERATION.INSERT_NODE:
+      {
+        let {
+          path,
+          node
+        } = newOperation;
+        if (!node.id) node.id = _slugid.default.nice(); // generate an id for insert node
+
+        const parent = _slate.Node.parent(editor, path);
+        newOperation['parent_node_id'] = parent.id;
+        break;
+      }
+    case OPERATION.REMOVE_NODE:
+      {
+        let {
+          path
+        } = newOperation;
+        const node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id; // remove node's id
+        break;
+      }
+    case OPERATION.MERGE_NODE:
+      {
+        // merge next node into prev node
+        const {
+          path
+        } = newOperation;
+        const node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id;
+        break;
+      }
+    case OPERATION.SPLIT_NODE:
+      {
+        // child: split [7, 0] -> [[7, 0],[7, 1]]
+        // parent: split [[7, 0], [7, 1]] -> [[7], [8]]
+        const {
+          path,
+          properties = {}
+        } = newOperation;
+        // need generate a new id for new node
+        properties.id = _slugid.default.nice();
+        const node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id; // split node's id
+        break;
+      }
+    case OPERATION.SET_NODE:
+      {
+        const {
+          path
+        } = newOperation;
+        const node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id; // the node which will be set to another type
+        break;
+      }
+    case OPERATION.MOVE_NODE:
+      {
+        const {
+          path
+        } = newOperation;
+        const node = _slate.Node.get(editor, path);
+        // move operation not change the node's id
+        newOperation['node_id'] = node.id; // moved node's id
+        break;
+      }
+    default:
+      {
+        // set_selection
+        break;
+      }
+  }
+  return newOperation;
+};
+exports.decorateOperation = decorateOperation;
+const replaceNodeId = node => {
+  if (!_objectUtils.default.isObject(node)) return node;
+  if (_objectUtils.default.hasProperty(node, 'children')) {
+    return {
+      ...node,
+      id: _slugid.default.nice(),
+      children: replacePastedDataId(node.children)
+    };
+  }
+  return {
+    ...node,
+    id: _slugid.default.nice()
+  };
+};
+exports.replaceNodeId = replaceNodeId;
+const replacePastedDataId = pastedData => {
+  // If children is malformed, return a list of correct child nodes
+
+  if (_objectUtils.default.isObject(pastedData)) {
+    return replaceNodeId(pastedData);
+  }
+  if (!Array.isArray(pastedData)) return [{
+    id: _slugid.default.nice(),
+    text: ''
+  }];
+  return pastedData.map(item => {
+    item.id = _slugid.default.nice();
+    if (item.children) {
+      item.children = replacePastedDataId(item.children);
+    }
+    return item;
+  });
+};
+exports.replacePastedDataId = replacePastedDataId;
+const removeCommentMarks = fragment => {
+  const cleanNode = node => {
+    if (_slate.Text.isText(node)) {
+      const newNode = {
+        ...node
+      };
+      for (const key of Object.keys(newNode)) {
+        if (key.startsWith('sdoc_comment') || key.startsWith('removed_')) {
+          delete newNode[key];
+        }
+      }
+      return newNode;
+    }
+    if (node.children) {
+      return {
+        ...node,
+        children: node.children.map(cleanNode)
+      };
+    }
+    return node;
+  };
+  return fragment.map(cleanNode);
+};
+exports.removeCommentMarks = removeCommentMarks;

package/dist/basic-sdk/node-id/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("@seafile/slate");
+var _constants = require("../extension/constants");
+var _documentUtils = require("../utils/document-utils");
+var _helpers = require("./helpers");
+const withNodeId = editor => {
+  const {
+    apply,
+    insertText
+  } = editor;
+  const newEditor = editor;
+  newEditor.apply = op => {
+    const newOp = (0, _helpers.decorateOperation)(newEditor, op);
+    apply(newOp);
+  };
+  newEditor.insertText = text => {
+    const {
+      selection
+    } = editor;
+    // Remove context comment marks when inserting position has comment before selection and no comment after selection
+    if (selection && _slate.Range.isCollapsed(selection)) {
+      const beforePoint = _slate.Editor.before(editor, selection.focus, {
+        unit: 'character'
+      });
+      const afterPoint = _slate.Editor.after(editor, selection.focus, {
+        unit: 'character'
+      });
+      const beforeText = beforePoint && _slate.Editor.node(editor, beforePoint);
+      const afterText = afterPoint && _slate.Editor.node(editor, afterPoint);
+      const hasCommentBefore = beforeText && _slate.Text.isText(beforeText[0]) && Object.keys(beforeText[0]).some(k => k.includes('sdoc_comment'));
+      const hasCommentAfter = afterText && _slate.Text.isText(afterText[0]) && Object.keys(afterText[0]).some(k => k.includes('sdoc_comment'));
+      const hasTrueCommentAfter = afterText && _slate.Text.isText(afterText[0]) && Object.keys(afterText[0]).filter(k => k.includes('sdoc_comment')).some(k => afterText[0][k]);
+      if (hasCommentBefore && (!hasCommentAfter || !hasTrueCommentAfter)) {
+        const marks = _slate.Editor.marks(editor);
+        if (marks) {
+          for (const key of Object.keys(marks)) {
+            if (key.includes('sdoc_comment')) {
+              _slate.Editor.removeMark(editor, key);
+            }
+          }
+        }
+      }
+    }
+    insertText(text);
+  };
+
+  // rewrite insert fragment data
+  newEditor.insertFragmentData = data => {
+    const fragment = data.getData(`application/${_constants.CLIPBOARD_FORMAT_KEY}`) || (0, _documentUtils.getSlateFragmentAttribute)(data);
+    if (fragment) {
+      const decoded = decodeURIComponent(window.atob(fragment));
+      const parsed = JSON.parse(decoded);
+
+      // Clean context comment style when pasting commented context
+      const cleaned = (0, _helpers.removeCommentMarks)(parsed);
+      const newData = (0, _helpers.replacePastedDataId)(cleaned);
+      const normalizeNewData = (0, _documentUtils.normalizeCopyNodes)(newEditor, newData);
+      newEditor.insertFragment(normalizeNewData);
+      return newEditor;
+    }
+  };
+  return newEditor;
+};
+var _default = exports.default = withNodeId;

package/dist/basic-sdk/right-panel/index.css

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