@consilioweb/payload-support 0.9.10 → 0.9.11

package/dist/components/TicketConversation/hooks/useAI.cjs

@@ -77,22 +77,41 @@ function useAI(messages, client, ticketSubject, replyBody, setReplyBody, setRepl
   };
   const handleAiRewrite = async (style = "auto") => {
     if (!replyBody.trim()) return;
+    const sel = typeof window !== "undefined" ? window.getSelection() : null;
+    const selectedText = sel?.toString().trim() || "";
+    const hasSelection = selectedText.length > 3;
+    const textToRewrite = hasSelection ? selectedText : replyBody;
     setAiRewriting(true);
     try {
       const res = await fetch("/api/support/ai", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ action: "rewrite", text: replyBody, style })
+        body: JSON.stringify({ action: "rewrite", text: textToRewrite, style })
       });
       if (res.ok) {
         const data = await res.json();
         const rewritten = data.rewritten || "";
         if (rewritten) {
-          setReplyBody(rewritten);
-          setReplyHtml(rewritten.replace(/\n/g, "<br/>"));
-          if (replyEditorRef.current?.setContent) {
-            replyEditorRef.current.setContent(rewritten.replace(/\n/g, "<br/>"));
+          if (hasSelection && sel && sel.rangeCount > 0) {
+            const range = sel.getRangeAt(0);
+            range.deleteContents();
+            range.insertNode(document.createTextNode(rewritten));
+            const editorEl = replyEditorRef.current;
+            editorEl?.focus?.();
+            const rootEl = range.commonAncestorContainer.closest?.("[contenteditable]");
+            if (rootEl) {
+              const newHtml = rootEl.innerHTML;
+              const newText = rootEl.innerText?.trim() || "";
+              setReplyBody(newText);
+              setReplyHtml(newHtml);
+            }
+          } else {
+            setReplyBody(rewritten);
+            setReplyHtml(rewritten.replace(/\n/g, "<br/>"));
+            if (replyEditorRef.current?.setContent) {
+              replyEditorRef.current.setContent(rewritten.replace(/\n/g, "<br/>"));
+            }
           }
         }
       }

package/dist/components/TicketConversation/hooks/useAI.js

@@ -76,22 +76,41 @@ function useAI(messages, client, ticketSubject, replyBody, setReplyBody, setRepl
   };
   const handleAiRewrite = async (style = "auto") => {
     if (!replyBody.trim()) return;
+    const sel = typeof window !== "undefined" ? window.getSelection() : null;
+    const selectedText = sel?.toString().trim() || "";
+    const hasSelection = selectedText.length > 3;
+    const textToRewrite = hasSelection ? selectedText : replyBody;
     setAiRewriting(true);
     try {
       const res = await fetch("/api/support/ai", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ action: "rewrite", text: replyBody, style })
+        body: JSON.stringify({ action: "rewrite", text: textToRewrite, style })
       });
       if (res.ok) {
         const data = await res.json();
         const rewritten = data.rewritten || "";
         if (rewritten) {
-          setReplyBody(rewritten);
-          setReplyHtml(rewritten.replace(/\n/g, "<br/>"));
-          if (replyEditorRef.current?.setContent) {
-            replyEditorRef.current.setContent(rewritten.replace(/\n/g, "<br/>"));
+          if (hasSelection && sel && sel.rangeCount > 0) {
+            const range = sel.getRangeAt(0);
+            range.deleteContents();
+            range.insertNode(document.createTextNode(rewritten));
+            const editorEl = replyEditorRef.current;
+            editorEl?.focus?.();
+            const rootEl = range.commonAncestorContainer.closest?.("[contenteditable]");
+            if (rootEl) {
+              const newHtml = rootEl.innerHTML;
+              const newText = rootEl.innerText?.trim() || "";
+              setReplyBody(newText);
+              setReplyHtml(newHtml);
+            }
+          } else {
+            setReplyBody(rewritten);
+            setReplyHtml(rewritten.replace(/\n/g, "<br/>"));
+            if (replyEditorRef.current?.setContent) {
+              replyEditorRef.current.setContent(rewritten.replace(/\n/g, "<br/>"));
+            }
           }
         }
       }

package/dist/index.cjs

@@ -283,15 +283,20 @@ R\xE9dige une r\xE9ponse appropri\xE9e au dernier message du client. Sois concis
           const { text, style } = body;
           if (!text?.trim()) return Response.json({ error: "text required" }, { status: 400 });
           const styleInstructions = {
-            auto: "Garde le m\xEAme ton (tutoiement/vouvoiement).",
-            tutoyer: "Utilise le tutoiement. Si le texte vouvoie, convertis en tutoiement.",
-            vouvoyer: "Utilise le vouvoiement. Si le texte tutoie, convertis en vouvoiement.",
-            formel: "Adopte un ton formel et professionnel avec vouvoiement.",
-            court: "Raccourcis le texte au maximum tout en gardant le sens. Sois concis et direct.",
-            amical: "Adopte un ton chaleureux et amical avec tutoiement."
+            auto: { tone: "Garde le ton actuel (neutre professionnel).", person: "IMPORTANT: Pr\xE9serve EXACTEMENT le tutoiement ou vouvoiement du texte original." },
+            tutoyer: { tone: "Ton d\xE9contract\xE9 et direct, mais correct.", person: 'CRITIQUE: Utilise IMP\xC9RATIVEMENT le tutoiement partout (tu, ton, te, toi). Si le texte vouvoie, convertis TOUT en tutoiement. Exemple: "vous pouvez" \u2192 "tu peux", "votre" \u2192 "ton".' },
+            vouvoyer: { tone: "Ton neutre et poli.", person: "CRITIQUE: Utilise IMP\xC9RATIVEMENT le vouvoiement partout (vous, votre, etc). Si le texte tutoie, convertis TOUT en vouvoiement." },
+            formel: { tone: "Ton formel et institutionnel.", person: "Utilise le vouvoiement partout." },
+            court: { tone: "Style concis et direct, phrases courtes, aller \xE0 l'essentiel.", person: "Pr\xE9serve le tutoiement/vouvoiement du texte original." },
+            amical: { tone: "Ton chaleureux, amical, sympathique, avec un peu de cordialit\xE9.", person: "CRITIQUE: Utilise IMP\xC9RATIVEMENT le tutoiement partout. Convertis le vouvoiement en tutoiement." }
           };
           const styleGuide = styleInstructions[style || "auto"] || styleInstructions.auto;
-          const prompt = `Tu es un agent de support technique professionnel. Reformule le texte ci-dessous de mani\xE8re plus professionnelle et corrige les fautes d'orthographe/grammaire. ${styleGuide} Ne change pas le fond du message, am\xE9liore uniquement la forme. R\xE9ponds UNIQUEMENT avec le texte reformul\xE9, sans commentaire ni explication.
+          const prompt = `Reformule le texte ci-dessous en corrigeant les fautes d'orthographe/grammaire. Ne change pas le fond du message, am\xE9liore uniquement la forme.
+
+TON REQUIS: ${styleGuide.tone}
+FORME REQUISE: ${styleGuide.person}
+
+R\xE9ponds UNIQUEMENT avec le texte reformul\xE9, sans commentaire ni explication.
 
 Texte original :
 ${text}`;

package/dist/index.js

@@ -277,15 +277,20 @@ R\xE9dige une r\xE9ponse appropri\xE9e au dernier message du client. Sois concis
           const { text, style } = body;
           if (!text?.trim()) return Response.json({ error: "text required" }, { status: 400 });
           const styleInstructions = {
-            auto: "Garde le m\xEAme ton (tutoiement/vouvoiement).",
-            tutoyer: "Utilise le tutoiement. Si le texte vouvoie, convertis en tutoiement.",
-            vouvoyer: "Utilise le vouvoiement. Si le texte tutoie, convertis en vouvoiement.",
-            formel: "Adopte un ton formel et professionnel avec vouvoiement.",
-            court: "Raccourcis le texte au maximum tout en gardant le sens. Sois concis et direct.",
-            amical: "Adopte un ton chaleureux et amical avec tutoiement."
+            auto: { tone: "Garde le ton actuel (neutre professionnel).", person: "IMPORTANT: Pr\xE9serve EXACTEMENT le tutoiement ou vouvoiement du texte original." },
+            tutoyer: { tone: "Ton d\xE9contract\xE9 et direct, mais correct.", person: 'CRITIQUE: Utilise IMP\xC9RATIVEMENT le tutoiement partout (tu, ton, te, toi). Si le texte vouvoie, convertis TOUT en tutoiement. Exemple: "vous pouvez" \u2192 "tu peux", "votre" \u2192 "ton".' },
+            vouvoyer: { tone: "Ton neutre et poli.", person: "CRITIQUE: Utilise IMP\xC9RATIVEMENT le vouvoiement partout (vous, votre, etc). Si le texte tutoie, convertis TOUT en vouvoiement." },
+            formel: { tone: "Ton formel et institutionnel.", person: "Utilise le vouvoiement partout." },
+            court: { tone: "Style concis et direct, phrases courtes, aller \xE0 l'essentiel.", person: "Pr\xE9serve le tutoiement/vouvoiement du texte original." },
+            amical: { tone: "Ton chaleureux, amical, sympathique, avec un peu de cordialit\xE9.", person: "CRITIQUE: Utilise IMP\xC9RATIVEMENT le tutoiement partout. Convertis le vouvoiement en tutoiement." }
           };
           const styleGuide = styleInstructions[style || "auto"] || styleInstructions.auto;
-          const prompt = `Tu es un agent de support technique professionnel. Reformule le texte ci-dessous de mani\xE8re plus professionnelle et corrige les fautes d'orthographe/grammaire. ${styleGuide} Ne change pas le fond du message, am\xE9liore uniquement la forme. R\xE9ponds UNIQUEMENT avec le texte reformul\xE9, sans commentaire ni explication.
+          const prompt = `Reformule le texte ci-dessous en corrigeant les fautes d'orthographe/grammaire. Ne change pas le fond du message, am\xE9liore uniquement la forme.
+
+TON REQUIS: ${styleGuide.tone}
+FORME REQUISE: ${styleGuide.person}
+
+R\xE9ponds UNIQUEMENT avec le texte reformul\xE9, sans commentaire ni explication.
 
 Texte original :
 ${text}`;

package/dist/views/TicketDetailView/client.cjs

@@ -141,7 +141,9 @@ const TicketDetailClient = () => {
   const [sendAsClient, setSendAsClient] = React.useState(false);
   const [editingMsgId, setEditingMsgId] = React.useState(null);
   const [editingBody, setEditingBody] = React.useState("");
+  const [editingHtml, setEditingHtml] = React.useState("");
   const [editSaving, setEditSaving] = React.useState(false);
+  const editEditorRef = React.useRef(null);
   const [sending, setSending] = React.useState(false);
   const [showMenu, setShowMenu] = React.useState(false);
   const [clientTyping, setClientTyping] = React.useState(false);
@@ -483,10 +485,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
   const startEditMessage = (msg) => {
     setEditingMsgId(msg.id);
     setEditingBody(msg.body || "");
+    setEditingHtml(msg.bodyHtml || (msg.body || "").replace(/\n/g, "<br/>"));
   };
   const cancelEditMessage = () => {
     setEditingMsgId(null);
     setEditingBody("");
+    setEditingHtml("");
   };
   const saveEditMessage = async () => {
     if (editingMsgId === null) return;
@@ -496,11 +500,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true })
+        body: JSON.stringify({ body: editingBody, bodyHtml: editingHtml || null, skipNotification: true })
       });
       if (res.ok) {
         setEditingMsgId(null);
         setEditingBody("");
+        setEditingHtml("");
         fetchAll();
       }
     } catch {
@@ -719,12 +724,29 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   ] }),
                   editingMsgId === msg.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "textarea",
