refactor: enhance image upload handling in message editors with centralized logic

web/lib/im-editor-image.ts

@@ -7,6 +7,8 @@ export type UploadedEditorImage = {
   filename?: string
 }
 
+export type UploadedEditorImageMap = Map<string, UploadedEditorImage>
+
 export function removeEditorImageByTitle(editor: Editor, title: string) {
   const { state } = editor
   let targetPos: number | null = null
@@ -26,33 +28,25 @@ export function removeEditorImageByTitle(editor: Editor, title: string) {
 export function markEditorImageUploadedByTitle(
   editor: Editor,
   title: string,
-  uploaded: UploadedEditorImage
+  uploaded: UploadedEditorImage,
+  uploadedImages: UploadedEditorImageMap
 ) {
-  const { state, view } = editor
-  let targetPos: number | null = null
-  state.doc.descendants((node, pos) => {
-    if (node.type.name === "image" && node.attrs.title === title) {
-      targetPos = pos
-      return false
-    }
-    return true
-  })
-  if (targetPos === null) {
+  uploadedImages.set(title, uploaded)
+  const image = findEditorImageElementByTitle(editor, title)
+  if (!image) {
     return
   }
-  const attrs = view.state.doc.nodeAt(targetPos)?.attrs
-  const transaction = view.state.tr.setNodeMarkup(targetPos, undefined, {
-    ...attrs,
-    alt: uploaded.filename || attrs?.alt || "image",
-    dataAssetId: uploaded.assetId,
-    dataProvider: uploaded.provider,
-    dataStorageKey: uploaded.storageKey,
-    title: "",
-  })
-  view.dispatch(transaction)
+  image.setAttribute("data-asset-id", uploaded.assetId)
+  image.setAttribute("data-provider", uploaded.provider)
+  image.setAttribute("data-storage-key", uploaded.storageKey)
+  image.setAttribute("alt", uploaded.filename || image.getAttribute("alt") || "image")
+  image.removeAttribute("title")
 }
 
-export function buildSendableEditorHTML(html: string) {
+export function buildSendableEditorHTML(
+  html: string,
+  uploadedImages?: UploadedEditorImageMap
+) {
   if (typeof document === "undefined" || !html.includes("<img")) {
     return html
   }
@@ -60,6 +54,15 @@ export function buildSendableEditorHTML(html: string) {
   const template = document.createElement("template")
   template.innerHTML = html
   for (const image of Array.from(template.content.querySelectorAll("img"))) {
+    const title = image.getAttribute("title") ?? ""
+    const uploaded = title ? uploadedImages?.get(title) : undefined
+    if (uploaded) {
+      image.setAttribute("data-asset-id", uploaded.assetId)
+      image.setAttribute("data-provider", uploaded.provider)
+      image.setAttribute("data-storage-key", uploaded.storageKey)
+      image.setAttribute("alt", uploaded.filename || image.getAttribute("alt") || "image")
+      image.removeAttribute("title")
+    }
     if (
       image.getAttribute("data-asset-id") &&
       image.getAttribute("src")?.startsWith("blob:")
@@ -70,7 +73,10 @@ export function buildSendableEditorHTML(html: string) {
   return template.innerHTML
 }
 
-export function hasUploadingEditorImages(html: string) {
+export function hasUploadingEditorImages(
+  html: string,
+  uploadedImages?: UploadedEditorImageMap
+) {
   if (typeof document === "undefined" || !html.includes("<img")) {
     return /<img\b[^>]*\btitle=(["'])uploading-[^"']+\1/i.test(html)
   }
@@ -78,7 +84,7 @@ export function hasUploadingEditorImages(html: string) {
   const template = document.createElement("template")
   template.innerHTML = html
   return Array.from(template.content.querySelectorAll("img")).some((image) =>
-    image.getAttribute("title")?.startsWith("uploading-")
+    isUnfinishedUploadingImage(image, uploadedImages)
   )
 }
 
@@ -95,3 +101,21 @@ export function revokeEditorObjectUrls(urls: Set<string>) {
   }
   urls.clear()
 }
+
+function findEditorImageElementByTitle(editor: Editor, title: string) {
+  const escapedTitle =
+    typeof CSS !== "undefined" && typeof CSS.escape === "function"
+      ? CSS.escape(title)
+      : title.replace(/["\\]/g, "\\$&")
+  return editor.view.dom.querySelector<HTMLImageElement>(
+    `img[title="${escapedTitle}"]`
+  )
+}
+
+function isUnfinishedUploadingImage(
+  image: HTMLImageElement,
+  uploadedImages?: UploadedEditorImageMap
+) {
+  const title = image.getAttribute("title") ?? ""
+  return title.startsWith("uploading-") && !uploadedImages?.has(title)
+}