Expanding custom editors

Core Development
1

Hi folks,

In my node-red-contrib-blockly node there are two tabsheets, to be able to display two different editors:

  • First tabsheet to show a Blockly editor:
    image

  • Second tabsheet to show a Javascript editor:
    image

However @tilleul requested a new (very useful !!) feature:

Would it be possible to have an expand button like the function node in 0.19.x ?

Thought this would be 'rather' easy, but that was my miscalculation of this century... Some questions about it:

  1. Adding such an 'expand' button to my Javascript editor seems to be working fine, when using the same code snippet as in the function node. The only problem is that my javascript editor is read-only, but as soon it is expanded it becomes editable.

    In the createEditor function there is already some functionality available for this kind of stuff:

    if (options.readOnly) {
    editor.setOption('readOnly',options.readOnly);
    editor.container.classList.add("ace_read-only");
}

    So I assume this readOnly parameter should be passed extra in the Javascript editor:

    expressionEditor = RED.editor.createEditor({
      ...
      globals: {
             readOnly:true,
             ...
      }
});

    But does this mean I have to register my own _RED.editor.types.readonlyjs (which is a modified copy of the _RED.editor.types.js) ?? Or can I use somehow the standard _RED.editor.types.js ?

  2. I also need an expand button for my Blockly editor. Currently Node-RED has a series of editors (Javascript, Buffer, JSON, Expression, Template, Markdown ...) but those all seem to be based on the Ace editor, each with their own settings: so they all call the same RED.editor.createEditor(....). However my Blockly editor is not based on the Ace editor:

    • Do I also need to adapt createEditor in some way, or can I just create my Blockly editor with my own code (without changing that createEditor function)?
    • I assume that I also have to register a _RED.editor.types.blockly and then use showTypeEditor ?

I'm not sure at the moment whether this expand mechanism is designed to be used for custom editors (like Blockly)?? Would be very helpfull to have a short list of things that I have to implement, because it is rather heavy stuff for me at the moment ...

Thanks a lot !
Bart

2

Short answer: there is no mechanism for you to register your own editor type today. The code isn't far off allowing it, but it is not there today.

If you wanted a read-only JavaScript editor, then we could look at adding that option to the existing JavaScript editor rather than treating that as a entirely different type.

It may be an interesting exercise to use the Blockly node as a use case for a proper api here - but it isn't an exercise I have much time for right now.

3

Can understand that, when looking at the roadmap :wink:

I got already the same feature request from other users, since their Blockly editor is quickly filled with blocks.

Is there anything else I could do as a workaround? I had also a request to open the editor in a separate window (full-screen), but then all my work (to integrate it inside the flow editor) would be lost. My creativity has reached its boundaries ...

4

Currently the best would be just to stretch the window manually. Otherwise you will just have to undo it later when we do make it available, and you can use the time for other features.

1 Like