JSON text input node

[Hugobox]

Description

It would be nice if there was a new text input mode, similar to text-area but specially for JSON formatted text with syntax highlighting.

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[bartbutenaers]

@Hugobox,

Just thinking out loud...

I see that e.g. highlight.js offers:

• Syntax highlighting for 192 languages
• Has 498 themes
• Offers automatic language detection
• Offer a VueJs [plugin](https://github.com/highlightjs/vue-plugin/blob/main/README.md
• The project is well maintained

Some quick thoughts:

1. It seems to offer its own highlightjs tag:

   <template>
       <highlightjs language="js" code="console.log('Hello World');" />
   </template>
   

   Which means that - beside the existing v-text-field and v-textarea tags - the new third tag should be activated based on a new mode in the dropdown:

   

   Or a checkbox "Automatic syntax highlighting" that becomes visible when the mode "text input (multi-line)" has been selected.

2. Two extra (minified) libraries need to be added to the dashboard bundle:

   • highlight.min.js
   • highlight-vue.min.js

   That looks like quite a download size to me, especially for users that don't need it.

3. Of course it is also possible to keep things basic and only add a json syntax highlighting element to the dashboard, for example vue-json-pretty. But of course then you are stuck again when somebody wants to format yaml, or js, ... Although obviously Node-RED is all about json, so yes perhaps json is enough.

This is a useful feature request, but perhaps it would be better to implement this into a separate D2 ui node.
Don't know...

Bart

[joepavitt]

This is a useful feature request, but perhaps it would be better to implement this into a separate D2 ui node.

This is my thinking too. Very useful node, but not sure we can justify including the extra packages into core Dashboard for something that isn't as universal as a UI feature.