@seafile/seafile-editor 0.3.76

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

@@ -0,0 +1,324 @@
+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 { processor } from '../utils/seafile-markdown2html';
+import toaster from '../components/toast';
+import isHotkey from 'is-hotkey';
+import { withTranslation } from 'react-i18next';
+import Prism from 'prismjs';
+
+var className = require('classnames');
+
+var lodash = require('lodash');
+
+require('codemirror/lib/codemirror.css');
+
+require('codemirror/mode/markdown/markdown');
+
+require('../css/plaineditor/markdown-editor.css');
+
+require('prismjs/themes/prism.css');
+
+var CodeMirror = /*#__PURE__*/function (_React$Component) {
+  _inherits(CodeMirror, _React$Component);
+
+  var _super = _createSuper(CodeMirror);
+
+  function CodeMirror() {
+    var _this;
+
+    _classCallCheck(this, CodeMirror);
+
+    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.state = {
+      isFocused: false
+    };
+
+    _this.focus = function () {
+      if (_this.codeMirror) {
+        _this.codeMirror.focus();
+      }
+    };
+
+    _this.focusChanged = function (focused) {
+      _this.setState({
+        isFocused: focused
+      });
+
+      _this.props.onFocusChange && _this.props.onFocusChange(focused);
+    };
+
+    _this.cursorActivity = function (cm) {
+      _this.props.onCursorActivity && _this.props.onCursorActivity(cm);
+    };
+
+    _this.scrollChanged = function (cm) {
+      _this.props.onScroll && _this.props.onScroll(cm.getScrollInfo());
+    };
+
+    _this.codemirrorValueChanged = function (doc, change) {
+      if (_this.props.onChange && change.origin !== 'setValue') {
+        _this.props.onChange(doc.getValue(), change);
+      }
+    };
+
+    return _this;
+  }
+
+  _createClass(CodeMirror, [{
+    key: "getCodeMirrorInstance",
+    value: function getCodeMirrorInstance() {
+      return this.props.codeMirrorInstance || require('codemirror');
+    }
+  }, {
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      if (this.props.path) {
+        console.error('Warning: react-codemirror: the `path` prop has been changed to `name`');
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var codeMirrorInstance = this.getCodeMirrorInstance();
+      this.codeMirror = codeMirrorInstance.fromTextArea(this.textareaNode, this.props.options);
+      this.codeMirror.on('change', this.codemirrorValueChanged);
+      this.codeMirror.on('cursorActivity', this.cursorActivity);
+      this.codeMirror.on('focus', this.focusChanged.bind(this, true));
+      this.codeMirror.on('blur', this.focusChanged.bind(this, false));
+      this.codeMirror.on('scroll', this.scrollChanged);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // is there a lighter-weight way to remove the cm instance?
+      if (this.codeMirror) {
+        this.codeMirror.toTextArea();
+      }
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.codeMirror && nextProps.initialValue !== undefined && nextProps.initialValue !== this.props.initialValue) {
+        if (this.props.preserveScrollPosition) {
+          var prevScrollPosition = this.codeMirror.getScrollInfo();
+          this.codeMirror.setValue(nextProps.initialValue);
+          this.codeMirror.scrollTo(prevScrollPosition.left, prevScrollPosition.top);
+        } else {
+          this.codeMirror.setValue(nextProps.initialValue);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var editorClassName = className('ReactCodeMirror', this.state.isFocused ? 'ReactCodeMirror--focused' : null, this.props.className);
+      return /*#__PURE__*/React.createElement("div", {
+        className: editorClassName
+      }, /*#__PURE__*/React.createElement("textarea", {
+        ref: function ref(_ref) {
+          return _this2.textareaNode = _ref;
+        },
+        name: this.props.name || this.props.path,
+        defaultValue: this.props.initialValue,
+        autoComplete: "off",
+        autoFocus: this.props.autoFocus
+      }));
+    }
+  }]);
+
+  return CodeMirror;
+}(React.Component);
+/*
+
+When loading a new file:
+
+             markdownContent                    initialValue
+  index.js  -----------------> PlainMarkdownEditor --------> CodeMirror --> Real CodeMirror
+
+When user type in CodeMirror
+
+                    value             value
+   Real CodeMirror ------> CodeMirror ------> PlainMarkdownEditor
+
+On Save:
+
+                 value
+  MarkdownEditor -----> index.js
+
+*/
+
+
+var PlainMarkdownEditor = /*#__PURE__*/function (_React$Component2) {
+  _inherits(PlainMarkdownEditor, _React$Component2);
+
+  var _super2 = _createSuper(PlainMarkdownEditor);
+
+  function PlainMarkdownEditor(props) {
+    var _this3;
+
+    _classCallCheck(this, PlainMarkdownEditor);
+
+    _this3 = _super2.call(this, props);
+    _this3.state = {
+      html: '',
+      leftIsBindScroll: false,
+      rightIsBindScroll: false
+    };
+    _this3.scrollData = {
+      scrollPercentage: 0,
+      leftPanel: null,
+      rightPanel: null
+    };
+
+    _this3.updateCode = function (newCode) {
+      _this3.props.onChange(newCode);
+    };
+
+    _this3.onLeftScroll = function (e) {
+      var srcElement = _this3.scrollData.leftPanel;
+      _this3.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+      _this3.scrollData.rightPanel.scrollTop = _this3.scrollData.scrollPercentage * _this3.scrollData.rightPanel.scrollHeight;
+    };
+
+    _this3.onRightScroll = function (e) {
+      var srcElement = _this3.scrollData.rightPanel;
+      _this3.scrollData.scrollPercentage = srcElement.scrollTop / srcElement.scrollHeight;
+      _this3.scrollData.leftPanel.scrollTop = _this3.scrollData.scrollPercentage * _this3.scrollData.leftPanel.scrollHeight;
+    };
+
+    _this3.onEnterLeftPanel = function () {
+      _this3.setState({
+        leftIsBindScroll: true
+      });
+    };
+
+    _this3.onLeaveLeftPanel = function () {
+      _this3.setState({
+        leftIsBindScroll: false
+      });
+    };
+
+    _this3.onEnterRightPanel = function () {
+      _this3.setState({
+        rightIsBindScroll: true
+      });
+    };
+
+    _this3.onLeaveRightPanel = function () {
+      _this3.setState({
+        rightIsBindScroll: false
+      });
+    };
+
+    _this3.onHotKey = function (event) {
+      if (isHotkey('mod+s', event)) {
+        event.preventDefault();
+
+        _this3.props.onSave(event);
+
+        return true;
+      }
+    };
+
+    _this3.options = {
+      lineNumbers: true,
+      mode: 'markdown',
+      lineWrapping: true,
+      scrollbarStyle: null
+    };
+    _this3.setContent = lodash.throttle(_this3.setContent, 1000);
+    return _this3;
+  }
+
+  _createClass(PlainMarkdownEditor, [{
+    key: "setContent",
+    value: function setContent(markdownContent) {
+      var _this4 = this;
+
+      processor.process(markdownContent, function (error, vfile) {
+        var html = String(vfile);
+
+        _this4.setState({
+          html: html
+        });
+      });
+    }
+  }, {
+    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('.plain-editor-left-panel');
+      this.scrollData.rightPanel = document.querySelector('.plain-editor-right-panel');
+      this.setContent(this.props.currentContent); // notify current user if others are also editing this file
+
+      var editingUsers = this.props.collabUsers.filter(function (ele) {
+        return ele.is_editing === true && ele.myself === undefined;
+      });
+
+      if (editingUsers.length > 0) {
+        toaster.danger('Another user is editing this file!', {
+          duration: 3
+        });
+      }
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      this.setContent(nextProps.currentContent);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      Prism.highlightAll(); // render math formula
+
+      window.MathJax.typesetPromise(document.querySelectorAll('.math-display'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-module seafile-editor"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-main plain-editor-main d-flex"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "plain-editor-left-panel",
+        onKeyDown: this.onHotKey,
+        onMouseLeave: this.onLeaveLeftPanel,
+        onMouseEnter: this.onEnterLeftPanel,
+        onScroll: this.state.leftIsBindScroll ? this.onLeftScroll : null
+      }, /*#__PURE__*/React.createElement(CodeMirror, {
+        initialValue: this.props.initialValue,
+        onChange: this.updateCode,
+        options: this.options
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "plain-editor-right-panel",
+        onMouseEnter: this.onEnterRightPanel,
+        onMouseLeave: this.onLeaveRightPanel,
+        onScroll: this.state.rightIsBindScroll ? this.onRightScroll : null
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "preview"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "rendered-markdown article",
+        dangerouslySetInnerHTML: {
+          __html: this.state.html
+        }
+      })))));
+    }
+  }]);
+
+  return PlainMarkdownEditor;
+}(React.Component);
+
+PlainMarkdownEditor.defaultProps = {
+  collabUsers: []
+};
+export default withTranslation('seafile-editor')(PlainMarkdownEditor);