Modify undo/redo behaviour on a textarea/menu in electron - textarea

Question

I devel electron application.
An application that edits a UML sequence diagram using canvas and multiple textarea.
Since textarea on the window takes Undo (Ctrl + z), Undo on Electron's Menu will not be called.
How can I invalidate the textarea's Undo and pass Control + z to the Electron's Menu?
Steps to reproduce
Register Undo (Ctrl + z) in Electron's Menu.
Create application screen including textarea.
Launch application.
Edit textarea.
(Without focus on textarea) Press Ctrl + z.
What I expected to see
Undo in Electron's Menu is called.
What I saw instead
The focus moves to the textarea.
The contents of textarea are undoed.
Undo in Electron's Menu is not called.
Other
Disable Chrome's text input undo/redo (CTRL+Z / CTRL+Y) was not perfect.

Answer 1

I encountered the same problem today. I think it's a bug in electron that they don't override the native ctrl + z and ctrl + y of input fields when an accelerator is set.
I found a workaround with this hack:
let zDown = false;
let zFired = false;
let yDown = false;
let yFired = false;
document.onkeydown = function(e) {
if (e.ctrlKey) {
if (e.key === 'z') {
zDown = true;
}
else if (e.key === 'y') {
yDown = true;
}
}
};
document.onkeyup = function(e) {
if (e.key === 'z' && zDown) {
if (!zFired) {
menu.getMenuItemById('undo').click();
}
zDown = zFired = false;
}
else if (e.key === 'y' && yDown) {
if (!yFired) {
menu.getMenuItemById('redo').click();
}
yDown = yFired = false;
}
};
let menu = Menu.buildFromTemplate([{
"label": "Edit",
"submenu": [{
"id": "undo",
"label": "Undo",
"accelerator": "CmdOrCtrl + z",
click: () => {
zFired = true;
app.undo();
}
}, {
"id": "redo",
"label": "Redo",
"accelerator": "CmdOrCtrl + y",
click: () => {
yFired = true;
app.redo();
}
}]
}]);
It's dirty, but it works.