reorganize css modules

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

@@ -162,42 +162,3 @@
     }
   }
 }
-
-
-// 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/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-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;
+      }
+    }
+  }
+}