[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

13 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
11

Hi,
Thanks a lot for this integration ! :smile:
This is a very way to display documentation.
I install very succesfuly on my rasp with the script

But on my server...
I have a display issue with NR docker (tag : 3.02).
I install of course NR dashboard
I try several browser and there is no display

Is there some dependencies to add ?

Again thanks a lot.
Let me know if you have an idea.

Regards

12

Hi,
ui-editor uses some dependent libraries internally, which should be installed automatically during node installation.

Do you see any output in the browser's developer tools console?

13

Hi,
Thanks for your help

Here some info about the log :

La ressource à l’adresse « http://my_ip:my_port/ui/ui_editor/libs/editor » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)

It's result blocking :

Error: Cannot find module '@editorjs/editorjs/dist/editor.js'
Require stack:
- /data/node_modules/node-red-contrib-ui-editor/editor.js
- /usr/src/node-red/node_modules/@node-red/registry/lib/loader.js
- /usr/src/node-red/node_modules/@node-red/registry/lib/index.js
- /usr/src/node-red/node_modules/@node-red/runtime/lib/nodes/index.js
- /usr/src/node-red/node_modules/@node-red/runtime/lib/index.js
- /usr/src/node-red/node_modules/node-red/lib/red.js
- /usr/src/node-red/node_modules/node-red/red.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1026:15)
    at Function.resolve (node:internal/modules/cjs/helpers:114:19)
    at /data/node_modules/node-red-contrib-ui-editor/editor.js:501:38
    at Layer.handle [as handle_request] (/usr/src/node-red/node_modules/express/lib/router/layer.js:95:5)
    at next (/usr/src/node-red/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/usr/src/node-red/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/usr/src/node-red/node_modules/express/lib/router/layer.js:95:5)
    at /usr/src/node-red/node_modules/express/lib/router/index.js:284:15
    at param (/usr/src/node-red/node_modules/express/lib/router/index.js:365:14)
    at param (/usr/src/node-red/node_modules/express/lib/router/index.js:376:14)

Thanks for your help
Regards !

14

Hi,
Thank you for the log.
It seems that the latest version of editorjs has changed the internal file structure.
I have released a new version of ui-editor (0.0.4) which fixes editorjs version, so please try it.

15

Hi,
Yes it's work again perfectly ! thank you

I notice that the node need to be refresh when you navigate the differents UI NR tab
--> It can be easly done with UI control node.

Fyi, (previous post) for using Markdow (i love it also) in html you can use this node : node-red-node-markdown (node) - Node-RED
After that the html can be included in a block of editor.js

Regards

ui-editor
ui-editor1632Ă—1231 192 KB

1 Like