@seafile/seafile-editor 0.3.76

package/dist/editor/seafile-editor.js

@@ -0,0 +1,326 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import toaster from '../components/toast';
+import { withTranslation } from 'react-i18next';
+import { Text } from 'slate';
+import '../css/layout.css';
+import '../css/topbar.css';
+import RichMarkdownEditor from './rich-markdown-editor';
+import PlainMarkdownEditor from './plain-markdown-editor';
+import { serialize, deserialize } from '../utils/slate2markdown';
+
+var SeafileEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(SeafileEditor, _React$Component);
+
+  var _super = _createSuper(SeafileEditor);
+
+  function SeafileEditor(props) {
+    var _this;
+
+    _classCallCheck(this, SeafileEditor);
+
+    _this = _super.call(this, props);
+
+    _this.switchToPlainTextEditor = function () {
+      // TODO: performance, change to do serialize in async way
+      if (_this.props.editorMode === 'rich') {
+        var value = _this.state.richValue;
+        var str = serialize(value);
+
+        _this.props.setEditorMode('plain');
+
+        _this.setState({
+          initialPlainValue: str,
+          currentContent: str
+        });
+      }
+
+      if (_this.props.collabServer) {
+        _this.props.emitSwitchEditor(false);
+      }
+    };
+
+    _this.switchToRichTextEditor = function () {
+      // TODO: performance, change to do deserialize in async way
+      _this.setState({
+        richValue: deserialize(_this.state.currentContent)
+      });
+
+      _this.props.setEditorMode('rich');
+
+      if (_this.props.collabServer) {
+        _this.props.emitSwitchEditor(false);
+      }
+    };
+
+    _this.onUnload = function (event) {
+      if (!_this.props.contentChanged) return;
+      var confirmationMessage = 'Leave this page? The system may not save your changes.';
+
+      _this.props.clearTimer();
+
+      _this.props.deleteDraft && _this.props.deleteDraft();
+      event.returnValue = confirmationMessage;
+      return confirmationMessage;
+    };
+
+    _this.onChange = function (value, operations) {
+      if (_this.props.editorMode === 'rich') {
+        _this.setState({
+          richValue: value
+        });
+
+        _this.props.setDraftValue('rich', _this.state.richValue);
+
+        var ops = operations.filter(function (o) {
+          return o.type !== 'set_selection' && o.type !== 'set_value';
+        });
+
+        if (ops.length !== 0) {
+          _this.props.onContentChanged(true);
+
+          if (_this.autoSave) _this.props.autoSaveDraft();
+        }
+      } else {
+        _this.setState({
+          currentContent: value
+        });
+
+        _this.props.onContentChanged(true);
+
+        _this.props.setDraftValue('rich', _this.state.richValue);
+
+        _this.props.autoSaveDraft();
+      }
+    };
+
+    _this.saveContent = function (str) {
+      _this.props.editorApi.saveContent(str).then(function () {
+        _this.props.onSaving(false);
+
+        _this.props.onContentChanged(false); // remove markdown lint temporarily
+        // if (this.props.markdownLint) {
+        //   const slateValue = this.state.richValue;
+        //   this.props.editorApi.markdownLint(JSON.stringify(slateValue)).then((res) => {
+        //     this.setState({
+        //       issues: res.data
+        //     });
+        //   });
+        // }
+
+
+        _this.lastModifyTime = new Date();
+        toaster.success(_this.props.t('file_saved'), {
+          duration: 2
+        });
+
+        _this.props.editorApi.getFileInfo().then(function (res) {
+          _this.props.setFileInfoMtime(res.data);
+        });
+
+        _this.addParticipants();
+      }, function () {
+        _this.props.onSaving(false);
+
+        toaster.danger(_this.props.t('file_failed_to_save'), {
+          duration: 2
+        });
+      });
+
+      _this.props.onSaving(true);
+    };
+
+    _this.addParticipants = function () {
+      if (_this.isParticipant || !window.showParticipants) return;
+      var _this$props$editorApi = _this.props.editorApi,
+          userName = _this$props$editorApi.userName,
+          addFileParticipants = _this$props$editorApi.addFileParticipants;
+      var participants = _this.props.participants;
+
+      if (participants && participants.length !== 0) {
+        _this.isParticipant = participants.every(function (participant) {
+          return participant.email === userName;
+        });
+        if (_this.isParticipant) return;
+      }
+
+      var emails = [userName];
+      addFileParticipants(emails).then(function (res) {
+        _this.isParticipant = true;
+
+        _this.props.onParticipantsChange();
+      });
+    };
+
+    _this.onRichEditorSave = function () {
+      if (_this.props.isSaving) return;
+      var value = _this.state.richValue;
+      var str = serialize(value);
+
+      _this.saveContent(str);
+
+      _this.props.clearTimer();
+
+      _this.props.deleteDraft && _this.props.deleteDraft();
+    };
+
+    _this.resetRichValue = function () {
+      var value = _this.state.richValue;
+
+      _this.setState({
+        richValue: value
+      });
+    };
+
+    _this.onPlainEditorSave = function () {
+      if (_this.props.isSaving) return;
+      var str = _this.state.currentContent;
+
+      _this.saveContent(str);
+
+      _this.props.clearTimer();
+
+      _this.props.deleteDraft && _this.props.deleteDraft();
+    };
+
+    _this.resetContentChanged = function () {
+      if (_this.props.contentChanged) {
+        _this.props.onContentChanged(false);
+      }
+
+      _this.autoSave = true;
+    };
+
+    var markdownContent = _this.props.markdownContent;
+    var isEditMode = _this.props.mode === 'editor';
+    var isDraft = _this.props.isDraft;
+    _this.lastModifyTime = null;
+    _this.autoSave = false;
+    _this.isParticipant = false;
+    window.seafileEditor = _assertThisInitialized(_this);
+    _this.state = {
+      isTreeDataLoaded: false,
+      initialPlainValue: '',
+      // for plain editor
+      currentContent: markdownContent,
+      // for plain editor and viewer
+      richValue: isEditMode || isDraft ? deserialize(markdownContent) : deserialize(''),
+      // for rich editor
+      issues: {
+        issue_list: []
+      }
+    };
+    return _this;
+  } // componentWillReceiveProps(nextProps) {
+  //   if (this.props.markdownContent !== nextProps.markdownContent) {
+  //     this.setState({ richValue: deserialize(nextProps.markdownContent) });
+  //   }
+  // }
+  // from rich editor to plain editor
+
+
+  _createClass(SeafileEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // window.seafileEditor = this;
+      window.addEventListener('beforeunload', this.onUnload);
+    }
+  }, {
+    key: "componentWillMount",
+    value:
+    /*
+    *  when seafileEditor first mounted check the content
+    *  if the content is empty add h1 to document
+    * */
+    function componentWillMount() {
+      if (this.props.editorMode === 'rich') {
+        var document = this.state.richValue;
+        var firstNode = document[0];
+        /**
+         *  if the markdown content is empty, the rich value contains
+         *  only a paragraph which contains a empty text node 
+         * 
+        */
+
+        if (document.length === 1 && firstNode.type === 'paragraph' && firstNode.children.length === 1 && Text.isText(firstNode.children[0]) && firstNode.children[0].text.length === 0) {
+          var headerContent = this.props.fileInfo.name.slice(0, this.props.fileInfo.name.lastIndexOf('.'));
+          var header = {
+            type: 'header_one',
+            children: [{
+              text: headerContent,
+              marks: []
+            }]
+          };
+          document.push(header);
+          document.shift();
+          this.setState({
+            richValue: document
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var dom = '';
+
+      if (this.props.editorMode === 'rich') {
+        dom = /*#__PURE__*/React.createElement(RichMarkdownEditor, {
+          editorApi: this.props.editorApi,
+          onChange: this.onChange,
+          onSave: this.onRichEditorSave,
+          value: this.state.richValue,
+          resetRichValue: this.resetRichValue,
+          contentChanged: this.props.contentChanged,
+          saving: this.props.saving,
+          switchToMarkDownViewer: this.switchToMarkDownViewer,
+          switchToPlainTextEditor: this.switchToPlainTextEditor,
+          fileInfo: this.props.fileInfo,
+          toggleStar: this.props.toggleStar,
+          issues: this.state.issues,
+          resetContentChanged: this.resetContentChanged,
+          collabUsers: this.props.collabUsers,
+          mode: this.props.editorMode,
+          draftID: this.props.draftID,
+          isDraft: this.props.isDraft,
+          openDialogs: this.props.openDialogs,
+          readOnly: this.props.readOnly,
+          relatedFiles: this.props.relatedFiles,
+          fileTagList: this.props.fileTagList,
+          participants: this.props.participants,
+          onParticipantsChange: this.props.onParticipantsChange
+        });
+      } else if (this.props.editorMode === 'plain') {
+        dom = /*#__PURE__*/React.createElement(PlainMarkdownEditor, {
+          editorApi: this.props.editorApi,
+          initialValue: this.state.initialPlainValue,
+          currentContent: this.state.currentContent,
+          contentChanged: this.props.contentChanged,
+          switchToRichTextEditor: this.switchToRichTextEditor,
+          switchToMarkDownViewer: this.switchToMarkDownViewer,
+          onSave: this.onPlainEditorSave,
+          onChange: this.onChange,
+          fileInfo: this.props.fileInfo,
+          toggleStar: this.props.toggleStar,
+          collabUsers: this.props.collabUsers,
+          mode: this.props.editorMode,
+          draftID: this.props.draftID,
+          isDraft: this.props.isDraft
+        });
+      }
+
+      return dom;
+    }
+  }]);
+
+  return SeafileEditor;
+}(React.Component);
+
+SeafileEditor.defaultProps = {
+  userInfo: null
+};
+export default withTranslation('seafile-editor')(SeafileEditor);

package/dist/editor/simple-editor.js

@@ -0,0 +1,245 @@
+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 ToolBar from '../components/toolbar';
+import { withTranslation } from 'react-i18next';
+import { renderNode, renderLeaf, EditorUtils, decorationNode } from './editor-utils/common-editor-utils';
+import { createEditor, Node, Editor } from 'slate';
+import { withHistory } from 'slate-history';
+import { deserialize, serialize } from '../utils/slate2markdown/index';
+import { Editable, withReact, Slate } from '@seafile/slate-react';
+import { isRangeCollapsed } from './editor-utils/range-utils';
+import ModalPortal from '../components/modal-portal';
+import TextLinkHoverMenu from './editor-component/textlink-hovermenu';
+import ContextMenu from '../components/context-menu';
+import withBlock from './controller/block-element-controller';
+import withInline from './controller/inline-element-controller';
+import withVoid from './controller/void-element-controller';
+import withMarkdownShortcut from './controller/shortcut-controller';
+import normalizeNode from './controller/normalize-controller';
+import Plugin from './editor-plugin';
+import TableUtils from '../editor/editor-utils/block-element-utils/table-utils';
+import IconButton from '../components/topbar-component/icon-button';
+import KeyboardShortcuts from '../components/shortcut-dialog';
+import './code-highlight-package';
+import '../css/layout.css';
+import '../css/richeditor/rich-editor-main.css';
+import '../css/richeditor/navbar-imgbutton.css';
+import '../css/richeditor/textlink-hovermenu.css';
+import '../css/richeditor/image.css';
+import '../css/richeditor/link.css';
+import '../css/topbar.css';
+
+var SimpleEditor = /*#__PURE__*/function (_React$Component) {
+  _inherits(SimpleEditor, _React$Component);
+
+  var _super = _createSuper(SimpleEditor);
+
+  function SimpleEditor(props) {
+    var _this;
+
+    _classCallCheck(this, SimpleEditor);
+
+    _this = _super.call(this, props);
+
+    _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 = {};
+      }
+
+      var operations = _this.editor.operations;
+      var hasChange = operations.some(function (o) {
+        return o.type !== 'set_selection' && o.type !== 'set_value';
+      });
+      if (hasChange) _this.contentChanged = true;
+    };
+
+    _this.foucsEditor = function () {
+      _this.editorRef.firstChild.focus();
+    };
+
+    _this.focusText = function () {
+      // In dtable long text editor, press the key to open the editor.
+      // Then the cursor should move to the end of this character.
+      var _this$props = _this.props,
+          focusEnd = _this$props.focusEnd,
+          value = _this$props.value;
+
+      if (focusEnd === true && value.length === 1) {
+        setTimeout(function () {
+          Editor.select(_this.editor, {
+            path: [0, 0],
+            offset: 1
+          });
+        }, 1);
+      }
+    };
+
+    _this.hasContentChange = function () {
+      return _this.contentChanged;
+    };
+
+    _this.onToggleLinkDialog = function () {
+      _this.setState({
+        isShowLinkDialog: !_this.state.isShowLinkDialog
+      });
+    };
+
+    _this.onToggleImageDialog = function () {
+      _this.setState({
+        isShowImageDialog: !_this.state.isShowImageDialog
+      });
+    };
+
+    _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.toggleShortcutDialog = function () {
+      _this.setState({
+        isShowShortcutDialog: !_this.state.isShowShortcutDialog
+      });
+    };
+
+    _this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
+    _this.editor.editorApi = props.editorApi;
+    window.editor = _this.editor;
+    _this.editorUtils = new EditorUtils(_this.editor);
+    _this.tableUtils = new TableUtils(_this.editor);
+    _this.plugin = new Plugin(_this.editor);
+    _this.editorRef = null;
+    _this.contextMenuPosition = {};
+    _this.state = {
+      value: deserialize(props.value),
+      isShowLinkDialog: false,
+      isShowImageDialog: false,
+      isShowBigImage: false,
+      isShowContextMenu: false,
+      isShowShortcutDialog: false
+    };
+    return _this;
+  }
+
+  _createClass(SimpleEditor, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.onRef(this);
+      this.focusText();
+    }
+  }, {
+    key: "getMarkdown",
+    value: function getMarkdown() {
+      this.contentChanged = false;
+      return serialize(this.state.value);
+    }
+  }, {
+    key: "getValue",
+    value: function getValue() {
+      return this.state.value;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          value = _this$state.value,
+          isShowLinkDialog = _this$state.isShowLinkDialog,
+          isShowImageDialog = _this$state.isShowImageDialog;
+      var editor = this.editor,
+          foucsEditor = this.foucsEditor;
+      var toolbarStatus = this.editorUtils.getToolbarStatus();
+      var _this$props2 = this.props,
+          readOnly = _this$props2.readOnly,
+          t = _this$props2.t;
+      var selectionCollapsed = isRangeCollapsed(editor.selection);
+      return /*#__PURE__*/React.createElement("div", {
+        className: "seafile-editor-module seafile-simple-editor"
+      }, /*#__PURE__*/React.createElement(Slate, {
+        editor: this.editor,
+        value: value,
+        onChange: this.onChange
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "seafile-rich-editor-topbar"
+      }, /*#__PURE__*/React.createElement(ToolBar, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        onToggleImageDialog: this.onToggleImageDialog,
+        toolbarStatus: toolbarStatus,
+        isSimpleEditor: true,
+        isShowLinkDialog: isShowLinkDialog,
+        isShowImageDialog: isShowImageDialog
+      }), /*#__PURE__*/React.createElement("div", {
+        className: 'btn-group editor-btn-group'
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        isRichEditor: true,
+        text: t('Shortcut_help'),
+        id: 'helpIcon',
+        className: 'use-help-icon',
+        icon: 'iconfont icon-use-help',
+        onMouseDown: function onMouseDown(event) {
+          return _this2.toggleShortcutDialog();
+        }
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "editor-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this2.editorRef = _ref;
+        },
+        onClick: value.length === 1 && value[0].type === 'paragraph' && Node.text(value[0].children[0]).length === 0 ? foucsEditor : null,
+        className: "editor article"
+      }, /*#__PURE__*/React.createElement(Editable, {
+        renderElement: function renderElement(props) {
+          return renderNode(props, editor, readOnly);
+        },
+        className: 'editor-component',
+        renderLeaf: renderLeaf,
+        onContextMenu: this.onContextMenu,
+        onCopy: function onCopy(event) {
+          _this2.plugin.onCopy(event, editor);
+        },
+        onCut: function onCut(event) {
+          return _this2.plugin.onCut(event);
+        },
+        autoFocus: true,
+        onKeyDown: this.plugin.onKeyDown,
+        decorate: decorationNode
+      })), toolbarStatus.isLinkActive && selectionCollapsed ? /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(TextLinkHoverMenu, {
+        onToggleLinkDialog: this.onToggleLinkDialog,
+        editorUtils: this.editorUtils
+      })) : null, this.state.isShowContextMenu && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement(ContextMenu, {
+        tableUtils: this.tableUtils,
+        contextMenuPosition: this.contextMenuPosition
+      })), this.state.isShowShortcutDialog && /*#__PURE__*/React.createElement(KeyboardShortcuts, {
+        userHelp: t('userHelp', {
+          returnObjects: true
+        }),
+        toggleShortcutDialog: this.toggleShortcutDialog
+      }))));
+    }
+  }]);
+
+  return SimpleEditor;
+}(React.Component);
+
+export default withTranslation('seafile-editor')(SimpleEditor);