From dc2ee2e63f5166f9aac97bb9a5aded93334ad4cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Wed, 7 Aug 2019 23:35:17 +0200
Subject: [PATCH] Enable ha-icons in markdown card (#3458)

* Allow ha-icon in markdown

* Please the linter

* Remove allowSvg

* Remove lasts allow-svgs
---
 src/auth/ha-auth-flow.ts                      |  1 -
 src/components/ha-markdown.js                 | 23 +++++++------------
 src/dialogs/config-flow/step-flow-abort.ts    |  2 +-
 .../config-flow/step-flow-create-entry.ts     |  2 +-
 src/dialogs/config-flow/step-flow-external.ts |  2 +-
 src/dialogs/config-flow/step-flow-form.ts     |  2 +-
 .../profile/ha-mfa-module-setup-flow.js       |  1 -
 7 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index de9a5d56e2..f6f9b6c829 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -106,7 +106,6 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             ? html`
                 <ha-markdown
                   .content=${this._computeStepDescription(step)}
-                  allow-svg
                 ></ha-markdown>
               `
             : html``}
diff --git a/src/components/ha-markdown.js b/src/components/ha-markdown.js
index 14b345d2e2..02c31e84d9 100644
--- a/src/components/ha-markdown.js
+++ b/src/components/ha-markdown.js
@@ -3,11 +3,7 @@ import { EventsMixin } from "../mixins/events-mixin";
 
 let loaded = null;
 
-/**
- * White list allowed svg tag.
- * Only put in the tag used in QR code, can be extend in future.
- */
-const svgWhiteList = ["svg", "path"];
+const tagWhiteList = ["svg", "path", "ha-icon"];
 
 /*
  * @appliesMixin EventsMixin
@@ -16,12 +12,8 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
   static get properties() {
     return {
       content: {
-        type: String,
         observer: "_render",
-      },
-      allowSvg: {
-        type: Boolean,
-        value: false,
+        type: String,
       },
     };
   }
@@ -51,7 +43,9 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
   }
 
   _render() {
-    if (this._scriptLoaded === 0 || this._renderScheduled) return;
+    if (this._scriptLoaded === 0 || this._renderScheduled) {
+      return;
+    }
 
     this._renderScheduled = true;
 
@@ -62,14 +56,13 @@ class HaMarkdown extends EventsMixin(PolymerElement) {
       if (this._scriptLoaded === 1) {
         this.innerHTML = this.filterXSS(
           this.marked(this.content, {
+            breaks: true,
             gfm: true,
             tables: true,
-            breaks: true,
           }),
           {
-            onIgnoreTag: this.allowSvg
-              ? (tag, html) => (svgWhiteList.indexOf(tag) >= 0 ? html : null)
-              : null,
+            onIgnoreTag: (tag, html) =>
+              tagWhiteList.indexOf(tag) >= 0 ? html : null,
           }
         );
         this._resize();
diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts
index b338d26fbc..e1dfdbe577 100644
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@@ -37,7 +37,7 @@ class StepFlowAbort extends LitElement {
       <div class="content">
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
       </div>
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index 5ecc457a40..801854ff49 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -56,7 +56,7 @@ class StepFlowCreateEntry extends LitElement {
       <div class="content">
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <p>Created config for ${step.title}.</p>
diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts
index 2dca5b5921..51175ce755 100644
--- a/src/dialogs/config-flow/step-flow-external.ts
+++ b/src/dialogs/config-flow/step-flow-external.ts
@@ -51,7 +51,7 @@ class StepFlowExternal extends LitElement {
         </p>
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <div class="open-button">
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 3f5b93825b..9e24395f33 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -79,7 +79,7 @@ class StepFlowForm extends LitElement {
           : ""}
         ${description
           ? html`
-              <ha-markdown .content=${description} allow-svg></ha-markdown>
+              <ha-markdown .content=${description}></ha-markdown>
             `
           : ""}
         <ha-form
diff --git a/src/panels/profile/ha-mfa-module-setup-flow.js b/src/panels/profile/ha-mfa-module-setup-flow.js
index 8f9081fcca..8139c87e3f 100644
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -91,7 +91,6 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
               >
                 <ha-markdown
                   content="[[_computeStepDescription(localize, _step)]]"
-                  allow-svg
                 ></ha-markdown>
               </template>