@seafile/seafile-editor 1.0.0 → 1.0.2

package/dist/constants/event-types.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INTERNAL_EVENTS = exports.EXTERNAL_EVENTS = void 0;
+var INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
+  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
+  ON_MOUSE_ENTER_BLOCK: 'on_mouse_enter_block',
+  ON_OPEN_LINK_POPOVER: 'on_open_link_popover',
+  ON_CLOSE_LINK_POPOVER: 'on_close_link_popover',
+  ON_OPEN_FORMULA_DIALOG: 'on_open_formula_dialog'
+};
+var EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
+  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle'
+};

package/dist/constants/hot-keys.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HELPER_HOTKEYS = void 0;
+var HELPER_HOTKEYS = exports.HELPER_HOTKEYS = [{
+  'Make_list': [['*/-', 'space']],
+  'Make_ordered_list': [['1.', 'space']],
+  'Insert_new_item': [['Enter']],
+  'Insert_child_in_item': [['Shift', 'Enter']],
+  'Increase_depth': [['Tab']]
+}, {
+  'Heading_1': [['#', 'space']],
+  'Heading_2': [['##', 'space']],
+  'Heading_3': [['###', 'space']],
+  'Heading_4': [['####', 'space']],
+  'Heading_5': [['#####', 'space']],
+  'Heading_6': [['######', 'space']]
+}, {
+  'Make_code_block': [['```']],
+  'Insert_new_line': [['Enter']],
+  'Escape_code_block': [['Ctrl', 'Enter'], ['Cmd', 'Enter']],
+  'Insert_indent': [['Tab']]
+}, {
+  'Make_block_quote': [['>', 'space']],
+  'Escape_block_quote': [['Enter']]
+}, {
+  'Insert_table_row': [['Enter']],
+  'Escape_table': [['Ctrl', 'Enter'], ['Cmd', 'Enter']]
+}, {
+  'Insert_formula': [['Ctrl', '$'], ['Cmd', '$']]
+}, {
+  'Bold': [['**bold** / __bold__', 'space']],
+  'Italic': [['*italic* / _italic_', 'space']],
+  'Italic_bold': [['***italic*** / ___italic___', 'space']],
+  'Inline_code': [['`code`', 'space']]
+}, {
+  'Save_file': [['Ctrl', 's'], ['Cmd', 's']]
+}, {
+  'Paste_screen_shot': [['Ctrl', 'v'], ['Cmd', 'v']],
+  'Drag_image_from_anywhere_to_upload_it': []
+}];

package/dist/containers/article-info/index.js

@@ -0,0 +1,57 @@
+"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 = ArticleInfo;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _outline = _interopRequireDefault(require("../outline"));
+var _slateReact = require("slate-react");
+require("./style.css");
+var TAB_TYPES = {
+  OUTLINE: 'outline',
+  FILE_DETAIL: 'file_detail'
+};
+function ArticleInfo(_ref) {
+  var children = _ref.children;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var _useState = (0, _react.useState)(TAB_TYPES.OUTLINE),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  var onOutlineClick = (0, _react.useCallback)(function () {
+    if (activeTab === TAB_TYPES.OUTLINE) return;
+    setActiveTab(TAB_TYPES.OUTLINE);
+  }, [activeTab]);
+  var onDetailClick = (0, _react.useCallback)(function () {
+    if (activeTab === TAB_TYPES.FILE_DETAIL) return;
+    setActiveTab(TAB_TYPES.FILE_DETAIL);
+  }, [activeTab]);
+  console.log(children);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-container"
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "sf-article-info-nav nav"
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.OUTLINE && 'active'),
+    onClick: onOutlineClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-list-ul"
+  }))), /*#__PURE__*/_react.default.createElement("li", {
+    className: "nav-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "nav-link ".concat(activeTab === TAB_TYPES.FILE_DETAIL && 'active'),
+    onClick: onDetailClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: 'iconfont icon-info-circle'
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-article-info-content"
+  }, activeTab === TAB_TYPES.OUTLINE && /*#__PURE__*/_react.default.createElement(_outline.default, {
+    editor: editor
+  }), activeTab === TAB_TYPES.FILE_DETAIL && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)));
+}

