n8n fix(editor): Fix save keybind in expression editor and unfocused node details view

Summary

Cmd+S / Ctrl+S keybind to save the workflow at Node details view wasn't saving the workflow if NDV wasn't focused or if the expressions editor modal was open. This PR fixes that by registering a document level keydown capture listener while NDV is open, and unregistering it when closed.

https://github.com/user-attachments/assets/c16fcc4d-07b2-459c-8c35-ad3e5977d779

When NDV is opened it isn't initially focused and as previously the listener was bound to the div so before clicking the NDV saving wouldn't work.

After focusing the NDV save would work, but if user then opened expression editor modal save keybind would again stop working. codemirror editor that opens would also register capture keydown handlers that would consume the events after handling them, and NDV's onKeyDown would never trigger. This has probably been broken since https://github.com/n8n-io/n8n/pull/12285 was merged.

SinceNDVFloatingNodes already registers a document level keydown capture listener I initially solved this at 7965627 by listening to save keybind there and emiting the event back up to NodeDetailsView, but I didn't like this solution as it left the @keydown.capture listener on NodeDetailsVIew that wasn't really doing what was expected.

My second and proposed solution is to register/unregister another document level keydown listener on NDV when the modal is opened or closed.

I'm still not convinced if this is the cleanest way to fix this, so feel free to give feedback or alternative ideas on how to fix this.

Related Linear tickets, Github issues, and Community forum posts

https://linear.app/n8n/issue/ADO-3120/bug-cmd-s-doesnt-save-when-in-expression-editor

Review / Merge checklist

[x] PR title and summary are descriptive. (conventions)
[x] Docs updated or follow-up ticket created.
[ ] Tests included.
[ ] PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

Mar 03 '25 13:03 Cadiac

Codecov Report

Attention: Patch coverage is 95.23810% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ntend/editor-ui/src/components/NodeDetailsView.vue	95.23%	1 Missing :warning:

:loudspeaker: Thoughts on this report? Let us know!

Mar 03 '25 13:03 codecov[bot]

This looks great! Love the tests in particular. One complication to be aware of is that the NodeCreator (right hand + button to add nodes) and the AI Assistant (needs some local setup, shoot me a dm if you want to try this) both also do some custom listening.

Your code handles this fine though, typing in the AI Assistant still works while on the NDV, and while the NDV is open cmd+s saves (without it open the existing behavior of the pop up remains, which is fine or follow up at worst)

Mar 03 '25 14:03 CharlieKolb

n8n Run #9628

Run Properties: Passed #9628 • 1c4f16ae34: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 Cadiac 🗃️ e2e/*

Project	`n8n`
Branch Review	`ado-3120-bug-cmd-s-doesnt-save-when-in-expression-editor`
Run status	`Passed #9628`
Run duration	`04m 40s`
Commit	`1c4f16ae34: 🌳 🖥️ browsers:node18.12.0-chrome107 🤖 Cadiac 🗃️ e2e/*`
Committer	`Jaakko Husso`
View all properties for this run ↗︎