Upgrade Excalidraw to the latest version

[sztanko]

The latest version of Excalidraw has a lot of great new features (such as aligning/grid, etc). I understand that this extension is running a slightly modified version of the tool, so it might be not so trivial to upgrade it.

How difficult would it be to upgrade it? Alternatively, would you mind sharing what are the customisations you have made, so I can try and upgrade it myself?

[brijeshb42]

This is the forked repo being used internally - https://github.com/brijeshb42/excalidraw
Mostly the modifications are around adding a postMessage api to pass data to-and-from the extension to excalidraw app.

[sztanko]

Thanks, do you mean this commit, specifically? brijeshb42/excalidraw@8c7c7e5

[brijeshb42]

Yes. That is the only commit on top of the excalidraw repo.

[davidnussio]

What do you think about use https://www.npmjs.com/package/@excalidraw/excalidraw instead patched version?

Code sandboxbox example https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark

[brijeshb42]

I re-started working on this. The only problem I am facing is the keyboard events. Excalidraw has a lot of keyboard shortcuts and it is great when a standalone web app, but in context of vscode, these keyboard events should ideally originate from vscode and should be message passed to excalidraw webview, otherwise, these shortcuts will collide between vscode and excalidraw and will not be a great experience for user. For ex, CMD+A in excalidraw selects all the shapes, but when embedded in vscode webview, CMD+A selects the whole web contents.
Some modification will be required inside the actuall excalidraw code to allow trapping of key presses to be received as some action strings from top level parent which can be controlled using props.

[davidnussio]

Yes, I understand. I created a PoC and sometimes webview lost focus (?) And excalidraw shortcuts and keyboard doesn't work.
It is fix with simple a simple click on icon arrow ...

but the starting point is not so bad

https://www.youtube.com/watch?v=6diPhnSlX-M

[jevakallio]

@brijeshb42 thank you for creating this extension, it's been a great experience so far!

Excalidraw has a lot of keyboard shortcuts and it is great when a standalone web app, but in context of vscode, these keyboard events should ideally originate from vscode and should be message passed to excalidraw webview, otherwise, these shortcuts will collide between vscode and excalidraw and will not be a great experience for user.

I had a similar issue in vscode-live-frame, where the website you run in an iframe doesn't handle command keys correctly. Here's a workaround that I recommend for my users:

https://github.com/jevakallio/vscode-live-frame#command-key-combinations-copy-paste-select-all-are-disabled

Not sure if this solves your problem or if it's a different issue, but hope it helps!