feat: save element content in DB

front/components/editor/Editor.tsx

@@ -2,11 +2,15 @@ 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'
+import { IndexeddbPersistence } from "y-indexeddb";
+import { updateElement } from "../../services/courses/elements";
 
-// tools
+interface EditorProps {
+  content: string;
+  element: any;
+}
 
-function Editor() {
+function Editor(props: EditorProps) {
   // A new Y document
   const ydoc = new Y.Doc();
   const [providerState, setProviderState] = React.useState<any>({});
@@ -14,19 +18,26 @@ function Editor() {
   const [isLoading, setIsLoading] = React.useState(true);
 
   function createRTCProvider() {
-    const provider = new WebrtcProvider("learnhouse-1", ydoc);
-    
+    const provider = new WebrtcProvider(props.element.element_id, ydoc);
+
     setYdocState(ydoc);
     setProviderState(provider);
     setIsLoading(false);
   }
 
+  async function setContent(content: any) {
+    let element = props.element;
+    element.content = content.content;
+    const res = await updateElement(element, element.element_id);
+    
+  }
+
   if (isLoading) {
     createRTCProvider();
   } else {
     return (
       <div>
-        <EditorWithOptions provider={providerState} ydoc={ydocState}></EditorWithOptions>
+        <EditorWithOptions content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></EditorWithOptions>
       </div>
     );
   }

front/components/editor/EditorWithOptions.tsx

@@ -5,10 +5,16 @@ import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { AuthContext } from "../security/AuthProvider";
 
+interface EditorWithOptionsProps {
+  content: string;
+  ydoc: any;
+  provider: any;
+  setContent: (content: string) => void;
+}
 
-function EditorWithOptions(props: any) {
+function EditorWithOptions(props: EditorWithOptionsProps) {
   const auth: any = React.useContext(AuthContext);
-  
+
   const MenuBar = ({ editor }: any) => {
     if (!editor) {
       return null;
@@ -109,12 +115,11 @@ function EditorWithOptions(props: any) {
     );
   };
 
-  const editor = useEditor({
+  const editor : any = useEditor({
     extensions: [
       StarterKit.configure({
         // The Collaboration extension comes with its own history handling
         history: false,
-        
       }),
       // Register the document with Tiptap
       Collaboration.configure({
@@ -129,14 +134,14 @@ function EditorWithOptions(props: any) {
         },
       }),
     ],
-    
-    content: "<p>Hello World!</p>",
-  });
 
-  
+    content: props.content,
+  });
 
   return (
     <div>
+      File <button onClick={() => props.setContent(editor.getJSON())}>save</button>
+      <br /><hr />
       <MenuBar editor={editor} />
       <EditorContent editor={editor} style={{ backgroundColor: "white" }} />
     </div>