html component to do dom purify.

3 years ago · 8c40124e07
parent f524ecec7b
commit 8c40124e07
4 changed files with 22 additions and 41 deletions
--- 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>
--- 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}
--- a/webapp/src/components/Html.svelte
+++ 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}
--- 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"