diff --git a/packages/client/src/components/document/editor/editor.tsx b/packages/client/src/components/document/editor/editor.tsx index 211b52a9..1b4d8b7d 100644 --- a/packages/client/src/components/document/editor/editor.tsx +++ b/packages/client/src/components/document/editor/editor.tsx @@ -35,6 +35,8 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam if (!user) return null; const [status, setStatus] = useState('connecting'); const { online } = useNetwork(); + const [loading, toggleLoading] = useToggle(true); + const [error, setError] = useState(null); const provider = useMemo(() => { return getProvider({ targetId: documentId, @@ -46,6 +48,13 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam onAwarenessUpdate({ states }) { triggerJoinUser(states); }, + onAuthenticationFailed() { + toggleLoading(false); + setError(new Error('鉴权失败!暂时无法提供服务')); + }, + onSynced() { + toggleLoading(false); + }, }, }); }, [documentId, user.token]); @@ -65,7 +74,6 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam } catch (e) {} }, 50), }); - const [loading, toggleLoading] = useToggle(true); useEffect(() => { const indexdbProvider = getIndexdbProvider(documentId, provider.document); @@ -74,10 +82,6 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam setStatus('loadCacheSuccess'); }); - provider.on('synced', () => { - toggleLoading(false); - }); - provider.on('status', async ({ status }) => { setStatus(status); }); @@ -100,7 +104,7 @@ export const Editor: React.FC = ({ user, documentId, authority, classNam return ( { return (
diff --git a/packages/client/src/components/document/reader/editor.tsx b/packages/client/src/components/document/reader/editor.tsx index 16a34e5e..01581bf0 100644 --- a/packages/client/src/components/document/reader/editor.tsx +++ b/packages/client/src/components/document/reader/editor.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useEffect } from 'react'; +import React, { useMemo, useEffect, useState } from 'react'; import { useEditor, EditorContent } from '@tiptap/react'; import { Layout } from '@douyinfe/semi-ui'; import { IDocument, ILoginUser } from '@think/domains'; @@ -27,6 +27,8 @@ interface IProps { } export const Editor: React.FC = ({ user, documentId, document }) => { + const [loading, toggleLoading] = useToggle(true); + const [error, setError] = useState(null); const provider = useMemo(() => { return getProvider({ targetId: documentId, @@ -38,6 +40,13 @@ export const Editor: React.FC = ({ user, documentId, document }) => { onAwarenessUpdate({ states }) { triggerJoinUser(states); }, + onAuthenticationFailed() { + toggleLoading(false); + setError(new Error('鉴权失败!暂时无法提供服务')); + }, + onSynced() { + toggleLoading(false); + }, }, }); }, [documentId, user.token]); @@ -54,13 +63,8 @@ export const Editor: React.FC = ({ user, documentId, document }) => { taskItemClickable: true, }, }); - const [loading, toggleLoading] = useToggle(true); useEffect(() => { - provider.on('synced', () => { - toggleLoading(false); - }); - return () => { destoryProvider(provider, 'READER'); }; @@ -70,7 +74,7 @@ export const Editor: React.FC = ({ user, documentId, document }) => { } - error={null} + error={error} normalContent={() => { return ( diff --git a/packages/client/src/tiptap/provider.ts b/packages/client/src/tiptap/provider.ts index d078ccae..dfce8d8e 100644 --- a/packages/client/src/tiptap/provider.ts +++ b/packages/client/src/tiptap/provider.ts @@ -20,6 +20,18 @@ export const getProvider = ({ user: IUser; docType: 'document' | 'template'; events?: { + onAuthenticated?: () => void; + onAuthenticationFailed?: ({ reason }: { reason: string }) => void; + onOpen?: (event: Event) => void; + onConnect?: () => void; + onMessage?: (event: MessageEvent) => void; + onOutgoingMessage?: (message) => void; + onStatus?: (status: any) => void; + onSynced?: () => void; + onDisconnect?: (event: CloseEvent) => void; + onClose?: (event: CloseEvent) => void; + onDestroy?: () => void; + onAwarenessChange?: (states: any) => void; onAwarenessUpdate?: (states: any) => void; }; }) => { @@ -38,7 +50,7 @@ export const getProvider = ({ maxAttempts: 5, forceSyncInterval: 100, ...events, - }); + } as any); pool.set(targetId, provider); } return pool.get(targetId);