From b8e7fd562e69b18134e637bd6a176c0211253ea4 Mon Sep 17 00:00:00 2001 From: maxim Date: Mon, 17 Mar 2025 01:19:54 +0300 Subject: [PATCH] fix `styles` for `MarkdownEditor` --- src/components/MarkdownEditor.tsx | 63 +++++++++++++++++++++++++++++ src/globals.css | 1 - src/pages/article/create.tsx | 19 +++++++-- src/pages/article/edit.tsx | 19 +++++++-- src/stylesheets/markdown-editor.css | 34 ---------------- 5 files changed, 95 insertions(+), 41 deletions(-) create mode 100644 src/components/MarkdownEditor.tsx delete mode 100644 src/stylesheets/markdown-editor.css diff --git a/src/components/MarkdownEditor.tsx b/src/components/MarkdownEditor.tsx new file mode 100644 index 0000000..68f0adb --- /dev/null +++ b/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) => ( + + + +) diff --git a/src/globals.css b/src/globals.css index 855162d..64496f2 100644 --- a/src/globals.css +++ b/src/globals.css @@ -1,5 +1,4 @@ @import './stylesheets/hidden-functionality.css'; -@import './stylesheets/markdown-editor.css'; .limited-text { overflow: hidden; diff --git a/src/pages/article/create.tsx b/src/pages/article/create.tsx index e2bb0d2..5d6e6ef 100644 --- a/src/pages/article/create.tsx +++ b/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" /> - } /> + ( + + )} + /> ) diff --git a/src/pages/article/edit.tsx b/src/pages/article/edit.tsx index b91d2e6..2914305 100644 --- a/src/pages/article/edit.tsx +++ b/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" /> - } /> + ( + + )} + /> ) diff --git a/src/stylesheets/markdown-editor.css b/src/stylesheets/markdown-editor.css deleted file mode 100644 index 14e3404..0000000 --- a/src/stylesheets/markdown-editor.css +++ /dev/null @@ -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; -}