package/dist/containers/custom/get-event-transfer.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var getEventTransfer = function getEventTransfer(data) {
+  var fragmentString = data.getData('application/x-slate-fragment');
+  var textContent = data.getData('text') || data.getData('text/plain') || '';
+  var fragmentContent = fragmentString ? JSON.parse(decodeURIComponent(window.atob(fragmentString))) : null;
+  var htmlContent = data.getData('text/html') || '';
+  var hasRtfContent = data.types.includes('text/rtf');
+
+  /**
+   *  compat old version slate: if clipboard content is old version slate fragment
+   *  return  html content
+   */
+  var files = data.files;
+  var type = 'text';
+  // Paste rtf format content which copied from PPT or Word or Excel as text to document
+  if (hasRtfContent) {
+    type = 'text';
+  } else if (files.length > 0) {
+    type = 'file';
+  } else if (fragmentContent && Array.isArray(fragmentContent)) {
+    type = 'fragment';
+  } else if (htmlContent) {
+    type = 'html';
+  }
+  return {
+    text: textContent,
+    html: htmlContent,
+    fragment: fragmentContent,
+    type: type,
+    files: files
+  };
+};
+var _default = exports.default = getEventTransfer;

package/dist/containers/custom/set-event-transfer.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slate = require("slate");
+var TRANSFER_TYPES = {
+  fragment: 'application/x-slate-fragment',
+  html: 'text/html',
+  text: 'text/plain'
+};
+
+// transform slate fragment and write to clipboard
+function setEventTransfer(event, type, content) {
+  var mime = TRANSFER_TYPES[type];
+  var transfer = event.dataTransfer || event.clipboardData;
+  if (type === 'fragment') {
+    // use the same encoding as slate
+    var encodedContent = window.btoa(encodeURIComponent(JSON.stringify(content)));
+    transfer.setData(mime, encodedContent);
+    var texts = '';
+    var textItem = '';
+    content.forEach(function (element) {
+      textItem = _slate.Node.string(element).replace(/\ufeff/, '');
+      texts += textItem + '\r\n';
+    });
+    transfer.setData('text', texts);
+  } else if (type === 'html') {
+    transfer.setData(mime, content);
+    transfer.setData('text', transfer.getData('text'));
+  } else {
+    transfer.setData('text', content);
+  }
+}
+var _default = exports.default = setEventTransfer;

package/dist/containers/hotkeys-helper/classify-hotkeys.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ClassifyHotkeys;
+var _react = _interopRequireDefault(require("react"));
+var _common = require("../../utils/common");
+function ClassifyHotkeys(_ref) {
+  var title = _ref.title,
+    shortcutData = _ref.shortcutData,
+    shortcutDataNames = _ref.shortcutDataNames;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-classify-hotkeys"
+  }, /*#__PURE__*/_react.default.createElement("h5", {
+    className: "hotkey-type"
+  }, title), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "hotkey-list"
+  }, Object.keys(shortcutData).map(function (key) {
+    var shortcutName = shortcutDataNames[key];
+    var hotkeys = shortcutData[key];
+    if (hotkeys.length !== 0) {
+      hotkeys = hotkeys.length > 1 && (0, _common.isMac)() ? hotkeys[1] : hotkeys[0];
+    }
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "hotkey-shortcuts",
+      key: shortcutName
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "hotkey-shortcuts-left"
+    }, shortcutName), /*#__PURE__*/_react.default.createElement("div", {
+      className: "hotkey-shortcuts-right"
+    }, hotkeys[0] && /*#__PURE__*/_react.default.createElement("div", {
+      className: "key hotkey-first"
+    }, hotkeys[0]), hotkeys[1] && /*#__PURE__*/_react.default.createElement("div", {
+      className: "key hotkey-second"
+    }, hotkeys[1])));
+  })));
+}

package/dist/containers/hotkeys-helper/index.js

@@ -0,0 +1,52 @@
+"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 = HotkeysHelper;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _classifyHotkeys = _interopRequireDefault(require("./classify-hotkeys"));
+var _hotKeys = require("../../constants/hot-keys");
+var _eventTypes = require("../../constants/event-types");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+require("./style.css");
+function HotkeysHelper() {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var useHelp = t('userHelp', {
+    returnObjects: true
+  });
+  var title = useHelp.title,
+    userHelpData = useHelp.userHelpData;
+  var onCloseClick = (0, _react.useCallback)(function () {
+    var eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper__header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "help-close",
+    onClick: onCloseClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "iconfont icon-times-circle"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-helper__content"
+  }, userHelpData.map(function (item, index) {
+    var shortcutData = _hotKeys.HELPER_HOTKEYS[index];
+    var title = item.shortcutType,
+      shortcutDataNames = item.shortcutData;
+    return /*#__PURE__*/_react.default.createElement(_classifyHotkeys.default, {
+      key: "use-hotkey-".concat(index),
+      title: title,
+      shortcutData: shortcutData,
+      shortcutDataNames: shortcutDataNames
+    });
+  })));
+}

package/dist/containers/loading/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireDefault(require("react"));
+require("./style.css");
+var Loading = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(Loading, _React$Component);
+  var _super = (0, _createSuper2.default)(Loading);
+  function Loading() {
+    (0, _classCallCheck2.default)(this, Loading);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(Loading, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "empty-loading-page"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "lds-ripple page-centered"
+      }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null)));
+    }
+  }]);
+  return Loading;
+}(_react.default.Component);
+var _default = exports.default = Loading;

