[Announce] node-red-contrib-ui-editor

Share Your Nodes
1

Hi,

I have released a new Node-RED Dashboard UI widget node called ui_editor.

The ui_editor is based on the block-style editor, Editor.js, and supports input and display of images, tables, lists, etc. It also supports API control via input messages.

ui-editor
ui-editor827Ă—716 77.4 KB

11 Likes
2

I am looking for an editor to edit text files like bash, json, pyhton on a server. I am more looking after something that can do syntax highlight not the rich text features. Can I use this for that?

3

Sorry, code block currently supported by ui_editor do not support syntax highlighting.
But, there is an Editor.js plugin that support syntax highlighting.
If it meets your requirements, I will consider updating ui_editor.

4

Oh, this looks nice, and looks like nicely integrated. Maybe if you implement it, also give an option to start the editor in either CodeFlask or in the current view.

I found highlight.js which works fine, but it is only a formatter tool, I don't think it would work with an editor.

5

@nisiyama If you use the DARK theme in the dashboard (dashboard->Theme->Style->Dark) the 'Add' and 'Click to tune' options are almost impossible to see.

(opened an issue using dashboard 'Dark' theme makes it hard to use · Issue #1 · HiroyasuNishiyama/node-red-contrib-ui-editor · GitHub)

6

You should be able to implement Monaco as a remote editor.

Alternatively, depending on what you want and how the server is configured/secured, you could simply use Microsoft's remote editing extensions for VSCode.

If you have Docker or other open container server available, looks like this would implement a remote edit environment:

coder/code-server: VS Code in the browser (github.com)

On my backlog for uibuilder I also want to set up something that would allow a remote editing feature. Should be relatively easy but needs me to learn about the Monaco API.

7

@zenofmud
Thanks for the report.
I have released a new version with modified CSS so that those buttons, etc. are visible in the Dark theme.

1 Like
8

@nygma2004
I have released a new version with @calumk/editorjs-codeflask as the code tool. there seems no need to make the two code tools selectable, so I have not made them selectable.

Code highlighting works for javascript, C-like languages, etc., but unfortunately does not work well for python, bashs scripts, etc. From a quick check, it seems to be a problem with the editorjs-codeflask or its dependent libraries.

9

One of the potential advantages of having a Markdown editor instead of EditorJS would be good integration with live edit code blocks using something like PrismJS. Did you consider Markdown? (Not a criticism by the way, I'm interested in the thinking)

10

My requirements were JSON affinity and API handling of content. Of several several candidates I considered, Editor.js was the best option.

2 Likes