Merge pull request #9889 from weseek/feat/164967-change-text-of-reject-button

feat: Change text and styles for Unified Merge View controls

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantSidebar/MessageCard.tsx

@@ -85,7 +85,7 @@ const AssistantMessageCard = ({
                     </button>
                     <button
                       type="button"
-                      className="btn btn-outline-success"
+                      className="btn btn-success"
                       onClick={() => clickActionButtonHandler('accept')}
                     >
                       {t('sidebar_ai_assistant.accept')}

packages/core-styles/scss/bootstrap/mixins/_button-outline-variant.scss

@@ -1,5 +1,9 @@
 @use 'sass:color';
 
+// Uncomment if you want to include this mixin with @use
+// $prefix: 'bs-' !default;
+// $btn-active-box-shadow: 0 !default;
+
 @mixin button-outline-variant-light(
   $color,
   $background: color.mix(#fff, $color, 90%),

packages/editor/src/client/components-internal/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -23,6 +23,8 @@ import { Toolbar } from './Toolbar';
 
 import style from './CodeMirrorEditor.module.scss';
 
+const moduleClass = style['codemirror-editor'];
+
 
 // Fix IME cursor position issue by EditContext
 // ref: https://github.com/weseek/growi/pull/9267
@@ -54,12 +56,14 @@ export type CodeMirrorEditorProps = {
 
 type Props = CodeMirrorEditorProps & {
   editorKey: string | GlobalCodeMirrorEditorKey,
+  className?: string,
   hideToolbar?: boolean,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
+    className,
     hideToolbar,
 
     cmProps,
@@ -217,7 +221,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
+    <div className={`${className} ${moduleClass} flex-expand-vert overflow-y-hidden`}>
       <div {...getRootProps()} className={`dropzone  ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />

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

@@ -9,7 +9,7 @@ import deepmerge from 'ts-deepmerge';
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import type { EditingClient } from '../../interfaces';
 import { CodeMirrorEditor, type CodeMirrorEditorProps } from '../components-internal/CodeMirrorEditor';
-import { setDataLine, useUnifiedMergeView } from '../services-internal';
+import { setDataLine, useUnifiedMergeView, codemirrorEditorClassForUnifiedMergeView } from '../services-internal';
 import { useCodeMirrorEditorIsolated } from '../stores/codemirror-editor';
 import { useCollaborativeEditorMode } from '../stores/use-collaborative-editor-mode';
 
@@ -92,6 +92,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   return (
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}
+      className={codemirrorEditorClassForUnifiedMergeView}
       onSave={onSave}
       cmProps={cmPropsOverride}
       {...otherProps}

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

@@ -1 +1,4 @@
+import styles from './use-unified-merge-view.module.scss';
+
 export * from './use-unified-merge-view';
+export const codemirrorEditorClassForUnifiedMergeView = styles['codemirror-editor'];

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.module.scss

@@ -0,0 +1,37 @@
+// Change buttons layout for @codemirror/merge
+.codemirror-editor :global {
+  .cm-chunkButtons {
+    // reverse order
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}
+
+// Change button size
+.codemirror-editor :global {
+  .cm-chunkButtons {
+    button {
+      --bs-btn-padding-y: .1rem;
+      --bs-btn-padding-x: .5rem;
+      --bs-btn-font-size: 1rem;
+    }
+  }
+}
+
+// Override button style with Bootstrap variables
+.codemirror-editor :global {
+  .cm-chunkButtons {
+    button {
+      color: var(--bs-btn-color) !important;
+      background: var(--bs-btn-bg) !important;
+      border: var(--bs-btn-border-width) solid var(--bs-btn-border-color) !important;
+      border-radius: var(--bs-btn-border-radius) !important;
+
+      &:hover {
+        color: var(--bs-btn-hover-color) !important;
+        background: var(--bs-btn-hover-bg) !important;
+        border-color: var(--bs-btn-hover-border-color) !important;
+      }
+    }
+  }
+}

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) {

packages/editor/src/main.scss

@@ -1,4 +1,11 @@
-@import 'bootstrap';
+@import '@growi/core-styles/scss/bootstrap/apply';
+
 @import 'react-toastify/scss/main';
 
 @import '@growi/core-styles/scss/helpers/flex-expand';
+
+:root {
+  --font-family-sans-serif: -apple-system, blinkmacsystemfont, 'Hiragino Kaku Gothic ProN', meiryo, sans-serif;
+  --font-family-serif: georgia, 'Times New Roman', times, serif;
+  --font-family-monospace: Menlo, Consolas, DejaVu Sans Mono, monospace;
+}