FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
205 stars 49 forks source link

Add full content to Markdown-Node #1101

Open buschhardtt opened 3 months ago

buschhardtt commented 3 months ago

Current Behavior

Content shows as text

Expected Behavior

Content shows as markdown

Steps To Reproduce

  1. make a Markdown-Text in a Template-Node
  2. connect to Dashboard Markdown-Node
  3. add {{ msg.payload }} to the Markdown-Node

Example:

[
    {
        "id": "fe10b74873aebcc0",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "66d1e5776bc7e3ed",
        "type": "inject",
        "z": "fe10b74873aebcc0",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "x": 90,
        "y": 100,
        "wires": [
            [
                "25c4ceaa8ff3c491"
            ]
        ]
    },
    {
        "id": "25c4ceaa8ff3c491",
        "type": "template",
        "z": "fe10b74873aebcc0",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "markdown",
        "syntax": "plain",
        "template": "# Markdown Content\n\n## Secondary Header\n\n### Third Header\n\nParagraph here...\n\ninline `<code-example />` with other text either side\n\n```js\n// multiline\nfunction () {\n    console.log('hello world')\n}\n```\n\n- List Item 1\n- List Item 1\n- List Item 1\n- List Item 1\n\n[Hyperlink](https://news.bbc.co.uk)\n\n---\n\n> Lorum Ipsum Quotation Over two lines \n\n| Header 1 | Header 2 |\n|-|-|\n| eins | zwei |",
        "output": "str",
        "x": 300,
        "y": 100,
        "wires": [
            [
                "c61f4317ad20f535"
            ]
        ]
    },
    {
        "id": "c61f4317ad20f535",
        "type": "ui-markdown",
        "z": "fe10b74873aebcc0",
        "group": "be8440d16f7098fc",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "content": "{{ msg.payload }}",
        "className": "",
        "x": 490,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "be8440d16f7098fc",
        "type": "ui-group",
        "name": "Group Name",
        "page": "60fb1b70653660dd",
        "width": "6",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "60fb1b70653660dd",
        "type": "ui-page",
        "name": "Obsidian",
        "ui": "863357a5c2346037",
        "path": "/page3",
        "icon": "home",
        "layout": "grid",
        "theme": "07f2253c8612a459",
        "order": 4,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "863357a5c2346037",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "07f2253c8612a459",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

Environment

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

joepavitt commented 3 months ago

Is there a reason for putting the markdown in a template, and not just in the markdown node itself?

buschhardtt commented 3 months ago

No, but I use the markdown node. See

"id": "c61f4317ad20f535",
"type": "ui-markdown",...

I have a complete markdown string from somewhere (e.g. database) and would present that on dashboard. Is this possible? Thank You

joepavitt commented 3 months ago

Yep, you can just do:

{{ msg?.payload }}

in your Markdown template, pass the markdown via msg.payload and it'll render. See Docs

buschhardtt commented 3 months ago

Hello Joe, I use @flowfuse/node-red-dashboard 1.13 and it will not run.

  1. I have a Input-Node with a string put in msg.payload-> # markdown header\n## secondheader\n\nmytext
  2. the Markdown-Node show me the String but not the Markdown The same result, when I use a Template-Node (for the linefeed). Maybe the Linefeed is the problem? How must the String formated to show correct in the Markdown-Node

Thank You very much

joepavitt commented 3 months ago

Thanks for the extra detail @buschhardtt - remembering now that we have an issue with rendering injected markdown: https://github.com/FlowFuse/node-red-dashboard/issues/615

I'll get @gayanSandamal to take a look at this more actively, as fixing this would close out both issues, and make ui-markdown considerably more useful.

The challenge is, we run the content through the markdown parser first, then any injected content (which can come at any time) is placed into the {{ }} placeholders, but not re-parsed again