# Key Binding of the ace editor does not work in the expanded editor
**URL:** https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108
**Category:** General
**Created:** [14 January 2021 07:02 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108 "2021-01-14T07:02:56Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@chiche](https://discourse.nodered.org/u/chiche)
#### Post date: [14 January 2021 07:02 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/1 "2021-01-14T07:02:57Z")
I create a customize node using the ace editor as below:
HTML content
```auto
```
and in oneditprepare() function
```auto
this.editor = RED.editor.createEditor({
id: "node-input-func-editor",
mode: "ace/mode/javascript",
value: "",
highlightActiveLine: true,
globals: {
console: false,
openContract: false,
},
esversion: 5,
asi: false,
});
return editor;
```
I write a custom command for the ace editor as below:
```auto
var keyBinding = function(editor) {
if (!editor.commands.commandKeyBinding["Ctrl-Shift-F"]) {
editor.commands.addCommand({
name: "formatPrettier",
bindKey: {
win: "Ctrl-Shift-F",
mac: "Command-Shift-F",
},
exec: function(editor) {
console.log('format src code');
},
readOnly: true,
});
}
};
keyBinding(this.editor);
```
It works well when the editor is in the normal state. But when the edit is expanded, my new command doesn't work even though the command list is still updated. My expand editor is written as follows:
```auto
var expandButtonClickHandler = function(editor) {
return function(e) {
e.preventDefault();
var value = editor.getValue();
RED.editor.editJavaScript({
value: value,
width: "Infinity",
cursor: editor.getCursorPosition(),
mode: "ace/mode/javascript",
complete: function(v, cursor) {
editor.setValue(v, -1);
editor.gotoLine(cursor.row + 1, cursor.column, false);
setTimeout(function() {
editor.focus();
}, 300);
},
globals: {
console: false,
openContract: false,
},
esversion: 5,
asi: false,
});
keyBinding(editor);
console.log(editor);
}
}
$("#node-function-expand-js").on(
"click",
expandButtonClickHandler(this.editor)
);
```
I check the editor variable after it expanded and its commands are still correct:
I don't know where I was wrong. Can you give me an idea to fix this? Thanks everyone for watching
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [17 January 2021 15:11 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/2 "2021-01-17T15:11:26Z")
Could it be that the Node-RED editor keybindings come into effect when you're in expanded mode and the key event gets handled there? Ctrl-shift-f is one of the default bindings IIRC.
---
### Author:  [@chiche](https://discourse.nodered.org/u/chiche)
#### Post date: [18 January 2021 02:07 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/3 "2021-01-18T02:07:18Z")
Thanks, @ristomatti, when the editor expanded, I checked other keybindings of ace editor such as Ctrl+F, Ctrl+A but it still works fine. I also checklist up of default commands of the ace editor and Ctrl+Shift+F is not default command. Besides, I also change Ctrl+Shift+F to other keystrokes but it cannot fix.
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [18 January 2021 04:59 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/4 "2021-01-18T04:59:09Z")
I meant the keybindings you can find from the top right menu, under keyboard shortcuts. It has ctrl+shift+f assigned to "List flows" on the global scope. Have you tried changing that to something else?
---
### Author:  [@chiche](https://discourse.nodered.org/u/chiche)
#### Post date: [18 January 2021 06:47 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/5 "2021-01-18T06:47:58Z")
@ [ristomatti](https://discourse.nodered.org/u/ristomatti) Thanks so much, I didn't notice the duplication, I changed it to "ctrl + alt + f" but still can't fix it. When the editor is in normal state it is still running, but when the editor is expanded it cannot
---
### Author:  [@ristomatti](https://discourse.nodered.org/u/ristomatti)
#### Post date: [18 January 2021 10:59 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/6 "2021-01-18T10:59:40Z")
Sounds like a bug @knolleary?
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [18 January 2021 11:04 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/7 "2021-01-18T11:04:47Z")
Possibly. Although we've never formally exposed ACE for nodes to customise, so never looked at adding custom key bindings.
Given the work from @Steve-Mcl to migrate from ACE over to Monaco, then I'm in two minds as to how much we want to encourage nodes to customise their individual ACE instances as that will make it harder to migrate. Or whether we need to provide a Node-RED wrapper API (like we do to create the editor in the first place).
---
### Author:  [@chiche](https://discourse.nodered.org/u/chiche)
#### Post date: [18 January 2021 11:20 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/8 "2021-01-18T11:20:03Z")
Thanks to both @knolleary and @ristomatti, thank you very much for taking care of my problem. I read the code in node-red and knew that editJavaScript () will build a new editor. By rebuilding it from HTML, I can got it and add my new command as follows:
```auto
var expandButtonClickHandler = function (editor) {
return function (e) {
e.preventDefault();
RED.editor.editJavaScript({
value: "",
width: "Infinity",
cursor: editor.getCursorPosition(),
mode: "ace/mode/javascript",
complete: function (v, cursor) {
editor.setValue(v, -1);
editor.gotoLine(cursor.row + 1, cursor.column, false);
setTimeout(function () {
editor.focus();
}, 300);
},
globals: {
console: false,
openContract: false,
},
esversion: 5,
asi: false,
});
setTimeout(function () {
const expressionEditor = $(".ace_editor")[0].env.editor;
keyBinding(expressionEditor);
}, 600);
}
}
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 January 2021 16:06 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/9 "2021-01-18T16:06:42Z")
Hi Nick, I would also discourage accessing ACE directly. Even if Monaco doesn't see the light of day, one day ACE will be replaced.
It would be quite the undertaking to generate a full node-red API for all editor functionality but the work done on Monaco branch should provide a starting point for an editor API as a minimum starting point.
I found the ACE LIB API to be a bit ummm, "not great" so i would recommend namings and parameters are improved somewhat if we go down the route of an official node-red editor API.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [19 March 2021 16:07 UTC](https://discourse.nodered.org/t/key-binding-of-the-ace-editor-does-not-work-in-the-expanded-editor/39108/10 "2021-03-19T16:07:07Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.