Have an "out of the box" editor for inputs


I created some custom nodes and as they grow I want to polish their properties editor. In most case, have a nice textarea editor with JSON syntax highlighting.

To do that, I copy/paste the code of the "Template" node with some adjustment. I did it once, then twice, then had enough of copying all the onedit... custom handler and the HTML tags.

Is there a more "out of the box" solution ? Like a input type editor? Or maybe just a lib which would insert the HTML marking and add the handler in the registration process?

I don't know if this exists and if it should, but it's a pain each time I want to make a nice UI and I cannot be the only one. I'm ready to develop/test something but I'd like some inputs on the "How" and maybe warning of edge cases or such.

Thank you

Do you mean the actual HTML file containing the UI code of your custom node? Or do you mean an input text field for a property that supports highlighting?

For the latter you could use the ACE editor that is already shipped with Node-RED. Function or template nodes are great examples for its usage.

Yes, I'm talking about property that supports highlighting (like Template) and I'm using ACE, but that's not very a drop-in solution, you need to create multiple inputs (hidden, textarea, button), handle edit/prepare/save/cancel and a little bit of CSS.

So the idea would be to bundle all of this in a simple operation to encourage node creator to use all the capabilities of NodeRED, ACE included.

Ah, now I see. And you're right, there are quite a few steps to get it done when using ACE. I have used it in some of my nodes, too.

But the same goes for the other widgets, like the EditableList. Even though they provide some level of abstraction, you have to take care of the custom stuff in the prepare and save hooks... like converting the data, creating your controls, etc. I don't think there can be much done to reduce this.

Also keep in mind that ACE is highly customizable, you wouldn't want to lose that.

I agree that things can get complicated if you want to use multiple instances of ACE. In my case I used one instance and switched the content (and config) via tabs.