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

[Cadiac]

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.

Kapture.2025-03-03.at.15.04.50.mp4

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 #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

• PR title and summary are descriptive. (conventions)
• 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)

[codecov]

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 ⚠️

📢 Thoughts on this report? Let us know!

[CharlieKolb]

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)

[CharlieKolb]

Code looks good to me, and everything works well locally 🙌

[cypress]

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 ↗︎

---

Test results
Failures	0
Flaky	2
Pending	5
Skipped	0
Passing	440
View all changes introduced in this branch ↗︎

[github-actions]

✅ All Cypress E2E specs passed

[Cadiac]

Added a couple of more unit tests tests increasing coverage on the NDV, if you could take a look at this again tomorrow that would be great!

[CharlieKolb]

Really nice work 🙌

[github-actions]

✅ All Cypress E2E specs passed