Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown-UI & Template-UI node do not process HTML\Markdown sent to it by NR Template node #615

Open
SynoUser-NL opened this issue Feb 26, 2024 · 6 comments
Labels
needs-triage Needs looking at to decide what to do

Comments

@SynoUser-NL
Copy link

When defining HTML or Markdown content in a nodered Template node and sending this to the new HTML and Markdown nodes, the content is not displayed as Markdown or HTML.

@joepavitt joepavitt added the needs-triage Needs looking at to decide what to do label Mar 6, 2024
@colin-grierson
Copy link

If I understand correctly I have the same issue. I am calling a remote function that returns HTML formatted text I want to display - using the HTML formatting. However I have not found a way to make this happen.
Here is my template (Widget, group scoped)
image

Here is what is displayed
image

The problem appears to be that my text is injected into the generated HTML as a quoted string - and because it is quoted the embedded html controls are ignored. This is what I see when I inspect my web page:
image

Thanks for your help
Colin

@joepavitt
Copy link
Collaborator

This is a very difficult thing to get right given the lifecycle of events that needs to take place. The steps are as follows:

  • Config for the node is received with content defined
  • Parse content and convert it from markdown to HTML
  • Bind the resulting HTML to the template of the Vue component
    • This triggers Vue internals to parse of any HTML tags, etc, and allow for injection of {{ msg.<stuff> }}
  • On receiving a new msg, we replace any appearances of {{ msg.<stuff> }} with the relevant value received
  • We run the renderMermaid function to parse any mermaid content

This falls over because it's possible for the {{ msg.<stuff> }} to contain HTML/Markdown, which is not re-parsed by VueJS at that point.

@SynoUser-NL
Copy link
Author

Commenting on the above I'm not sure it is clear what I'm saying:

  • when defining HTML content in a (non-ui) template node and sending it to the UI-template node (which should render HTML), this does not work
    • when defining Markdown in a (non-ui) template node and sending it to the UI-Markdown node (which should render Markdown) this does not work

And with "this does not work" I mean: the defined content is not displayed in the UI node, and we've even experienced lockups of the entire UI\Dashboard2 (by simply sending HTML to a UI-template node).

I am not asking to rewrite\convert markdown to HTML, that would not make sense (i.e. just use the correct content node). But I would like to be able to just define markdown as a template and send that to and have it rendered by the UI-Markdown node. Same for HTML.
Why: this allows to have one (1) markdown\html node on the dashboard the (entire) content of which can change dynamically.
And this was not working at the time of issue submission.

@colin-grierson
Copy link

Hi Joe
Thanks for your quick reply.
I also experienced lockups of the entire dashboard when I was experimenting with this - Sorry, I did not pursue this to document exactly how to reproduce the issue. Now I have tidied my code that problem has gone away. If I hit it again I'll document the issue properly.

Re the text formatting. I was mislead by the HTML displayed by Chrome inspect. Copying to notepad I can see the problem is my text has had the HTML control characters escaped so that the exact text I supply is displayed. In most cases this is what is wanted... But not always. To handle this we would need a switch - some way of telling the system not to escape the inserted text.

Markdown uses different controls, perhaps I can use this...
"To create paragraphs, use a blank line to separate one or more lines of text."
"To create a line break or new line (
), end a line with two or more spaces, and then type return."
No joy :-(
The problem appears to be the Markdown processing is done before my text is inserted - the controls I put in the Markdown widget definition work as they should. The same controls in the inserted text do not.

Here is my markdown definition
image

Here is the generated HTML
image

Here is what I see on the dashboard
image

I think this is wrong. Text should be inserted before the markdown processing.

All I want to do is display a plain text log file. The only formatting I need is line feed. Is there another way?

Thanks again
Colin

@colin-grierson
Copy link

This is similar to #715 "support HTML in msg.payload of ui-text."

@SynoUser-NL
Copy link
Author

SynoUser-NL commented Apr 30, 2024

@colin-grierson : discovered this week that using <pre> {{msg.payload}} </pre> in a ui-template node will display JSON in a (more or less) correct format. Maybe this is of some help..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs-triage Needs looking at to decide what to do
Projects
Status: Backlog
Development

No branches or pull requests

3 participants