Basic Excalidraw embed image Proof of Concept

[saberzero1]

Closes #1043

• Embed excalidraw png/svg
• Filter *.excalidraw.md
• change image with light/dark mode
• Update documentation
  • Include light/dark mode instructions for excalidraw plugin

[jacobeverist]

Very cool, and very little code changes.

Don't know if this helps, but i found this gist as an example of dark/light mode switching. I'm not familiar with this codebase, so I may be wrong.

[saberzero1]

Very cool, and very little code changes.

Don't know if this helps, but i found this gist as an example of dark/light mode switching. I'm not familiar with this codebase, so I may be wrong.

Thanks for the heads-up! I have updated the code for generic image as well, see below for a preview (mild epilepsy warning)

Screencast.from.2024-09-23.20-11-38.webm

[bartkl]

Hi, I'm the author of the gist referenced by @jacobeverist, and I just wanted to point out that I have since improved that code and made it part of my Quartz website's repo. It has become the RenderExcalidraw component. You can check out the code here. The imported inline script is where all the magic happens, and loading this component is done in the my config files.

You can see the component in action here for example.

Anyways, it works pretty well, but I still wasn't sufficiently happy with it which is why I never contributed it to the Quartz project:

• The JS file looks for blockquote tags with data-url pointing to a file ending with .excalidraw . This works well, but feels shaky. I would prefer handling this with Markdown transformers instead of in the component.
• It is tied to Excalidraw images, whereas later on I realized I could generalize this any image really. However, handling images would be different from handling .excalidraw blockquote elements. This may be easy though if you'd take care of this in a transformer rather than in the JS.

I have documentend the code reasonably well I think, but proper user documentation still needs doing.

Anyways, looking forward to see how you finish this up :). Nice work!

[saberzero1]

Hi, I'm the author of the gist referenced by @jacobeverist, and I just wanted to point out that I have since improved that code and made it part of my Quartz website's repo. It has become the RenderExcalidraw component. You can check out the code here. The imported inline script is where all the magic happens, and loading this component is done in the my config files.

You can see the component in action here for example.

Anyways, it works pretty well, but I still wasn't sufficiently happy with it which is why I never contributed it to the Quartz project:

• The JS file looks for blockquote tags with data-url pointing to a file ending with .excalidraw . This works well, but feels shaky. I would prefer handling this with Markdown transformers instead of in the component.
• It is tied to Excalidraw images, whereas later on I realized I could generalize this any image really. However, handling images would be different from handling .excalidraw blockquote elements. This may be easy though if you'd take care of this in a transformer rather than in the JS.

I have documentend the code reasonably well I think, but proper user documentation still needs doing.

Anyways, looking forward to see how you finish this up :). Nice work!

Thanks for the input!

I'm currently looking into reworking the markdown parser steps. I have some thoughts on how to incorporate your code, but the specifics might change a bit after said rework. Luckily, your implementation seems relatively simple to adapt. I'll keep you posted.

[catacgc]

Looking forward to this. One feature that will be really cool is the ability to support Obsidian Excalidraw plugin embeds (other notes in the vault).

This will virtually transform quartz into an all-in-one documentation platform with mind mapping support