@consilioweb/payload-support 0.9.8 → 0.9.10

package/dist/components/RichTextEditor/index.cjs

@@ -99,6 +99,43 @@ const RichTextEditor = react.forwardRef(function RichTextEditor2({
     }
     if (fileInputRef.current) fileInputRef.current.value = "";
   }, [onFileUpload, emitChange]);
+  const handleClearFormat = react.useCallback(() => {
+    document.execCommand("removeFormat");
+    document.execCommand("formatBlock", false, "p");
+    editorRef.current?.focus();
+    setTimeout(emitChange, 0);
+  }, [emitChange]);
+  const handleKeyDown = react.useCallback((e) => {
+    if (e.key !== "Enter" || e.shiftKey) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    let node = sel.anchorNode;
+    let blockquote = null;
+    while (node && node !== editorRef.current) {
+      if (node.nodeName === "BLOCKQUOTE") {
+        blockquote = node;
+        break;
+      }
+      node = node.parentNode;
+    }
+    if (!blockquote) return;
+    const text = blockquote.innerText || "";
+    if (text.replace(/\n+$/, "").length === 0 || text.endsWith("\n\n") || text.endsWith("\n")) {
+      e.preventDefault();
+      const p = document.createElement("p");
+      p.innerHTML = "<br>";
+      blockquote.after(p);
+      if (blockquote.lastChild && blockquote.lastChild.nodeName === "BR") {
+        blockquote.removeChild(blockquote.lastChild);
+      }
+      const range = document.createRange();
+      range.setStart(p, 0);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      setTimeout(emitChange, 0);
+    }
+  }, [emitChange]);
   const handlePaste = react.useCallback(async (e) => {
     if (!onFileUpload) return;
     const items = e.clipboardData?.items;
@@ -186,7 +223,15 @@ const RichTextEditor = react.forwardRef(function RichTextEditor2({
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
         e.preventDefault();
         handleImageClick();
-      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" })
+      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: sep }),
+      /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", style: { ...btn, fontSize: "13px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        handleClearFormat();
+      }, title: "Effacer la mise en forme", children: [
+        "T",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", verticalAlign: "super" }, children: "\xD7" })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
       isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, padding: "14px 16px", color: "#9ca3af", fontSize: "14px", pointerEvents: "none", userSelect: "none" }, children: placeholder }),
@@ -204,6 +249,7 @@ const RichTextEditor = react.forwardRef(function RichTextEditor2({
             emitChange();
           },
           onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
           style: {
             minHeight: `${minHeight}px`,
             padding: "14px 16px",

package/dist/components/RichTextEditor/index.js

@@ -98,6 +98,43 @@ const RichTextEditor = forwardRef(function RichTextEditor2({
     }
     if (fileInputRef.current) fileInputRef.current.value = "";
   }, [onFileUpload, emitChange]);
+  const handleClearFormat = useCallback(() => {
+    document.execCommand("removeFormat");
+    document.execCommand("formatBlock", false, "p");
+    editorRef.current?.focus();
+    setTimeout(emitChange, 0);
+  }, [emitChange]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key !== "Enter" || e.shiftKey) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    let node = sel.anchorNode;
+    let blockquote = null;
+    while (node && node !== editorRef.current) {
+      if (node.nodeName === "BLOCKQUOTE") {
+        blockquote = node;
+        break;
+      }
+      node = node.parentNode;
+    }
+    if (!blockquote) return;
+    const text = blockquote.innerText || "";
+    if (text.replace(/\n+$/, "").length === 0 || text.endsWith("\n\n") || text.endsWith("\n")) {
+      e.preventDefault();
+      const p = document.createElement("p");
+      p.innerHTML = "<br>";
+      blockquote.after(p);
+      if (blockquote.lastChild && blockquote.lastChild.nodeName === "BR") {
+        blockquote.removeChild(blockquote.lastChild);
+      }
+      const range = document.createRange();
+      range.setStart(p, 0);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      setTimeout(emitChange, 0);
+    }
+  }, [emitChange]);
   const handlePaste = useCallback(async (e) => {
     if (!onFileUpload) return;
     const items = e.clipboardData?.items;
@@ -185,7 +222,15 @@ const RichTextEditor = forwardRef(function RichTextEditor2({
       /* @__PURE__ */ jsx("button", { type: "button", style: btn, onMouseDown: (e) => {
         e.preventDefault();
         handleImageClick();
-      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" })
+      }, title: "Ins\xE9rer une image", children: "\u{1F5BC}\uFE0F" }),
+      /* @__PURE__ */ jsx("span", { style: sep }),
+      /* @__PURE__ */ jsxs("button", { type: "button", style: { ...btn, fontSize: "13px" }, onMouseDown: (e) => {
+        e.preventDefault();
+        handleClearFormat();
+      }, title: "Effacer la mise en forme", children: [
+        "T",
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", verticalAlign: "super" }, children: "\xD7" })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
       isEmpty && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, padding: "14px 16px", color: "#9ca3af", fontSize: "14px", pointerEvents: "none", userSelect: "none" }, children: placeholder }),
@@ -203,6 +248,7 @@ const RichTextEditor = forwardRef(function RichTextEditor2({
             emitChange();
           },
           onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
           style: {
             minHeight: `${minHeight}px`,
             padding: "14px 16px",

package/dist/views/TicketDetailView/client.cjs

@@ -832,10 +832,32 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   cannedResponses.map((cr) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(index.RichTextEditor, { ref: editorRef, onChange: (html, text) => {
-                setReplyHtml(html);
-                setReplyBody(text);
-              }, placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }), minHeight: 100, borderColor: "transparent" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                index.RichTextEditor,
+                {
+                  ref: editorRef,
+                  onChange: (html, text) => {
+                    setReplyHtml(html);
+                    setReplyBody(text);
+                  },
+                  placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }),
+                  minHeight: 100,
+                  borderColor: "transparent",
+                  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;
+                    }
+                  }
+                }
+              ),
               pendingFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.uploadPreview, children: pendingFiles.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.uploadPreviewItem, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "PJ ",

package/dist/views/TicketDetailView/client.js

@@ -825,10 +825,32 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   cannedResponses.map((cr) => /* @__PURE__ */ jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
                 ] })
               ] }),
