@seafile/sdoc-editor 2.0.81 → 2.0.83

package/dist/node-id/helpers.js

@@ -0,0 +1,138 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+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"));
+var decorateOperation = exports.decorateOperation = function decorateOperation(editor, operation) {
+  var newOperation = (0, _deepCopy["default"])(operation);
+  var type = newOperation.type;
+  switch (type) {
+    case OPERATION.INSERT_TEXT:
+    case OPERATION.REMOVE_TEXT:
+      {
+        var path = newOperation.path;
+        var node = _slate.Node.get(editor, path);
+        newOperation['node_id'] = node.id;
+        break;
+      }
+    case OPERATION.INSERT_NODE:
+      {
+        var _path = newOperation.path,
+          _node = newOperation.node;
+        if (!_node.id) _node.id = _slugid["default"].nice(); // generate an id for insert node
+
+        var parent = _slate.Node.parent(editor, _path);
+        newOperation['parent_node_id'] = parent.id;
+        break;
+      }
+    case OPERATION.REMOVE_NODE:
+      {
+        var _path2 = newOperation.path;
+        var _node2 = _slate.Node.get(editor, _path2);
+        newOperation['node_id'] = _node2.id; // remove node's id
+        break;
+      }
+    case OPERATION.MERGE_NODE:
+      {
+        // merge next node into prev node
+        var _path3 = newOperation.path;
+        var _node3 = _slate.Node.get(editor, _path3);
+        newOperation['node_id'] = _node3.id;
+        break;
+      }
+    case OPERATION.SPLIT_NODE:
+      {
+        // child: split [7, 0] -> [[7, 0],[7, 1]]
+        // parent: split [[7, 0], [7, 1]] -> [[7], [8]]
+        var _path4 = newOperation.path,
+          _newOperation$propert = newOperation.properties,
+          properties = _newOperation$propert === void 0 ? {} : _newOperation$propert;
+        // need generate a new id for new node
+        properties.id = _slugid["default"].nice();
+        var _node4 = _slate.Node.get(editor, _path4);
+        newOperation['node_id'] = _node4.id; // split node's id
+        break;
+      }
+    case OPERATION.SET_NODE:
+      {
+        var _path5 = newOperation.path;
+        var _node5 = _slate.Node.get(editor, _path5);
+        newOperation['node_id'] = _node5.id; // the node which will be set to another type
+        break;
+      }
+    case OPERATION.MOVE_NODE:
+      {
+        var _path6 = newOperation.path;
+        var _node6 = _slate.Node.get(editor, _path6);
+        // move operation not change the node's id
+        newOperation['node_id'] = _node6.id; // moved node's id
+        break;
+      }
+    default:
+      {
+        // set_selection
+        break;
+      }
+  }
+  return newOperation;
+};
+var replaceNodeId = exports.replaceNodeId = function replaceNodeId(node) {
+  if (!_objectUtils["default"].isObject(node)) return node;
+  if (_objectUtils["default"].hasProperty(node, 'children')) {
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+      id: _slugid["default"].nice(),
+      children: _replacePastedDataId(node.children)
+    });
+  }
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+    id: _slugid["default"].nice()
+  });
+};
+var _replacePastedDataId = exports.replacePastedDataId = function 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(function (item) {
+    item.id = _slugid["default"].nice();
+    if (item.children) {
+      item.children = _replacePastedDataId(item.children);
+    }
+    return item;
+  });
+};
+var removeCommentMarks = exports.removeCommentMarks = function removeCommentMarks(fragment) {
+  var _cleanNode = function cleanNode(node) {
+    if (_slate.Text.isText(node)) {
+      var newNode = (0, _objectSpread2["default"])({}, node);
+      for (var _i = 0, _Object$keys = Object.keys(newNode); _i < _Object$keys.length; _i++) {
+        var key = _Object$keys[_i];
+        if (key.startsWith('sdoc_comment') || key.startsWith('removed_')) {
+          delete newNode[key];
+        }
+      }
+      return newNode;
+    }
+    if (node.children) {
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+        children: node.children.map(_cleanNode)
+      });
+    }
+    return node;
+  };
+  return fragment.map(_cleanNode);
+};

