feat: add ctrl+s toast in editor

packages/client/src/components/document/editor/editor.tsx

@@ -2,7 +2,7 @@ import Router from 'next/router';
 import React, { useMemo, useEffect, useState, useRef } from 'react';
 import cls from 'classnames';
 import { useEditor, EditorContent } from '@tiptap/react';
-import { BackTop } from '@douyinfe/semi-ui';
+import { BackTop, Toast } from '@douyinfe/semi-ui';
 import { ILoginUser, IAuthority } from '@think/domains';
 import { useToggle } from 'hooks/use-toggle';
 import { useNetwork } from 'hooks/use-network';
@@ -22,6 +22,7 @@ import { findMentions } from 'tiptap/utils/find-mention';
 import { useCollaborationDocument } from 'data/document';
 import { DataRender } from 'components/data-render';
 import { Banner } from 'components/banner';
+import { LogoName } from 'components/logo';
 import { debounce } from 'helpers/debounce';
 import { event, triggerChangeDocumentTitle, triggerJoinUser, USE_DOCUMENT_VERSION } from 'event';
 import { DocumentUserSetting } from './users';
@@ -158,6 +159,22 @@ export const Editor: React.FC<IProps> = ({ user: currentUser, documentId, author
     };
   }, [editor, users, currentUser]);
 
+  useEffect(() => {
+    const listener = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 83) {
+        event.preventDefault();
+        Toast.info(`${LogoName}会实时保存你的数据，无需手动保存。`);
+        return false;
+      }
+    };
+
+    window.document.addEventListener('keydown', listener);
+
+    return () => {
+      window.document.removeEventListener('keydown', listener);
+    };
+  }, []);
+
   return (
     <DataRender
       loading={loading}

packages/client/src/components/logo/index.tsx

@@ -4,6 +4,8 @@ import styles from './index.module.scss';
 
 const { Text } = Typography;
 
+export const LogoName = '云策文档';
+
 export const LogoImage = () => {
   return (
     <Link href={'/'} as={'/'}>
@@ -35,7 +37,7 @@ export const LogoText = () => {
   return (
     <Link href={'/'} as={'/'}>
       <a className={styles.wrap}>
-        <Text>云策文档</Text>
+        <Text>{LogoName}</Text>
       </a>
     </Link>
   );

packages/client/src/components/template/editor/editor.tsx

@@ -14,6 +14,7 @@ import {
   Popover,
   Popconfirm,
   BackTop,
+  Toast,
 } from '@douyinfe/semi-ui';
 import { IconChevronLeft, IconArticle } from '@douyinfe/semi-icons';
 import { ILoginUser, ITemplate } from '@think/domains';
@@ -22,6 +23,7 @@ import { BaseKit, DocumentWithTitle, getCollaborationExtension, getProvider, Men
 import { DataRender } from 'components/data-render';
 import { User } from 'components/user';
 import { DocumentStyle } from 'components/document/style';
+import { LogoName } from 'components/logo';
 import { useDocumentStyle } from 'hooks/use-document-style';
 import { useWindowSize } from 'hooks/use-window-size';
 import styles from './index.module.scss';
@@ -81,6 +83,22 @@ export const Editor: React.FC<IProps> = ({ user, data, loading, error, updateTem
     setPublic(data.isPublic);
   }, [data]);
 
+  useEffect(() => {
+    const listener = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.keyCode == 83) {
+        event.preventDefault();
+        Toast.info(`${LogoName}会实时保存你的数据，无需手动保存。`);
+        return false;
+      }
+    };
+
+    window.document.addEventListener('keydown', listener);
+
+    return () => {
+      window.document.removeEventListener('keydown', listener);
+    };
+  }, []);
+
   return (
     <div className={styles.wrap}>
       <header>