From 7945fc32f6285d98ee0e149a83646555677c3174 Mon Sep 17 00:00:00 2001
From: mlogclub <mlog1@qq.com>
Date: Sat, 25 Apr 2026 18:15:46 +0800
Subject: [PATCH] refactor: enhance image uploading feedback in message editors
 with new class handling

---
 web/components/im-message-editor.tsx   |  4 +++-
 web/components/kefu/message-editor.tsx |  4 +++-
 web/lib/im-editor-image.ts             | 11 +++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/components/im-message-editor.tsx b/web/components/im-message-editor.tsx
index 075a4eb..77b40b8 100644
--- a/web/components/im-message-editor.tsx
+++ b/web/components/im-message-editor.tsx
@@ -26,6 +26,7 @@ import {
   removeEditorImageByTitle,
   revokeEditorObjectUrl,
   revokeEditorObjectUrls,
+  setEditorImageUploadingByTitle,
 } from "@/lib/im-editor-image"
 import { generateUUID } from "@/lib/utils"
 
@@ -153,7 +154,7 @@ export function ImMessageEditor({
     editorProps: {
       attributes: {
         class:
-          "h-full min-h-12 max-h-[20vh] overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none sm:max-h-none [&_.ProseMirror-focused]:outline-none [&_p]:m-0 [&_p+img]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-md [&_img]:object-contain [&_p.is-editor-empty:first-child]:before:text-muted-foreground",
+          "h-full min-h-12 max-h-[20vh] overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none sm:max-h-none [&_.ProseMirror-focused]:outline-none [&_p]:m-0 [&_p+img]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-md [&_img]:object-contain [&_img.cs-agent-editor-image-uploading]:animate-pulse [&_img.cs-agent-editor-image-uploading]:opacity-55 [&_img.cs-agent-editor-image-uploading]:ring-2 [&_img.cs-agent-editor-image-uploading]:ring-primary/35 [&_p.is-editor-empty:first-child]:before:text-muted-foreground",
       },
       handleKeyDown: (_view, event) => {
         if (event.key === "Enter" && !event.shiftKey) {
@@ -246,6 +247,7 @@ export function ImMessageEditor({
         title: placeholderId,
       })
       .run()
+    setEditorImageUploadingByTitle(editor, placeholderId)
 
     try {
       const uploaded = await onUploadImageRef.current(file)
diff --git a/web/components/kefu/message-editor.tsx b/web/components/kefu/message-editor.tsx
index 531f14f..0c2a6b2 100644
--- a/web/components/kefu/message-editor.tsx
+++ b/web/components/kefu/message-editor.tsx
@@ -15,6 +15,7 @@ import {
   removeEditorImageByTitle,
   revokeEditorObjectUrl,
   revokeEditorObjectUrls,
+  setEditorImageUploadingByTitle,
 } from "@/lib/im-editor-image"
 import { generateUUID } from "@/lib/utils"
 
@@ -117,7 +118,7 @@ export function KefuMessageEditor({
     editorProps: {
       attributes: {
         class:
-          "cs-agent-scrollbar min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain",
+          "cs-agent-scrollbar min-h-12 max-h-40 overflow-y-auto px-1.5 py-1 text-sm leading-6 text-foreground outline-none [&_p]:m-0 [&_p+*]:mt-2 [&_img]:my-2 [&_img]:max-h-64 [&_img]:rounded-lg [&_img]:object-contain [&_img.cs-agent-editor-image-uploading]:animate-pulse [&_img.cs-agent-editor-image-uploading]:opacity-55 [&_img.cs-agent-editor-image-uploading]:ring-2 [&_img.cs-agent-editor-image-uploading]:ring-primary/35",
       },
       handleKeyDown: (_view, event) => {
         if (event.key === "Enter" && !event.shiftKey) {
@@ -208,6 +209,7 @@ export function KefuMessageEditor({
         title: placeholderId,
       })
       .run()
+    setEditorImageUploadingByTitle(editor, placeholderId)
 
     try {
       setLocalUploading(true)
diff --git a/web/lib/im-editor-image.ts b/web/lib/im-editor-image.ts
index df3caf6..3945358 100644
--- a/web/lib/im-editor-image.ts
+++ b/web/lib/im-editor-image.ts
@@ -40,9 +40,20 @@ export function markEditorImageUploadedByTitle(
   image.setAttribute("data-provider", uploaded.provider)
   image.setAttribute("data-storage-key", uploaded.storageKey)
   image.setAttribute("alt", uploaded.filename || image.getAttribute("alt") || "image")
+  image.classList.remove("cs-agent-editor-image-uploading")
+  image.removeAttribute("data-uploading")
   image.removeAttribute("title")
 }
 
+export function setEditorImageUploadingByTitle(editor: Editor, title: string) {
+  const image = findEditorImageElementByTitle(editor, title)
+  if (!image) {
+    return
+  }
+  image.classList.add("cs-agent-editor-image-uploading")
+  image.setAttribute("data-uploading", "true")
+}
+
 export function buildSendableEditorHTML(
   html: string,
   uploadedImages?: UploadedEditorImageMap