124 lines
3.1 KiB
JavaScript
124 lines
3.1 KiB
JavaScript
'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
|
|
}
|