Key Binding of the ace editor does not work in the expanded editor

General
1

I create a customize node using the ace editor as below:

HTML content

<div id="func-tabs-content" style="min-height: calc(100% - 95px);">
    <div id="func-tab-body" style="display:none">
      <div class="form-row" style="margin-bottom: 0px;">
        <input type="hidden" id="node-input-func" autofocus="autofocus" />
        <input type="hidden" id="node-input-noerr" />
      </div>

      <div class="form-row node-text-editor-row" style="position:relative">
        <div style="position: absolute; right:0; bottom: calc(100% + 3px);">
          <button id="node-function-expand-js" class="red-ui-button red-ui-button-small">
            <i class="fa fa-expand"></i>
          </button>
        </div>
        <div id="node-input-func-editor" style="height: 220px; min-height:120px; margin-top: 30px;" class="node-text-editor"></div>
      </div>
    </div>
  </div>

and in oneditprepare() function

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:

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:

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:

Untitled
Untitled927×185 29.5 KB

I don't know where I was wrong. Can you give me an idea to fix this? Thanks everyone for watching

2

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.

3

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.

4

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?

5

@ 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

6

Sounds like a bug @knolleary?

7

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).

8

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:

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);
        }
      }
9

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.

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.