refactor

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

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+import type { UseCodeMirrorEditor } from '../../services';
+
+export const useCustomizedButtonStyles = (codeMirrorEditor?: UseCodeMirrorEditor): void => {
+
+  // Setup button styles
+  useEffect(() => {
+    if (codeMirrorEditor?.view == null) {
+      return;
+    }
+
+    const updateButtonStyles = () => {
+      const acceptButton = codeMirrorEditor.view?.dom.querySelector('button[name="accept"]');
+      acceptButton?.classList.add('btn', 'btn-sm', 'btn-success');
+
+      const rejectButton = codeMirrorEditor.view?.dom.querySelector('button[name="reject"]');
+      rejectButton?.classList.add('btn', 'btn-sm', 'btn-outline-secondary');
+      // Set button text
+      if (rejectButton != null) {
+        rejectButton.textContent = 'Discard';
+      }
+    };
+
+    // Initial setup
+    updateButtonStyles();
+
+    // Setup listener for future updates
+    const extension = EditorView.updateListener.of(() => {
+      updateButtonStyles();
+    });
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions([extension]);
+    return cleanupFunction;
+  }, [codeMirrorEditor]);
+
+};

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

@@ -17,6 +17,8 @@ import { deltaToChangeSpecs } from '../../../utils/delta-to-changespecs';
 import type { UseCodeMirrorEditor } from '../../services';
 import { useSecondaryYdocs } from '../../stores/use-secondary-ydocs';
 
+import { useCustomizedButtonStyles } from './use-customized-button-styles';
+
 
 // for avoiding apply update from primaryDoc to secondaryDoc twice
 const SYNC_BY_ACCEPT_CHUNK = 'synkByAcceptChunk';
@@ -39,6 +41,8 @@ export const useUnifiedMergeView = (
     useSecondary: isEnabled,
   }) ?? {};
 
+  useCustomizedButtonStyles(codeMirrorEditor);
+
   // setup unifiedMergeView
   useEffect(() => {
     if (!isEnabled || primaryDoc == null || secondaryDoc == null || codeMirrorEditor == null) {
@@ -55,37 +59,6 @@ export const useUnifiedMergeView = (
     return cleanupFunction;
   }, [isEnabled, pageId, codeMirrorEditor, primaryDoc, secondaryDoc]);
 
-  // Setup button styles
-  useEffect(() => {
-    if (!isEnabled || codeMirrorEditor?.view == null) {
-      return;
-    }
-
-    const updateButtonStyles = () => {
-      const acceptButton = codeMirrorEditor.view?.dom.querySelector('button[name="accept"]');
-      acceptButton?.classList.add('btn', 'btn-sm', 'btn-outline-success');
-      acceptButton?.setAttribute('style', '--bs-btn-padding-y: .1rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: 1rem;');
-      const rejectButton = codeMirrorEditor.view?.dom.querySelector('button[name="reject"]');
-      rejectButton?.classList.add('btn', 'btn-sm', 'btn-outline-secondary');
-      rejectButton?.setAttribute('style', '--bs-btn-padding-y: .1rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: 1rem;');
-      // Set button text
-      if (rejectButton != null) {
-        rejectButton.textContent = 'Discard';
-      }
-    };
-
-    // Initial setup
-    updateButtonStyles();
-
-    // Setup listener for future updates
-    const extension = EditorView.updateListener.of(() => {
-      updateButtonStyles();
-    });
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions([extension]);
-    return cleanupFunction;
-  }, [isEnabled, codeMirrorEditor]);
-
   // Setup sync from primaryDoc to secondaryDoc
   useEffect(() => {
     if (!isEnabled || primaryDoc == null || secondaryDoc == null || codeMirrorEditor == null) {