refactor: enhance image uploading feedback in message editors with new class handling

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)

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)

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