OUT-3048 | Image src doesn't update in content as soon as async upload is completed

src/features/editor/components/Editor/extensions/Image.ext.ts

@@ -1,6 +1,36 @@
 import Image from '@tiptap/extension-image'
 
-export const ImageExt = Image.configure({
+export const ImageExt = Image.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('width'),
+        renderHTML: (attributes) => {
+          if (!attributes.width) {
+            return {}
+          }
+          return {
+            width: attributes.width,
+          }
+        },
+      },
+      height: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('height'),
+        renderHTML: (attributes) => {
+          if (!attributes.height) {
+            return {}
+          }
+          return {
+            height: attributes.height,
+          }
+        },
+      },
+    }
+  },
+}).configure({
   resize: {
     enabled: true,
     alwaysPreserveAspectRatio: true,

src/features/editor/hooks/useAppControls.tsx

@@ -1,5 +1,4 @@
 import { usePrimaryCta, useSecondaryCta } from '@app-bridge/hooks'
-import { useEditorStore } from '@editor/stores/editorStore'
 import { useSettingsMutation } from '@settings/hooks/useSettingsMutation'
 import type { SettingsUpdateDto } from '@settings/lib/settings-actions.dto'
 import { useSettingsStore } from '@settings/providers/settings.provider'

src/features/editor/hooks/useFileHandlers.tsx

@@ -38,7 +38,19 @@ export const useFileHandlers = () => {
         }
 
         const signedUrl = await uploadFileToSupabase(file, token)
-        setContent(currentEditor.getHTML().replaceAll(fileReader.result as string, signedUrl))
+        const { doc } = currentEditor.state
+        let imagePos: number | null = null
+        doc.descendants((node, pos) => {
+          if (node.type.name === 'image' && node.attrs.title === randId) {
+            imagePos = pos
+            return false //short circuit the search for image position.
+          }
+        })
+
+        if (imagePos !== null) {
+          currentEditor.chain().focus().setNodeSelection(imagePos).updateAttributes('image', { src: signedUrl }).run()
+          setContent(currentEditor.getHTML())
+        }
       }
     })
   }