Update dependencies

* add 'use client' to more components
* install more tiptap extensions

frontend/package.json

@@ -10,47 +10,56 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@hocuspocus/provider": "^2.5.0",
-    "@mantine/core": "^7.0.2",
-    "@mantine/form": "^7.0.2",
-    "@mantine/hooks": "^7.0.2",
-    "@mantine/spotlight": "^7.0.2",
-    "@tabler/icons-react": "^2.32.0",
-    "@tanstack/react-query": "^4.33.0",
-    "@tanstack/react-table": "^8.9.3",
-    "@tiptap/extension-collaboration": "^2.1.8",
-    "@tiptap/extension-collaboration-cursor": "^2.1.8",
-    "@tiptap/extension-document": "^2.1.8",
-    "@tiptap/extension-heading": "^2.1.8",
-    "@tiptap/extension-placeholder": "^2.1.8",
-    "@tiptap/pm": "^2.1.8",
-    "@tiptap/react": "^2.1.8",
-    "@tiptap/starter-kit": "^2.1.8",
-    "axios": "^1.4.0",
+    "@hocuspocus/provider": "^2.7.0",
+    "@mantine/core": "^7.1.3",
+    "@mantine/form": "^7.1.3",
+    "@mantine/hooks": "^7.1.3",
+    "@mantine/spotlight": "^7.1.3",
+    "@mantine/tiptap": "^7.1.3",
+    "@tabler/icons-react": "^2.39.0",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-table": "^8.10.7",
+    "@tiptap/extension-collaboration": "^2.1.12",
+    "@tiptap/extension-collaboration-cursor": "^2.1.12",
+    "@tiptap/extension-document": "^2.1.12",
+    "@tiptap/extension-heading": "^2.1.12",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.1.12",
+    "@tiptap/extension-superscript": "^2.1.12",
+    "@tiptap/extension-text-align": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/pm": "^2.1.12",
+    "@tiptap/react": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.12",
+    "axios": "^1.5.1",
     "clsx": "^2.0.0",
-    "jotai": "^2.3.1",
+    "jotai": "^2.4.3",
     "jotai-optics": "^0.3.1",
     "js-cookie": "^3.0.5",
-    "next": "13.5.3",
+    "next": "13.5.5",
     "react": "18.2.0",
     "react-arborist": "^3.2.0",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
+    "socket.io-client": "^4.7.2",
     "typescript": "5.2.2",
     "uuid": "^9.0.1",
-    "yjs": "^13.6.7",
-    "zod": "^3.22.2"
+    "y-indexeddb": "^9.0.11",
+    "yjs": "^13.6.8",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.3",
-    "@types/node": "20.4.8",
-    "@types/react": "18.2.18",
-    "@types/react-dom": "18.2.7",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.13",
+    "@types/js-cookie": "^3.0.4",
+    "@types/node": "20.8.6",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
+    "eslint": "8.51.0",
+    "eslint-config-next": "13.5.5",
     "optics-ts": "^2.4.1",
-    "postcss": "^8.4.30",
-    "postcss-preset-mantine": "^1.7.0",
+    "postcss": "^8.4.31",
+    "postcss-preset-mantine": "^1.9.0",
     "postcss-simple-vars": "^7.0.1"
   }
 }

frontend/src/app/(dashboard)/(page)/p/[pageId]/page.tsx

@@ -11,8 +11,6 @@ export default function Page() {
   const { pageId } = useParams();
 
   return (
-    <div className="w-full h-[500px]">
       <Editor pageId={pageId as string} />
-    </div>
   );
 }

frontend/src/app/layout.tsx

@@ -1,5 +1,7 @@
 import '@mantine/core/styles.css';
 import '@mantine/spotlight/styles.css';
+import '@mantine/tiptap/styles.css';
+
 import type { Metadata } from 'next';
 import { TanstackProvider } from '@/components/providers/tanstack-provider';
 import CustomToaster from '@/components/ui/custom-toaster';

