Excalidraw Plug

Plugs
1

This plug enables you to edit Excalidraw png, svg or excalidraw json files attached to your page.

8 Likes
2

Hi And thank you for your amazing plugins.
I think that we have the same use case for SB.
Excellent

1 Like
3

This is really cool. It’s not using the new custom editor stuff that @MrMugame built, though is it? Maybe you two can connect and integrate it with that. This will have a nicer user experience I think.

1 Like
4

Great to have this. I love excelidraw and was missing the option to have it integrated into SB.

5

Sorry, if this is hijacking this thread.

I implemented a similar Excalidraw Plugin with the new Custom Editors, which works very well. The only thing missing is a way to live preview it inline like an image (![MyDiagram](diagram.excalidraw)) What I would love is to declare this inside my excalidraw.plug.yaml

functions:
  ExcalidrawWidget:
    path: ./excalidraw.ts:widget
    inlineWidget: excalidraw

And then implement the widget function similar to codeWidgets:

export function widget(
  url: string,
): { html: string; script: string } {
.... 
}

Maybe i have missed something and this is already possible? Or on a roadmap somewhere… I have tried to look into how this case is handled for CodeWidgets internally, but have not quite understood it.

6

Oh, that would be great, I wanted to work on a proper excalidraw plug (I have a “working” prototype), but I don’t really have the time and motivation for it right now. Are you planning on publishing it?
I had thought about adding something like this, but I was really unsure about the implementation details. I just wanted to minimize feature creep on the PR at the time and adding another hook just for that felt like a lot of added complexity.
I think a good way to add this would be to add a transclusion parameter to the hook function

type DocumentEditorCallback = (transclusion: boolean) => Promise<DocumentEditorContent>;

Then catch all inlines with the extensions specified and call the function. I’m just unsure on what’s the best way to go about editors without transclusions. Either we add a parameter to the manifest or we make the function return null if it doesn’t want to generate a transclusion. Ultimately it’s up to @zef tho if such a feature should exist.

1 Like
7

This is the current state of the plugin, instead of trying to use ![](diagram.excalidraw) I now use

``excalidraw
diagram.excalidraw
``

This way it works pretty good, but I still use a custom editor for the fullscreen view.

And here is the repo:

5 Likes
8

Nice.

Now, we need a custom widget to view or edit attachments. Plugins then can act as the widget providers. Not sur how tho? :thinking:

Such a feature could enable having attachment viewers/editors for diagram files like mermaid, excalidraw, plantuml, drawio… And pdfs, json, etc.,

1 Like
9

Could you elaborate? Maybe with an example?

1 Like
10

Very cool! Question/issue: When trying to open the xxx.excalidraw file in Excalidraw, I get the following:
Error
Error: invalid file

11

What does the file look like, i.e. what‘s the content of the file?

This error points to your file not being an actual excalidraw file