+                      index.RichTextEditor,
                       {
-                        value: editingBody,
-                        onChange: (e) => setEditingBody(e.target.value),
-                        style: { width: "100%", minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: "inherit", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-                        autoFocus: true
+                        ref: editEditorRef,
+                        initialValue: editingHtml,
+                        onChange: (html, text) => {
+                          setEditingHtml(html);
+                          setEditingBody(text);
+                        },
+                        placeholder: "\xC9diter le message...",
+                        minHeight: 120,
+                        onFileUpload: async (file) => {
+                          try {
+                            const formData = new FormData();
+                            formData.append("file", file);
+                            formData.append("_payload", JSON.stringify({ alt: file.name }));
+                            const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
+                            if (!ur.ok) return null;
+                            const ud = await ur.json();
+                            return ud.doc?.url || null;
+                          } catch {
+                            return null;
+                          }
+                        }
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end" }, children: [

package/dist/views/TicketDetailView/client.js

@@ -134,7 +134,9 @@ const TicketDetailClient = () => {
   const [sendAsClient, setSendAsClient] = useState(false);
   const [editingMsgId, setEditingMsgId] = useState(null);
   const [editingBody, setEditingBody] = useState("");
+  const [editingHtml, setEditingHtml] = useState("");
   const [editSaving, setEditSaving] = useState(false);
+  const editEditorRef = useRef(null);
   const [sending, setSending] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [clientTyping, setClientTyping] = useState(false);
@@ -476,10 +478,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
   const startEditMessage = (msg) => {
     setEditingMsgId(msg.id);
     setEditingBody(msg.body || "");
+    setEditingHtml(msg.bodyHtml || (msg.body || "").replace(/\n/g, "<br/>"));
   };
   const cancelEditMessage = () => {
     setEditingMsgId(null);
     setEditingBody("");
+    setEditingHtml("");
   };
   const saveEditMessage = async () => {
     if (editingMsgId === null) return;
@@ -489,11 +493,12 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "PATCH",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true })
+        body: JSON.stringify({ body: editingBody, bodyHtml: editingHtml || null, skipNotification: true })
       });
       if (res.ok) {
         setEditingMsgId(null);
         setEditingBody("");
+        setEditingHtml("");
         fetchAll();
       }
     } catch {
@@ -712,12 +717,29 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   ] }),
                   editingMsgId === msg.id ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
                     /* @__PURE__ */ jsx(
-                      "textarea",
+                      RichTextEditor,
                       {
-                        value: editingBody,
-                        onChange: (e) => setEditingBody(e.target.value),
-                        style: { width: "100%", minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: "inherit", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-                        autoFocus: true
+                        ref: editEditorRef,
+                        initialValue: editingHtml,
+                        onChange: (html, text) => {
+                          setEditingHtml(html);
+                          setEditingBody(text);
+                        },
+                        placeholder: "\xC9diter le message...",
+                        minHeight: 120,
+                        onFileUpload: async (file) => {
+                          try {
+                            const formData = new FormData();
+                            formData.append("file", file);
+                            formData.append("_payload", JSON.stringify({ alt: file.name }));
+                            const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
+                            if (!ur.ok) return null;
+                            const ud = await ur.json();
+                            return ud.doc?.url || null;
+                          } catch {
+                            return null;
+                          }
+                        }
                       }
                     ),
                     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, justifyContent: "flex-end" }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/TicketConversation/hooks/useAI.ts

