From 52f23964be54e5f5f2ad8186da32c9de48dff596 Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Sun, 25 Jan 2026 21:17:11 +0100
Subject: [PATCH] Add ability to actually save drawn images

---
 src/components/App.vue                 | 28 ++++++++++++++++++++++++--
 src/components/draw/DrawImageModal.vue |  1 -
 src/editor/image/image-parsing.js      | 18 +++++++++++++++++
 src/editor/image/widget.js             | 16 +++++++--------
 4 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index e3e3c15..bcb3a05 100644
--- a/src/components/App.vue
+++ b/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()
+                }
             },
         },
     }
diff --git a/src/components/draw/DrawImageModal.vue b/src/components/draw/DrawImageModal.vue
index 63c3355..9ce41b5 100644
--- a/src/components/draw/DrawImageModal.vue
+++ b/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")
             },
diff --git a/src/editor/image/image-parsing.js b/src/editor/image/image-parsing.js
index e0ba34e..84cc697 100644
--- a/src/editor/image/image-parsing.js
+++ b/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`)
+    }
+}
diff --git a/src/editor/image/widget.js b/src/editor/image/widget.js
index eda11ec..bd1c061 100644
--- a/src/editor/image/widget.js
+++ b/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