CLASSROOMIO-T-128: TinyMCE Editor Test

CLASSROOMIO-T-128: TinyMCE Integration

Merge branch 'main' into CLASSROOMIO-T-128

CLASSROOMIO-T-128: Resolved Fixes

CLASSROOMIO-T-128: Ts Errors

CLASSROOMIO-T-128: Resolved Feedbacks

CLASSROOMIO-T-128: Replace Quill with tinyMCE

CLASSROOMIO-T-128: Compare Editors

CLASSROOMIO-T-128: TinyMCE Editor Test


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-62
Merged-by: Best Admin <[email protected]>

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import isEmpty from 'lodash/isEmpty';
   import { useCompletion } from 'ai/svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -16,8 +17,6 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import TextField from '$lib/components/Form/TextField.svelte';
-  import TextEditor from '$lib/components/TextEditor/index.svelte';
-  // import ClEditor from '$lib/components/ClEditor/index.svelte';
   import {
     lesson,
     lessons,
@@ -28,8 +27,8 @@
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
   import { course } from '$lib/components/Course/store';
+  import TextEditor from '$lib/components/TextEditor/index.svelte';
   import * as CONSTANTS from './constants';
-  import isEmpty from 'lodash/isEmpty';
 
   export let mode = MODES.view;
   export let prevMode = '';
@@ -41,7 +40,7 @@
   let tabs = CONSTANTS.tabs;
   let currentTab = tabs[0].value;
   let errors = {};
-  let textareaRef = {};
+  let editorWindowRef;
   let aiButtonRef = {};
   let openPopover = false;
   let player = null;
@@ -108,9 +107,10 @@
 
   function updateNoteByCompletion(completion) {
     $lesson.materials.note = completion;
-    if (textareaRef && textareaRef?.children?.[0]) {
-      let qlEditor = textareaRef?.children?.[0];
-      qlEditor.scrollTop = qlEditor.scrollHeight;
+    if (editorWindowRef) {
+      const tmceBody = editorWindowRef?.document?.querySelector('body');
+
+      editorWindowRef?.scrollTo(0, tmceBody?.scrollHeight);
     }
   }
 
@@ -230,13 +230,13 @@
           </PrimaryButton>
         </div>
 
-        <div class="h-[60vh]">
+        <div class="h-[60vh] mt-5">
           <TextEditor
-            bind:container={textareaRef}
-            bind:content={$lesson.materials.note}
-            onChange={(c) => ($lesson.materials.note = c)}
+            bind:editorWindowRef
+            value={$lesson.materials.note}
+            onChange={(html) => ($lesson.materials.note = html)}
+            placeholder="Write your lesson note here"
           />
-          <!-- <ClEditor bind:html={$lesson.materials.note} /> -->
         </div>
       {:else if !isNoteEmpty($lesson.materials?.note)}
         <article class="preview prose prose-sm sm:prose p-2">

src/lib/components/Course/index.svelte

@@ -1,14 +1,13 @@
 <script>
-  import TextEditor from '$lib/components/TextEditor/index.svelte';
   import { marked } from 'marked';
   import RoleBasedSecurity from '../RoleBasedSecurity/index.svelte';
   import PageNav from '../PageNav/index.svelte';
   import MODES from '$lib/utils/constants/mode';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import PageBody from '../PageBody/index.svelte';
-  import EditContent from '../EditContent/index.svelte';
   import { course } from './store';
   import { updateCourse } from '$lib/utils/services/courses';
+  import TextEditor from '$lib/components/TextEditor/index.svelte';
 
   let mode = MODES.view;
   let isDirty = false;
@@ -43,11 +42,13 @@
 <PageBody width="max-w-3xl px-3">
   {#if mode === MODES.edit}
     <TextEditor
-      bind:content={$course.overview}
-      onChange={(c) => {
-        $course.overview = c;
+      value={$course.overview}
+      onChange={(html) => {
         isDirty = true;
+        $course.overview = html;
       }}
+      placeholder="Write your overview here"
+      height="700"
     />
   {:else}
     <article class="preview prose prose-sm sm:prose p-2">