Don't break Markdown from external sources (#5713)

src/auth/ha-auth-flow.ts

@@ -103,6 +103,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           ${this.localize("ui.panel.page-authorize.abort_intro")}:
           <ha-markdown
             allowsvg
+            breaks
             .content=${this.localize(
               `ui.panel.page-authorize.form.providers.${step.handler[0]}.abort.${step.reason}`
             )}
@@ -113,6 +114,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           ${this._computeStepDescription(step)
             ? html`
                 <ha-markdown
+                  breaks
                   .content=${this._computeStepDescription(step)}
                 ></ha-markdown>
               `

src/components/ha-markdown.ts

@@ -12,6 +12,8 @@ class HaMarkdown extends UpdatingElement {
 
   @property({ type: Boolean }) public allowSvg = false;
 
+  @property({ type: Boolean }) public breaks = false;
+
   protected update(changedProps) {
     super.update(changedProps);
 
@@ -26,7 +28,7 @@ class HaMarkdown extends UpdatingElement {
     this.innerHTML = await worker.renderMarkdown(
       this.content,
       {
-        breaks: true,
+        breaks: this.breaks,
         gfm: true,
         tables: true,
       },

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -59,7 +59,9 @@ export const showConfigFlowDialog = (
       );
 
       return description
-        ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+        ? html`
+            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+          `
         : "";
     },
 
@@ -78,7 +80,9 @@ export const showConfigFlowDialog = (
         step.description_placeholders
       );
       return description
-        ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+        ? html`
+            <ha-markdown allowsvg breaks .content=${description}></ha-markdown>
+          `
         : "";
     },
 
@@ -112,7 +116,13 @@ export const showConfigFlowDialog = (
           )}
         </p>
         ${description
-          ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+          ? html`
+              <ha-markdown
+                allowsvg
+                breaks
+                .content=${description}
+              ></ha-markdown>
+            `
           : ""}
       `;
     },
@@ -128,7 +138,13 @@ export const showConfigFlowDialog = (
 
       return html`
         ${description
-          ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+          ? html`
+              <ha-markdown
+                allowsvg
+                breaks
+                .content=${description}
+              ></ha-markdown>
+            `
           : ""}
         <p>
           ${hass.localize(

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -50,7 +50,13 @@ export const showOptionsFlowDialog = (
         );
 
         return description
-          ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+          ? html`
+              <ha-markdown
+                breaks
+                allowsvg
+                .content=${description}
+              ></ha-markdown>
+            `
           : "";
       },
 
@@ -69,7 +75,13 @@ export const showOptionsFlowDialog = (
           step.description_placeholders
         );
         return description
-          ? html` <ha-markdown allowsvg .content=${description}></ha-markdown> `
+          ? html`
+              <ha-markdown
+                allowsvg
+                breaks
+                .content=${description}
+              ></ha-markdown>
+            `
           : "";
       },
 

src/dialogs/more-info/controls/more-info-configurator.js

@@ -52,6 +52,7 @@ class MoreInfoConfigurator extends PolymerElement {
       <div class="layout vertical">
         <template is="dom-if" if="[[isConfigurable]]">
           <ha-markdown
+            breaks
             content="[[stateObj.attributes.description]]"
           ></ha-markdown>
 

src/dialogs/notifications/persistent-notification-item.ts

@@ -32,7 +32,10 @@ export class HuiPersistentNotificationItem extends LitElement {
           ${this.notification.title}
         </span>
 
-        <ha-markdown content="${this.notification.message}"></ha-markdown>
+        <ha-markdown
+          breaks
+          content="${this.notification.message}"
+        ></ha-markdown>
 
         <div class="time">
           <span>

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -81,6 +81,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     return html`
       <ha-card .header="${this._config.title}">
         <ha-markdown
+          breaks
           class="markdown ${classMap({
             "no-header": !this._config.title,
           })}"

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -77,6 +77,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
             <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
               <ha-markdown
                 allowsvg
+                breaks
                 content="[[_computeStepAbortedReason(localize, _step)]]"
               ></ha-markdown>
             </template>
@@ -95,6 +96,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <ha-markdown
                   allowsvg
+                  breaks
                   content="[[_computeStepDescription(localize, _step)]]"
                 ></ha-markdown>
               </template>