Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-14 00:11:11 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: editor improvements (#583)

Browse Source 
* delete unused component

* return page prosemirror content

* prefetch pages

* use prosemirro json content on editor

* cache page query with id and slug as key

* Show notice on collaboration disconnection

* enable scroll while typing

* enable immediatelyRender

* avoid image break in PDF print

* Comment editor rendering props
This commit is contained in:
Philip Okugbe
2025-01-16 12:48:35 +00:00
committed by GitHub
parent 71cfe3cd8e
commit 3cb954db69
16 changed files with 144 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
apps/client/src/features/editor/page-editor.tsx
View File

@ -8,8 +8,8 @@ import React, {
} from "react";
import { IndexeddbPersistence } from "y-indexeddb";
import * as Y from "yjs";
import { HocuspocusProvider } from "@hocuspocus/provider";
import { EditorContent, useEditor } from "@tiptap/react";
import { HocuspocusProvider, WebSocketStatus } from "@hocuspocus/provider";
import { EditorContent, EditorProvider, useEditor } from "@tiptap/react";
import {
collabExtensions,
mainExtensions,
@ -18,14 +18,16 @@ import { useAtom } from "jotai";
import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
import {
pageEditorAtom,
yjsConnectionStatusAtom,
} from "@/features/editor/atoms/editor-atoms";
import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
import {
activeCommentIdAtom,
showCommentPopupAtom,
} from "@/features/comment/atoms/comment-atom";
import CommentDialog from "@/features/comment/components/comment-dialog";
import EditorSkeleton from "@/features/editor/components/editor-skeleton";
import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
import TableMenu from "@/features/editor/components/table/table-menu.tsx";
@ -43,9 +45,14 @@ import DrawioMenu from "./components/drawio/drawio-menu";
interface PageEditorProps {
pageId: string;
editable: boolean;
content: any;
}
export default function PageEditor({ pageId, editable }: PageEditorProps) {
export default function PageEditor({
pageId,
editable,
content,
}: PageEditorProps) {
const [token] = useAtom(authTokensAtom);
const collaborationURL = useCollaborationUrl();
const [currentUser] = useAtom(currentUserAtom);
@ -56,8 +63,11 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
const ydoc = useMemo(() => new Y.Doc(), [pageId]);
const [isLocalSynced, setLocalSynced] = useState(false);
const [isRemoteSynced, setRemoteSynced] = useState(false);
const documentName = `page.${pageId}`;
const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
yjsConnectionStatusAtom,
);
const menuContainerRef = useRef(null);
const documentName = `page.${pageId}`;
const localProvider = useMemo(() => {
const provider = new IndexeddbPersistence(documentName, ydoc);
@ -76,12 +86,21 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
document: ydoc,
token: token?.accessToken,
connect: false,
onStatus: (status) => {
if (status.status === "connected") {
setYjsConnectionStatus(status.status);
}
},
});
provider.on("synced", () => {
setRemoteSynced(true);
});
provider.on("disconnect", () => {
setYjsConnectionStatus(WebSocketStatus.Disconnected);
});
return provider;
}, [ydoc, pageId, token?.accessToken]);
@ -97,15 +116,18 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
}, [remoteProvider, localProvider]);
const extensions = [
... mainExtensions,
... collabExtensions(remoteProvider, currentUser.user),
...mainExtensions,
...collabExtensions(remoteProvider, currentUser.user),
];
const editor = useEditor(
{
extensions,
editable,
immediatelyRender: true,
editorProps: {
scrollThreshold: 80,
scrollMargin: 80,
handleDOMEvents: {
keydown: (_view, event) => {
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
@ -157,36 +179,51 @@ export default function PageEditor({ pageId, editable }: PageEditorProps) {
setAsideState({ tab: "", isAsideOpen: false });
}, [pageId]);
const isSynced = isLocalSynced || isRemoteSynced;
useEffect(() => {
if (editable) {
if (yjsConnectionStatus === WebSocketStatus.Connected) {
editor.setEditable(true);
} else {
// disable edits if connection fails
editor.setEditable(false);
}
}
}, [yjsConnectionStatus]);
const isSynced = isLocalSynced && isRemoteSynced;
return isSynced ? (
<div>
{isSynced && (
<div ref={menuContainerRef}>
<EditorContent editor={editor} />
<div ref={menuContainerRef}>
<EditorContent editor={editor} />
{editor && editor.isEditable && (
<div>
<EditorBubbleMenu editor={editor} />
<TableMenu editor={editor} />
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
<ImageMenu editor={editor} />
<VideoMenu editor={editor} />
<CalloutMenu editor={editor} />
<ExcalidrawMenu editor={editor} />
<DrawioMenu editor={editor} />
<LinkMenu editor={editor} appendTo={menuContainerRef} />
</div>
)}
{editor && editor.isEditable && (
<div>
<EditorBubbleMenu editor={editor} />
<TableMenu editor={editor} />
<TableCellMenu editor={editor} appendTo={menuContainerRef} />
<ImageMenu editor={editor} />
<VideoMenu editor={editor} />
<CalloutMenu editor={editor} />
<ExcalidrawMenu editor={editor} />
<DrawioMenu editor={editor} />
<LinkMenu editor={editor} appendTo={menuContainerRef} />
</div>
)}
{showCommentPopup && (
<CommentDialog editor={editor} pageId={pageId} />
)}
</div>
)}
<div onClick={() => editor.commands.focus('end')} style={{ paddingBottom: '20vh' }}></div>
{showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
</div>
<div
onClick={() => editor.commands.focus("end")}
style={{ paddingBottom: "20vh" }}
></div>
</div>
) : (
<EditorSkeleton />
<EditorProvider
editable={false}
extensions={mainExtensions}
content={content}
></EditorProvider>
);
}