package/dist/containers/outline/index.js

@@ -0,0 +1,80 @@
+"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 _outlineItem = _interopRequireDefault(require("./outline-item"));
+var _useScrollContext = require("../../hooks/use-scroll-context");
+require("./style.css");
+var getHeaderList = function getHeaderList(children) {
+  var headerList = [];
+  children.forEach(function (node) {
+    if (node.type === 'header2' || node.type === 'header3') {
+      headerList.push(node);
+    }
+  });
+  return headerList;
+};
+var Outline = function Outline(_ref) {
+  var editor = _ref.editor;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    headerList = _useState2[0],
+    setHeaderList = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activeId = _useState4[0],
+    setActiveId = _useState4[1];
+  (0, _react.useEffect)(function () {
+    var headerList = getHeaderList(editor.children);
+    setHeaderList(headerList);
+  }, [editor.children]);
+  var handleScroll = (0, _react.useCallback)(function (e) {
+    var scrollTop = scrollRef.current.scrollTop;
+    var styles = getComputedStyle(scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current);
+    var paddingTop = parseInt(styles.paddingTop);
+    for (var i = 0; i < headerList.length; i++) {
+      var headerItem = headerList[i];
+      var dom = document.getElementById(headerItem.id);
+      var offsetTop = dom.offsetTop,
+        offsetHeight = dom.offsetHeight;
+      var _styles = getComputedStyle(dom);
+      var marginTop = parseInt(_styles.marginTop);
+      if (offsetTop + offsetHeight + marginTop > scrollTop - paddingTop) {
+        setActiveId(headerItem.id);
+        break;
+      }
+    }
+  }, [headerList, scrollRef]);
+  (0, _react.useEffect)(function () {
+    var observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return function () {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, scrollRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-editor-outline"
+  }, headerList.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "empty-container"
+  }, t('No_out_line')), headerList.length > 0 && headerList.map(function (node, index) {
+    return /*#__PURE__*/_react.default.createElement(_outlineItem.default, {
+      key: index,
+      node: node,
+      activeId: activeId
+    });
+  }));
+};
+var _default = exports.default = Outline;

package/dist/containers/outline/outline-item.js

@@ -0,0 +1,30 @@
+"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 = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var OutlineItem = function OutlineItem(_ref) {
+  var node = _ref.node,
+    activeId = _ref.activeId;
+  var onItemClick = (0, _react.useCallback)(function () {
+    var id = node.id;
+    document.getElementById(id).scrollIntoView();
+  }, [node]);
+  var className = (0, _classnames.default)({
+    'outline-h2': node.type === 'header2',
+    'outline-h3': node.type === 'header3',
+    'active': node.id === activeId
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: onItemClick
+  }, node.children.map(function (child) {
+    return child.text;
+  }).join(''));
+};
+var _default = exports.default = OutlineItem;

package/dist/editors/plain-markdown-editor/code-mirror.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _codemirror = require("codemirror");
+var _langMarkdown = require("@codemirror/lang-markdown");
+var _languageData = require("@codemirror/language-data");
+require("./code-mirror.css");
+var SeafileCodeMirror = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(SeafileCodeMirror, _React$Component);
+  var _super = (0, _createSuper2.default)(SeafileCodeMirror);
+  function SeafileCodeMirror() {
+    var _this;
+    (0, _classCallCheck2.default)(this, SeafileCodeMirror);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.onValueChanged = function (viewUpdate) {
+      var onChange = _this.props.onChange;
+      if (onChange && viewUpdate.docChanged) {
+        var doc = viewUpdate.state.doc;
+        var value = doc.toString();
+        onChange(value);
+      }
+    };
+    _this.focus = function () {
+      _this.view.focus();
+    };
+    _this.scrollIntoView = function (pos) {
+      _codemirror.EditorView.scrollIntoView(pos);
+    };
+    _this.setCodeMirrorRef = function (ref) {
+      _this.codeMirrorRef = ref;
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(SeafileCodeMirror, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props = this.props,
+        initialValue = _this$props.initialValue,
+        autoFocus = _this$props.autoFocus;
+      this.view = new _codemirror.EditorView({
+        doc: initialValue,
+        extensions: [_codemirror.basicSetup, (0, _langMarkdown.markdown)({
+          codeLanguages: _languageData.languages
+        }), _codemirror.EditorView.updateListener.of(function (viewUpdate) {
+          _this2.onValueChanged(viewUpdate);
+        })],
+        parent: this.codeMirrorRef
+      });
+      if (autoFocus) this.focus();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.view) {
+        this.view.destroy();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('sf-code-mirror', this.props.className)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.setCodeMirrorRef
+      }));
+    }
+  }]);
+  return SeafileCodeMirror;
+}(_react.default.Component);
+var _default = exports.default = SeafileCodeMirror;

