feat: init collaboration backend & adapt editor

apps/web/components/Objects/Editor/Editor.tsx

@@ -15,7 +15,7 @@ import {
   useAIEditorDispatch,
 } from '@components/Contexts/AI/AIEditorContext'
 
-// extensions
+// Extensions
 import InfoCallout from './Extensions/Callout/Info/InfoCallout'
 import WarningCallout from './Extensions/Callout/Warning/WarningCallout'
 import ImageBlock from './Extensions/Image/ImageBlock'
@@ -28,7 +28,7 @@ import QuizBlock from './Extensions/Quiz/QuizBlock'
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import Link from 'next/link'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
-import { OrderedList } from '@tiptap/extension-ordered-list'
+
 
 // Lowlight
 import { common, createLowlight } from 'lowlight'
@@ -45,14 +45,19 @@ import { useSession } from '@components/Contexts/SessionContext'
 import AIEditorToolkit from './AI/AIEditorToolkit'
 import useGetAIFeatures from '@components/AI/Hooks/useGetAIFeatures'
 import UserAvatar from '../UserAvatar'
+import randomColor from 'randomcolor'
+import Collaboration from '@tiptap/extension-collaboration'
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
 
 interface Editor {
   content: string
-  ydoc: any
-  provider: any
   activity: any
   course: any
   org: any
+  session: any
+  ydoc: any
+  hocuspocusProvider: any,
+  isCollabEnabledOnThisOrg: boolean
   setContent: (content: string) => void
 }
 
@@ -63,10 +68,12 @@ function Editor(props: Editor) {
   const is_ai_feature_enabled = useGetAIFeatures({ feature: 'editor' })
   const [isButtonAvailable, setIsButtonAvailable] = React.useState(false)
 
+
   React.useEffect(() => {
     if (is_ai_feature_enabled) {
       setIsButtonAvailable(true)
     }
+
   }, [is_ai_feature_enabled])
 
   // remove course_ from course_uuid
@@ -89,7 +96,7 @@ function Editor(props: Editor) {
     extensions: [
       StarterKit.configure({
         // The Collaboration extension comes with its own history handling
-        // history: false,
+        history: props.isCollabEnabledOnThisOrg ? false : undefined,
       }),
       InfoCallout.configure({
         editable: true,
@@ -121,26 +128,28 @@ function Editor(props: Editor) {
         controls: true,
         modestBranding: true,
       }),
-      OrderedList.configure(),
       CodeBlockLowlight.configure({
         lowlight,
       }),
 
-      // Register the document with Tiptap
-      // Collaboration.configure({
-      //   document: props.ydoc,
-      // }),
-      // Register the collaboration cursor extension
-      // CollaborationCursor.configure({
-      //   provider: props.provider,
-      //   user: {
-      //     name: auth.userInfo.username,
-      //     color: "#f783ac",
-      //   },
-      // }),
+      // Add Collaboration and CollaborationCursor only if isCollabEnabledOnThisOrg is true
+      ...(props.isCollabEnabledOnThisOrg ? [
+        Collaboration.configure({
+          document: props.hocuspocusProvider?.document,
+        }),
+
+        CollaborationCursor.configure({
+          provider: props.hocuspocusProvider,
+          user: {
+            name: props.session.user.first_name + ' ' + props.session.user.last_name,
+            color: randomColor({ luminosity: 'light' }),
+          },
+        }),
+      ] : []),
     ],
 
-    content: props.content,
+    // If collab is enabled the onSynced callback ensures initial content is set only once using editor.setContent(), preventing repetitive content insertion on editor syncs.
+    content: props.isCollabEnabledOnThisOrg ? null : props.content,
   })
 
   return (

apps/web/components/Objects/Editor/EditorWrapper.tsx

@@ -1,11 +1,17 @@
 'use client'
-import { default as React } from 'react'
-import * as Y from 'yjs'
+import { default as React, useEffect } from 'react'
 import Editor from './Editor'
 import { updateActivity } from '@services/courses/activities'
 import { toast } from 'react-hot-toast'
 import Toast from '@components/StyledElements/Toast/Toast'
 import { OrgProvider } from '@components/Contexts/OrgContext'
+import { useSession } from '@components/Contexts/SessionContext'
+
+// Collaboration
+import { HocuspocusProvider } from '@hocuspocus/provider'
+import * as Y from 'yjs'
+import { IndexeddbPersistence } from 'y-indexeddb'
+import { LEARNHOUSE_COLLABORATION_WS_URL, getCollaborationServerUrl } from '@services/config/config'
 
 interface EditorWrapperProps {
   content: string
@@ -15,18 +21,23 @@ interface EditorWrapperProps {
 }
 
 function EditorWrapper(props: EditorWrapperProps): JSX.Element {
-  // A new Y document
-  const ydoc = new Y.Doc()
-  const [providerState, setProviderState] = React.useState<any>({})
-  const [ydocState, setYdocState] = React.useState<any>({})
-  const [isLoading, setIsLoading] = React.useState(true)
+  const session = useSession() as any
 
-  function createRTCProvider() {
-    // const provider = new WebrtcProvider(props.activity.activity_id, ydoc);
-    // setYdocState(ydoc);
-    // setProviderState(provider);
-    setIsLoading(false)
-  }
+  /*  Collaboration Features */
+  const collab = getCollaborationServerUrl()
+  const isCollabEnabledOnThisOrg = props.org.config.config.GeneralConfig.collaboration && collab 
+  const doc = new Y.Doc()
+
+  // Store the Y document in the browser
+  new IndexeddbPersistence(props.activity.activity_uuid, doc)
+
+  const provider = isCollabEnabledOnThisOrg ? new HocuspocusProvider({
+    url: collab,
+    name: props.activity.activity_uuid,
+    document: doc,
+    preserveConnection: false,
+  }) : null
+  /*  Collaboration Features */
 
   async function setContent(content: any) {
     let activity = props.activity
@@ -39,24 +50,28 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
     })
   }
 
-  if (isLoading) {
-    createRTCProvider()
-    return <div>Loading...</div>
-  } else {
+  useEffect(() => {
+    
+  }
+    , [session])
+
+
+  {
     return (
       <>
         <Toast></Toast>
         <OrgProvider orgslug={props.org.slug}>
-          <Editor
+          {!session.isLoading && (<Editor
             org={props.org}
             course={props.course}
             activity={props.activity}
             content={props.content}
             setContent={setContent}
-            provider={providerState}
-            ydoc={ydocState}
-          ></Editor>
-          ;
+            session={session}
+            ydoc={doc}
+            hocuspocusProvider={provider}
+            isCollabEnabledOnThisOrg={isCollabEnabledOnThisOrg}
+          ></Editor>)}
         </OrgProvider>
       </>
     )