Exploring NR Editor source code - wrt new ideas

General
1

Hi
I'm exploring some of the key aspects of NodeRed editor and wondering how they can be edited/customised +/- /improved..

For instance this panel here in the Change Node -- for JSONata expressions

image
image631×860 29.1 KB

I would like to be able to experiment with some local changes..eg something like this

image
image1787×593 64.3 KB

that I am using on another project

I've been trying to explore the source code that underpins the editor but its somewhat tricky to navigate
I thought I would find it here


but its not a clear match

Am I missing something (ie I cant see "Function Reference" , "Test", "Example Message" or "Result" in the NR Editor source code) or perhaps its due to the abstraction of the source code that I'm not able to follow?

Thanks in advance
Tony

2

Hi @tony-shannon

the JSONata expression editor is built into the core so it can be reused by any node.

It lives here: https://github.com/node-red/node-red/tree/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors

alongside the other type editors (JSON, Markdown, etc).

3

thanks @knolleary

That makes sense.
I'm looking at the source code for expressions there and still not seeing references to " "Function Reference" , "Test", "Example Message" or "Result" from the panel...
image

so wondering where they are coming from?

Please forgive me if they are staring me in the face but I cant see them , so cant quite follow the code..

thanks again
Tony

4

All pieces of text in the UI are handled through a message catalog that allows them to be translated.

The two tabs you can see are added here: https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/src/js/ui/editors/expression.js#L221-L225

You can see it sets the label of the tab with the code: RED._('expressionEditor.functionReference').

This tells the editor to lookup the value value of expressionEditor.functionReference in whatever language the editor is currently using.

That particular message value, in English, is here: https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/editor-client/locales/en-US/editor.json#L772 alongside the other messages for the expression editor.

5

thanks for the detailed explanation Nick
Makes sense

I had hoped I would have been able to trace that up through the code, if I was able to find any of those keywords via a text search in the codebase.
For some reason when I did a text search for that via Github it didn't show that up in the results, don't know why..

image
image1450×911 57.3 KB

Anyway that explanation really helps.. thank you
Tony