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 tiptap editor types

Browse Source
This commit is contained in:
Philipinho
2024-04-05 01:16:07 +01:00
parent 1ea393b60c
commit 5ee74d49d7
8 changed files with 450 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,28 +1,38 @@
import '@/features/editor/styles/index.css';
import React, {
useEffect,
useLayoutEffect,
useMemo,
useState,
} from 'react';
import { IndexeddbPersistence } from 'y-indexeddb';
import * as Y from 'yjs';
import { HocuspocusProvider } from '@hocuspocus/provider';
import { EditorContent, useEditor } from '@tiptap/react';
import { collabExtensions, mainExtensions } from '@/features/editor/extensions/extensions';
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 { asideStateAtom } from '@/components/navbar/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 "@/features/editor/styles/index.css";
import React, { useEffect, useLayoutEffect, useMemo, useState } from "react";
import { IndexeddbPersistence } from "y-indexeddb";
import * as Y from "yjs";
import { HocuspocusProvider } from "@hocuspocus/provider";
import { EditorContent, useEditor } from "@tiptap/react";
import {
collabExtensions,
mainExtensions,
} from "@/features/editor/extensions/extensions";
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 { asideStateAtom } from "@/components/navbar/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";
const colors = ['#958DF1', '#F98181', '#FBBC88', '#FAF594', '#70CFF8', '#94FADB', '#B9F18D'];
const getRandomElement = list => list[Math.floor(Math.random() * list.length)];
const colors = [
"#958DF1",
"#F98181",
"#FBBC88",
"#FAF594",
"#70CFF8",
"#94FADB",
"#B9F18D",
];
const getRandomElement = (list) =>
list[Math.floor(Math.random() * list.length)];
const getRandomColor = () => getRandomElement(colors);
interface PageEditorProps {
@ -30,7 +40,10 @@ interface PageEditorProps {
editable?: boolean;
}
export default function PageEditor({ pageId, editable = true }: PageEditorProps) {
export default function PageEditor({
pageId,
editable = true,
}: PageEditorProps) {
const [token] = useAtom(authTokensAtom);
const collaborationURL = useCollaborationUrl();
const [currentUser] = useAtom(currentUserAtom);
@ -46,12 +59,9 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
const [isRemoteSynced, setRemoteSynced] = useState(false);
const localProvider = useMemo(() => {
const provider = new IndexeddbPersistence(
pageId,
ydoc,
);
const provider = new IndexeddbPersistence(pageId, ydoc);
provider.on('synced', () => {
provider.on("synced", () => {
setLocalSynced(true);
});
@ -67,7 +77,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
connect: false,
});
provider.on('synced', () => {
provider.on("synced", () => {
setRemoteSynced(true);
});
@ -85,10 +95,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
};
}, [remoteProvider, localProvider]);
const extensions = [
...mainExtensions,
...collabExtensions(remoteProvider),
];
const extensions = [...mainExtensions, ...collabExtensions(remoteProvider)];
const editor = useEditor(
{
@ -97,8 +104,8 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
editorProps: {
handleDOMEvents: {
keydown: (_view, event) => {
if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
const slashCommand = document.querySelector('#slash-command');
if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
const slashCommand = document.querySelector("#slash-command");
if (slashCommand) {
return true;
}
@ -118,14 +125,18 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
useEffect(() => {
if (editor && currentUser.user) {
editor.chain().focus().updateUser({ ...currentUser.user, color: getRandomColor() }).run();
editor
.chain()
.focus()
.updateUser({ ...currentUser.user, color: getRandomColor() })
.run();
}
}, [editor, currentUser.user]);
const handleActiveCommentEvent = (event) => {
const { commentId } = event.detail;
setActiveCommentId(commentId);
setAsideState({ tab: 'comments', isAsideOpen: true });
setAsideState({ tab: "comments", isAsideOpen: true });
const selector = `div[data-comment-id="${commentId}"]`;
const commentElement = document.querySelector(selector);
@ -133,16 +144,19 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
};
useEffect(() => {
document.addEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
document.addEventListener("ACTIVE_COMMENT_EVENT", handleActiveCommentEvent);
return () => {
document.removeEventListener('ACTIVE_COMMENT_EVENT', handleActiveCommentEvent);
document.removeEventListener(
"ACTIVE_COMMENT_EVENT",
handleActiveCommentEvent,
);
};
}, []);
useEffect(() => {
setActiveCommentId(null);
setShowCommentPopup(false);
setAsideState({ tab: '', isAsideOpen: false });
setAsideState({ tab: "", isAsideOpen: false });
}, [pageId]);
const isSynced = isLocalSynced || isRemoteSynced;
@ -165,6 +179,7 @@ export default function PageEditor({ pageId, editable = true }: PageEditorProps)
</div>
)}
</div>
) : <EditorSkeleton />;
) : (
<EditorSkeleton />
);
}