FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
158 stars 35 forks source link

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

Open SynoUser-NL opened 4 months ago

SynoUser-NL commented 4 months ago

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.

colin-grierson commented 2 months ago

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 commented 2 months ago

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

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 commented 2 months ago

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

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 commented 2 months ago

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 commented 2 months ago

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

SynoUser-NL commented 2 months ago

@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..