@seafile/seafile-editor 0.3.99 → 0.3.102

package/dist/components/toolbar/widgets/button-item.js

@@ -0,0 +1,144 @@
+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 { Tooltip } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+var ButtonItem = /*#__PURE__*/function (_React$Component) {
+  _inherits(ButtonItem, _React$Component);
+
+  var _super = _createSuper(ButtonItem);
+
+  function ButtonItem(props) {
+    var _this;
+
+    _classCallCheck(this, ButtonItem);
+
+    _this = _super.call(this, props);
+
+    _this.toggle = function () {
+      var disabled = _this.props.disabled;
+      if (disabled) return;
+      var _this$state = _this.state,
+          isFreezed = _this$state.isFreezed,
+          tooltipOpen = _this$state.tooltipOpen;
+      if (isFreezed && !tooltipOpen) return;
+
+      _this.setState({
+        tooltipOpen: !tooltipOpen,
+        isFreezed: true
+      });
+
+      _this.timer = setTimeout(function () {
+        _this.setState({
+          isFreezed: false
+        });
+      }, 100);
+    };
+
+    _this.onClick = function (event) {
+      if (!_this.props.disabled) {
+        _this.props.onClick && _this.props.onClick(event);
+      }
+    };
+
+    _this.onMouseDown = function (event) {
+      if (!_this.props.disabled) {
+        _this.props.onMouseDown(event);
+      }
+    };
+
+    _this.getClassName = function () {
+      var _this$props = _this.props,
+          isRichEditor = _this$props.isRichEditor,
+          className = _this$props.className,
+          disabled = _this$props.disabled;
+      var itemClass = 'btn btn-icon btn-secondary btn-active';
+      if (!isRichEditor) return itemClass + ' ' + className;
+      itemClass = "rich-icon-btn ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
+      return itemClass + ' ' + className;
+    };
+
+    _this.state = {
+      tooltipOpen: false,
+      isFreezed: false
+    };
+    return _this;
+  }
+
+  _createClass(ButtonItem, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.timer && clearTimeout(this.timer);
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var disabled = nextProps.disabled,
+          isActive = nextProps.isActive;
+      var _this$props2 = this.props,
+          oldDisabled = _this$props2.disabled,
+          oldIsActive = _this$props2.isActive;
+
+      if (disabled !== oldDisabled) {
+        this.setState({
+          tooltipOpen: false
+        });
+        return true;
+      } // only render iconButton when the button is active or show show tooltip
+
+
+      var tooltipOpen = nextState.tooltipOpen;
+      var oldTooltipOpen = this.state.tooltipOpen;
+
+      if (tooltipOpen === oldTooltipOpen && isActive === oldIsActive) {
+        return false;
+      }
+
+      return true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var tooltipOpen = this.state.tooltipOpen;
+      var _this$props3 = this.props,
+          id = _this$props3.id,
+          isActive = _this$props3.isActive,
+          disabled = _this$props3.disabled,
+          icon = _this$props3.icon,
+          text = _this$props3.text;
+      var className = this.getClassName();
+      var delay = {
+        show: 0,
+        hide: 0
+      };
+      return /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        id: id,
+        className: className,
+        "data-active": isActive,
+        disabled: disabled,
+        onClick: this.onClick,
+        onMouseDown: this.onMouseDown
+      }, /*#__PURE__*/React.createElement("i", {
+        className: icon
+      }), /*#__PURE__*/React.createElement(Tooltip, {
+        target: id,
+        isOpen: tooltipOpen,
+        delay: delay,
+        placement: "bottom",
+        toggle: this.toggle
+      }, text));
+    }
+  }]);
+
+  return ButtonItem;
+}(React.Component);
+
+ButtonItem.defaultProps = {
+  className: '',
+  isActive: false
+};
+export default withTranslation('seafile-editor')(ButtonItem);

package/dist/components/toolbar/widgets/drop-list.js

