Allow basic formatting for templates of UI elements

[kellerza]

Basic formatting for UI elements like persistent_notifications and device attributes could improve the information significantly.

This could include: linebreaks as a minimum, links, and lastly bold or italics.

Examples of current UI displays that could be improved:

• persistent_notifications for invalid config [see PR HA #3738]
  
• Device attributes could benefit from having links (e.g. pointing at source data / attribution)
  

[balloob]

The best way to do this would be to add Markdown support (same formatting as we use on GitHub). The smallest library that supports this comes in at 5kb: https://github.com/SimonWaldherr/micromarkdown.js

That's small but still quite big for a feature that might not be used by 95% of the users.

I would be open for including this if we can conditionally load this on demand.

[kellerza]

What if we support only our current use cases?

• honor linebreaks \n --> <br>, and
• support links (url)[http://xyx] --> <a href='http://xyx'>url</a>

It will cover the startup messages and attribution cases, and will allow the following message:

---

Invalid config

The following platforms contain invalid config: sensor

Please check your configuration files and see logs for more information. For fault finding tips see here

---

[justweb1]

We could create an element for markdown. This way it will only load the js if the element is loaded.
<ha-markdown>(url)[http://xyx]</ha-markdown>

[balloob]

All elements for cards in the UI are included in the initial load so they would be included in the initial load.

[justweb1]

ah... that's right it will flatten it.

[justweb1]

I'm not seeing a good way to do this.

[balloob]

One way I can think of is having a web component that includes the markdown be included in the static folder. We'll load it on demand when the card with a notification is shown. ( Using this.importHref in a web component or Polymer.Base.importHref outside). HTML imports have the nice side effect that they will never be resolved twice.

[justweb1]

I like it. I'll have to dig it to see if I can figure out how to implement it.

[justweb1]

@kellerza I have added markdown to persistent notifications for now. Should be merged soon. I don't know that we are adding it anywhere else at this point.

[kellerza]

Thanks, persistent notification will be a great improvement!

Not sure if there is an easy way to enable this for platform attributes? (like links)

[justweb1]

probably just a concatenated string.

[justweb1]

@kellerza Do we want to close this for now?

[kellerza]

Thanks @justweb1!