fix: yDoc 세팅 데이터 형식 변경 및 document range error 해결

Author: ezcolin2

apps/backend/src/yjs/yjs.service.ts

@@ -21,6 +21,7 @@ import { Node } from 'src/node/node.entity';
 import { Edge } from 'src/edge/edge.entity';
 import { YMapEdge } from './yjs.type';
 import { RedisService } from '../redis/redis.service';
+import { PageNotFoundException } from 'src/exception/page.exception';
 
 // Y.Doc에는 name 컬럼이 없어서 생성했습니다.
 class CustomDoc extends Y.Doc {
@@ -36,7 +37,7 @@ class CustomDoc extends Y.Doc {
 export class YjsService
   implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect
 {
-  private logger = new Logger('YjsGateway');
+  private logger = new Logger(YjsService.name);
   private ysocketio: YSocketIO;
 
   constructor(
@@ -69,20 +70,41 @@ export class YjsService
       // document name이 flow-room이라면 모든 노드들을 볼 수 있는 화면입니다.
       // 노드를 클릭해 페이지를 열었을 때만 해당 페이지 값을 가져와서 초기 데이터로 세팅해줍니다.
       if (customDoc.name?.startsWith('document-')) {
-        const workspaceId = doc.guid;
         const pageId = parseInt(customDoc.name.split('-')[1]);
-        const findPage = await this.pageService.findPageById(pageId);
+
+        // 초기 세팅할 page content
+        let pageContent: JSON;
+        try {
+          const findPage = await this.pageService.findPageById(pageId);
+          pageContent = JSON.parse(JSON.stringify(findPage.content));
+        } catch (exception) {
+          // 에러 스택 출력
+          this.logger.error(exception.stack);
+
+          // 만약 존재하지 않는 페이지에 접근한다면 비어있는 content를 전달한다.
+          if (exception instanceof PageNotFoundException) {
+            pageContent = JSON.parse('{}');
+            return;
+          }
+
+          throw exception;
+        }
 
         // content가 비어있다면 내부 구조가 novel editor schema를 따르지 않기 때문에 오류가 납니다.
         // content가 존재할 때만 넣어줍니다.
-        const pageContent = JSON.parse(JSON.stringify(findPage.content));
-        const novelEditorContent = {
-          type: 'doc',
-          content: pageContent,
-        };
-        pageContent.length > 0 &&
-          // JSON.parse(findPage.content).length > 0 &&
-          this.initializePageContent(novelEditorContent, editorDoc);
+        // const pageContent = JSON.parse(JSON.stringify(findPage.content));
+        // const novelEditorContent = {
+        //   type: 'doc',
+        //   content: pageContent,
+        // };
+
+        if (Object.keys(pageContent).length > 0) {
+          this.transformText(pageContent);
+          this.logger.error(pageContent);
+          // this.logger.error(this.transformText(pageContent));
+          this.initializePageContent(pageContent, editorDoc);
+        }
+        // JSON.parse(findPage.content).length > 0 &&
 
         // 페이지 내용 변경 사항을 감지해서 데이터베이스에 갱신합니다.
         editorDoc.observeDeep(() => {
@@ -202,6 +224,10 @@ export class YjsService
     yTitleMap: Y.Map<unknown>,
     yEmojiMap: Y.Map<unknown>,
   ): void {
+    // 초기화
+    yNodeMap.clear();
+    yTitleMap.clear();
+    yEmojiMap.clear();
     nodes.forEach((node) => {
       const nodeId = node.id.toString(); // id를 string으로 변환
 
@@ -256,14 +282,26 @@ export class YjsService
   }
 
   // yXmlFragment에 content를 넣어준다.
-  initializePageContent(content: unknown, yXmlFragment: Y.XmlFragment) {
+  initializePageContent(content: JSON, yXmlFragment: Y.XmlFragment) {
     prosemirrorJSONToYXmlFragment(novelEditorSchema, content, yXmlFragment);
   }
 
   handleConnection() {
     this.logger.log('접속');
   }
 
+  // editor에서 paragraph 내부 text 노드의 text 값의 빈 문자열을 제거한다.
+  transformText(doc: any) {
+    doc.content.forEach((paragraph) => {
+      if (paragraph.type === 'paragraph' && Array.isArray(paragraph.content)) {
+        paragraph.content.forEach((textNode) => {
+          if (textNode.type === 'text' && textNode.text === '') {
+            textNode.text = ' '; // 빈 문자열을 "a"로 대체
+          }
+        });
+      }
+    });
+  }
   handleDisconnect() {
     this.logger.log('접속 해제');
   }