package/dist/node-id/index.js

@@ -0,0 +1,74 @@
+"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");
+var withNodeId = function withNodeId(editor) {
+  var apply = editor.apply,
+    insertText = editor.insertText;
+  var newEditor = editor;
+  newEditor.apply = function (op) {
+    var newOp = (0, _helpers.decorateOperation)(newEditor, op);
+    apply(newOp);
+  };
+  newEditor.insertText = function (text) {
+    var selection = editor.selection;
+    // Remove context comment marks when inserting position has comment before selection and no comment after selection
+    if (selection && _slate.Range.isCollapsed(selection)) {
+      var beforePoint = _slate.Editor.before(editor, selection.focus, {
+        unit: 'character'
+      });
+      var afterPoint = _slate.Editor.after(editor, selection.focus, {
+        unit: 'character'
+      });
+      var beforeText = beforePoint && _slate.Editor.node(editor, beforePoint);
+      var afterText = afterPoint && _slate.Editor.node(editor, afterPoint);
+      var hasCommentBefore = beforeText && _slate.Text.isText(beforeText[0]) && Object.keys(beforeText[0]).some(function (k) {
+        return k.includes('sdoc_comment');
+      });
+      var hasCommentAfter = afterText && _slate.Text.isText(afterText[0]) && Object.keys(afterText[0]).some(function (k) {
+        return k.includes('sdoc_comment');
+      });
+      var hasTrueCommentAfter = afterText && _slate.Text.isText(afterText[0]) && Object.keys(afterText[0]).filter(function (k) {
+        return k.includes('sdoc_comment');
+      }).some(function (k) {
+        return afterText[0][k];
+      });
+      if (hasCommentBefore && (!hasCommentAfter || !hasTrueCommentAfter)) {
+        var marks = _slate.Editor.marks(editor);
+        if (marks) {
+          for (var _i = 0, _Object$keys = Object.keys(marks); _i < _Object$keys.length; _i++) {
+            var key = _Object$keys[_i];
+            if (key.includes('sdoc_comment')) {
+              _slate.Editor.removeMark(editor, key);
+            }
+          }
+        }
+      }
+    }
+    insertText(text);
+  };
+
+  // rewrite insert fragment data
+  newEditor.insertFragmentData = function (data) {
+    var fragment = data.getData("application/".concat(_constants.CLIPBOARD_FORMAT_KEY)) || (0, _documentUtils.getSlateFragmentAttribute)(data);
+    if (fragment) {
+      var decoded = decodeURIComponent(window.atob(fragment));
+      var parsed = JSON.parse(decoded);
+
+      // Clean context comment style when pasting commented context
+      var cleaned = (0, _helpers.removeCommentMarks)(parsed);
+      var newData = (0, _helpers.replacePastedDataId)(cleaned);
+      var normalizeNewData = (0, _documentUtils.normalizeCopyNodes)(newEditor, newData);
+      newEditor.insertFragment(normalizeNewData);
+      return newEditor;
+    }
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withNodeId;

package/dist/outline/index.js

@@ -0,0 +1,94 @@
+"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.setOutlineSetting = exports.getOutlineSetting = exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../components/tooltip"));
+var _constants = require("../constants");
+var _context = _interopRequireDefault(require("../context"));
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _outlineItem = _interopRequireDefault(require("./outline-item"));
+require("./style.css");
+var getOutlineSetting = exports.getOutlineSetting = function getOutlineSetting() {
+  var currentValue = localStorage.getItem(_constants.SDOC_STORAGE);
+  var config = currentValue ? JSON.parse(currentValue) : {};
+  var _config$outlineOpen = config.outlineOpen,
+    outlineOpen = _config$outlineOpen === void 0 ? false : _config$outlineOpen;
+  return outlineOpen;
+};
+var setOutlineSetting = exports.setOutlineSetting = function setOutlineSetting(isShown) {
+  var currentValue = localStorage.getItem(_constants.SDOC_STORAGE);
+  var config = currentValue ? JSON.parse(currentValue) : {};
+  config['outlineOpen'] = isShown;
+  localStorage.setItem(_constants.SDOC_STORAGE, JSON.stringify(config));
+};
+var SDocOutline = function SDocOutline(_ref) {
+  var scrollLeft = _ref.scrollLeft,
+    doc = _ref.doc,
+    t = _ref.t;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShown = _useState2[0],
+    setIsShown = _useState2[1];
+  var isSdocRevision = _context["default"].getSetting('isSdocRevision');
+  var updateOutlineState = (0, _react.useCallback)(function (state) {
+    setIsShown(state);
+    setOutlineSetting(state);
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.OUTLINE_STATE_CHANGED);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var outlineState = getOutlineSetting();
+    updateOutlineState(outlineState);
+  }, [updateOutlineState]);
+  var toggleShow = (0, _react.useCallback)(function () {
+    updateOutlineState(!isShown);
+  }, [isShown, updateOutlineState]);
+  var list = (0, _react.useMemo)(function () {
+    return doc === null || doc === void 0 ? void 0 : doc.filter(function (item) {
+      return ['header1', 'header2', 'header3'].includes(item.type);
+    });
+  }, [doc]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-outline-wrapper', {
+      active: isShown
+    }),
+    style: {
+      left: -scrollLeft
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline"
+  }, isShown && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline-header"
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    className: "sdoc-outline-header__title"
+  }, t('Outline')), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-outline-header__close sdocfont sdoc-cancel",
+    onClick: toggleShow
+  })), list.length === 0 && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "mt-4 text-secondary"
+  }, t('Headings_you_add_to_the_document_will_appear_here')), list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline-list-container"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
+      key: index,
+      item: item,
+      isSdocRevision: isSdocRevision
+    });
+  })))), !isShown && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+    id: "sdoc-outline-menu",
+    className: "sdoc-outline-menu sdocfont sdoc-table-of-content-outline",
+    onClick: toggleShow
+  }), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    placement: "right",
+    target: "sdoc-outline-menu"
+  }, t('Outline'))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(SDocOutline);

