feat: ajoute RichTextEditor avec compteur

2025-07-23 12:21:32 +04:00
parent 715891e657
commit 2d824175e2
1 changed files with 123 additions and 0 deletions
@@ -0,0 +1,123 @@
+'use client'
+
+import {useState, useEffect} from 'react'
+import PropTypes from 'prop-types'
+import dynamic from 'next/dynamic'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import {useTheme} from '@mui/material/styles'
+
+const MDEditor = dynamic(
+  () => import('@uiw/react-md-editor').then(mod => mod.default),
+  {ssr: false}
+)
+
+export default function RichTextEditor({
+  value = '',
+  onChange,
+  placeholder = 'Rédigez votre contenu...',
+  label,
+  isRequired = false,
+  name = 'content'
+}) {
+  const [content, setContent] = useState(value)
+  const [wordCount, setWordCount] = useState(0)
+  const [charCount, setCharCount] = useState(0)
+  const theme = useTheme()
+
+  useEffect(() => {
+    setContent(value)
+  }, [value])
+
+  useEffect(() => {
+    if (content) {
+      const words = content.trim().split(/\s+/).filter(word => word.length > 0)
+      setWordCount(words.length)
+      setCharCount(content.length)
+    } else {
+      setWordCount(0)
+      setCharCount(0)
+    }
+  }, [content])
+
+  const handleChange = val => {
+    setContent(val || '')
+    if (onChange) {
+      onChange({
+        target: {
+          name,
+          value: val || ''
+        }
+      })
+    }
+  }
+
+  return (
+    <Box sx={{mt: 2, width: '100%'}}>
+      {label && (
+        <Typography variant='body2' sx={{mb: 1, color: theme.palette.text.primary}}>
+          {label} {isRequired && '*'}
+        </Typography>
+      )}
+      <Box
+        sx={{
+          '& .w-md-editor': {
+            backgroundColor: theme.palette.mode === 'dark' ? '#2d2d2d' : '#ffffff',
+            '& .w-md-editor-text-pre, & .w-md-editor-text-input, & .w-md-editor-text': {
+              color: theme.palette.text.primary + ' !important',
+              backgroundColor: 'transparent !important'
+            },
+            '& .w-md-editor-bar': {
+              backgroundColor: theme.palette.mode === 'dark' ? '#1e1e1e' : '#f5f5f5',
+              borderColor: theme.palette.divider
+            },
+            '& .w-md-editor-focus': {
+              borderColor: theme.palette.primary.main
+            }
+          }
+        }}
+      >
+        <MDEditor
+          data-color-mode={theme.palette.mode}
+          height={200}
+          placeholder={placeholder}
+          value={content}
+          visibleDragBar={false}
+          onChange={handleChange}
+        />
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          mt: 1,
+          px: 1
+        }}
+      >
+        <Typography variant='caption' color='text.secondary'>
+          Formatage Markdown supporté
+        </Typography>
+        <Typography variant='caption' color='text.secondary'>
+          {charCount} caractères • {wordCount} mots
+        </Typography>
+      </Box>
+
+      {/* Hidden input for form submission */}
+      <input
+        type='hidden'
+        name={name}
+        value={content}
+      />
+    </Box>
+  )
+}
+
+RichTextEditor.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+  label: PropTypes.string,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string
+}