From de87dc5191d4dfd45d99cc06f773f056ac429f00 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 24 Sep 2023 12:24:28 +0100
Subject: [PATCH] Proper html formatting

---
 .../components/AI/AIButton/CustomPromptBtn.svelte    |  5 +++--
 src/lib/components/Course/index.svelte               |  6 ++----
 src/lib/components/CourseLandingPage/index.svelte    | 12 +++++++-----
 src/lib/components/HTMLRender/HTMLRender.svelte      | 10 ++++++++++
 4 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/HTMLRender/HTMLRender.svelte

diff --git a/src/lib/components/AI/AIButton/CustomPromptBtn.svelte b/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
index bebf8b62..28ff9178 100644
--- a/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
+++ b/src/lib/components/AI/AIButton/CustomPromptBtn.svelte
@@ -5,6 +5,7 @@
   import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { Loading } from 'carbon-components-svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   export let className = '';
   export let handleInsert = (v: string) => {};
@@ -66,10 +67,10 @@
           <div class="h-[200px]">
             <div
               bind:this={textRef}
-              class="h-[82%] bg-white dark:text-black p-2 overflow-y-auto text-sm text-start w-full my-1"
+              class="h-[82%] bg-white dark:bg-neutral-700 dark:text-black p-2 overflow-y-auto text-sm text-start w-full my-1"
             >
               {#if isHTML}
-                {@html plainText}
+                <HtmlRender content={plainText} />
               {:else}
                 <p class="font-normal">
                   {plainText}
diff --git a/src/lib/components/Course/index.svelte b/src/lib/components/Course/index.svelte
index e88dd297..bd0f9bcc 100644
--- a/src/lib/components/Course/index.svelte
+++ b/src/lib/components/Course/index.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import RoleBasedSecurity from '../RoleBasedSecurity/index.svelte';
   import PageNav from '../PageNav/index.svelte';
   import MODES from '$lib/utils/constants/mode';
@@ -8,6 +7,7 @@
   import { course } from './store';
   import { updateCourse } from '$lib/utils/services/courses';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   let mode = MODES.view;
   let isDirty = false;
@@ -51,8 +51,6 @@
       height="700"
     />
   {:else}
-    <article class="preview prose prose-sm sm:prose p-2">
-      {@html marked($course.overview || '')}
-    </article>
+    <HtmlRender className="p-2" content={$course.overview || ''} />
   {/if}
 </PageBody>
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index aee6866e..4237c78d 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -22,6 +22,7 @@
   import Modal from '../Modal/index.svelte';
   import { reviewsModalStore } from './store';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
 
   dayjs.extend(relativeTime);
 
@@ -185,23 +186,24 @@
         <section id="requirement" class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">Requirement</h3>
           <ul class="list font-light">
-            {@html get(courseData, 'metadata.requirements', '')}
+            <HtmlRender content={get(courseData, 'metadata.requirements', '')} />
           </ul>
         </section>
 
         <!-- Sections - Course Description -->
         <section id="description" class="border-b border-gray-300 mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
-          <p class="dark:text-white text-sm font-light">
-            {@html get(courseData, 'metadata.description', '')}
-          </p>
+          <HtmlRender
+            className="dark:text-white text-sm font-light"
+            content={get(courseData, 'metadata.description', '')}
+          />
         </section>
 
         <!-- Sections - Goal -->
         <section id="goals" class="mt-8 pb-10">
           <h3 class="text-2xl font-bold mt-0 mb-3">What you'll learn</h3>
           <ul class="list font-light">
-            {@html get(courseData, 'metadata.goals', '')}
+            <HtmlRender content={get(courseData, 'metadata.goals', '')} />
           </ul>
         </section>
 
diff --git a/src/lib/components/HTMLRender/HTMLRender.svelte b/src/lib/components/HTMLRender/HTMLRender.svelte
new file mode 100644
index 00000000..65abddce
--- /dev/null
+++ b/src/lib/components/HTMLRender/HTMLRender.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { marked } from 'marked';
+
+  export let content = '';
+  export let className = '';
+</script>
+
+<article class="preview prose prose-sm sm:prose {className}">
+  {@html marked(content, { breaks: true, gfm: true })}
+</article>