@@ -89,22 +89,46 @@ export function useAI(
 
   const handleAiRewrite = async (style: string = 'auto') => {
     if (!replyBody.trim()) return
+    // Detect selection inside the editor — if present, rewrite only the selected text
+    const sel = typeof window !== 'undefined' ? window.getSelection() : null
+    const selectedText = sel?.toString().trim() || ''
+    const hasSelection = selectedText.length > 3
+    const textToRewrite = hasSelection ? selectedText : replyBody
+
     setAiRewriting(true)
     try {
       const res = await fetch('/api/support/ai', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ action: 'rewrite', text: replyBody, style }),
+        body: JSON.stringify({ action: 'rewrite', text: textToRewrite, style }),
       })
       if (res.ok) {
         const data = await res.json()
         const rewritten = data.rewritten || ''
         if (rewritten) {
-          setReplyBody(rewritten)
-          setReplyHtml(rewritten.replace(/\n/g, '<br/>'))
-          if (replyEditorRef.current?.setContent) {
-            replyEditorRef.current.setContent(rewritten.replace(/\n/g, '<br/>'))
+          if (hasSelection && sel && sel.rangeCount > 0) {
+            // Replace only the selected text in the contentEditable
+            const range = sel.getRangeAt(0)
+            range.deleteContents()
+            range.insertNode(document.createTextNode(rewritten))
+            // Trigger input event so parent state updates via onInput
+            const editorEl = replyEditorRef.current as unknown as { focus?: () => void } | null
+            editorEl?.focus?.()
+            // Sync state from DOM
+            const rootEl = (range.commonAncestorContainer as HTMLElement).closest?.('[contenteditable]') as HTMLElement | null
+            if (rootEl) {
+              const newHtml = rootEl.innerHTML
+              const newText = rootEl.innerText?.trim() || ''
+              setReplyBody(newText)
+              setReplyHtml(newHtml)
+            }
+          } else {
+            setReplyBody(rewritten)
+            setReplyHtml(rewritten.replace(/\n/g, '<br/>'))
+            if (replyEditorRef.current?.setContent) {
+              replyEditorRef.current.setContent(rewritten.replace(/\n/g, '<br/>'))
+            }
           }
         }
       }

package/src/endpoints/ai.ts

@@ -172,17 +172,22 @@ Rédige une réponse appropriée au dernier message du client. Sois concis (3-5
           const { text, style } = body as { text: string; style?: string }
           if (!text?.trim()) return Response.json({ error: 'text required' }, { status: 400 })
 
-          const styleInstructions: Record<string, string> = {
-            auto: 'Garde le même ton (tutoiement/vouvoiement).',
-            tutoyer: 'Utilise le tutoiement. Si le texte vouvoie, convertis en tutoiement.',
-            vouvoyer: 'Utilise le vouvoiement. Si le texte tutoie, convertis en vouvoiement.',
-            formel: 'Adopte un ton formel et professionnel avec vouvoiement.',
-            court: 'Raccourcis le texte au maximum tout en gardant le sens. Sois concis et direct.',
-            amical: 'Adopte un ton chaleureux et amical avec tutoiement.',
+          const styleInstructions: Record<string, { tone: string; person: string }> = {
+            auto: { tone: 'Garde le ton actuel (neutre professionnel).', person: 'IMPORTANT: Préserve EXACTEMENT le tutoiement ou vouvoiement du texte original.' },
+            tutoyer: { tone: 'Ton décontracté et direct, mais correct.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le tutoiement partout (tu, ton, te, toi). Si le texte vouvoie, convertis TOUT en tutoiement. Exemple: "vous pouvez" → "tu peux", "votre" → "ton".' },
+            vouvoyer: { tone: 'Ton neutre et poli.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le vouvoiement partout (vous, votre, etc). Si le texte tutoie, convertis TOUT en vouvoiement.' },
+            formel: { tone: 'Ton formel et institutionnel.', person: 'Utilise le vouvoiement partout.' },
+            court: { tone: 'Style concis et direct, phrases courtes, aller à l\'essentiel.', person: 'Préserve le tutoiement/vouvoiement du texte original.' },
+            amical: { tone: 'Ton chaleureux, amical, sympathique, avec un peu de cordialité.', person: 'CRITIQUE: Utilise IMPÉRATIVEMENT le tutoiement partout. Convertis le vouvoiement en tutoiement.' },
           }
           const styleGuide = styleInstructions[style || 'auto'] || styleInstructions.auto
 
-          const prompt = `Tu es un agent de support technique professionnel. Reformule le texte ci-dessous de manière plus professionnelle et corrige les fautes d'orthographe/grammaire. ${styleGuide} Ne change pas le fond du message, améliore uniquement la forme. Réponds UNIQUEMENT avec le texte reformulé, sans commentaire ni explication.
+          const prompt = `Reformule le texte ci-dessous en corrigeant les fautes d'orthographe/grammaire. Ne change pas le fond du message, améliore uniquement la forme.
+
+TON REQUIS: ${styleGuide.tone}
+FORME REQUISE: ${styleGuide.person}
+
+Réponds UNIQUEMENT avec le texte reformulé, sans commentaire ni explication.
 
 Texte original :
 ${text}`

package/src/views/TicketDetailView/client.tsx

@@ -136,7 +136,9 @@ export const TicketDetailClient: React.FC = () => {
   // Inline message edit
   const [editingMsgId, setEditingMsgId] = useState<string | number | null>(null)
   const [editingBody, setEditingBody] = useState('')
+  const [editingHtml, setEditingHtml] = useState('')
   const [editSaving, setEditSaving] = useState(false)
+  const editEditorRef = useRef<RichTextEditorHandle>(null)
   const [sending, setSending] = useState(false)
 
   const [showMenu, setShowMenu] = useState(false)
@@ -449,11 +451,14 @@ const [clientTyping, setClientTyping] = useState(false)
   const startEditMessage = (msg: Message) => {
     setEditingMsgId(msg.id)
     setEditingBody(msg.body || '')
+    // Prefer existing bodyHtml for WYSIWYG edit, fallback to body with <br/> conversion
+    setEditingHtml(msg.bodyHtml || (msg.body || '').replace(/\n/g, '<br/>'))
   }
 
   const cancelEditMessage = () => {
     setEditingMsgId(null)
     setEditingBody('')
+    setEditingHtml('')
   }
 
   const saveEditMessage = async () => {
@@ -464,11 +469,12 @@ const [clientTyping, setClientTyping] = useState(false)
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ body: editingBody, bodyHtml: null, skipNotification: true }),
+        body: JSON.stringify({ body: editingBody, bodyHtml: editingHtml || null, skipNotification: true }),
       })
       if (res.ok) {
         setEditingMsgId(null)
         setEditingBody('')
+        setEditingHtml('')
         fetchAll()
       }
     } catch { /* silent */ } finally {
@@ -654,11 +660,23 @@ const [clientTyping, setClientTyping] = useState(false)
                       </div>
                       {editingMsgId === msg.id ? (
                         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                          <textarea
-                            value={editingBody}
-                            onChange={(e) => setEditingBody(e.target.value)}
-                            style={{ width: '100%', minHeight: 120, padding: 10, fontSize: 13, lineHeight: 1.5, fontFamily: 'inherit', border: '1px solid var(--theme-elevation-200)', borderRadius: 6, background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' }}
-                            autoFocus
+                          <RichTextEditor
+                            ref={editEditorRef}
+                            initialValue={editingHtml}
+                            onChange={(html, text) => { setEditingHtml(html); setEditingBody(text) }}
+                            placeholder="Éditer le message..."
+                            minHeight={120}
+                            onFileUpload={async (file) => {
+                              try {
+                                const formData = new FormData()
+                                formData.append('file', file)
+                                formData.append('_payload', JSON.stringify({ alt: file.name }))
+                                const ur = await fetch('/api/media', { method: 'POST', credentials: 'include', body: formData })
+                                if (!ur.ok) return null
+                                const ud = await ur.json()
+                                return ud.doc?.url || null
+                              } catch { return null }
+                            }}
                           />
                           <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
                             <button onClick={cancelEditMessage} disabled={editSaving} style={{ padding: '5px 12px', fontSize: 12, borderRadius: 5, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', cursor: 'pointer' }}>Annuler</button>