upgrade create & edit for /article route using react-simplemde-editor

src/globals.css

@@ -1,3 +1,38 @@
 .refine-list-button {
   display: none !important;
 }
+
+.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;
+}

src/pages/article/create.tsx

@@ -1,12 +1,20 @@
 import {Box, TextField} from '@mui/material'
 import {Create} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+import React from 'react'
+
+import SimpleMDE from 'react-simplemde-editor'
+import 'easymde/dist/easymde.min.css'
+
+const MemoizedSimpleMDE = React.memo(SimpleMDE)
 
 export const ArticleCreate = () => {
   const {
     saveButtonProps,
     refineCore: {formLoading},
     register,
+    control,
     formState: {errors},
   } = useForm({
     refineCoreProps: {
@@ -14,6 +22,14 @@ export const ArticleCreate = () => {
     },
   })
 
+  const simpleMDEOptions = React.useMemo(
+    () => ({
+      placeholder: 'Введите контент в формате Markdown...',
+      spellChecker: false,
+    }),
+    [],
+  )
+
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -30,19 +46,8 @@ export const ArticleCreate = () => {
           label={'Заголовок'}
           name="heading"
         />
-        <TextField
-          {...register('body', {
-            required: 'Это поле является обязательным',
-          })}
-          error={!!(errors as any)?.body}
-          helperText={(errors as any)?.body?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Контент'}
-          name="body"
-        />
+
+        <Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
       </Box>
     </Create>
   )

src/pages/article/edit.tsx

@@ -1,13 +1,29 @@
 import {Box, TextField} from '@mui/material'
 import {Edit} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
+import React from 'react'
+
+import SimpleMDE from 'react-simplemde-editor'
+import 'easymde/dist/easymde.min.css'
+
+const MemoizedSimpleMDE = React.memo(SimpleMDE)
 
 export const ArticleEdit = () => {
   const {
     saveButtonProps,
     register,
+    control,
     formState: {errors},
-  } = useForm({})
+  } = useForm()
+
+  const simpleMDEOptions = React.useMemo(
+    () => ({
+      placeholder: 'Введите контент в формате Markdown...',
+      spellChecker: false,
+    }),
+    [],
+  )
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
@@ -22,22 +38,11 @@ export const ArticleEdit = () => {
           fullWidth
           InputLabelProps={{shrink: true}}
           type="text"
-          label={'Заголовок'}
+          label="Заголовок"
           name="heading"
         />
-        <TextField
-          {...register('body', {
-            required: 'Это поле является обязательным',
-          })}
-          error={!!(errors as any)?.body}
-          helperText={(errors as any)?.body?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Контент'}
-          name="body"
-        />
+
+        <Controller control={control} name="body" rules={{required: 'Это поле является обязательным'}} defaultValue="" render={({field: {onChange, value}}) => <MemoizedSimpleMDE value={value} onChange={onChange} options={simpleMDEOptions} className="my-markdown-editor" />} />
       </Box>
     </Edit>
   )