node-red-dashboard
node-red-dashboard copied to clipboard
Markdown-UI & Template-UI node do not process HTML\Markdown sent to it by NR Template node
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.
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)
Here is what is displayed
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:
Thanks for your help Colin
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> }}
- This triggers Vue internals to parse of any HTML tags, etc, and allow for injection of
- 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.
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.
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
Here is the generated HTML
Here is what I see on the dashboard
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
This is similar to #715 "support HTML in msg.payload of ui-text."
@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..