CLASSROOMIO-T-116: Replace Markdown with WYSIWIG

CLASSROOMIO-T-116: Resolved Feedbacks

CLASSROOMIO-T-116: Replace Markdown with WYSIWIG


Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-52
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/TextEditor/index.svelte

@@ -7,6 +7,7 @@
   export let docId;
   export let placeholder = 'Type something...';
   export let errorMessage;
+  export let container;
 
   const settings = {
     modules: {
@@ -16,19 +17,18 @@
           toolbar: [
             [{ header: [1, 2, 3, false] }],
             ['bold', 'italic', 'underline', 'strike'],
-            ['link', 'code-block'],
-          ],
+            ['link', 'code-block']
+          ]
         },
         placeholder: 'Type something...',
-        theme: 'snow',
-      },
+        theme: 'snow'
+      }
     },
     theme: 'snow',
-    placeholder,
+    placeholder
   };
 
   let quill = null;
-  let container = null;
 
   function resetContent(docId) {
     if (quill && quill.setText) {
@@ -40,6 +40,14 @@
     }
   }
 
+  function setQuillHTML(html) {
+    console.log('outside if');
+    if (quill) {
+      console.log('inside if', html);
+      quill.setHTML(html);
+    }
+  }
+
   onMount(async () => {
     const { default: Quill } = await import('quill');
 
@@ -70,6 +78,8 @@
     }
   }
 
+  $: setQuillHTML(content);
+
   $: resetContent(docId);
 </script>
 
@@ -94,4 +104,16 @@
   :global(.dark .ql-editor.ql-blank::before) {
     color: #fff;
   }
+
+  :global(.ql-editor) {
+    white-space: normal !important;
+  }
+
+  :global(.ql-editor p),
+  :global(.ql-editor h1),
+  :global(.ql-editor h2),
+  :global(.ql-editor h3),
+  :global(.ql-editor h4) {
+    line-height: 2.2;
+  }
 </style>