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>

front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/edit.tsx

@@ -3,22 +3,45 @@ import { default as React, useEffect, useRef } from "react";
 import Layout from "../../../../../../../components/ui/Layout";
 import { Title } from "../../../../../../../components/ui/styles/Title";
 import dynamic from "next/dynamic";
-import { AuthContext } from "../../../../../../../components/security/AuthProvider";
+import { useRouter } from "next/router";
+import { getElement } from "../../../../../../../services/courses/elements";
 
-const Editor = dynamic(() => import("../../../../../../../components/editor/editor"), {
+// Workarkound (Next.js SSR doesn't support tip tap editor)
+
+const Editor : any = dynamic(() => import("../../../../../../../components/editor/editor"), {
   ssr: false,
 });
 
-// tools
-
 function EditElement() {
-  
+  const router = useRouter();
-  
+  const { elementid } = router.query;
+  const [element, setElement] = React.useState<any>({});
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  async function fetchElementData() {
+    const element = await getElement("element_" + elementid);
+    setElement(element);
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (router.isReady) {
+      fetchElementData();
+    }
+    return () => {};
+  }, [router.isReady]);
+
   return (
     <Layout>
       <Title>Edit Page </Title>
       <br />
-      <Editor></Editor>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          <Editor element={element} content={element.content}></Editor>
+        </div>
+      )}
     </Layout>
   );
 }

front/services/courses/elements.ts

@@ -23,5 +23,37 @@ export async function createElement(data: any, chapter_id: any) {
   
     console.log("result", result);
     
+    return result;
+  }
+
+  export async function getElement(element_id: any) {
+    const requestOptions: any = {
+      method: "GET",
+      redirect: "follow",
+      credentials: "include",
+    };
+  
+    const result: any = await fetch(`${getAPIUrl()}elements/${element_id}`, requestOptions)
+      .then((result) => result.json())
+      .catch((error) => console.log("error", error));
+  
+    return result;
+  }
+
+  export async function updateElement(data: any, element_id: any) {
+    const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+  
+    const requestOptions: any = {
+      method: "PUT",
+      headers: HeadersConfig,
+      redirect: "follow",
+      credentials: "include",
+      body: JSON.stringify(data),
+    };
+  
+    const result: any = await fetch(`${getAPIUrl()}elements/${element_id}`, requestOptions)
+      .then((result) => result.json())
+      .catch((error) => console.log("error", error));
+  
     return result;
   }