diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index 4d7008f2ecc..a008d5c60ba 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -1,6 +1,6 @@
import React from "react";
// components
-import { PageRenderer } from "@/components/editors";
+import { DocumentContentLoader, PageRenderer } from "@/components/editors";
// constants
import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
// extensions
@@ -42,7 +42,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
}
// use document editor
- const { editor } = useCollaborativeEditor({
+ const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
disabledExtensions,
editorClassName,
embedHandler,
@@ -67,6 +67,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
if (!editor) return null;
+ if (!hasServerSynced && !hasServerConnectionFailed) return ;
+
return (
;
+
return (
(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index 35456068301..5b71d81d472 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
import { HocuspocusProvider } from "@hocuspocus/provider";
import Collaboration from "@tiptap/extension-collaboration";
import { IndexeddbPersistence } from "y-indexeddb";
@@ -29,6 +29,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
tabIndex,
user,
} = props;
+ // states
+ const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
+ const [hasServerSynced, setHasServerSynced] = useState(false);
// initialize Hocuspocus provider
const provider = useMemo(
() =>
@@ -38,11 +41,18 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
// using user id as a token to verify the user on the server
token: user.id,
url: realtimeConfig.url,
- onAuthenticationFailed: () => serverHandler?.onServerError?.(),
+ onAuthenticationFailed: () => {
+ serverHandler?.onServerError?.();
+ setHasServerConnectionFailed(true);
+ },
onConnect: () => serverHandler?.onConnect?.(),
onClose: (data) => {
- if (data.event.code === 1006) serverHandler?.onServerError?.();
+ if (data.event.code === 1006) {
+ serverHandler?.onServerError?.();
+ setHasServerConnectionFailed(true);
+ }
},
+ onSynced: () => setHasServerSynced(true),
}),
[id, realtimeConfig, serverHandler, user.id]
);
@@ -92,5 +102,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
tabIndex,
});
- return { editor };
+ return {
+ editor,
+ hasServerConnectionFailed,
+ hasServerSynced,
+ };
};
diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
index fb85fb8a12c..e0325151db4 100644
--- a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
import { HocuspocusProvider } from "@hocuspocus/provider";
import Collaboration from "@tiptap/extension-collaboration";
import { IndexeddbPersistence } from "y-indexeddb";
@@ -20,6 +20,9 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
serverHandler,
user,
} = props;
+ // states
+ const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
+ const [hasServerSynced, setHasServerSynced] = useState(false);
// initialize Hocuspocus provider
const provider = useMemo(
() =>
@@ -28,10 +31,18 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
name: id,
token: user.id,
parameters: realtimeConfig.queryParams,
+ onAuthenticationFailed: () => {
+ serverHandler?.onServerError?.();
+ setHasServerConnectionFailed(true);
+ },
onConnect: () => serverHandler?.onConnect?.(),
onClose: (data) => {
- if (data.event.code === 1006) serverHandler?.onServerError?.();
+ if (data.event.code === 1006) {
+ serverHandler?.onServerError?.();
+ setHasServerConnectionFailed(true);
+ }
},
+ onSynced: () => setHasServerSynced(true),
}),
[id, realtimeConfig, user.id]
);
@@ -65,5 +76,9 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
],
});
- return { editor, isIndexedDbSynced: true };
+ return {
+ editor,
+ hasServerConnectionFailed,
+ hasServerSynced,
+ };
};