-              /* @__PURE__ */ jsx(RichTextEditor, { ref: editorRef, onChange: (html, text) => {
-                setReplyHtml(html);
-                setReplyBody(text);
-              }, placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }), minHeight: 100, borderColor: "transparent" }),
+              /* @__PURE__ */ jsx(
+                RichTextEditor,
+                {
+                  ref: editorRef,
+                  onChange: (html, text) => {
+                    setReplyHtml(html);
+                    setReplyBody(text);
+                  },
+                  placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }),
+                  minHeight: 100,
+                  borderColor: "transparent",
+                  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;
+                    }
+                  }
+                }
+              ),
               pendingFiles.length > 0 && /* @__PURE__ */ jsx("div", { className: s.uploadPreview, children: pendingFiles.map((f, i) => /* @__PURE__ */ jsxs("div", { className: s.uploadPreviewItem, children: [
                 /* @__PURE__ */ jsxs("span", { children: [
                   "PJ ",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "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/RichTextEditor/index.tsx

@@ -129,6 +129,49 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function R
     if (fileInputRef.current) fileInputRef.current.value = ''
   }, [onFileUpload, emitChange])
 
+  const handleClearFormat = useCallback(() => {
+    document.execCommand('removeFormat')
+    document.execCommand('formatBlock', false, 'p')
+    editorRef.current?.focus()
+    setTimeout(emitChange, 0)
+  }, [emitChange])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key !== 'Enter' || e.shiftKey) return
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return
+    // Find closest blockquote ancestor of the caret
+    let node: Node | null = sel.anchorNode
+    let blockquote: HTMLElement | null = null
+    while (node && node !== editorRef.current) {
+      if ((node as HTMLElement).nodeName === 'BLOCKQUOTE') {
+        blockquote = node as HTMLElement
+        break
+      }
+      node = node.parentNode
+    }
+    if (!blockquote) return
+    // Exit on Enter when the last line of the blockquote is empty
+    const text = blockquote.innerText || ''
+    if (text.replace(/\n+$/, '').length === 0 || text.endsWith('\n\n') || text.endsWith('\n')) {
+      e.preventDefault()
+      // Insert a paragraph after the blockquote and move caret into it
+      const p = document.createElement('p')
+      p.innerHTML = '<br>'
+      blockquote.after(p)
+      // Clean trailing empty <br> inside blockquote
+      if (blockquote.lastChild && (blockquote.lastChild as HTMLElement).nodeName === 'BR') {
+        blockquote.removeChild(blockquote.lastChild)
+      }
+      const range = document.createRange()
+      range.setStart(p, 0)
+      range.collapse(true)
+      sel.removeAllRanges()
+      sel.addRange(range)
+      setTimeout(emitChange, 0)
+    }
+  }, [emitChange])
+
   const handlePaste = useCallback(async (e: React.ClipboardEvent) => {
     if (!onFileUpload) return
     const items = e.clipboardData?.items
@@ -215,6 +258,10 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function R
         <button type="button" style={btn} onMouseDown={(e) => { e.preventDefault(); handleImageClick() }} title="Insérer une image">
           &#128444;&#65039;
         </button>
+        <span style={sep} />
+        <button type="button" style={{ ...btn, fontSize: '13px' }} onMouseDown={(e) => { e.preventDefault(); handleClearFormat() }} title="Effacer la mise en forme">
+          T<span style={{ fontSize: '10px', verticalAlign: 'super' }}>&times;</span>
+        </button>
       </div>
 
       {/* Editor area */}
@@ -233,6 +280,7 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, Props>(function R
           onFocus={() => setFocused(true)}
           onBlur={() => { setFocused(false); emitChange() }}
           onPaste={handlePaste}
+          onKeyDown={handleKeyDown}
           style={{
             minHeight: `${minHeight}px`,
             padding: '14px 16px',

package/src/views/TicketDetailView/client.tsx

@@ -764,7 +764,24 @@ const [clientTyping, setClientTyping] = useState(false)
                 </select>
               )}
             </div>
-            <RichTextEditor ref={editorRef} onChange={(html, text) => { setReplyHtml(html); setReplyBody(text) }} placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })} minHeight={100} borderColor="transparent" />
+            <RichTextEditor
+              ref={editorRef}
+              onChange={(html, text) => { setReplyHtml(html); setReplyBody(text) }}
+              placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })}
+              minHeight={100}
+              borderColor="transparent"
+              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 }
+              }}
+            />
             {/* #5 — File upload preview */}
             {pendingFiles.length > 0 && (
               <div className={s.uploadPreview}>