feat: style updates

front/components/auth/HeaderProfileBox.tsx

@@ -3,10 +3,11 @@ import styled from "styled-components";
 import Link from "next/link";
 import { AuthContext } from "../security/AuthProvider";
 import { getBackendUrl } from "../../services/config";
+import Avvvatars from "avvvatars-react";
 
 export const HeaderProfileBox = () => {
   const auth: any = React.useContext(AuthContext);
-  
+
   return (
     <ProfileArea>
       {!auth.isAuthenticated && (
@@ -25,10 +26,14 @@ export const HeaderProfileBox = () => {
           </ul>
         </UnidentifiedArea>
       )}
-      {auth.isAuthenticated && <AccountArea>
-        <div>{auth.userInfo.username}</div>
-        <div><img src={`${getBackendUrl()}content/uploads/img/${auth.userInfo.avatar_url}`} alt="" /></div>
-        </AccountArea>}
+      {auth.isAuthenticated && (
+        <AccountArea>
+          <div>{auth.userInfo.username}</div>
+          <div>
+            <Avvvatars value={auth.userInfo.username} style="shape" />
+          </div>
+        </AccountArea>
+      )}
     </ProfileArea>
   );
 };
@@ -38,10 +43,10 @@ const AccountArea = styled.div`
   display: flex;
   place-items: center;
 
-  div{
+  div {
     margin-right: 10px;
   }
-  img{
+  img {
     width: 29px;
     border-radius: 19px;
   }
@@ -51,8 +56,6 @@ const ProfileArea = styled.div`
   display: flex;
   place-items: stretch;
   place-items: center;
-
-
 `;
 
 const UnidentifiedArea = styled.div`

front/components/drags/chapter.tsx

@@ -27,7 +27,7 @@ function Chapter(props: any) {
             {(provided) => (
               <ElementsList {...provided.droppableProps} ref={provided.innerRef}>
                 {props.info.list.elements.map((element: any, index: any) => (
-                 <div key={element.id}> <Element key={element.id} element={element} index={index}></Element> <Link href={"/"}><a>Edit</a></Link></div>
+                 <div key={element.id}> <Element key={element.id} element={element} index={index}></Element></div>
                 ))}
                 {provided.placeholder}
               </ElementsList>

front/components/editor/Editor.tsx

@@ -2,6 +2,7 @@ import { default as React, useEffect, useRef } from "react";
 import * as Y from "yjs";
 import { WebrtcProvider } from "y-webrtc";
 import EditorWithOptions from "./EditorWithOptions";
+import { IndexeddbPersistence } from 'y-indexeddb'
 
 // tools
 
@@ -14,6 +15,7 @@ function Editor() {
 
   function createRTCProvider() {
     const provider = new WebrtcProvider("learnhouse-1", ydoc);
+    
     setYdocState(ydoc);
     setProviderState(provider);
     setIsLoading(false);

front/components/editor/EditorWithOptions.tsx

@@ -3,8 +3,12 @@ import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
+import { AuthContext } from "../security/AuthProvider";
+
 
 function EditorWithOptions(props: any) {
+  const auth: any = React.useContext(AuthContext);
+  
   const MenuBar = ({ editor }: any) => {
     if (!editor) {
       return null;
@@ -110,6 +114,7 @@ function EditorWithOptions(props: any) {
       StarterKit.configure({
         // The Collaboration extension comes with its own history handling
         history: false,
+        
       }),
       // Register the document with Tiptap
       Collaboration.configure({
@@ -119,14 +124,16 @@ function EditorWithOptions(props: any) {
       CollaborationCursor.configure({
         provider: props.provider,
         user: {
-          name: "Cyndi Lauper",
+          name: auth.userInfo.username,
           color: "#f783ac",
         },
       }),
     ],
+    
     content: "<p>Hello World!</p>",
   });
-  console.log(props.ydoc);
+
+  
 
   return (
     <div>