fix styles for MarkdownEditor

src/components/MarkdownEditor.tsx

@@ -0,0 +1,63 @@
+import {styled} from '@mui/material/styles'
+import SimpleMDE, {SimpleMDEReactProps} from 'react-simplemde-editor'
+
+const StyledMarkdownEditor = styled('div')(({theme}) => ({
+  '& .editor-toolbar': {
+    backgroundColor: theme.palette.background.paper,
+    borderColor: theme.palette.divider,
+  },
+  '& .editor-toolbar button': {
+    color: theme.palette.text.primary,
+  },
+  '& .editor-toolbar button:hover': {
+    backgroundColor: theme.palette.action.hover,
+  },
+  '& .editor-toolbar button:active, & .editor-toolbar button.active': {
+    backgroundColor: theme.palette.action.selected,
+  },
+  '& .editor-statusbar': {
+    display: 'none',
+  },
+  // Стили для самого редактора
+  '& .CodeMirror': {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    borderColor: theme.palette.divider,
+  },
+  // Стили для текста в редакторе
+  '& .CodeMirror-selected': {
+    backgroundColor: `${theme.palette.action.selected} !important`,
+  },
+  '& .CodeMirror-cursor': {
+    borderLeftColor: theme.palette.text.primary,
+  },
+  // Стили для markdown разметки
+  '& .cm-header': {
+    color: theme.palette.primary.main,
+  },
+  '& .cm-quote': {
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
+  '& .cm-link': {
+    color: theme.palette.primary.main,
+  },
+  '& .cm-url': {
+    color: theme.palette.secondary.main,
+  },
+  '& .cm-formatting': {
+    color: theme.palette.text.secondary,
+  },
+
+  '& .CodeMirror .editor-preview-full': {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    borderColor: theme.palette.divider,
+  },
+}))
+
+export const MarkdownEditor = (props: SimpleMDEReactProps) => (
+  <StyledMarkdownEditor className="my-markdown-editor">
+    <SimpleMDE {...props} />
+  </StyledMarkdownEditor>
+)

src/globals.css

@@ -1,5 +1,4 @@
 @import './stylesheets/hidden-functionality.css';
-@import './stylesheets/markdown-editor.css';
 
 .limited-text {
   overflow: hidden;

src/pages/article/create.tsx

@@ -4,10 +4,10 @@ import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
 import React from 'react'
 
-import SimpleMDE from 'react-simplemde-editor'
+import {MarkdownEditor} from '../../components/MarkdownEditor'
 import 'easymde/dist/easymde.min.css'
 
-const MemoizedSimpleMDE = React.memo(SimpleMDE)
+const MemoizedSimpleMDE = React.memo(MarkdownEditor)
 
 export const ArticleCreate = () => {
   const {
@@ -47,7 +47,20 @@ export const ArticleCreate = () => {
           name="heading"
         />
 
-        <Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
+        <Controller
+          control={control}
+          name="body"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue=""
+          render={({field: {onChange, value}}) => (
+            <MemoizedSimpleMDE
+              value={value} // markdown
+              onChange={onChange}
+              options={simpleMDEOptions}
+              className="my-markdown-editor"
+            />
+          )}
+        />
       </Box>
     </Create>
   )

src/pages/article/edit.tsx

@@ -4,10 +4,10 @@ import {useForm} from '@refinedev/react-hook-form'
 import {Controller} from 'react-hook-form'
 import React from 'react'
 
-import SimpleMDE from 'react-simplemde-editor'
+import {MarkdownEditor} from '../../components/MarkdownEditor'
 import 'easymde/dist/easymde.min.css'
 
-const MemoizedSimpleMDE = React.memo(SimpleMDE)
+const MemoizedSimpleMDE = React.memo(MarkdownEditor)
 
 export const ArticleEdit = () => {
   const {
@@ -42,7 +42,20 @@ export const ArticleEdit = () => {
           name="heading"
         />
 
-        <Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
+        <Controller
+          control={control}
+          name="body"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue=""
+          render={({field: {onChange, value}}) => (
+            <MemoizedSimpleMDE
+              value={value} // markdown
+              onChange={onChange}
+              options={simpleMDEOptions}
+              className="my-markdown-editor"
+            />
+          )}
+        />
       </Box>
     </Edit>
   )

src/stylesheets/markdown-editor.css

@@ -1,34 +0,0 @@
-.my-markdown-editor .editor-statusbar {
-  display: none !important;
-}
-
-.my-markdown-editor .CodeMirror {
-  background-color: transparent !important;
-  color: white !important;
-}
-
-.my-markdown-editor .CodeMirror-gutters {
-  background-color: transparent !important;
-  border-right: 1px solid #444;
-  color: white !important;
-}
-
-.my-markdown-editor .CodeMirror-cursor {
-  border-left: 1px solid white !important;
-}
-
-.my-markdown-editor .editor-toolbar i {
-  color: white !important;
-}
-
-.my-markdown-editor .editor-toolbar button:hover i {
-  color: #000 !important;
-}
-
-.my-markdown-editor .editor-toolbar button.active i {
-  color: #000 !important;
-}
-
-.my-markdown-editor .editor-toolbar .separator {
-  color: transparent !important;
-}