package/dist/outline/outline-item.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+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 _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../constants");
+var _constants2 = require("../extension/constants");
+var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
+  function OutlineItem(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, OutlineItem);
+    _this = (0, _callSuper2["default"])(this, OutlineItem, [props]);
+    (0, _defineProperty2["default"])(_this, "onItemClick", function () {
+      var item = _this.props.item;
+      var id = item.id;
+      document.getElementById(id).scrollIntoView();
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseOver", function () {
+      _this.setState({
+        isHighlighted: true
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onMouseOut", function () {
+      _this.setState({
+        isHighlighted: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "getOutlineItemClass", function () {
+      var isHighlighted = _this.state.isHighlighted;
+      var _this$props = _this.props,
+        item = _this$props.item,
+        isDisplayHorizontalBar = _this$props.isDisplayHorizontalBar;
+      var type = item.type,
+        isActive = item.isActive;
+      var outlineItemClass = null;
+      outlineItemClass = (0, _classnames["default"])('sdoc-outline-item', {
+        'pl-5': type === 'header2',
+        'pl-7': type === 'header3',
+        'active': isHighlighted,
+        'wiki-outline-active': isActive
+      });
+      if (isDisplayHorizontalBar) {
+        outlineItemClass = (0, _classnames["default"])('sdoc-outline-item', {
+          'pl-1': type === 'header2',
+          'pl-2': type === 'header3',
+          'active': isHighlighted
+        });
+      }
+      return outlineItemClass;
+    });
+    _this.state = {
+      isHighlighted: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(OutlineItem, _React$PureComponent);
+  return (0, _createClass2["default"])(OutlineItem, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        isDisplayHorizontalBar = _this$props2.isDisplayHorizontalBar,
+        isSdocRevision = _this$props2.isSdocRevision;
+      var type = item.type,
+        children = item.children,
+        isActive = item.isActive;
+      var outlineItemClass = this.getOutlineItemClass();
+      if (isDisplayHorizontalBar) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: outlineItemClass
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: (0, _classnames["default"])('wiki-outline-context', {
+            'active': isActive
+          }),
+          style: {
+            width: _constants.HEADER_OUTLINE_WIDTH_MAPPING[type]
+          }
+        }));
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: outlineItemClass,
+        onClick: this.onItemClick,
+        onMouseOver: this.onMouseOver,
+        onMouseOut: this.onMouseOut
+      }, !isSdocRevision && children.map(function (child) {
+        return child.text || child.title;
+      }).join(''), isSdocRevision && children.map(function (child) {
+        var text = child.text || child.title;
+        var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child.add && _constants2.ADDED_STYLE), child["delete"] && _constants2.DELETED_STYLE), {}, {
+          backgroundColor: child.computed_background_color || undefined
+        });
+        var key = child.id;
+        var content = /*#__PURE__*/_react["default"].createElement("span", {
+          style: style,
+          key: key
+        }, text);
+        return child["delete"] ? /*#__PURE__*/_react["default"].createElement("del", {
+          key: key
+        }, content) : content;
+      }));
+    }
+  }]);
+}(_react["default"].PureComponent);
+var _default = exports["default"] = OutlineItem;

