From 8c40124e072d2b77cf73b9e170a9c014238b3bcc Mon Sep 17 00:00:00 2001
From: Jason Schwarzenberger <jason@credisense.io>
Date: Wed, 2 Dec 2020 14:35:49 +1300
Subject: [PATCH] html component to do dom purify.

---
 webapp/src/components/Article.svelte   | 22 +++-------------------
 webapp/src/components/Comment.svelte   | 12 ++----------
 webapp/src/components/Html.svelte      | 15 +++++++++++++++
 webapp/src/components/StoryList.svelte | 14 ++------------
 4 files changed, 22 insertions(+), 41 deletions(-)
 create mode 100644 webapp/src/components/Html.svelte
diff --git a/webapp/src/components/Article.svelte b/webapp/src/components/Article.svelte
index 69d1409..09915e1 100644
--- a/webapp/src/components/Article.svelte
+++ b/webapp/src/components/Article.svelte
@@ -1,18 +1,10 @@
 <script>
-  import DOMPurify from "dompurify";
-  import { onMount } from "svelte";
   import StoryInfo from "../components/StoryInfo.svelte";
+  import Html from "../components/Html.svelte";
 
   export let story;
 
   let host = new URL(story.url || story.link).hostname.replace(/^www\./, "");
-  let html;
-  let title;
-
-  onMount(() => {
-    html = DOMPurify.sanitize(story.text);
-    title = DOMPurify.sanitize(story.title);
-  });
 </script>
 
 <style>
@@ -70,11 +62,7 @@
 <article class="article">
   <header class="article-header">
     <h1 class="article-title">
-      {#if !title}
-        {story.title}
-      {:else}
-        {@html title}
-      {/if}
+      <Html html={story.title} />
     </h1>
     {#if story.url}
       <div>source: <a class="article-source" href={story.url}>{host}</a></div>
@@ -85,10 +73,6 @@
   </header>
 
   <section class="article-body">
-    {#if !html}
-      {story.content}
-    {:else}
-      {@html html}
-    {/if}
+    <Html html={story.text} />
   </section>
 </article>
diff --git a/webapp/src/components/Comment.svelte b/webapp/src/components/Comment.svelte
index 55c15ef..609ef33 100644
--- a/webapp/src/components/Comment.svelte
+++ b/webapp/src/components/Comment.svelte
@@ -1,8 +1,6 @@
 <script>
-  import DOMPurify from "dompurify";
-  import { onMount } from "svelte";
-
   import Time from "../components/Time.svelte";
+  import Html from "../components/Html.svelte";
 
   export let story;
   export let comment;
@@ -11,12 +9,6 @@
   let author = (comment.author || "").replace(" ", "");
   let id = `${author}-${comment.date}`;
 
-  let html;
-
-  onMount(() => {
-    html = DOMPurify.sanitize(comment.text);
-  });
-
   function toggleComments() {
     showComments = !showComments;
   }
@@ -94,7 +86,7 @@
   </header>
 
   <section class={showComments ? 'comment-text' : 'comment-text is-collapsed'}>
-    {@html html}
+    <Html html={comment.text} />
   </section>
 
   {#if !showComments}
diff --git a/webapp/src/components/Html.svelte b/webapp/src/components/Html.svelte
new file mode 100644
index 0000000..7b37d62
--- /dev/null
+++ b/webapp/src/components/Html.svelte
@@ -0,0 +1,15 @@
+<script>
+  import DOMPurify from "dompurify";
+  import { onMount } from "svelte";
+
+  export let html;
+  let purify;
+
+  onMount(() => {
+    purify = (html) => DOMPurify.sanitize(html);
+  });
+</script>
+
+{#if purify}
+  {@html html}
+{:else}{html}{/if}
diff --git a/webapp/src/components/StoryList.svelte b/webapp/src/components/StoryList.svelte
index ec42f8e..b4ed3fd 100644
--- a/webapp/src/components/StoryList.svelte
+++ b/webapp/src/components/StoryList.svelte
@@ -1,16 +1,10 @@
 <script>
-  import DOMPurify from "dompurify";
-  import { onMount } from "svelte";
   import { getLogoUrl } from "../utils/logos.js";
   import StoryInfo from "../components/StoryInfo.svelte";
+  import Html from "../components/Html.svelte";
   export let stories;
 
   const host = (url) => new URL(url).hostname.replace(/^www\./, "");
-  let purify;
-
-  onMount(() => {
-    purify = (html) => DOMPurify.sanitize(html);
-  });
 </script>
 
 <style>
@@ -49,11 +43,7 @@
         class="story-icon"
         style="height: 1rem; width: 1rem;" />
       <a class="story-title" rel="prefetch" href="/{story.id}">
-        {#if !purify}
-          {story.title}
-        {:else}
-          {@html purify(story.title)}
-        {/if}
+        <Html html={story.title} />
       </a>
       <a
         class="story-source"
