Add ability to actually save drawn images

src/components/App.vue

@@ -1,4 +1,5 @@
 <script>
+    import { toRaw } from 'vue'
     import { mapState, mapActions } from 'pinia'
 
     import { mapWritableState, mapStores } from 'pinia'
@@ -8,6 +9,7 @@
     import { useEditorCacheStore } from '../stores/editor-cache'
 
     import { OPEN_SETTINGS_EVENT, MOVE_BLOCK_EVENT, CHANGE_BUFFER_EVENT } from '@/src/common/constants'
+    import { setImageFile } from "@/src/editor/image/image-parsing.js"
 
     import StatusBar from './StatusBar.vue'
     import Editor from './Editor.vue'
@@ -202,8 +204,30 @@
                 this.closeMoveToBufferSelector()
             },
 
-            onSaveDrawImage(imageDataUrl) {
-                this.closeDrawImageModal()
+            async onSaveDrawImage(imageId, imageDataUrl) {
+                try {
+                    const editor = toRaw(this.heynoteStore.currentEditor)
+                    if (!editor?.view) {
+                        console.error("No active editor available to update image")
+                        return
+                    }
+                    const response = await fetch(imageDataUrl)
+                    const blob = await response.blob()
+                    const filename = await window.heynote.buffer.saveImage({
+                        data: new Uint8Array(await blob.arrayBuffer()),
+                        mime: blob.type,
+                    })
+                    if (!filename) {
+                        console.error("Failed to save image data")
+                        return
+                    }
+                    const imageUrl = "heynote-file://image/" + encodeURIComponent(filename)
+                    setImageFile(editor.view, imageId, imageUrl)
+                } catch (error) {
+                    console.error("Failed to save drawn image", error)
+                } finally {
+                    this.closeDrawImageModal()
+                }
             },
         },
     }

src/components/draw/DrawImageModal.vue

@@ -307,7 +307,6 @@
                 const dataUrl = this.canvas.toDataURL({
                     format: "png",
                 })
-
                 this.$emit("save", this.imageId, dataUrl)
                 this.$emit("close")
             },

src/editor/image/image-parsing.js

@@ -106,3 +106,21 @@ export function setImageDisplayDimensions(view, id, width, height) {
         }))
     }
 }
+
+export function setImageFile(view, id, file) {
+    const images = Object.fromEntries(parseImages(view.state).map(img => [img.id, img]))
+
+    if (Object.hasOwn(images, id)) {
+        const image = images[id]
+        image.file = file
+        view.dispatch(view.state.update({
+            changes: {
+                from: image.from,
+                to: image.to,
+                insert: createImageTag(image),
+            },
+        }))
+    } else {
+        console.error(`Image with id ${id} not found`)
+    }
+}

src/editor/image/widget.js

@@ -106,6 +106,13 @@ export class ImageWidget extends WidgetType {
                 copyButton.innerText = "Copy"
             }, 2000)
         })
+        
+        let img = document.createElement("img")
+        img.src = this.path
+        img.style.height = this.getHeight(img)
+        img.style.width = this.getWidth(img)
+        inner.appendChild(img)
+
         const drawButton = document.createElement("button")
         drawButton.className = "draw"
         drawButton.innerHTML = "<span>Draw</span>"
@@ -115,16 +122,9 @@ export class ImageWidget extends WidgetType {
         })
         drawButton.addEventListener("click", (event) => {
             event.preventDefault()
-            heynoteStore.openDrawImageModal(this.path, this.id)
+            heynoteStore.openDrawImageModal(img.src, wrap.dataset.id)
         })
         
-        
-        let img = document.createElement("img")
-        img.src = this.path
-        img.style.height = this.getHeight(img)
-        img.style.width = this.getWidth(img)
-        inner.appendChild(img)
-        
 
         let initialWidth, initialHeight, initialX, initialY
         let shouldSnap = true