package/dist/outline/wiki-outline.js

@@ -0,0 +1,119 @@
+"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 _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _useScrollContext = require("../hooks/use-scroll-context");
+var _outlineItem = _interopRequireDefault(require("./outline-item"));
+require("./style.css");
+var WikiOutline = function WikiOutline(_ref) {
+  var _ref$doc = _ref.doc,
+    doc = _ref$doc === void 0 ? [] : _ref$doc;
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var wikiOutlineRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    wikiOutlineList = _useState2[0],
+    setWikiOutlineList = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isShowOutlinePopover = _useState4[0],
+    setIsShowOutlinePopover = _useState4[1];
+  var onMouseOver = (0, _react.useCallback)(function () {
+    if (!isShowOutlinePopover) {
+      setIsShowOutlinePopover(true);
+    }
+  }, [isShowOutlinePopover]);
+  var updateWikiOutlineList = (0, _react.useCallback)(function () {
+    var list = doc.filter(function (item) {
+      return ['header1', 'header2', 'header3'].includes(item.type);
+    });
+    if (list.length === 0) {
+      setWikiOutlineList([]);
+      return;
+    }
+
+    // The slateValue value in the document cannot be operated, so copy it for operation
+    var newList = JSON.parse(JSON.stringify(list));
+    var index = list.findIndex(function (item) {
+      var id = item.id;
+      var el = document.getElementById(id);
+      if (el) {
+        var _el$getBoundingClient = el.getBoundingClientRect(),
+          bottom = _el$getBoundingClient.bottom;
+        if (bottom >= 43) {
+          // 43 is Top toolbar height
+          return true;
+        }
+      }
+      return false;
+    });
+
+    // There is a title in the visible area
+    if (index !== -1) {
+      newList[index]['isActive'] = true;
+    }
+    // There is no title in the visible area
+    if (index === -1) {
+      var lastItemId = list[list.length - 1].id;
+      var lastItemEl = document.getElementById(lastItemId);
+      if (lastItemEl) {
+        var _lastItemEl$getBoundi = lastItemEl.getBoundingClientRect(),
+          top = _lastItemEl$getBoundi.top;
+        if (top < 0) {
+          newList[newList.length - 1]['isActive'] = true;
+        }
+      }
+    }
+    setWikiOutlineList((0, _toConsumableArray2["default"])(newList));
+  }, [doc]);
+  var onScroll = (0, _lodash["default"])(function () {
+    updateWikiOutlineList();
+  }, 200);
+  (0, _react.useEffect)(function () {
+    updateWikiOutlineList();
+    var curRef = null;
+    curRef = scrollRef.current;
+    scrollRef.current.addEventListener('scroll', onScroll);
+    return function () {
+      curRef && curRef.removeEventListener('scroll', onScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [doc]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline-wrapper wiki-outline-wrapper",
+    onMouseLeave: function onMouseLeave() {
+      setIsShowOutlinePopover(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline"
+  }, wikiOutlineList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline-list-container",
+    onMouseOver: onMouseOver
+  }, wikiOutlineList.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
+      key: index,
+      item: item,
+      isDisplayHorizontalBar: true
+    });
+  }))), isShowOutlinePopover && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "wiki-outline-popover",
+    ref: wikiOutlineRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-outline-list-container"
+  }, wikiOutlineList.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement(_outlineItem["default"], {
+      key: index,
+      item: item
+    });
+  }))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(WikiOutline);

