diff --git a/packages/client/src/components/document/collaboration/index.tsx b/packages/client/src/components/document/collaboration/index.tsx index 71d768b8..196a6c03 100644 --- a/packages/client/src/components/document/collaboration/index.tsx +++ b/packages/client/src/components/document/collaboration/index.tsx @@ -17,11 +17,11 @@ import { } from '@douyinfe/semi-ui'; import { IconUserAdd, IconDelete } from '@douyinfe/semi-icons'; import { useUser } from 'data/user'; -import { EventEmitter } from 'helpers/event-emitter'; import { useToggle } from 'hooks/use-toggle'; import { useCollaborationDocument } from 'data/document'; import { DataRender } from 'components/data-render'; import { DocumentLinkCopyer } from 'components/document/link'; +import { event, JOIN_USER } from 'event'; interface IProps { wikiId: string; @@ -31,13 +31,6 @@ interface IProps { const { Paragraph } = Typography; const { Column } = Table; -const CollaborationEventEmitter = new EventEmitter(); -const KEY = 'JOIN_USER'; - -export const joinUser = (users) => { - CollaborationEventEmitter.emit(KEY, users); -}; - const renderChecked = (onChange, authKey: 'readable' | 'editable') => (checked, docAuth) => { const handle = (evt) => { const data = { @@ -56,7 +49,6 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId }) const [visible, toggleVisible] = useToggle(false); const { users, loading, error, addUser, updateUser, deleteUser } = useCollaborationDocument(documentId); const [inviteUser, setInviteUser] = useState(''); - const [collaborationUsers, setCollaborationUsers] = useState([]); const handleOk = () => { @@ -75,7 +67,7 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId }) }; useEffect(() => { - CollaborationEventEmitter.on(KEY, ({ states: users }) => { + const handler = (users) => { const newCollaborationUsers = users .filter(Boolean) .filter((state) => state.user) @@ -97,10 +89,11 @@ export const DocumentCollaboration: React.FC = ({ wikiId, documentId }) }); setCollaborationUsers(newCollaborationUsers); - }); + }; + event.on(JOIN_USER, handler); return () => { - CollaborationEventEmitter.destroy(); + event.off(JOIN_USER, handler); }; }, [collaborationUsers, currentUser]); diff --git a/packages/client/src/components/document/delete/index.tsx b/packages/client/src/components/document/delete/index.tsx index 933fe338..68cce8c1 100644 --- a/packages/client/src/components/document/delete/index.tsx +++ b/packages/client/src/components/document/delete/index.tsx @@ -3,7 +3,7 @@ import Router from 'next/router'; import { Typography, Space, Modal } from '@douyinfe/semi-ui'; import { IconDelete } from '@douyinfe/semi-icons'; import { useDeleteDocument } from 'data/document'; -import { triggerRefreshTocs } from 'components/wiki/tocs/event'; +import { triggerRefreshTocs } from 'event'; interface IProps { wikiId: string; diff --git a/packages/client/src/components/document/editor/editor.tsx b/packages/client/src/components/document/editor/editor.tsx index 904cb6ed..211b52a9 100644 --- a/packages/client/src/components/document/editor/editor.tsx +++ b/packages/client/src/components/document/editor/editor.tsx @@ -18,10 +18,9 @@ import { destoryIndexdbProvider, } from 'tiptap'; import { DataRender } from 'components/data-render'; -import { joinUser } from 'components/document/collaboration'; import { Banner } from 'components/banner'; import { debounce } from 'helpers/debounce'; -import { em, changeTitle, USE_DATA_VERSION } from './index'; +import { event, triggerChangeDocumentTitle, triggerJoinUser, USE_DOCUMENT_VERSION } from 'event'; import styles from './index.module.scss'; interface IProps { @@ -45,7 +44,7 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam docType: 'document', events: { onAwarenessUpdate({ states }) { - joinUser({ states }); + triggerJoinUser(states); }, }, }); @@ -62,7 +61,7 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam onTransaction: debounce(({ transaction }) => { try { const title = transaction.doc.content.firstChild.content.firstChild.textContent; - changeTitle(title); + triggerChangeDocumentTitle(title); } catch (e) {} }, 50), }); @@ -92,10 +91,9 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam useEffect(() => { if (!editor) return; const handler = (data) => editor.commands.setContent(data); - em.on(USE_DATA_VERSION, handler); - + event.on(USE_DOCUMENT_VERSION, handler); return () => { - em.off(USE_DATA_VERSION, handler); + event.off(USE_DOCUMENT_VERSION, handler); }; }, [editor]); diff --git a/packages/client/src/components/document/editor/index.tsx b/packages/client/src/components/document/editor/index.tsx index 16d2c675..b11bb67e 100644 --- a/packages/client/src/components/document/editor/index.tsx +++ b/packages/client/src/components/document/editor/index.tsx @@ -16,24 +16,12 @@ import { DocumentVersion } from 'components/document/version'; import { User } from 'components/user'; import { Divider } from 'components/divider'; import { useDocumentStyle } from 'hooks/use-document-style'; -import { EventEmitter } from 'helpers/event-emitter'; +import { event, CHANGE_DOCUMENT_TITLE, triggerUseDocumentVersion } from 'event'; import { Editor } from './editor'; import styles from './index.module.scss'; const { Text } = Typography; -export const em = new EventEmitter(); -const TITLE_CHANGE_EVENT = 'TITLE_CHANGE_EVENT'; -export const USE_DATA_VERSION = 'USE_DATA_VERSION'; - -export const changeTitle = (title) => { - em.emit(TITLE_CHANGE_EVENT, title); -}; - -const useVersion = (data) => { - em.emit(USE_DATA_VERSION, data); -}; - interface IProps { documentId: string; } @@ -77,10 +65,10 @@ export const DocumentEditor: React.FC = ({ documentId }) => { ); useEffect(() => { - em.on(TITLE_CHANGE_EVENT, setTitle); + event.on(CHANGE_DOCUMENT_TITLE, setTitle); return () => { - em.destroy(); + event.off(CHANGE_DOCUMENT_TITLE, setTitle); }; }, []); @@ -97,7 +85,7 @@ export const DocumentEditor: React.FC = ({ documentId }) => { )} - + }>