@seafile/seafile-editor 0.3.99 → 0.3.100

package/dist/components/{toolbar.js → toolbar/toolbar.js}

@@ -1,59 +1,94 @@
 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 HeaderList from '../components/topbar-component/header-list';
-import ButtonGroup from '../components/topbar-component/button-group';
-import IconButton from '../components/topbar-component/icon-button';
-import TableButton from '../components/table-button';
+import React, { Fragment } from 'react';
 import { withTranslation } from 'react-i18next';
-import AddLinkDialog from './add-link-dialog';
-import AddImageDialog from './add-image-dialog';
-import AddFormulaDialog from './add-formula-dialog';
-import TableToolBar from './topbar-component/table-toolbar';
-import { EditorUtils } from '../editor/editor-utils/common-editor-utils';
-import UploadImg from './topbar-component/upload-img'; // import InsertFile from './topbarcomponent/insertFile';
+import ButtonItem from './widgets/button-item';
+import ButtonGroup from './widgets/button-group';
+import HeaderList from './header-list';
+import InsertTable from './insert-table';
+import InsertImage from './insert-image';
+import TableGroup from './table-group';
+import AddLinkDialog from '../add-link-dialog';
+import AddImageDialog from '../add-image-dialog';
+import AddFormulaDialog from '../add-formula-dialog';
+import EditorBuilder from '../../editor/editor-builder';
+import '../../assets/css/topbar.css';
 
