WIP: update button styles

packages/editor/src/client/components-internal/CodeMirrorEditor/CodeMirrorEditor.module.scss

@@ -39,17 +39,6 @@
       font-size: 1.2em;
     }
 
-    // @codemirror/merge style
-    .cm-chunkButtons {
-      button[name="reject"] {
-        font-size: 0;
-        &::after {
-          font-size: 16px;
-          content: 'Discard'
-        }
-      }
-    }
-
   }
 
 }
@@ -174,6 +163,7 @@
   }
 }
 
+
 // Change buttons layout for @codemirror/merge
 .codemirror-editor :global {
   .cm-chunkButtons {

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

@@ -55,6 +55,37 @@ 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) {