@@ -0,0 +1,101 @@
+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 ReactDOM from 'react-dom';
+
+var DropList = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DropList, _React$PureComponent);
+
+  var _super = _createSuper(DropList);
+
+  function DropList(props) {
+    var _this;
+
+    _classCallCheck(this, DropList);
+
+    _this = _super.call(this, props);
+
+    _this.handleClick = function (event) {
+      if (_this.props.disabled) return;
+
+      var container = _this.getContainer();
+
+      if (container.contains(event.target)) {
+        _this.toggle();
+      } else {
+        if (_this.state.dropdownOpen) {
+          _this.setState({
+            dropdownOpen: !_this.state.dropdownOpen
+          });
+        }
+      }
+    };
+
+    _this.toggle = function () {
+      _this.setState({
+        dropdownOpen: !_this.state.dropdownOpen
+      });
+    };
+
+    _this.state = {
+      dropdownOpen: false
+    };
+    return _this;
+  }
+
+  _createClass(DropList, [{
+    key: "getContainer",
+    value: function getContainer() {
+      return ReactDOM.findDOMNode(this);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleClick);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var items = [];
+      this.props.items.forEach(function (item, index) {
+        items.push( /*#__PURE__*/React.createElement("button", {
+          key: 'dropdown-item' + index,
+          onMouseDown: item.handle,
+          className: 'dropdown-item'
+        }, item.icon ? /*#__PURE__*/React.createElement("i", {
+          className: item.icon,
+          style: {
+            marginRight: '6px'
+          }
+        }) : null, item.text));
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'custom-dropdown-list'
+      }, /*#__PURE__*/React.createElement("div", {
+        id: 'list_toggle',
+        className: 'dropdown-list-toggle'
+      }, /*#__PURE__*/React.createElement("i", {
+        className: this.props.icon,
+        style: {
+          marginRight: '3px'
+        }
+      }), /*#__PURE__*/React.createElement("i", {
+        className: this.state.dropdownOpen ? 'iconfont icon-caret-up' : 'iconfont icon-drop-down'
+      })), this.state.dropdownOpen && /*#__PURE__*/React.createElement("div", {
+        role: 'menu',
+        className: 'custom-dropdown-menu dropdown-menu'
+      }, items));
+    }
+  }]);
+
+  return DropList;
+}(React.PureComponent);
+
+export default DropList;

package/dist/components/user-help.js

