Merge pull request #134 from boostcampwm-2024/bug-fe-#133

에디터 초기 값 설정 문제 해결

Author: djk01281

frontend/src/components/EditorView.tsx

@@ -1,56 +1,35 @@
-import usePageStore from "@/store/usePageStore";
+import { useMemo, useState } from "react";
+import { EditorInstance } from "novel";
+import { useDebouncedCallback } from "use-debounce";
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+
 import Editor from "./editor";
+import usePageStore from "@/store/usePageStore";
 import {
   usePage,
   useUpdatePage,
   useOptimisticUpdatePage,
 } from "@/hooks/usePages";
 import EditorLayout from "./layout/EditorLayout";
 import EditorTitle from "./editor/EditorTitle";
-import { EditorInstance } from "novel";
-import { useEffect, useRef, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { WebsocketProvider } from "y-websocket";
-import * as Y from "yjs";
 import SaveStatus from "./editor/ui/SaveStatus";
 
 export default function EditorView() {
   const { currentPage } = usePageStore();
   const { page, isLoading } = usePage(currentPage);
-  const [editorKey, setEditorKey] = useState(0);
   const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
 
-  const ydoc = useRef<Y.Doc>();
-  const provider = useRef<WebsocketProvider>();
-
-  useEffect(() => {
-    if (currentPage === null) return;
-
-    if (provider.current) {
-      provider.current.disconnect();
-      provider.current.destroy();
-    }
-    if (ydoc.current) {
-      ydoc.current.destroy();
-    }
+  const ydoc = useMemo(() => {
+    return new Y.Doc();
+  }, [currentPage]);
 
-    const doc = new Y.Doc();
-    const wsProvider = new WebsocketProvider(
+  const provider = useMemo(() => {
+    return new WebsocketProvider(
       "ws://localhost:1234",
       `document-${currentPage}`,
-      doc,
+      ydoc,
     );
-
-    ydoc.current = doc;
-    provider.current = wsProvider;
-
-    setEditorKey((prev) => prev + 1);
-
-    return () => {
-      wsProvider.disconnect();
-      wsProvider.destroy();
-      doc.destroy();
-    };
   }, [currentPage]);
 
   const pageTitle = page?.title ?? "제목없음";
@@ -107,18 +86,18 @@ export default function EditorView() {
     );
   }
 
-  if (!ydoc.current || !provider.current) return <div>로딩중</div>;
+  if (!ydoc || !provider) return <div>로딩중</div>;
 
   return (
     <EditorLayout>
       <SaveStatus saveStatus={saveStatus} />
       <EditorTitle title={pageTitle} onTitleChange={handleTitleChange} />
       <Editor
-        key={editorKey}
+        key={ydoc.guid}
         initialContent={pageContent}
         pageId={currentPage}
-        ydoc={ydoc.current}
-        provider={provider.current}
+        ydoc={ydoc}
+        provider={provider}
         onEditorUpdate={handleEditorUpdate}
       />
     </EditorLayout>

frontend/src/components/editor/EditorTitle.tsx

@@ -7,7 +7,6 @@ export default function EditorTitle({
   title,
   onTitleChange,
 }: EditorTitleProps) {
-  console.log(title);
   return (
     <div className="p-12 pb-0">
       <input

frontend/src/components/editor/index.tsx

@@ -39,7 +39,12 @@ interface EditorProp {
   provider: WebsocketProvider;
 }
 
-const Editor = ({ onEditorUpdate, ydoc, provider }: EditorProp) => {
+const Editor = ({
+  initialContent,
+  onEditorUpdate,
+  ydoc,
+  provider,
+}: EditorProp) => {
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
@@ -52,17 +57,14 @@ const Editor = ({ onEditorUpdate, ydoc, provider }: EditorProp) => {
         onContentError={({ disableCollaboration }) => {
           disableCollaboration();
         }}
-        // onCreate={({ editor: currentEditor }) => {
-        //   provider.on("synced", () => {
-        //     if (
-        //       !ydoc.getMap("config").get("initialContentLoaded") &&
-        //       currentEditor
-        //     ) {
-        //       ydoc.getMap("config").set("initialContentLoaded", true);
-        //       ydoc.getMap("content").set("content", initialContent);
-        //     }
-        //   });
-        // }}
+        initialContent={initialContent}
+        onCreate={({ editor }) => {
+          provider.on("sync", () => {
+            if (editor.isEmpty && initialContent) {
+              editor.commands.setContent(initialContent);
+            }
+          });
+        }}
         extensions={[
           ...extensions,
           Collaboration.extend().configure({