refactor useUnifiedMergeView

packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -22,7 +22,7 @@ export const Playground = (): JSX.Element => {
   const [editorTheme, setEditorTheme] = useState<EditorTheme>('defaultlight');
   const [editorKeymap, setEditorKeymap] = useState<KeyMapMode>('default');
   const [editorPaste, setEditorPaste] = useState<PasteMode>('both');
-  const [unifiedMergeView, setUnifiedMergeView] = useState(false);
+  const [enableUnifiedMergeView, setUnifiedMergeViewEnabled] = useState(false);
   const [editorSettings, setEditorSettings] = useState<EditorSettings>();
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -46,10 +46,9 @@ export const Playground = (): JSX.Element => {
       keymapMode: editorKeymap,
       styleActiveLine: true,
       autoFormatMarkdownTable: true,
-      unifiedMergeView,
       pasteMode: editorPaste,
     });
-  }, [setEditorSettings, editorKeymap, editorTheme, editorPaste, unifiedMergeView]);
+  }, [setEditorSettings, editorKeymap, editorTheme, editorPaste]);
 
   // set handler to save with shortcut key
   const saveHandler = useCallback(() => {
@@ -82,6 +81,7 @@ export const Playground = (): JSX.Element => {
         <div className="flex-expand-vert">
           <CodeMirrorEditorMain
             enableCollaboration
+            enableUnifiedMergeView={enableUnifiedMergeView}
             onSave={saveHandler}
             onUpload={uploadHandler}
             indentSize={4}
@@ -97,7 +97,7 @@ export const Playground = (): JSX.Element => {
             setEditorTheme={setEditorTheme}
             setEditorKeymap={setEditorKeymap}
             setEditorPaste={setEditorPaste}
-            setUnifiedMergeView={setUnifiedMergeView}
+            setUnifiedMergeView={setUnifiedMergeViewEnabled}
           />
         </div>
       </div>

packages/editor/src/client/components/CodeMirrorEditorMain.tsx

@@ -8,7 +8,7 @@ import deepmerge from 'ts-deepmerge';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
-import { setDataLine } from '../services-internal';
+import { setDataLine, useUnifiedMergeView } from '../services-internal';
 import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 import { useCollaborativeEditorMode } from '../stores/use-collaborative-editor-mode';
 
@@ -25,12 +25,15 @@ type Props = CodeMirrorEditorProps & {
   pageId?: string,
   initialValue?: string,
   enableCollaboration?: boolean,
+  enableUnifiedMergeView?: boolean,
   onEditorsUpdated?: (userList: IUserHasId[]) => void,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    user, pageId, initialValue, enableCollaboration = false, cmProps,
+    user, pageId, initialValue,
+    enableCollaboration = false, enableUnifiedMergeView = false,
+    cmProps,
     onSave, onEditorsUpdated, ...otherProps
   } = props;
 
@@ -38,6 +41,8 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
 
   useCollaborativeEditorMode(enableCollaboration, user, pageId, initialValue, onEditorsUpdated, codeMirrorEditor);
 
+  useUnifiedMergeView(enableUnifiedMergeView, codeMirrorEditor);
+
   // setup additional extensions
   useEffect(() => {
     return codeMirrorEditor?.appendExtensions?.(additionalExtensions);

packages/editor/src/client/services-internal/index.ts

@@ -6,3 +6,4 @@ export * from './link-util';
 export * from './list-util';
 export * from './paste-util';
 export * from './table';
+export * from './unified-merge-view';

packages/editor/src/client/services-internal/unified-merge-view/index.ts

@@ -0,0 +1 @@
+export * from './use-unified-merge-view';

packages/editor/src/client/services-internal/unified-merge-view/use-unified-merge-view.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+import { unifiedMergeView } from '@codemirror/merge';
+
+import type { UseCodeMirrorEditor } from '../../services';
+
+export const useUnifiedMergeView = (
+    unifiedMergeViewEnabled?: boolean,
+    codeMirrorEditor?: UseCodeMirrorEditor,
+): void => {
+
+  useEffect(() => {
+    if (unifiedMergeViewEnabled == null) {
+      return;
+    }
+    const extension = unifiedMergeViewEnabled ? [
+      unifiedMergeView({
+        original: codeMirrorEditor?.getDoc() ?? '',
+      }),
+    ] : [];
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
+    return cleanupFunction;
+  }, [codeMirrorEditor, unifiedMergeViewEnabled]);
+
+};

packages/editor/src/client/stores/use-editor-settings.ts

@@ -1,6 +1,5 @@
 import { useEffect, useCallback, useState } from 'react';
 
-import { unifiedMergeView } from '@codemirror/merge';
 import type { Extension } from '@codemirror/state';
 import { Prec } from '@codemirror/state';
 import {
@@ -96,25 +95,6 @@ const useKeymapExtension = (
   }, [codeMirrorEditor, keymapExtension]);
 };
 
-const useUnifiedMergeView = (
-    codeMirrorEditor?: UseCodeMirrorEditor,
-    unifiedMergeViewEnabled?: boolean,
-): void => {
-  useEffect(() => {
-    if (unifiedMergeViewEnabled == null) {
-      return;
-    }
-    const extension = unifiedMergeViewEnabled ? [
-      unifiedMergeView({
-        original: codeMirrorEditor?.getDoc() ?? '',
-      }),
-    ] : [];
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
-    return cleanupFunction;
-  }, [codeMirrorEditor, unifiedMergeViewEnabled]);
-};
-
 export const useEditorSettings = (
     codeMirrorEditor?: UseCodeMirrorEditor,
     editorSettings?: EditorSettings,
@@ -124,5 +104,4 @@ export const useEditorSettings = (
   useEnterKeyHandler(codeMirrorEditor, editorSettings?.autoFormatMarkdownTable);
   useThemeExtension(codeMirrorEditor, editorSettings?.theme);
   useKeymapExtension(codeMirrorEditor, editorSettings?.keymapMode, onSave);
-  useUnifiedMergeView(codeMirrorEditor, editorSettings?.unifiedMergeView);
 };

packages/editor/src/consts/editor-settings.ts

@@ -8,5 +8,4 @@ export interface EditorSettings {
   pasteMode: undefined | PasteMode,
   styleActiveLine: boolean,
   autoFormatMarkdownTable: boolean,
-  unifiedMergeView: boolean,
 }