Support embedded image editing with extensions ending in `.excalidraw.png` or `.excalidraw.svg`.

[asfaltboy]

It could be cool to support opening a PNG file directly in the app (when it has an excalidraw diagram embedded within it).

Looks like the VSCode extension can do this (see vscode source), by taking the PNG bytes, passing them to loadFromBlob, and then using the result as the initialData

[chocoford]

That is a great idea. I will take a look how to integrate this feature.

[chocoford]

@asfaltboy It seems I misunderstood opening a PNG file directly in the app. I thought it meant that double-clicking the image would open it in edit mode or something, but after trying the Excalidraw extension in VSCode, I didn’t find a way to perform the opening a PNG operation.

[asfaltboy]

I had to restart the VSCode editor after installing this extension, and also I had to name the file so it ends with .excalidraw.png (see their docs here)

Once I did that, opening this PNG file would load the excalidraw interface in the view. Saving the excalidraw buffer after changing the diagram immediately updates the PNG "in-place", so it's a pretty good experience once it works. Here's a screenshot:

Btw, I noticed you were calling to Javascript on a web-view like: https://github.com/chocoford/ExcalidrawZ/blob/50121e4ab04d308c4cf51ae786ce820ef0e505d6/ExcalidrawZ/ExclidrawView/WebView/Coordinator/ExcalidrawStore.swift#L219

But I could not find where this source code lives... Could you tell me where can I find the JS source code of the app? If this is open source, I'd love to give a go at contributing

[chocoford]

Oh, I see. This feature is actually a variant of ‘export to PNG’ (similar to selecting and clicking ‘export to PNG’ in the right-click menu). However, ExcalidrawZ does not interact directly with the file system like the VSCode extension does. So I think it is need to think about how to interpret this feature appropriately.

But I could not find where this source code lives... Could you tell me where can I find the JS source code of the app? If this is open source, I'd love to give a go at contributing

Of course it is open source. I have created a fork to excalidraw and here is the repository.

[chocoford]

I came up with an idea for supporting this feature: perhaps creating an .excalidraw.png editor that operates independently from the current main program canvas and interacts directly with Finder would be better. This way, it could provide more flexibility for editing specific files.

Thank you for the inspiration! I will gradually start implementing this feature.

[karlhorky]

This sounds good! Watching this issue.

Should this issue be expanded to also include the exported .excalidraw.svg files?

[chocoford]

@karlhorky. Thank you for the reminder. This issue needs to be adjusted accordingly. 😂 And yes, support for .excalidraw.svg will be launched alongside support for .excalidraw.png.