Default Component - Copy this React, Tailwind Component to your project

Pourquoi quand j'ecrit maman j'ai namam corrige ?import { useState, useRef } from "react"; import { FaBold, FaItalic, FaUnderline, FaStrikethrough, FaAlignLeft, FaAlignCenter, FaAlignRight, FaAlignJustify, FaListUl, FaListOl, FaLink, FaPaperclip } from "react icons/fa"; const RichTextEditor = () => { const [content, setContent] = useState(""); const [showLinkModal, setShowLinkModal] = useState(false); const [linkUrl, setLinkUrl] = useState(""); const [files, setFiles] = useState([]); const fileInputRef = useRef(null); const formatText = (command, value = null) => { document.execCommand(command, false, value); }; const handleFileUpload = (event) => { const uploadedFiles = Array.from(event.target.files); setFiles([...files, ...uploadedFiles]); }; const handleLinkInsert = () => { if (linkUrl) { formatText("createLink", linkUrl); setLinkUrl(""); setShowLinkModal(false); } }; const ToolbarButton = ({ icon: Icon, command, title }) => ( <button type="button" onClick={() => formatText(command)} className="p 2 hover:bg gray 100 rounded lg transition colors duration 200" title={title} aria label={title} > <Icon className="w 4 h 4 text gray 600" /> </button> ); return ( <div className="max w 4xl mx auto p 6"> <div className="border rounded lg shadow sm bg white"> <div className="border b p 2 flex flex wrap gap 1 items center"> <div className="flex space x 1 border r pr 2"> <ToolbarButton icon={FaBold} command="bold" title="Bold" /> <ToolbarButton icon={FaItalic} command="italic" title="Italic" /> <ToolbarButton icon={FaUnderline} command="underline" title="Underline" /> <ToolbarButton icon={FaStrikethrough} command="strikethrough" title="Strikethrough" /> </div> <div className="flex space x 1 border r px 2"> <ToolbarButton icon={FaAlignLeft} command="justifyLeft" title="Align Left" /> <ToolbarButton icon={FaAlignCenter} command="justifyCenter" title="Align Center" /> <ToolbarButton icon={FaAlignRight} command="justifyRight" title="Align Right" /> <ToolbarButton icon={FaAlignJustify} command="justifyFull" title="Justify" /> </div> <div className="flex space x 1 border r px 2"> <ToolbarButton icon={FaListUl} command="insertUnorderedList" title="Bullet List" /> <ToolbarButton icon={FaListOl} command="insertOrderedList" title="Numbered List" /> </div> <div className="flex space x 1 px 2"> <button type="button" onClick={() => setShowLinkModal(true)} className="p 2 hover:bg gray 100 rounded lg transition colors duration 200" title="Insert Link" aria label="Insert Link" > <FaLink className="w 4 h 4 text gray 600" /> </button> <button type="button" onClick={() => fileInputRef.current.click()} className="p 2 hover:bg gray 100 rounded lg transition colors duration 200" title="Attach File" aria label="Attach File" > <FaPaperclip className="w 4 h 4 text gray 600" /> </button> <input type="file" ref={fileInputRef} onChange={handleFileUpload} multiple className="hidden" /> </div> </div> <div className="p 4 min h [200px] focus:outline none" contentEditable onInput={(e) => setContent(e.currentTarget.innerHTML)} dangerouslySetInnerHTML={{ __html: content }} /> {files.length > 0 && ( <div className="border t p 2"> <h3 className="text sm font medium mb 2">Attached Files:</h3> <ul className="space y 1"> {files.map((file, index) => ( <li key={index} className="text sm text gray 600"> {file.name} ({Math.round(file.size / 1024)} KB) </li> ))} </ul> </div> )} </div> {showLinkModal && ( <div className="fixed inset 0 bg black bg opacity 50 flex items center justify center"> <div className="bg white rounded lg p 6 w full max w md"> <h2 className="text lg font semibold mb 4">Insert Link</h2> <input type="url" value={linkUrl} onChange={(e) => setLinkUrl(e.target.value)} placeholder="Enter URL" className="w full px 3 py 2 border rounded lg mb 4" /> <div className="flex justify end space x 2"> <button onClick={() => setShowLinkModal(false)} className="px 4 py 2 text gray 600 hover:bg gray 100 rounded lg" > Cancel </button> <button onClick={handleLinkInsert} className="px 4 py 2 bg blue 500 text white rounded lg hover:bg blue 600" > Insert </button> </div> </div> </div> )} </div> ); }; export default RichTextEditor;