@@ -3,6 +3,8 @@ 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 { withTranslation } from 'react-i18next';
+import '../assets/css/user-help.css';
 
 var ShortCut = /*#__PURE__*/function (_React$Component) {
   _inherits(ShortCut, _React$Component);
@@ -162,34 +164,38 @@ var HelpShortcutList = /*#__PURE__*/function (_React$PureComponent2) {
   return HelpShortcutList;
 }(React.PureComponent);
 
-var UserHelpDialog = /*#__PURE__*/function (_React$PureComponent3) {
-  _inherits(UserHelpDialog, _React$PureComponent3);
+var UserHelp = /*#__PURE__*/function (_React$PureComponent3) {
+  _inherits(UserHelp, _React$PureComponent3);
 
-  var _super4 = _createSuper(UserHelpDialog);
+  var _super4 = _createSuper(UserHelp);
 
-  function UserHelpDialog() {
-    _classCallCheck(this, UserHelpDialog);
+  function UserHelp() {
+    _classCallCheck(this, UserHelp);
 
     return _super4.apply(this, arguments);
   }
 
-  _createClass(UserHelpDialog, [{
+  _createClass(UserHelp, [{
     key: "render",
     value: function render() {
+      var t = this.props.t;
+      var userHelp = t('userHelp', {
+        returnObjects: true
+      });
       return /*#__PURE__*/React.createElement("div", {
         className: 'seafile-editor-help align-self-end'
       }, /*#__PURE__*/React.createElement("div", {
         className: 'help-header d-flex'
       }, /*#__PURE__*/React.createElement("div", {
         className: 'help-title'
-      }, this.props.userHelp.title), /*#__PURE__*/React.createElement("div", {
+      }, userHelp.title), /*#__PURE__*/React.createElement("div", {
         className: 'help-close',
         onClick: this.props.hideHelpDialog
       }, /*#__PURE__*/React.createElement("i", {
         className: 'iconfont icon-times-circle'
       }))), /*#__PURE__*/React.createElement("div", {
         className: 'help-content'
-      }, this.props.userHelp.userHelpData.map(function (item, index) {
+      }, userHelp.userHelpData.map(function (item, index) {
         return /*#__PURE__*/React.createElement(HelpShortcutList, {
           key: 'help-list' + index,
           index: index,
@@ -199,7 +205,7 @@ var UserHelpDialog = /*#__PURE__*/function (_React$PureComponent3) {
     }
   }]);
 
-  return UserHelpDialog;
+  return UserHelp;
 }(React.PureComponent);
 
-export default UserHelpDialog;
+export default withTranslation('seafile-editor')(UserHelp);

package/dist/editor/controller/block-element-controller.js

@@ -14,6 +14,7 @@ import generateLinkElement from '../element-model/link';
 import generateImageElement from '../element-model/image';
 import isUrl from 'is-url';
 import { SfEditor } from '../custom/custom';
+import EditorBuilder from '../editor-builder';
 
 var withBlock = function withBlock(editor) {
   var exec = editor.exec;
@@ -58,7 +59,10 @@ var withBlock = function withBlock(editor) {
             return;
           }
 
-          if (window.editor.editorApi.isInternalFileLink(text)) {
+          var _EditorBuilder$getEdi = EditorBuilder.getEditor(),
+              editorApi = _EditorBuilder$getEdi.editorApi;
+
+          if (editorApi.isInternalFileLink(text)) {
             var index = text.lastIndexOf('/');
 
             if (index > 0) {
@@ -78,7 +82,7 @@ var withBlock = function withBlock(editor) {
             }
           }
 
-          if (window.editor.editorApi.isInternalDirLink(text)) {
+          if (editorApi.isInternalDirLink(text)) {
             var _index = text.lastIndexOf('/');
 
             if (_index > 0) {

package/dist/editor/controller/inline-element-controller.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { Editor, Range } from 'slate';
 import generateLinkElement from '../element-model/link';
 import generateImageElement from '../element-model/image';
+import EditorBuilder from '../editor-builder';
 
 var withInline = function withInline(editor) {
   var exec = editor.exec,
@@ -102,8 +103,11 @@ var withInline = function withInline(editor) {
         break;
 
       case 'insert_data':
-        if (data.types.includes('Files') && data.files[0].type.includes('image') && window.editor.editorApi.uploadLocalImage) {
-          window.editor.editorApi.uploadLocalImage(command.data.files[0]).then(function (res) {
+        var _EditorBuilder$getEdi = EditorBuilder.getEditor(),
+            editorApi = _EditorBuilder$getEdi.editorApi;
+
+        if (data.types.includes('Files') && data.files[0].type.includes('image') && editorApi.uploadLocalImage) {
+          editorApi.uploadLocalImage(command.data.files[0]).then(function (res) {
             var img = generateImageElement({
               data: {
                 src: res

package/dist/editor/editor-builder.js

@@ -0,0 +1,107 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { createEditor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from '@seafile/slate-react';
+import withInline from './controller/inline-element-controller';
+import withBlock from './controller/block-element-controller';
+import withVoid from './controller/void-element-controller';
+import withMarkdownShortcut from './controller/shortcut-controller';
+import normalizeNode from './controller/normalize-controller';
+import { EditorUtils } from './editor-utils/common-editor-utils';
+import TableUtils from './editor-utils/block-element-utils/table-utils';
+import Plugin from './editor-plugin';
+
+var EditorBuilder = /*#__PURE__*/function () {
+  function EditorBuilder() {
+    _classCallCheck(this, EditorBuilder);
+
+    this.editor = null;
+    this.plugin = null;
+    this.tableUtils = null;
+    this.editorUtils = null;
+  }
+
+  _createClass(EditorBuilder, null, [{
+    key: "getEditor",
+    value: function getEditor(options) {
+      if (this.editor && options) {
+        if (options && options.onSave) {
+          this.editor.onSave = options.onSave;
+        }
+
+        if (options && options.editorApi) {
+          this.editor.editorApi = options.editorApi;
+        }
+      }
+
+      if (this.editor) return this.editor;
+      this.editor = normalizeNode(withMarkdownShortcut(withVoid(withBlock(withInline(withHistory(withReact(createEditor())))))));
+
+      if (options && options.onSave) {
+        this.editor.onSave = options.onSave;
+      }
+
+      if (options && options.editorApi) {
+        this.editor.editorApi = options.editorApi;
+      }
+
+      return this.editor;
+    }
+  }, {
+    key: "getSlateEditor",
+    value: function getSlateEditor() {
+      if (this.editor) this.editor = null;
+      this.editor = withInline(withVoid(withReact(createEditor())));
+      return this.editor;
+    }
+  }, {
+    key: "resetEditor",
+    value: function resetEditor() {
+      this.editor = null;
+      this.plugin = null;
+      this.editorUtils = null;
+      this.tableUtils = null;
+    }
+  }, {
+    key: "getEditorRef",
+    value: function getEditorRef() {
+      var editorRef = window.abcdef_editor;
+      return editorRef;
+    }
+  }, {
+    key: "getToolbarRef",
+    value: function getToolbarRef() {
+      var toolbarRef = window.abcdef_editorToolbar;
+      return toolbarRef;
+    }
+  }, {
+    key: "getEditorUtils",
+    value: function getEditorUtils() {
+      if (this.editorUtils) return this.editorUtils;
+      if (!this.editor) this.getEditor();
+      this.editorUtils = new EditorUtils(this.editor);
+      return this.editorUtils;
+    }
+  }, {
+    key: "getTableUtils",
+    value: function getTableUtils() {
+      if (this.tableUtils) return this.tableUtils;
+      if (!this.editor) this.getEditor();
+      this.tableUtils = new TableUtils(this.editor);
+      return this.tableUtils;
+    }
+  }, {
+    key: "getPlugin",
+    value: function getPlugin() {
+      if (this.plugin) return this.plugin;
+      if (!this.editor) this.getEditor();
+      this.plugin = new Plugin(this.editor);
+      return this.plugin;
+    }
+  }]);
+
+  return EditorBuilder;
+}();
+
+export default EditorBuilder;

package/dist/editor/editor-component/formula.js

@@ -3,7 +3,8 @@ 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 '../../css/richeditor/formula.css';
+import '../../assets/css/formula.css';
+import EditorBuilder from '../editor-builder';
 
 var Formula = /*#__PURE__*/function (_React$Component) {
   _inherits(Formula, _React$Component);
@@ -22,7 +23,8 @@ var Formula = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.toggleFormulaEditor = function () {
-      window.richMarkdownEditor.onToggleFormulaDialog();
+      var toolbarRef = EditorBuilder.getToolbarRef();
+      toolbarRef.onToggleFormulaDialog();
     };
 
     _this.renderFormula = function () {

package/dist/editor/editor-component/image.js

@@ -8,6 +8,7 @@ import { withTranslation } from 'react-i18next';
 import Lightbox from '@seafile/react-image-lightbox';
 import { Utils } from '../../utils/utils';
 import InlineElementUtils from '../editor-utils/inline-element-utils';
+import EditorBuilder from '../editor-builder';
 import '@seafile/react-image-lightbox/style.css';
 
 var Image = /*#__PURE__*/function (_React$Component) {
@@ -100,7 +101,8 @@ var Image = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       isShowBigImage: false
     };
-    _this.inlineElementUtils = new InlineElementUtils(window.editor);
+    var editor = EditorBuilder.getEditor();
+    _this.inlineElementUtils = new InlineElementUtils(editor);
     return _this;
   }
 
@@ -128,10 +130,11 @@ var Image = /*#__PURE__*/function (_React$Component) {
       var src = data.src;
 
       if (/^\.\.\/*/.test(src) || /^\.\/*/.test(src)) {
-        var _window$editor$editor = window.editor.editorApi,
-            filePath = _window$editor$editor.filePath,
-            serviceUrl = _window$editor$editor.serviceUrl,
-            repoID = _window$editor$editor.repoID;
+        var editor = EditorBuilder.getEditor();
+        var _editor$editorApi = editor.editorApi,
+            filePath = _editor$editorApi.filePath,
+            serviceUrl = _editor$editorApi.serviceUrl,
+            repoID = _editor$editorApi.repoID;
         var originalPath = filePath.slice(0, filePath.lastIndexOf('/')) + '/' + src;
         src = serviceUrl + '/lib/' + repoID + '/file/' + Utils.pathNormalize(originalPath) + '?raw=1';
       }
@@ -221,7 +224,8 @@ var ImagePreviewer = /*#__PURE__*/function (_React$Component2) {
       });
     };
 
-    _this2.images = _this2.getImageNodes(window.editor.children);
+    var editor = EditorBuilder.getEditor();
+    _this2.images = _this2.getImageNodes(editor.children);
     _this2.state = {
       imageIndex: _this2.images.findIndex(function (item) {
         return item === props.imageUrl;

package/dist/editor/editor-component/table.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import '../../css/richeditor/table.css';
+import '../../assets/css/table.css';
 
 var TableContainer = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(TableContainer, _React$PureComponent);

package/dist/editor/editor-plugin.js

@@ -7,6 +7,7 @@ import CodeUtils from './editor-utils/block-element-utils/code-utils';
 import TableUtils from './editor-utils/block-element-utils/table-utils';
 import setEventTransfer from './custom/set-event-transfer';
 import { SfEditor } from '../editor/custom/custom';
+import EditorBuilder from './editor-builder';
 
 var Plugin = function Plugin(_editor) {
   var _this = this;
@@ -143,7 +144,8 @@ var Plugin = function Plugin(_editor) {
       byKey: true
     })(event)) {
       event.preventDefault();
-      window.richMarkdownEditor.onToggleFormulaDialog();
+      var toolbarRef = EditorBuilder.getToolbarRef();
+      toolbarRef.onToggleFormulaDialog();
       return;
     } // compate chrome: in chrome press backspace would not exec delete_backward command
 

package/dist/editor/editor.js

@@ -4,8 +4,6 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import SimpleEditor from './simple-editor';
-import SeafileEditor from './seafile-editor';
-import LoadScript from './load-script';
 
 var SimpleEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(SimpleEditorWithErrorBoundary, _React$Component);
@@ -34,33 +32,4 @@ var SimpleEditorWithErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return SimpleEditorWithErrorBoundary;
 }(React.Component);
 
-var SeafileEditorWithErrorBundary = /*#__PURE__*/function (_React$Component2) {
-  _inherits(SeafileEditorWithErrorBundary, _React$Component2);
-
-  var _super2 = _createSuper(SeafileEditorWithErrorBundary);
-
-  function SeafileEditorWithErrorBundary() {
-    _classCallCheck(this, SeafileEditorWithErrorBundary);
-
-    return _super2.apply(this, arguments);
-  }
-
-  _createClass(SeafileEditorWithErrorBundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error) {
-      console.error(error);
-      this.forceUpdate();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(LoadScript, {
-        scriptSource: this.props.scriptSource
-      }, /*#__PURE__*/React.createElement(SeafileEditor, this.props));
-    }
-  }]);
-
-  return SeafileEditorWithErrorBundary;
-}(React.Component);
-
-export { SimpleEditorWithErrorBoundary as SimpleEditor, SeafileEditorWithErrorBundary as SeafileEditor };
+export { SimpleEditorWithErrorBoundary as SimpleEditor };