@seafile/seafile-editor 1.0.32-7 → 1.0.32-9

package/dist/index.js

@@ -4,6 +4,7 @@ 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';
@@ -12,4 +13,4 @@ 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, LongTextEditorDialog, MarkdownPreview, 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/style.css

@@ -5,7 +5,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  z-index: 1049;
+  z-index: 1070;
 }
 
 .longtext-dialog-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.32-7",
+  "version": "1.0.32-9",
   "description": "",
   "main": "dist/index.js",
   "scripts": {