Merge pull request #8569 from weseek/support/refactor-ycollab

support: Refactor ycollab

apps/app/package.json

@@ -280,7 +280,6 @@
     "socket.io-client": "^4.2.0",
     "source-map-loader": "^4.0.1",
     "swagger2openapi": "^7.0.8",
-    "tsc-alias": "^1.2.9",
-    "y-codemirror.next": "^0.3.2"
+    "tsc-alias": "^1.2.9"
   }
 }

packages/editor/src/@types/y-codemirror.next.d.ts

@@ -0,0 +1,2 @@
+// https://github.com/yjs/y-codemirror.next/issues/27
+declare module 'y-codemirror.next';

packages/editor/src/stores/use-collaborative-editor-mode.ts

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 
+import { keymap } from '@codemirror/view';
 import { GlobalSocketEventName, type IUserHasId } from '@growi/core/dist/interfaces';
 import { useGlobalSocket, GLOBAL_SOCKET_NS } from '@growi/core/dist/swr';
-// see: https://github.com/yjs/y-codemirror.next#example
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { yCollab } from 'y-codemirror.next';
+import { yCollab, yUndoManagerKeymap } from 'y-codemirror.next';
 import { SocketIOProvider } from 'y-socket.io';
 import * as Y from 'yjs';
 
@@ -118,11 +116,17 @@ export const useCollaborativeEditorMode = (
 
     codeMirrorEditor.initDoc(ytext.toString());
 
-    const cleanup = codeMirrorEditor.appendExtensions([
+    const cleanupYUndoManagerKeymap = codeMirrorEditor.appendExtensions([
+      keymap.of(yUndoManagerKeymap),
+    ]);
+    const cleanupYCollab = codeMirrorEditor.appendExtensions([
       yCollab(ytext, provider.awareness, { undoManager }),
     ]);
 
-    return cleanup;
+    return () => {
+      cleanupYUndoManagerKeymap?.();
+      cleanupYCollab?.();
+    };
   };
 
   useEffect(cleanupYDoc, [cPageId, onEditorsUpdated, pageId, provider, socket, ydoc]);

packages/editor/src/stores/use-default-extensions.ts

@@ -9,10 +9,6 @@ import {
 } from '@codemirror/state';
 import { keymap, EditorView, KeyBinding } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
-// see: https://github.com/yjs/y-codemirror.next#example
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { yUndoManagerKeymap } from 'y-codemirror.next';
 
 import type { UseCodeMirrorEditor } from '../services';
 import { emojiAutocompletionSettings } from '../services/extensions/emojiAutocompletionSettings';
@@ -39,7 +35,6 @@ const defaultExtensions: Extension[] = [
   keymap.of(markdownKeymap),
   keymap.of([indentWithTab]),
   Prec.lowest(keymap.of(defaultKeymap)),
-  keymap.of(yUndoManagerKeymap),
   syntaxHighlighting(markdownHighlighting),
   Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
   emojiAutocompletionSettings,