UI improvements for the editor-UI

I have some feedback on potentially improving the UI editing experience for n8n nodes like the function node. I am guessing that some of these may even have workarounds that I am not aware of and am hoping to get educated on the same.

  1. If I delete a node accidentally, there is no way to get it back by doing a CTRL+Z/CMD+Z. This is particularly annoying when I have a lot of new code written in it and accidentally delete the node before saving the workflow.

  2. Selecting multiple lines and doing a tab simply deletes those lines in the editor view of any node

  3. When selecting text in any node, if the mouse pointed happens to be outside the node pop-up before the selection click is released, the node pop-up simply closes. Is there a way to detect selection clicks or maybe even prevent the node pop-up from closing on clicks outside it, considering that there is a dedicated close button for that operation? Sometimes, this compounded with item no.1 causes an entire node to be irrecoverably deleted when all I was doing was selecting a line and deleting it.

Hi @ajayjohn!

Thanks a lot for your requests. Could you please split these up into three separate feature requests? This way other users can vote on them accordingly and will help us prioritize what we’re able to focus on next. As you can understand, for each feature we have to assess the effort involved and % of user affected - so having votes from the community on specific granular requests helps inform this.

As someone who responsible for product design at n8n, I’d just like to say that this IS great feedback and appreciate the frustrations of loosing data. Unfortunately, undoing a deleted node is rather non-trivial and so this is a great example where a lot of votes on that feature in particular would help us escalate development of that feature.

Cheers!

1 Like

@maxT Thank you for explaining that. I apologize for the delay in responding to you.

I have gone ahead and split items 1 and 2 into separate threads. However, I am not able to edit this current thread and use it for the third point alone.
Could you please edit the opening post for me?

Hey I’m not really sure where to post/ask this but I’m a new contributor to the open source repo and very interested in helping update the UX of the code editor in n8n. Are there current plans somewhere or another thread that I should look at for this?

There’s already a lot of great drop-in editors that we could potentially use as I don’t think it makes sense for n8n to maintain its own editor.

@samr28 thanks for your interest :slight_smile:

We’re definitely aware of current limitations to code editing in function/ function item nodes. And totally agree that it does not make sense to reinvent the wheel here.

Improving this experience is on our long term (internal) roadmap, but often some community conversations unearth that there is a low effort path to demonstrably improving existing functionality sooner.

So to get that convo started, could you share any existing editor libs that you feel have great experience? Would be also helpful to understand what aspects you consider when thinking about what makes “good UX” for code editing. As always, everyone is welcome to share their ideas on this as well.

Thank you! :grinning:

3 Likes

Exploring a Monaco Editor integration would be interesting:

2 Likes

Hello everyone, hope this conversation is still open.

It’d be awesome if Monaco Editor was integrated in the function node. There’s an npm package for Vue.

Did some more research, with Monaco we could add IntelliSense to the global items object, found a script someone wrote, and with some improvements later on it would possibly allow adding IntelliSense based on the input coming from the previous block! Type-safe functions would improve UX drastically.

Readonly mode is also possible.

I’d be willing to create a PR if help is needed with a simple implementation @maxT @ivov .

6 Likes

This is indeed a great idea and we actually have it on our roadmap. Watch this space :slight_smile:

1 Like

Just tried this out today while writing the 0.156.0 changelog and just wanted to let you know it’s a real pleasure working with the new editor. Thanks so much for this @arpadgabor!

2 Likes

Haha thanks! It is indeed a great feature. I’d also like to thank the team for building onto what I started as I didn’t fully understand the codebase when I created the PR. Next up when I find some time: investigate how to improve the expression editor :slight_smile:

4 Likes

Monaco is wonderful! Could you also, please, use Monaco in Expression editor and add ability to select language? For example, SQL markup in database nodes, HTML in email?

3 Likes