-var ToolBar = /*#__PURE__*/function (_React$Component) {
-  _inherits(ToolBar, _React$Component);
+var Toolbar = /*#__PURE__*/function (_React$Component) {
+  _inherits(Toolbar, _React$Component);
 
-  var _super = _createSuper(ToolBar);
+  var _super = _createSuper(Toolbar);
 
-  function ToolBar(props) {
+  function Toolbar(props) {
     var _this;
 
-    _classCallCheck(this, ToolBar);
+    _classCallCheck(this, Toolbar);
 
     _this = _super.call(this, props);
 
+    _this.onToggleLinkDialog = function () {
+      _this.setState({
+        isShowLinkDialog: !_this.state.isShowLinkDialog
+      });
+    };
+
     _this.onToggleLink = function (event) {
       event.preventDefault();
 
       var isLinkActive = _this.editorUtils.isLinkActive();
 
       if (!isLinkActive) {
-        _this.props.onToggleLinkDialog();
+        _this.setState({
+          isShowLinkDialog: !_this.state.isShowLinkDialog
+        });
 
         return;
-      } else {
-        _this.editorUtils.unwrapLink();
       }
+
+      _this.editorUtils.unwrapLink();
     };
 
-    _this.editor = window.editor;
-    _this.editorUtils = new EditorUtils(_this.editor);
+    _this.onToggleLinkDialog = function () {
+      _this.setState({
+        isShowLinkDialog: !_this.state.isShowLinkDialog
+      });
+    };
+
+    _this.onToggleFormulaDialog = function () {
+      _this.setState({
+        isShowFormulaDialog: !_this.state.isShowFormulaDialog
+      });
+    };
+
+    _this.onToggleImageDialog = function () {
+      _this.setState({
+        isShowImageDialog: !_this.state.isShowImageDialog
+      });
+    };
+
+    _this.state = {
+      isShowLinkDialog: false,
+      isShowImageDialog: false,
+      isShowFormulaDialog: false
+    };
+    _this.editorUtils = EditorBuilder.getEditorUtils();
+    window.abcdef_editorToolbar = _assertThisInitialized(_this);
     return _this;
   }
 
-  _createClass(ToolBar, [{
+  _createClass(Toolbar, [{
     key: "render",
     value: function render() {
       var _this2 = this;
 
-      var t = this.props.t;
-      var toolbarStatus = this.props.toolbarStatus;
-      var readOnly = this.props.readOnly;
+      var _this$props = this.props,
+          hasSidePanel = _this$props.hasSidePanel,
+          isShowSidePanel = _this$props.isShowSidePanel,
+          t = _this$props.t;
+      var toolbarStatus = this.editorUtils.getToolbarStatus();
       var isTableActive = toolbarStatus.isTableActive,
           isHeadActive = toolbarStatus.isHeadActive,
           isCodeActive = toolbarStatus.isCodeActive,
@@ -67,11 +102,16 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
           isCheckListActive = toolbarStatus.isCheckListActive,
           isFormulaActive = toolbarStatus.isFormulaActive;
       var isListActive = isOrderedListActive || isUnorderedListActive || isCheckListActive;
-      return /*#__PURE__*/React.createElement("div", {
-        className: 'sf-editor-rich-menu ' + (this.props.isSimpleEditor ? '' : 'rich-menu')
+      var sidePanelText = isShowSidePanel ? t('Hide_side_panel') : t('Show_side_panel');
+      var _this$state = this.state,
+          isShowLinkDialog = _this$state.isShowLinkDialog,
+          isShowImageDialog = _this$state.isShowImageDialog,
+          isShowFormulaDialog = _this$state.isShowFormulaDialog;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: 'sf-editor-toolbar ' + (this.props.isSimpleEditor ? '' : 'rich-menu')
       }, /*#__PURE__*/React.createElement("div", {
         className: 'button-container'
-      }, !readOnly && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: 'header-list-container'
       }, /*#__PURE__*/React.createElement(HeaderList, {
         disabled: isFormulaActive || isCodeActive || isTableActive,
@@ -79,7 +119,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onClickHeader: this.editorUtils.onClickHeader
       })), /*#__PURE__*/React.createElement(ButtonGroup, {
         className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('bold'),
@@ -89,7 +129,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickMark(event, 'BOLD');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('italic'),
@@ -99,7 +139,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickMark(event, 'ITALIC');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('code'),
@@ -109,7 +149,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickMark(event, 'CODE');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('insert_link'),
@@ -119,7 +159,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: this.onToggleLink
       })), /*#__PURE__*/React.createElement(ButtonGroup, {
         className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('quote'),
@@ -129,7 +169,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickBlock(event, 'blockquote');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('ordered_list'),
@@ -139,7 +179,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickBlock(event, 'ordered_list');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('unordered_list'),
@@ -149,7 +189,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickBlock(event, 'unordered_list');
         }
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isTableActive || isCodeActive || isHeadActive,
         isRichEditor: true,
         text: t('check_list_item'),
@@ -159,7 +199,7 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: this.editorUtils.onToggleCheckItem
       })), /*#__PURE__*/React.createElement(ButtonGroup, {
         className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isTableActive || isHeadActive,
         isRichEditor: true,
         text: t('code_block'),
@@ -168,31 +208,30 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onMouseDown: function onMouseDown(event) {
           return _this2.editorUtils.onClickBlock(event, 'code_block');
         },
-        isActive: isCodeActive && !readOnly
-      }), /*#__PURE__*/React.createElement(TableButton, {
+        isActive: isCodeActive
+      }), /*#__PURE__*/React.createElement(InsertTable, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive,
         isRichEditor: true,
         text: t('insert_table'),
         id: 'tableButton',
         icon: 'iconfont icon-table',
         onAddTable: this.editorUtils.onAddTable
-      }), window.canInsertFormula && /*#__PURE__*/React.createElement(IconButton, {
+      }), window.canInsertFormula && /*#__PURE__*/React.createElement(ButtonItem, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive || isListActive,
         isRichEditor: true,
         text: t('insert_formula'),
         id: 'formulaButton',
         icon: 'iconfont icon-formula',
-        onMouseDown: this.props.onToggleFormulaDialog
-      }), /*#__PURE__*/React.createElement(UploadImg, {
+        onMouseDown: this.onToggleFormulaDialog
+      }), /*#__PURE__*/React.createElement(InsertImage, {
         disabled: isFormulaActive || isCodeActive || isHeadActive,
         text: 'insert_image',
         id: 'insertImageButton',
         insertRepoFile: this.props.insertRepoFile,
-        isSimpleEditor: this.props.isSimpleEditor,
         onInsertImage: this.editorUtils.insertImage,
         toolbarStatus: this.props.toolbarStatus,
-        onToggleImageDialog: this.props.onToggleImageDialog
-      })), isTableActive && !readOnly && /*#__PURE__*/React.createElement(TableToolBar, {
+        onToggleImageDialog: this.onToggleImageDialog
+      })), isTableActive && /*#__PURE__*/React.createElement(TableGroup, {
         onRemoveTable: this.editorUtils.onRemoveTable,
         onInsertColumn: this.editorUtils.onInsertColumn,
         onRemoveColumn: this.editorUtils.onRemoveColumn,
@@ -201,46 +240,45 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
         onSetAlign: this.editorUtils.onSetAlign
       }), /*#__PURE__*/React.createElement(ButtonGroup, {
         className: 'editor-btn-group'
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         className: 'editor-clear-format',
         isRichEditor: true,
         text: t('Clear_format'),
         id: 'clearButton',
         icon: 'iconfont icon-clear-format',
-        onMouseDown: this.editorUtils.clearFormat,
-        isActive: readOnly
-      }))), this.props.hasSidePanel && /*#__PURE__*/React.createElement("div", {
+        onMouseDown: this.editorUtils.clearFormat
+      }))), hasSidePanel && /*#__PURE__*/React.createElement("div", {
         className: "button-container"
       }, !this.props.isShowSidePanel && /*#__PURE__*/React.createElement(ButtonGroup, {
         className: "editor-btn-group position-absolute dropdown-menu-right"
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         isRichEditor: true,
-        text: t('Show_side_panel'),
-        id: "showSidepanel",
+        text: sidePanelText,
+        id: "showSidePanel",
         icon: "iconfont icon-angle-double-left",
         isActive: false,
         onMouseDown: this.props.toggleSidePanel
       })), this.props.isShowSidePanel && /*#__PURE__*/React.createElement(ButtonGroup, {
         className: "editor-btn-group position-absolute dropdown-menu-right"
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, /*#__PURE__*/React.createElement(ButtonItem, {
         isRichEditor: true,
-        text: t('Hide_side_panel'),
-        id: "hideSidepanel",
+        text: sidePanelText,
+        id: "hideSidePanel",
         icon: "iconfont icon-angle-double-right",
         isActive: false,
         onMouseDown: this.props.toggleSidePanel
-      }))), this.props.isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
-        toggleLinkDialog: this.props.onToggleLinkDialog
-      }), this.props.isShowFormulaDialog && /*#__PURE__*/React.createElement(AddFormulaDialog, {
-        toggleFormulaDialog: this.props.onToggleFormulaDialog
-      }), this.props.isShowImageDialog && /*#__PURE__*/React.createElement(AddImageDialog, {
-        onToggleImageDialog: this.props.onToggleImageDialog,
-        insertImage: this.editorUtils.insertImage
+      })))), isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
+        toggleLinkDialog: this.onToggleLinkDialog
+      }), isShowFormulaDialog && /*#__PURE__*/React.createElement(AddFormulaDialog, {
+        toggleFormulaDialog: this.onToggleFormulaDialog
+      }), isShowImageDialog && /*#__PURE__*/React.createElement(AddImageDialog, {
+        insertImage: this.editorUtils.insertImage,
+        onToggleImageDialog: this.onToggleImageDialog
       }));
     }
   }]);
 
-  return ToolBar;
+  return Toolbar;
 }(React.Component);
 
-export default withTranslation('seafile-editor')(ToolBar);
+export default withTranslation('seafile-editor')(Toolbar);

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) {