frontend/src/app/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { Welcome } from '@/components/welcome/welcome';
 
 export default function Home() {

frontend/src/components/navbar/navbar.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   UnstyledButton,
   Text,
@@ -21,8 +23,12 @@ import { useAtom } from 'jotai';
 import { settingsModalAtom } from '@/features/settings/modal/atoms/settings-modal-atom';
 import SettingsModal from '@/features/settings/modal/settings-modal';
 import { SearchSpotlight } from '@/features/search/search-spotlight';
-import PageTree from '@/features/page/tree/page-tree';
 import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom';
+import dynamic from 'next/dynamic';
+
+const PageTree = dynamic(() => import("@/features/page/tree/page-tree"), {
+  ssr: false,
+});
 
 interface PrimaryMenuItem {
   icon: React.ElementType;

frontend/src/components/navbar/user-button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { UnstyledButton, Group, Avatar, Text, rem } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons-react';
 import classes from './user-button.module.css';

frontend/src/features/editor/Editor.tsx

@@ -12,7 +12,7 @@ import { useAtom } from 'jotai/index';
 import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
 import { authTokensAtom } from '@/features/auth/atoms/auth-tokens-atom';
 import useCollaborationUrl from '@/features/editor/hooks/use-collaboration-url';
-import '@/features/editor/css/editor.css';
+import '@/features/editor/styles/editor.css';
 
 interface EditorProps{
   pageId: string,
@@ -25,7 +25,6 @@ const getRandomColor = () => getRandomElement(colors)
 export default function Editor({ pageId }: EditorProps ) {
   const [token] = useAtom(authTokensAtom);
   const collaborationURL = useCollaborationUrl();
-
   const [provider, setProvider] = useState<any>();
   const [doc, setDoc] = useState<Y.Doc>()
 
@@ -37,7 +36,7 @@ export default function Editor({ pageId }: EditorProps ) {
         url: collaborationURL,
         name: pageId,
         document: ydoc,
-        token: token.accessToken,
+        token: token?.accessToken,
       });
 
       setDoc(ydoc);
@@ -48,12 +47,15 @@ export default function Editor({ pageId }: EditorProps ) {
         provider.destroy();
       };
     }
-  }, [collaborationURL, pageId, token]);
+  }, [pageId, token]);
+  console.log(token)
 
   if(!doc || !provider){
     return null;
   }
 
+  console.log(doc)
+
   return (
     <TiptapEditor ydoc={doc} provider={provider} />
   );
@@ -84,12 +86,6 @@ function TiptapEditor({ ydoc, provider }: TiptapEditorProps) {
 
   const editor = useEditor({
     extensions: extensions,
-    editorProps: {
-      attributes: {
-        class:
-          "min-h-[500px] flex-1 p-4",
-      },
-    },
   });
 
   useEffect(() => {

frontend/src/features/page/tree/hooks/use-persistence.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { useMemo } from 'react';
 import {
   CreateHandler,

frontend/src/features/page/tree/page-tree.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { NodeApi, NodeRendererProps, Tree, TreeApi } from 'react-arborist';
 import {
   IconArrowsLeftRight,
@@ -26,11 +28,13 @@ import { usePersistence } from '@/features/page/tree/hooks/use-persistence';
 import { IPage } from '@/features/page/types/page.types';
 import { getPages } from '@/features/page/services/page-service';
 import useWorkspacePageOrder from '@/features/page/tree/hooks/use-workspace-page-order';
+import { usePathname, useRouter } from 'next/navigation';
 
 export default function PageTree() {
   const { data, setData, controllers } = usePersistence<TreeApi<TreeNode>>();
-  const [, setTree] = useAtom<TreeApi<TreeNode>>(treeApiAtom);
+  const [tree, setTree] = useAtom<TreeApi<TreeNode>>(treeApiAtom);
   const { data: pageOrderData } = useWorkspacePageOrder();
+  const pathname = usePathname();
 
   const fetchAndSetTreeData = async () => {
     if (pageOrderData?.childrenIds) {
@@ -48,6 +52,13 @@ export default function PageTree() {
     fetchAndSetTreeData();
   }, [pageOrderData?.childrenIds]);
 
+  useEffect(() => {
+    const pageId = pathname?.split('/')[2];
+      setTimeout(() => {
+        tree?.select(pageId);
+      }, 100);
+  }, [tree, pathname]);
+
   return (
     <div className={styles.treeContainer}>
       <FillFlexParent>
@@ -75,12 +86,25 @@ export default function PageTree() {
 }
 
 function Node({ node, style, dragHandle }: NodeRendererProps<any>) {
+  const router = useRouter();
+
+  const handleClick = () => {
+    router.push(`/p/${node.id}`);
+  }
+
+  if (node.willReceiveDrop && node.isClosed){
+    setTimeout(() => {
+      if (node.state.willReceiveDrop) node.open();
+    }, 650);
+  }
+
   return (
     <>
       <div
         style={style}
         className={clsx(styles.node, node.state)}
         ref={dragHandle}
+        onClick={handleClick}
       >
         <PageArrow node={node} />
 
@@ -188,7 +212,12 @@ function NodeMenu({ node }: { node: NodeApi<TreeNode> }) {
 
 function PageArrow({ node }: { node: NodeApi<TreeNode> }) {
   return (
-    <span onClick={() => node.toggle()}>
+    <span onClick={(e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      node.toggle();
+    }}>
+
       {node.isInternal ? (
         node.children && node.children.length > 0 ? (
           node.isOpen ? (