@seafile/seafile-editor 1.0.31 → 1.0.32-10

package/dist/constants/index.js

@@ -0,0 +1 @@
+export const TRANSLATE_NAMESPACE = 'seafile-editor';

package/dist/containers/hotkeys-helper/index.js

@@ -4,11 +4,12 @@ import ClassifyHotkeys from './classify-hotkeys';
 import { HELPER_HOTKEYS } from '../../constants/hot-keys';
 import { EXTERNAL_EVENTS } from '../../constants/event-types';
 import EventBus from '../../utils/event-bus';
+import { TRANSLATE_NAMESPACE } from '../../constants';
 import './style.css';
 export default function HotkeysHelper() {
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const useHelp = t('userHelp', {
     returnObjects: true
   });

package/dist/containers/outline/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import OutlineItem from './outline-item';
 import { useScrollContext } from '../../hooks/use-scroll-context';
+import { TRANSLATE_NAMESPACE } from '../../constants';
 import './style.css';
 const getHeaderList = children => {
   const headerList = [];
@@ -18,7 +19,7 @@ const Outline = _ref => {
   } = _ref;
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const scrollRef = useScrollContext();
   const [headerList, setHeaderList] = useState([]);
   const [activeId, setActiveId] = useState('');

package/dist/editors/simple-slate-editor /index.js

@@ -66,7 +66,8 @@ export default function SimpleSlateEditor(_ref) {
     return () => {
       editor.selection = null;
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "sf-simple-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/editors/slate-editor/index.js

@@ -71,7 +71,8 @@ export default function SlateEditor(_ref) {
     return () => {
       editor.selection = null;
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: "sf-slate-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/editors/slate-viewer/index.js

@@ -27,7 +27,8 @@ export default function SlateViewer(_ref) {
     return () => {
       editor.selection = null;
     };
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     initialValue: value

package/dist/extension/commons/menu/menu-drop-down.js

@@ -2,6 +2,7 @@ import React, { useRef, useState, Fragment, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import Tooltip from '../tooltip';
+import { TRANSLATE_NAMESPACE } from '../../../constants';
 const MenuDropDown = props => {
   const {
     readonly,
@@ -19,7 +20,7 @@ const MenuDropDown = props => {
   const menuDropdownRef = useRef();
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const containerId = useMemo(() => "menu-dropdown-".concat(id), [id]);
   const handleHideDropDownList = useCallback(e => {
     var _menuDropdownRef$curr;
@@ -46,7 +47,7 @@ const MenuDropDown = props => {
   }, /*#__PURE__*/React.createElement("div", {
     ref: menuItemRef,
     id: containerId,
-    className: classnames(className, 'menu-group-item sf-menu-with-dropdown', {
+    className: classnames(className, 'sf-menu-group-item sf-menu-with-dropdown', {
       'header-popover-showed': isShowDropDown,
       'header-toggle-disabled': isDisabled
     }),

package/dist/extension/commons/menu/menu-item.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import Tooltip from '../tooltip';
+import { TRANSLATE_NAMESPACE } from '../../../constants';
 const MenuItem = _ref => {
   let {
     disabled,
@@ -16,7 +17,7 @@ const MenuItem = _ref => {
   } = _ref;
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const onClick = useCallback(event => {
     if (disabled) return;
     onMouseDown(event, type);

package/dist/extension/core/utils/index.js

@@ -1,6 +1,7 @@
 import slugid from 'slugid';
 import { useTranslation } from 'react-i18next';
 import { HEADER1, PARAGRAPH } from '../../constants/element-types';
+import { TRANSLATE_NAMESPACE } from '../../../constants';
 export const match = (node, path, predicate) => {
   if (!predicate) return true;
   if (typeof predicate === 'object') {
@@ -89,7 +90,7 @@ export const Placeholder = props => {
   } = props;
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   return /*#__PURE__*/React.createElement("span", {
     style: {
       position: 'absolute',

package/dist/extension/plugins/column/render-elem.js

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Select } from '../../commons';
 import { COLUMNS_ICON_CONFIG } from './constants/column';
 import { getColumnByKey, setSeaTableColumn } from './helpers';
+import { TRANSLATE_NAMESPACE } from '../../../constants';
 const NOT_SUPPORT_COLUMN_TYPES = ['button', 'file'];
 const Column = _ref => {
   let {
@@ -15,7 +16,7 @@ const Column = _ref => {
   const isSelected = useSelected();
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const columns = useMemo(() => {
     if (!editor.columns) return [];
     return editor.columns.filter(column => !NOT_SUPPORT_COLUMN_TYPES.includes(column.type));

package/dist/extension/plugins/formula/menu/formula-modal.js

@@ -3,6 +3,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'react
 import { useTranslation } from 'react-i18next';
 import { insertFormula, updateFormula } from '../helper';
 import { getAboveBlockNode } from '../../../core';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 const FormulaModal = _ref => {
   let {
     editor,
@@ -16,7 +17,7 @@ const FormulaModal = _ref => {
   const formulaPreviewRef = useRef(null);
   const {
     t
-  } = useTranslation('seafile-editor');
+  } = useTranslation(TRANSLATE_NAMESPACE);
 
   // record current selection position
   useEffect(() => {

package/dist/extension/plugins/header/menu/index.js

@@ -6,6 +6,7 @@ import Tooltip from '../../../commons/tooltip';
 import { MAC_HOTKEYS_TIP_HEADER, WIN_HOTKEYS_EVENT_HEADER } from '../../../constants/keyboard';
 import { ELementTypes, HEADERS, HEADER_TITLE_MAP } from '../../../constants';
 import './style.css';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 const headerPopoverShowerList = [ELementTypes.PARAGRAPH, ...HEADERS];
 const HeaderMenu = _ref => {
   let {
@@ -17,7 +18,7 @@ const HeaderMenu = _ref => {
   const headerPopoverRef = useRef();
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const currentHeaderType = getHeaderType(editor);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const isDisabled = useMemo(() => isMenuDisabled(editor, readonly), [editor.selection, readonly]);

package/dist/extension/plugins/header/plugin.js

@@ -68,8 +68,12 @@ const withHeader = editor => {
       insertBreak();
     }
   };
-  newEditor.deleteBackward = data => {
-    const [match] = Editor.nodes(newEditor, {
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = editor;
+    if (!selection) return deleteBackward(unit);
+    const [headerEntry] = Editor.nodes(newEditor, {
       match: n => {
         if (!Element.isElement(n)) return false;
         if (n.type.startsWith(ELementTypes.HEADER)) return true;
@@ -78,16 +82,16 @@ const withHeader = editor => {
       // Matches nodes whose node.type starts with header
       universal: true
     });
-    if (!match) {
-      deleteBackward(data);
+    if (!headerEntry) {
+      deleteBackward(unit);
       return false;
     }
-    const isAtLineStart = isSelectionAtLineStart(editor, match[1]);
+    const isAtLineStart = isSelectionAtLineStart(editor, headerEntry[1]);
     if (isAtLineStart) {
       setHeaderType(editor, ELementTypes.PARAGRAPH);
       return true;
     }
-    return deleteBackward(data);
+    return deleteBackward(unit);
   };
   newEditor.insertFragment = data => {
     var _data$, _data$$children;

package/dist/extension/plugins/image/menu/image-menu-dialog.js

@@ -3,6 +3,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, La
 import { useTranslation } from 'react-i18next';
 import isUrl from 'is-url';
 import { insertImage } from '../helper';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 const ImageMenuInsertInternetDialog = _ref => {
   let {
     editor,
@@ -13,7 +14,7 @@ const ImageMenuInsertInternetDialog = _ref => {
   const imgUrlInputRef = useRef(null);
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const isCommitBtnDisabled = useMemo(() => {
     if (imageUrl.length === 0) return true;
     if (!isUrl(imageUrl)) return true;

package/dist/extension/plugins/image/menu/image-menu-popover.js

@@ -5,6 +5,7 @@ import EventBus from '../../../../utils/event-bus';
 import { EXTERNAL_EVENTS } from '../../../../constants/event-types';
 import { handleUpdateImage } from '../helper';
 import { focusEditor } from '../../../core';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 import './style.css';
 const ImageMenuPopover = _ref => {
   let {
@@ -15,7 +16,7 @@ const ImageMenuPopover = _ref => {
   const [isShowInternetImageModal, setIsShowInternetImageModal] = useState(false);
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const handleInsertNetworkImage = e => {
     e.nativeEvent.stopImmediatePropagation();
     e.stopPropagation();

package/dist/extension/plugins/image/render-element/index.js

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { updateImage } from '../helper';
 import ImagePreviewer from './image-previewer';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 import './style.css';
 const renderImage = (_ref, editor) => {
   var _element$data, _element$data2, _element$data3;
@@ -21,7 +22,7 @@ const renderImage = (_ref, editor) => {
   });
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const imgRef = useRef(null);
   const resizerRef = useRef();
   const isSelected = useSelected();

package/dist/extension/plugins/link/menu/link-modal.js

@@ -3,6 +3,7 @@ import { Button, Form, FormFeedback, FormGroup, Input, Label, Modal, ModalBody,
 import { useTranslation } from 'react-i18next';
 import { insertLink, isLinkType, updateLink } from '../helper';
 import { isUrl } from '../../../../utils/common';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 const LinkModal = _ref => {
   let {
     editor,
@@ -21,7 +22,7 @@ const LinkModal = _ref => {
   const linkAddressRef = useRef(null);
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   const isSubmitDisabled = useMemo(() => {
     const isFormDataEmpty = Object.values(formData).some(value => value.length === 0);
     if (isFormDataEmpty) return true;

package/dist/extension/plugins/link/render-elem/link-popover.js

@@ -5,6 +5,7 @@ import EventBus from '../../../../utils/event-bus';
 import { getLinkInfo, unWrapLinkNode } from '../helper';
 import { isUrl } from '../../../../utils/common';
 import { INTERNAL_EVENTS } from '../../../../constants/event-types';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 import './style.css';
 const LinkPopover = _ref => {
   let {
@@ -15,7 +16,7 @@ const LinkPopover = _ref => {
   } = _ref;
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   useEffect(() => {
     return () => {
       // unregister click event before unmount

package/dist/extension/plugins/markdown/plugin.js

@@ -88,8 +88,6 @@ const withMarkDown = editor => {
       const restStr = beforeText === null || beforeText === void 0 ? void 0 : beforeText.slice(0, beforeText.length - 3);
       const startOffset = restStr === null || restStr === void 0 ? void 0 : restStr.lastIndexOf('***');
       const endOffset = (beforeText === null || beforeText === void 0 ? void 0 : beforeText.lastIndexOf('***')) + 3;
-      console.log(startOffset);
-      console.log(endOffset);
       if (startOffset === -1) {
         return insertText(text);
       }

package/dist/extension/plugins/table/render-elem/context-menu.js

@@ -2,6 +2,7 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { insertColumn, insertRow, removeColumn, removeRow } from '../table-operations';
 import { INSERT_POSITION } from '../../../constants';
+import { TRANSLATE_NAMESPACE } from '../../../../constants';
 const ContextMenu = _ref => {
   let {
     position,
@@ -12,7 +13,7 @@ const ContextMenu = _ref => {
   const contextMenuRef = useRef(null);
   const {
     t
-  } = useTranslation();
+  } = useTranslation(TRANSLATE_NAMESPACE);
   useLayoutEffect(() => {
     generateContextMenuStyle(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/index.js

@@ -4,10 +4,13 @@ import RichMarkdownEditor from './pages/rich-markdown-editor';
 import MarkdownEditor from './pages/markdown-editor';
 import MarkdownViewer from './pages/markdown-view';
 import SimpleEditor from './pages/simple-editor';
+import EmailEditorDialog from './pages/email-editor-dialog';
+import LongTextEditorDialog from './pages/longtext-editor-dialog';
+import MarkdownPreview from './pages/markdown-preview';
 import SeaTableEditor from './pages/seatable-editor';
 import SeaTableViewer from './pages/seatable-viewer';
 import EventBus from './utils/event-bus';
 import { mdStringToSlate, slateToMdString, deserializeHtml, processor } from './slate-convert';
 import { replaceColumnData } from './utils/replace-slate-nodes';
 import getPreviewContent from './utils/get-preview-content';
-export { MarkdownEditor, PlainMarkdownEditor, RichMarkdownEditor, MarkdownViewer, SimpleEditor, SeaTableEditor, SeaTableViewer, EXTERNAL_EVENTS, EventBus, mdStringToSlate, slateToMdString, deserializeHtml, processor, replaceColumnData, getPreviewContent };
+export { MarkdownEditor, PlainMarkdownEditor, RichMarkdownEditor, MarkdownViewer, SimpleEditor, SeaTableEditor, SeaTableViewer, EmailEditorDialog, LongTextEditorDialog, MarkdownPreview, EXTERNAL_EVENTS, EventBus, mdStringToSlate, slateToMdString, deserializeHtml, processor, replaceColumnData, getPreviewContent };

package/dist/pages/email-editor-dialog/index.js

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import getBrowserInfo from '../../utils/get-browser-Info';
+import LongTextModal from '../longtext-editor-dialog/longtext-modal';
+import BrowserTip from '../longtext-editor-dialog/browser-tip';
+import SeaTableEditor from '../seatable-editor';
+import '../longtext-editor-dialog/style.css';
+export default function EmailEditorDialog(_ref) {
+  let {
+    lang,
+    readOnly = false,
+    headerName,
+    value,
+    columns,
+    autoSave = true,
+    saveDelay = 60000,
+    isCheckBrowser = false,
+    editorApi,
+    onSaveEditorValue,
+    onEditorValueChanged,
+    onCloseEditorDialog
+  } = _ref;
+  const editorRef = useRef(null);
+  const [isValueChanged, setValueChanged] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [dialogStyle, setDialogStyle] = useState({});
+  const onUpdateEditorValue = useCallback(() => {
+    var _editorRef$current;
+    if (!isValueChanged || readOnly) return;
+    const slateNodes = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getSlateValue();
+    onSaveEditorValue(slateNodes);
+    setValueChanged(false);
+  }, [isValueChanged, onSaveEditorValue, readOnly]);
+  const onCloseToggle = useCallback(() => {
+    onUpdateEditorValue();
+    onCloseEditorDialog();
+  }, [onCloseEditorDialog, onUpdateEditorValue]);
+  const onHotKey = useCallback(event => {
+    if (event.keyCode === 27) {
+      event.stopPropagation();
+      event.preventDefault();
+      onCloseToggle();
+    }
+  }, [onCloseToggle]);
+  useEffect(() => {
+    let timer = null;
+    if (autoSave) {
+      timer = setTimeout(() => {
+        onUpdateEditorValue();
+      }, saveDelay);
+    }
+    document.addEventListener('keydown', onHotKey);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('keydown', onHotKey);
+    };
+  }, [autoSave, saveDelay, onUpdateEditorValue, onHotKey]);
+  const {
+    isValidBrowser,
+    isWindowsWechat
+  } = useMemo(() => {
+    return getBrowserInfo(isCheckBrowser);
+  }, [isCheckBrowser]);
+  const onFullScreenToggle = useCallback(() => {
+    let containerStyle = {};
+    if (!isFullScreen) {
+      containerStyle = {
+        width: '100%',
+        height: '100%',
+        top: 0,
+        border: 'none'
+      };
+    }
+    setIsFullScreen(!isFullScreen);
+    setDialogStyle(containerStyle);
+  }, [isFullScreen]);
+  const onContentChanged = useCallback(() => {
+    // delay to update editor's content
+    setTimeout(() => {
+      // update parent's component cache value
+      if (onEditorValueChanged && typeof onEditorValueChanged === 'function') {
+        var _editorRef$current2;
+        const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
+        onEditorValueChanged(slateNodes);
+      }
+      setValueChanged(true);
+    }, 0);
+  }, [onEditorValueChanged]);
+  const onContainerKeyDown = event => {
+    event.stopPropagation();
+    onHotKey(event);
+  };
+  const headerClass = classNames('longtext-header-container', {
+    'longtext-header-container-border': readOnly || isWindowsWechat
+  });
+  const contentClass = classNames('longtext-content-container', {
+    'longtext-container-scroll': readOnly || isWindowsWechat
+  });
+  return /*#__PURE__*/React.createElement(LongTextModal, {
+    onModalClick: onCloseToggle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: dialogStyle,
+    className: "longtext-dialog-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: headerClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "longtext-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "longtext-header-name"
+  }, headerName), /*#__PURE__*/React.createElement("div", {
+    className: "longtext-header-tool"
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: onFullScreenToggle,
+    className: "longtext-header-tool-item mr-1 dtable-font dtable-icon-full-screen ".concat(isFullScreen ? 'long-text-full-screen' : '')
+  }), /*#__PURE__*/React.createElement("span", {
+    onClick: onCloseToggle,
+    className: "longtext-header-tool-item dtable-font dtable-icon-x"
+  }))), !isValidBrowser && /*#__PURE__*/React.createElement(BrowserTip, {
+    lang: lang,
+    isWindowsWechat: isWindowsWechat
+  })), /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onContainerKeyDown,
+    className: contentClass
+  }, /*#__PURE__*/React.createElement(SeaTableEditor, {
+    ref: editorRef,
+    value: value,
+    columns: columns,
+    editorApi: editorApi,
+    onContentChanged: onContentChanged
+  }))));
+}

package/dist/pages/longtext-editor-dialog/browser-tip.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export default function BrowserTip(_ref) {
+  let {
+    lang,
+    isWindowsWechat
+  } = _ref;
+  if (lang !== 'zh-cn') return null;
+  const msg = isWindowsWechat ? '你使用的微信存在兼容性问题，仅以只读模式预览。' : '你当前使用的浏览器可能存在兼容性问题。';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "browser-tip"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "browser-tip__icon dtable-font dtable-icon-description"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "browser-tip__message"
+  }, "".concat(msg, "\u8BF7\u8BD5\u8BD5\u4EE5\u4E0B\u6D4F\u89C8\u5668: Chrome \u6D4F\u89C8\u5668\u6700\u65B0\u7248\uFF0C360 \u6781\u901F\u7248\uFF0CMicrosoft Edge \u6700\u65B0\u7248")));
+}

package/dist/pages/longtext-editor-dialog/index.js

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import SimpleEditor from '../simple-editor';
+import getPreviewContent from '../../utils/get-preview-content';
+import getBrowserInfo from '../../utils/get-browser-Info';
+import LongTextModal from './longtext-modal';
+import BrowserTip from './browser-tip';
+import MarkdownPreview from '../markdown-preview';
+import './style.css';
+export default function LongTextEditorDialog(_ref) {
+  let {
+    lang,
+    readOnly,
+    headerName,
+    value,
+    autoSave = true,
+    saveDelay = 60000,
+    isCheckBrowser = false,
+    editorApi,
+    onSaveEditorValue,
+    onEditorValueChanged,
+    onCloseEditorDialog
+  } = _ref;
+  const editorRef = useRef(null);
+  const [isValueChanged, setValueChanged] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [dialogStyle, setDialogStyle] = useState({});
+  const onUpdateEditorValue = useCallback(() => {
+    var _editorRef$current, _editorRef$current2;
+    if (!isValueChanged || readOnly) return;
+    const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
+    const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
+    const value = getPreviewContent(slateNodes);
+    onSaveEditorValue({
+      ...value,
+      text: markdownString
+    });
+    setValueChanged(false);
+  }, [isValueChanged, onSaveEditorValue, readOnly]);
+  const onCloseToggle = useCallback(() => {
+    onUpdateEditorValue();
+    onCloseEditorDialog();
+  }, [onCloseEditorDialog, onUpdateEditorValue]);
+  const onHotKey = useCallback(event => {
+    if (event.keyCode === 27) {
+      event.stopPropagation();
+      event.preventDefault();
+      onCloseToggle();
+    }
+  }, [onCloseToggle]);
+  useEffect(() => {
+    let timer = null;
+    if (autoSave) {
+      timer = setTimeout(() => {
+        onUpdateEditorValue();
+      }, saveDelay);
+    }
+    document.addEventListener('keydown', onHotKey);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('keydown', onHotKey);
+    };
+  }, [autoSave, saveDelay, onUpdateEditorValue, onHotKey]);
+  const {
+    isValidBrowser,
+    isWindowsWechat
+  } = useMemo(() => {
+    return getBrowserInfo(isCheckBrowser);
+  }, [isCheckBrowser]);
+  const onFullScreenToggle = useCallback(() => {
+    let containerStyle = {};
+    if (!isFullScreen) {
+      containerStyle = {
+        width: '100%',
+        height: '100%',
+        top: 0,
+        border: 'none'
+      };
+    }
+    setIsFullScreen(!isFullScreen);
+    setDialogStyle(containerStyle);
+  }, [isFullScreen]);
+  const onContentChanged = useCallback(() => {
+    // delay to update editor's content
+    setTimeout(() => {
+      // update parent's component cache value
+      if (onEditorValueChanged && typeof onEditorValueChanged === 'function') {
+        var _editorRef$current3, _editorRef$current4;
+        const markdownString = (_editorRef$current3 = editorRef.current) === null || _editorRef$current3 === void 0 ? void 0 : _editorRef$current3.getValue();
+        const slateNodes = (_editorRef$current4 = editorRef.current) === null || _editorRef$current4 === void 0 ? void 0 : _editorRef$current4.getSlateValue();
+        const value = getPreviewContent(slateNodes);
+        onEditorValueChanged({
+          ...value,
+          text: markdownString
+        });
+      }
+      setValueChanged(true);
+    }, 0);
+  }, [onEditorValueChanged]);
+  const onContainerKeyDown = event => {
+    event.stopPropagation();
+    onHotKey(event);
+  };
+  const headerClass = classNames('longtext-header-container', {
+    'longtext-header-container-border': readOnly || isWindowsWechat
+  });
+  const contentClass = classNames('longtext-content-container', {
+    'longtext-container-scroll': readOnly || isWindowsWechat
+  });
+  return /*#__PURE__*/React.createElement(LongTextModal, {
+    onModalClick: onCloseToggle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: dialogStyle,
+    className: "longtext-dialog-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: headerClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "longtext-header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "longtext-header-name"
+  }, headerName), /*#__PURE__*/React.createElement("div", {
+    className: "longtext-header-tool"
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: onFullScreenToggle,
+    className: "longtext-header-tool-item mr-1 dtable-font dtable-icon-full-screen ".concat(isFullScreen ? 'long-text-full-screen' : '')
+  }), /*#__PURE__*/React.createElement("span", {
+    onClick: onCloseToggle,
+    className: "longtext-header-tool-item dtable-font dtable-icon-x"
+  }))), !isValidBrowser && /*#__PURE__*/React.createElement(BrowserTip, {
+    lang: lang,
+    isWindowsWechat: isWindowsWechat
+  })), /*#__PURE__*/React.createElement("div", {
+    onKeyDown: onContainerKeyDown,
+    className: contentClass
+  }, !readOnly && !isWindowsWechat && /*#__PURE__*/React.createElement(SimpleEditor, {
+    ref: editorRef,
+    value: value,
+    editorApi: editorApi,
+    onContentChanged: onContentChanged
+  }), (readOnly || isWindowsWechat) && /*#__PURE__*/React.createElement(MarkdownPreview, {
+    isWindowsWechat: isWindowsWechat,
+    value: value,
+    isShowOutline: false
+  }))));
+}

package/dist/pages/longtext-editor-dialog/longtext-modal.js

@@ -0,0 +1,34 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import ReactDOM from 'react-dom';
+class LongTextModal extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onModalClick", e => {
+      e && e.stopPropagation();
+      const className = e.target.className;
+      if (typeof className !== 'string') return;
+      if (this.props.onModalClick && (className === 'longtext-modal-wrapper' || className.startsWith('longtext-modal-wrapper'))) {
+        this.props.onModalClick();
+      }
+    });
+    const {
+      containerClass
+    } = this.props;
+    this.el = document.createElement('div');
+    this.el.className = 'longtext-modal-wrapper';
+    this.el.className = "longtext-modal-wrapper ".concat(containerClass || '');
+    document.body.appendChild(this.el);
+  }
+  componentDidMount() {
+    this.el.addEventListener('mousedown', this.onModalClick);
+  }
+  componentWillUnmount() {
+    this.el.removeEventListener('mousedown', this.onModalClick);
+    document.body.removeChild(this.el);
+  }
+  render() {
+    return ReactDOM.createPortal(this.props.children, this.el);
+  }
+}
+export default LongTextModal;

package/dist/pages/longtext-editor-dialog/style.css

@@ -0,0 +1,137 @@
+.longtext-modal-wrapper {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1070;
+}
+
+.longtext-dialog-container {
+  width: 800px;
+  border-radius: 3px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  top: 20px;
+  overflow: hidden;
+  bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  background-color: #ffffff;
+  background-clip: padding-box;
+}
+
+/* header */
+.longtext-header-container {
+  box-sizing: border-box;
+  padding: 0 16px;
+}
+
+.longtext-header-container.longtext-header-container-border {
+  border-bottom: 1px solid #e9ecef;
+}
+
+.longtext-header-container .longtext-header {
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.longtext-header-container .longtext-header-name {
+  font-weight: 700;
+}
+
+.longtext-header-container .longtext-header-tool {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.longtext-header-container .longtext-header-tool-item {
+  font-size: 16px;
+  font-weight: 700;
+  color: #000;
+  cursor: pointer;
+  opacity: 0.5;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  display: block;
+  line-height: 24px;
+  border-radius: 3px;
+}
+
+.longtext-header-container .longtext-header-tool-item.long-text-full-screen {
+  background-color: #e0e0e0;
+}
+
+.longtext-header-container .longtext-header-tool-item:not(.long-text-full-screen):hover {
+  opacity: 1;
+}
+
+/* tip message */
+.longtext-header-container .browser-tip {
+  margin-bottom: 8px;
+  height: 12px;
+  display: flex;
+  font-size: 13px;
+  color: #f25041;
+}
+
+.longtext-header-container .browser-tip__icon {
+  margin-right: 4px;
+  display: inline-block;
+  line-height: 12px;
+  transform: scale(0.8);
+}
+
+.longtext-header-container .browser-tip__message {
+  line-height: 12px;
+}
+
+/* content */
+.longtext-content-container {
+  overflow: hidden;
+  flex: 1 1 auto;
+  height: fit-content;
+}
+
+.longtext-content-container.longtext-content-container-scroll {
+  overflow-y: auto;
+  height: fit-content;
+}
+
+.longtext-content-container .sf-slate-editor-toolbar {
+  height: 34px;
+  border-top: 1px solid #e9ecef;
+  border-bottom: 1px solid #e9ecef;
+  box-shadow: none;
+}
+
+.longtext-content-container .sf-slate-editor-toolbar .sf-menu-group {
+  padding: 4px 0 4px 8px;
+}
+
+.longtext-content-container .sf-simple-slate-editor-container {
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+
+.longtext-content-container .sf-simple-slate-editor-container .article {
+  padding: 16px;
+  height: auto;
+  min-height: 100% !important;
+}
+
+.longtext-content-container .sf-simple-slate-editor-container .article>div :first-child {
+  margin-top: 0;
+}
+
+.longtext-content-container .article h2 {
+  border-bottom: none;
+}

package/dist/pages/markdown-preview/index.js

@@ -0,0 +1,59 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import Loading from '../../containers/loading';
+import MarkdownViewer from '../markdown-view';
+import { processor } from '../../slate-convert';
+import './style.css';
+// Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
+// Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
+// so use dangerouslySetInnerHTML to preview
+class MarkdownPreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "convertMarkdown", mdFile => {
+      processor.process(mdFile).then(result => {
+        let innerHtml = String(result).replace(/<a /ig, '<a target="_blank" tabindex="-1"');
+        this.setState({
+          innerHtml
+        });
+      });
+    });
+    this.state = {
+      innerHtml: null
+    };
+  }
+  componentDidMount() {
+    const {
+      isWindowsWechat,
+      value
+    } = this.props;
+    if (isWindowsWechat) {
+      this.convertMarkdown(value);
+    }
+  }
+  render() {
+    const {
+      isWindowsWechat,
+      value,
+      isShowOutline
+    } = this.props;
+    const {
+      innerHtml
+    } = this.state;
+    if (isWindowsWechat && innerHtml === null) {
+      return /*#__PURE__*/React.createElement(Loading, null);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "longtext-preview-container"
+    }, isWindowsWechat && /*#__PURE__*/React.createElement("div", {
+      className: "article",
+      dangerouslySetInnerHTML: {
+        __html: this.state.innerHtml
+      }
+    }), !isWindowsWechat && /*#__PURE__*/React.createElement(MarkdownViewer, {
+      value: value,
+      isShowOutline: isShowOutline
+    }));
+  }
+}
+export default MarkdownPreview;

package/dist/pages/markdown-preview/style.css

@@ -0,0 +1,30 @@
+.longtext-preview-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+}
+
+.longtext-preview-container .sf-slate-viewer-scroll-container {
+  overflow-y: auto;
+  height: fit-content;
+  padding: 0;
+  background: #fff;
+}
+
+.longtext-preview-container .sf-slate-viewer-article-container {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+}
+
+.longtext-preview-container .sf-slate-viewer-article-container .article {
+  padding: 0;
+  height: auto;
+  min-height: 100% !important;
+  border: 0;
+}
+
+.longtext-preview-container .article :first-child {
+  margin-top: 0;
+}

package/dist/utils/get-browser-Info.js

@@ -0,0 +1,29 @@
+const getBrowserInfo = isCheckBrowser => {
+  if (!isCheckBrowser) return {
+    isValidBrowser: true,
+    isWindowsWechat: false
+  };
+  let isValidBrowser = false;
+  let isWindowsWechat = false;
+  if (window.chrome) {
+    const appVersion = window.navigator.appVersion;
+    const appVersionList = appVersion.split(' ');
+    const index = appVersionList.findIndex(version => {
+      return version.indexOf('Chrome') >= 0;
+    });
+    let chromeVersion = appVersionList[index];
+    chromeVersion = chromeVersion.slice(chromeVersion.indexOf('/') + 1);
+    chromeVersion = parseInt(chromeVersion);
+    isValidBrowser = chromeVersion >= 76;
+    // Windows Wechat inner core is chrome 53, not support ECMA6, so use readonly mode
+    if (chromeVersion === 53 && navigator.appVersion && navigator.appVersion.includes('WindowsWechat')) {
+      isValidBrowser = false;
+      isWindowsWechat = true;
+    }
+  }
+  return {
+    isValidBrowser,
+    isWindowsWechat
+  };
+};
+export default getBrowserInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.31",
+  "version": "1.0.32-10",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -87,7 +87,7 @@
     "@codemirror/lang-markdown": "6.2.3",
     "@codemirror/language-data": "6.3.1",
     "@codemirror/view": "6.22.1",
-    "@seafile/react-image-lightbox": "2.0.2",
+    "@seafile/react-image-lightbox": "2.0.5",
     "classnames": "2.3.2",
     "codemirror": "6.0.1",
     "deep-copy": "1.4.2",