make monaco optional in editor

[linonetwo]

I found when install the editor, it tries to install the monaco editor which has the size of 10 MB.

But I'm Trying to make this as a plugging for the tiddlywiki, which is very sensitive to the size. (It's a single file HTML wiki, portable with its small size)

I hope I can replace it with a simple textarea, or inject a codemirror to it.

And from the playground, I notice that monaco is within a popup, which might be outside of the flow editor, so it is truely optional?

[linonetwo]

And about "creating the custom code parts tutorial (WIP)", I want to learn how to create a node with custom config (I think config is in the popup shown when you db-click the node, am I right?) with a wysiwyg editor, using slate-react.

This can work as a custom template string editor, With auto-complete generated from the input object.

---

I see...You are generating input port by parsing the template string value.

But i am thinking for a none technical user, They may be more used to add input ports first and use those inputs with autocomplete later.

[GabiGrin]

I found when install the editor, it tries to install the monaco editor which has the size of 10 MB.

But I'm Trying to make this as a plugging for the tiddlywiki, which is very sensitive to the size. (It's a single file HTML wiki, portable with its small size)
I hope I can replace it with a simple textarea, or inject a codemirror to it.

Would lazy-loading the editor help? does the 10MB reach your bundle right now?
TBH I never worried about the size because embedding it isn't what I'm aiming for (yet), but it sounds bad indeed.

want to learn how to create a node with custom config (I think config is in the popup shown when you db-click the node, am I right?) with a wysiwyg editor, using slate-react.

In Flyde everything is just an input, parts(nodes) themselves do not know the source of a parameter, and any input can be static or dynamic. There's no way to customize the UI of the static value selection, but if you explain your use-case better I am open to considering some kind of very simple plugin system.

But i am thinking for a none technical user, They may be more used to add input ports first and use those inputs with autocomplete later.

Completely agree

[linonetwo]

Tiddlywiki is offline-first, so if it is lazy loading, then it won't get loaded. And if someone already installed the Monaco editor plugin, we can't inject it to be used in Flyde. If not lazy-load Monaco, we have to bundle 2 x 10M to it.

Also, 10M is big for a note-taking website, imagine how slow a Notion website with 20M size will be.

I can see you are loading them using CDN, but I have to embed everything...

One way to solve this is learn from slatejs, allow plugin register component to be used by the framework, like dependency injection.

[linonetwo]

My another idea is not size sensitive, and can use CDN, as I said in the Discord I want to create a tool like https://www.stack-ai.com/ or https://github.com/logspace-ai/langflow , I can use Flyde to do that first, and I think you will like this idea too (as you are creating a AI assisted workflow editor) .

And I will make tiddlywiki plugin later, or use NoFlo for tiddlywiki plugin ( NoFlo has its problems too, it seems to bundle react in a web component and can't be easily externalized to use tw-react instead, which will increase the personal wiki size.). noflo is too abstracted, this make it possible to replace any component, for example, remove its codemirror, but this make it time consuming to use.