package/dist/editors/plain-markdown-editor/index.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
+var _react = _interopRequireDefault(require("react"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
+var _codeMirror = _interopRequireDefault(require("./code-mirror"));
+require("./style.css");
+var PlainMarkdownEditor = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(PlainMarkdownEditor, _React$Component);
+  var _super = (0, _createSuper2.default)(PlainMarkdownEditor);
+  function PlainMarkdownEditor(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, PlainMarkdownEditor);
+    _this = _super.call(this, props);
+    /*
+    *   the data about scroll, these variable has nothing to width react
+    *   they are not state
+    * */
+    _this.scrollData = {
+      scrollPercentage: 0,
+      leftPanel: null,
+      rightPanel: null
+    };
+    _this.setContent = function (markdownContent) {
+      _this.setState({
+        editorValue: markdownContent
+      });
+      _mdToHtml.default.process(markdownContent, function (error, vfile) {
+        var html = String(vfile);
+        _this.setState({
+          previewValue: html
+        });
+      });
+    };
+    _this.updateCode = function (newCode) {
+      _this.setContent(newCode);
+      _this.props.onSave && _this.props.onSave(newCode);
+    };
+    _this.onEnterLeftPanel = function () {
+      _this.setState({
+        isMouseInLeftSide: true
+      });
+    };
+    _this.onLeaveLeftPanel = function () {
+      _this.setState({
+        isMouseInLeftSide: false
+      });
+    };
+    _this.onLeftScroll = function (e) {
+      var isMouseInLeftSide = _this.state.isMouseInLeftSide;
+      if (!isMouseInLeftSide) return;
+      var srcElement = _this.scrollData.leftPanel;
+      _this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+      _this.scrollData.rightPanel.scrollTop = _this.scrollData.scrollPercentage * _this.scrollData.rightPanel.scrollHeight;
+    };
+    _this.onEnterRightPanel = function () {
+      _this.setState({
+        isMouseInRightSide: true
+      });
+    };
+    _this.onLeaveRightPanel = function () {
+      _this.setState({
+        isMouseInRightSide: false
+      });
+    };
+    _this.onRightScroll = function (e) {
+      var isMouseInRightSide = _this.state.isMouseInRightSide;
+      if (!isMouseInRightSide) return;
+      var srcElement = _this.scrollData.rightPanel;
+      _this.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+      _this.scrollData.leftPanel.scrollTop = _this.scrollData.scrollPercentage * _this.scrollData.leftPanel.scrollHeight;
+    };
+    _this.onHotKey = function (event) {
+      var onSave = _this.props.onSave;
+      if ((0, _isHotkey.default)('mod+s', event)) {
+        event.preventDefault();
+        onSave && onSave(_this.state.editorValue);
+        return true;
+      }
+    };
+    _this.state = {
+      editorValue: props.value,
+      previewValue: '',
+      isMouseInLeftSide: false,
+      isMouseInRightSide: false
+    };
+    return _this;
+  }
+  (0, _createClass2.default)(PlainMarkdownEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // get relevant dom when component mounted instead of get them when scrolling to improve performance
+      this.scrollData.leftPanel = document.querySelector('.sf-plain-editor-left-panel');
+      this.scrollData.rightPanel = document.querySelector('.sf-plain-editor-right-panel');
+      this.setContent(this.props.value);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // render math formula
+      // window.MathJax.typesetPromise(document.querySelectorAll('.math-display'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        editorValue = _this$state.editorValue,
+        previewValue = _this$state.previewValue;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "sf-plain-editor"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "sf-plain-editor-main d-flex",
+        onKeyDown: this.onHotKey
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "sf-plain-editor-left-panel",
+        onMouseLeave: this.onLeaveLeftPanel,
+        onMouseEnter: this.onEnterLeftPanel,
+        onScroll: this.onLeftScroll
+      }, /*#__PURE__*/_react.default.createElement(_codeMirror.default, {
+        autoFocus: true,
+        initialValue: editorValue,
+        onChange: this.updateCode
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: "sf-plain-editor-right-panel",
+        onMouseEnter: this.onEnterRightPanel,
+        onMouseLeave: this.onLeaveRightPanel,
+        onScroll: this.onRightScroll
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "preview"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "rendered-markdown article",
+        dangerouslySetInnerHTML: {
+          __html: previewValue
+        }
+      })))));
+    }
+  }]);
+  return PlainMarkdownEditor;
+}(_react.default.Component);
+var _default = exports.default = PlainMarkdownEditor;