@seafile/sdoc-editor 0.1.0 → 0.1.2

package/dist/editors/markdown-editor.js

@@ -1,280 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-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, { Fragment } from 'react';
-import { withTranslation } from 'react-i18next';
-import { Node, Editor, Range } from 'slate';
-import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
-import toaster from '../components/toast';
-import ModalPortal from '../components/modal-portal';
-import ContextMenu from '../components/context-menu';
-import TextLinkHoverMenu from '../components/text-link-hover-menu';
-import CommentDialog from '../components/dialogs/comment-dialog';
-import AddLinkDialog from '../components/dialogs/add-link-dialog';
-import { serialize } from '../utils/slate2markdown/index';
-import { isRangeCollapsed } from '../containers/editor-utils/range-utils';
-import { renderNode, renderLeaf, decorationNode } from '../containers/render-utils/editor-utils';
-import EditorContext from '../containers/editor-context';
-import '../assets/css/navbar-imgbutton.css';
-import '../assets/css/image.css';
-import '../assets/css/link.css';
-import '../assets/css/tree-view.css';
-var MarkdownEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(MarkdownEditor, _React$Component);
-  var _super = _createSuper(MarkdownEditor);
-  function MarkdownEditor(props) {
-    var _this;
-    _classCallCheck(this, MarkdownEditor);
-    _this = _super.call(this, props);
-    _this.getDomNodeByPath = function (path) {
-      var node,
-        parent = document.querySelector('.editor-component');
-      while (typeof path[0] === 'number' && parent) {
-        node = parent.children[path[0]];
-        path.shift();
-        parent = node;
-      }
-      return node;
-    };
-    _this.updateCommentBtnPosition = function () {
-      if (!_this.props.isSupportComment) return;
-      if (_this.timer) return;
-      _this.timer = setTimeout(function () {
-        var selection = _this.editor.selection;
-        if (!selection || Range.isCollapsed(selection)) {
-          var _style = _this.commentRef.style;
-          _style.top = '-1000px';
-          clearTimeout(_this.timer);
-          _this.timer = null;
-          return;
-        }
-        var focusNodePath = selection.anchor.path.slice();
-        focusNodePath.pop();
-        var focusNode = _this.getDomNodeByPath(focusNodePath);
-        var style = _this.commentRef.style;
-        style.right = '40px';
-        if (focusNode) {
-          style.top = "".concat(focusNode.offsetTop, "px");
-        } else {
-          style.top = '-1000px';
-        }
-        clearTimeout(_this.timer);
-        _this.timer = null;
-      }, 40);
-    };
-    _this.onCommentAdded = function () {
-      _this.toggleCommentDialog();
-      _this.props.onAddComment && _this.props.onAddComment();
-    };
-    _this.addComment = function (e) {
-      e.stopPropagation();
-      _this.getQuote();
-      _this.toggleCommentDialog();
-    };
-    _this.toggleCommentDialog = function () {
-      _this.setState({
-        showCommentDialog: !_this.state.showCommentDialog
-      });
-    };
-    _this.onToggleLinkDialog = function () {
-      _this.setState({
-        isShowLinkDialog: !_this.state.isShowLinkDialog
-      });
-    };
-    _this.getQuote = function () {
-      _this.quote = serialize(Editor.fragment(_this.editor, _this.editor.selection));
-      _this.setState({
-        commentPosition: _this.editor.selection.anchor.path
-      });
-    };
-    _this.onChange = function (value) {
-      _this.setState({
-        value: value
-      });
-
-      // hide context menu when content change
-      if (_this.state.isShowContextMenu === true) {
-        _this.setState({
-          isShowContextMenu: false
-        });
-        _this.contextMenuPosition = {};
-      }
-      _this.props.onChange(value, _this.editor.operations);
-    };
-    _this.onFocusEditor = function () {
-      var value = _this.state.value;
-      if (value.length === 2 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0) {
-        _this.editorRef.firstChild.focus();
-      }
-    };
-    // provide the api to seahub to insert files of library 
-    _this.addLink = function (fileName, url, isImage) {
-      var selection = _this.editor.selection;
-      if (isImage) {
-        _this.editorUtils.insertImage({
-          url: url,
-          selection: selection
-        });
-        return;
-      }
-      _this.editorUtils.insertLink({
-        text: fileName,
-        url: url,
-        selection: selection
-      });
-    };
-    _this.scrollToQuote = function (path) {
-      if (!path) return;
-      var editor = _this.editor;
-      var node = editor.children[path[0]];
-      var element = ReactEditor.toDOMNode(editor, node);
-      _this.editorContainerRef.scrollTo(0, element.offsetTop);
-      Editor.select(_this.editor, path);
-    };
-    _this.scrollToNode = function (node) {
-      var editor = document.querySelector('.editor-component');
-      var element = editor.childNodes[node.path[0]];
-      _this.editorContainerRef.scrollTo(0, element.offsetTop);
-      window.location.hash = encodeURI(node.children[0].text);
-      Editor.select(_this.editor, node.path);
-    };
-    _this.onCopy = function (event) {
-      _this.editorUtils.onCopy(event, _this.editor);
-    };
-    _this.onCut = function (event) {
-      _this.editorUtils.onCut(event);
-    };
-    _this.onKeyDown = function (event) {
-      _this.editorUtils.onKeyDown(event);
-    };
-    _this.onContextMenu = function (event) {
-      if (_this.tableUtils.isInTable()) {
-        event.preventDefault();
-        _this.contextMenuPosition = {
-          left: event.clientX,
-          top: event.clientY
-        };
-        _this.setState({
-          isShowContextMenu: !_this.state.isShowContextMenu
-        });
-      }
-    };
-    _this.setCommentRef = function (ref) {
-      _this.commentRef = ref;
-    };
-    _this.setEditorRef = function (ref) {
-      _this.editorRef = ref;
-    };
-    _this.setEditorContainerRef = function (ref) {
-      _this.editorContainerRef = ref;
-    };
-    _this.state = {
-      value: props.value,
-      isShowContextMenu: false,
-      showCommentDialog: false,
-      commentPosition: null,
-      isShowLinkDialog: false
-    };
-    _this.editor = EditorContext.getEditor(props);
-    _this.editorUtils = EditorContext.getEditorUtils();
-    _this.tableUtils = EditorContext.getTableUtils();
-    _this.contextMenuPosition = {};
-    return _this;
-  }
-  _createClass(MarkdownEditor, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      this.props.resetRichValue();
-      console.log(error);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.abcdef_editor = this;
-      var t = this.props.t;
-      var userAgent = navigator.userAgent.toLowerCase();
-      if (userAgent.indexOf('chrome') === -1) {
-        var message = t('Editing_files_in_this_browser_can_lead_to_slight_display_problems');
-        toaster.warning(message, {
-          duration: 4
-        });
-      }
-
-      // get first text node of the document and focus at the start of the text node
-      var _Array$from$ = _slicedToArray(Array.from(Node.texts(this.editor.children[0]))[0], 2),
-        textPath = _Array$from$[1];
-      textPath.unshift(0);
-      Editor.select(this.editor, {
-        path: textPath,
-        offset: 0
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      EditorContext.resetEditor();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var editor = this.editor;
-      var _this$state = this.state,
-        value = _this$state.value,
-        commentPosition = _this$state.commentPosition;
-      var addCommentClass = 'iconfont icon-plus-square seafile-viewer-comment-btn';
-
-      // link detail message
-      var toolbarStatus = this.editorUtils.getToolbarStatus();
-      var selectionCollapsed = isRangeCollapsed(editor.selection);
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Slate, {
-        editor: this.editor,
-        value: value,
-        onChange: this.onChange
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "editor-container align-self-start",
-        ref: this.setEditorContainerRef
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: this.setEditorRef,
-        onClick: this.onFocusEditor,
-        className: "editor article"
-      }, /*#__PURE__*/React.createElement(Editable, {
-        autoFocus: true,
-        className: "editor-component",
-        renderElement: function renderElement(props) {
-          return renderNode(props, editor);
-        },
-        renderLeaf: renderLeaf,
-        decorate: decorationNode,
-        onCut: this.onCut,
-        onCopy: this.onCopy,
-        onKeyDown: this.onKeyDown,
-        onSelect: this.updateCommentBtnPosition,
-        onContextMenu: this.onContextMenu
-      }), /*#__PURE__*/React.createElement("i", {
-        className: addCommentClass,
-        ref: this.setCommentRef,
-        onMouseDown: this.addComment
-      })))), /*#__PURE__*/React.createElement(Fragment, null, toolbarStatus.isLinkActive && selectionCollapsed && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
-        onToggleLinkDialog: this.onToggleLinkDialog,
-        editorUtils: this.editorUtils
-      })), this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
-        tableUtils: this.tableUtils,
-        contextMenuPosition: this.contextMenuPosition
-      })), this.state.showCommentDialog && /*#__PURE__*/React.createElement(CommentDialog, {
-        quote: this.quote,
-        editorApi: this.editor.editorApi,
-        commentPosition: commentPosition,
-        onCommentAdded: this.onCommentAdded,
-        toggleCommentDialog: this.toggleCommentDialog
-      }), this.state.isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
-        toggleLinkDialog: this.onToggleLinkDialog
-      })));
-    }
-  }]);
-  return MarkdownEditor;
-}(React.Component);
-export default withTranslation('seafile-editor', {
-  withRef: true
-})(MarkdownEditor);

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

@@ -1,285 +0,0 @@
-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 isHotkey from 'is-hotkey';
-import { withTranslation } from 'react-i18next';
-import Prism from 'prismjs';
-import toaster from '../components/toast';
-import { processor } from '../utils/seafile-markdown2html';
-import '../assets/editor/plain-editor.css';
-var className = require('classnames');
-var lodash = require('lodash');
-require('codemirror/lib/codemirror.css');
-require('codemirror/mode/markdown/markdown');
-require('prismjs/themes/prism.css');
-require('../assets/css/markdown-editor.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
-    };
-    /*
-    *   the data about scroll, these variable has nothing to width react
-    *   they are not state
-    * */
-    _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: "plain-editor seafile-editor-module"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "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);