package/dist/right-panel/index.js

@@ -0,0 +1,95 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+var _usePlugins2 = require("../hooks/use-plugins");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
+var _resizeWidth = _interopRequireDefault(require("./resize-width"));
+require("./index.css");
+var MIN_PANEL_WIDTH = 360;
+var MAX_PANEL_WIDTH = 620;
+var RightPanel = function RightPanel(_ref) {
+  var editor = _ref.editor;
+  var _usePlugins = (0, _usePlugins2.usePlugins)(),
+    plugins = _usePlugins.plugins,
+    displayPluginName = _usePlugins.displayPluginName,
+    closePlugin = _usePlugins.closePlugin;
+  var _useState = (0, _react.useState)(MIN_PANEL_WIDTH),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var panelWrapperStyle = (0, _react.useMemo)(function () {
+    if (!displayPluginName) return null;
+    var style = {
+      width: width,
+      zIndex: 101
+    };
+    if (!style.width || style.width < MIN_PANEL_WIDTH) {
+      style.width = MIN_PANEL_WIDTH;
+    } else if (style.width > MAX_PANEL_WIDTH) {
+      style.width = MAX_PANEL_WIDTH;
+    }
+    return style;
+  }, [width, displayPluginName]);
+  var resizeWidth = (0, _react.useCallback)(function (width) {
+    setWidth(width);
+  }, []);
+  var resizeWidthEnd = (0, _react.useCallback)(function (width) {
+    var settings = _localStorageUtils["default"].getItem(_constants.SDOC_STORAGE) || {};
+    _localStorageUtils["default"].setItem(_constants.SDOC_STORAGE, JSON.stringify((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, settings), {}, {
+      panelWidth: width
+    })));
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var settings = _localStorageUtils["default"].getItem(_constants.SDOC_STORAGE) || {};
+    var panelWidth = settings.panelWidth;
+    var width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
+    setWidth(width);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var isShowGlobalComments = displayPluginName === 'sdoc-comment' ? true : false;
+    var settings = _localStorageUtils["default"].getItem(_constants.SDOC_STORAGE) || {};
+    _localStorageUtils["default"].setItem(_constants.SDOC_STORAGE, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, settings), {}, {
+      isShowGlobalComments: isShowGlobalComments
+    }));
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
+  }, [displayPluginName]);
+  if (!displayPluginName) return null;
+  var plugin = plugins.find(function (p) {
+    return p.name === displayPluginName;
+  });
+  if (!plugin) return null;
+  if (plugin.display_type && plugin.display_type !== _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL) return null;
+  var Component = plugin.component;
+  if (!Component) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-content-right-panel-wrapper",
+    style: panelWrapperStyle
+  }, plugin.resizable_width && /*#__PURE__*/_react["default"].createElement(_resizeWidth["default"], {
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    resizeWidth: resizeWidth,
+    resizeWidthEnd: resizeWidthEnd
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-content-right-panel",
+    id: "sdoc-content-right-panel"
+  }, /*#__PURE__*/_react["default"].createElement(Component, {
+    editor: editor,
+    type: "global",
+    onClose: closePlugin,
+    width: width
+  })));
+};
+var _default = exports["default"] = RightPanel;