Merge pull request #8742 from weseek/fix/editor-styles

fix: Editor styles

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -36,3 +36,10 @@
     padding-top: 0.5em;
   }
 }
+
+// border-radius
+.comment-editor-styles :global {
+  .cm-editor, .cm-scroller {
+    border-radius: var(--bs-border-radius);
+  }
+}

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -1,5 +1,6 @@
 import {
   forwardRef, useMemo, useRef, useEffect,
+  DetailedHTMLProps,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
@@ -23,11 +24,14 @@ import { Toolbar } from './Toolbar';
 
 import style from './CodeMirrorEditor.module.scss';
 
-const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
-  return (
-    <div {...props} className={`flex-expand-vert ${style['codemirror-editor-container']}`} ref={ref} />
-  );
-});
+const CodeMirrorEditorContainer = forwardRef<HTMLDivElement, DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>(
+  (props, ref) => {
+    const { className = '', ...rest } = props;
+    return (
+      <div className={`${className} flex-expand-vert ${style['codemirror-editor-container']}`} ref={ref} {...rest} />
+    );
+  },
+);
 
 export type CodeMirrorEditorProps = {
   acceptedUploadFileType?: AcceptedUploadFileType,
@@ -48,6 +52,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
     hideToolbar,
+
     acceptedUploadFileType = AcceptedUploadFileType.NONE,
     indentSize,
     editorSettings,
@@ -205,7 +210,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
-    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden rounded`}>
+    <div className={`${style['codemirror-editor']} flex-expand-vert overflow-y-hidden`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -23,7 +23,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
 
   const { editorKey, acceptedUploadFileType, onUpload } = props;
   return (
-    <div className={`d-flex gap-2 py-1 px-2 px-md-3 border-top codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
+    <div className={`d-flex gap-2 py-1 px-2 px-md-3 border-top ${styles['codemirror-editor-toolbar']}`}>
       <AttachmentsDropup editorKey={editorKey} onUpload={onUpload} acceptedUploadFileType={acceptedUploadFileType} />
       <TextFormatTools editorKey={editorKey} />
       <EmojiButton

packages/editor/src/components/CodeMirrorEditorComment.tsx

@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 
 import type { Extension } from '@codemirror/state';
-import { keymap, scrollPastEnd } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { useCodeMirrorEditorIsolated } from '../stores';
 
@@ -11,7 +11,6 @@ import type { GlobalCodeMirrorEditorKey } from 'src/consts';
 
 
 const additionalExtensions: Extension[] = [
-  scrollPastEnd(),
 ];
 
 type Props = CodeMirrorEditorProps & {