New plugin – Excalidraw

[zbeyens]

Excalidraw seems to be the best candidate for a drawing component inside a slate editor! We can make a plugin from it and even generate drawing from anything (e.g. from slate text).

References

• https://github.com/excalidraw/excalidraw
• https://github.com/zsviczian/obsidian-excalidraw-plugin
• https://www.zsolt.blog/2021/03/roam-excalidraw-plugin-mvp-release.html

[dylans]

With some guidance and discussion I'm happy to help make this happen. As a starting point it feels like the implementation may be somewhat similar to something like media-embed. I experimented with it a bit yesterday and I got somewhat close to stubbing this out, but there are enough details to sort out that we should probably write up a rough spec or design document.

[karthikcodes6]

I understand this will be a void element in our editor. But how can we generate drawing from slate text? Isn't this just a component rendered as void element like the image, video, etc?

[zbeyens]

https://roam-excalidraw.com/changelog/

We first need to access Excalidraw data which is just a list of elements:
https://blog.excalidraw.com/building-excalidraw-p2p-collaboration-feature/

---

Text on your drawing will be synchronized with text nested under the drawing. Synchronization works both ways. You can edit nested text and it will update on the drawing.

[karthikcodes6]

Are we integrating the collaboration as well? or just this https://www.npmjs.com/package/@excalidraw/excalidraw I think for a start we should only go for the drawing component.

[dylans]

You could either treat excalidraw as a standalone iframe, or as a void element. The latter is more interesting to me.

I think what you would want to do is have the excalidraw view region be a void element showing the content, and a slate region below it, perhaps analogous to a code-block or as a nested editor, but it's not clear to me yet how you would represent user drawing actions within the slate document (not clear as I haven't looked at their content format).

For collaboration I think that should not be tackled, as it's better to have collab sync via the slate document if someone already implements collab.

[zbeyens]

Just found out they expose:

• onChange callback, which is what we need to serialize draw to slate.
• ref to convert from slate (or any command) to draw:

You can pass a ref when you want to access some excalidraw APIs
...
we expose the API's which you can use to communicate with Excalidraw

From flexible drafts (excalidraw) to robust structure (slate) and vice-versa, this is an amazing feature in the writing experience, knowing that virtual whiteboards are becoming mainstream.

I think it would be the most innovative/attractive plugin of this repo, great for exposure.

As for collaboration inside excalidraw, we'd tackle that later

Anyway, first step is to create the plugin from the media-embed one

[dylans]

A quick update, @zbeyens and I have the most basic demo working in the https://github.com/udecode/slate-plugins/compare/experiment-excalidraw branch. It doesn't yet read or serialize content between Slate and Excalidraw, but it's the first milestone towards making something useful! More details to follow.

[zbeyens]

For now ExcalidrawElement is exposing the component API as props so a container HOC can be used.

As for next, an excalidraw (de)serializer would help to copy slate text into excalidraw and vice versa.