From 0e9214f717279d88cc99ae36637256282f11b682 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 26 Nov 2023 12:51:55 +0000
Subject: [PATCH] fix: title and description on community post to support dark
 mode  (#55)

* fix: implement dark mode for tinymce

* bug on first render
---
 .../lib/components/TextEditor/index.svelte    | 29 ++++++++++++++++++-
 .../src/routes/lms/community/ask/+page.svelte | 25 +++++-----------
 .../org/[slug]/community/ask/+page.svelte     | 25 +++++-----------
 3 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/apps/dashboard/src/lib/components/TextEditor/index.svelte b/apps/dashboard/src/lib/components/TextEditor/index.svelte
index 146a4d65..16b6c8d9 100644
--- a/apps/dashboard/src/lib/components/TextEditor/index.svelte
+++ b/apps/dashboard/src/lib/components/TextEditor/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
   import Editor from '@tinymce/tinymce-svelte';
+  import { appStore } from '$lib/utils/store/app';
 
   export let id = '';
   export let value: string;
@@ -12,6 +13,9 @@
 
   const apiKey = PUBLIC_TINYMCE_API_KEY;
 
+  let tinmycEditor: any;
+  let unmount = false
+
   // editor configuration
   let conf = {
     plugins: 'lists',
@@ -27,8 +31,12 @@
     min_height: height,
     max_height: maxHeight,
     placeholder: placeholder,
+    skin: 'oxide-dark',
+    content_css: 'dark',
     init_instance_callback: function (editor: any) {
       editorWindowRef = editor.iframeElement?.contentWindow;
+
+      tinmycEditor = editor;
       editor.on('Change', function () {
         const html = editor.getContent();
         if (onChange) {
@@ -43,9 +51,28 @@
     }
   };
 
+  function handleModeChange(isDark: boolean) {
+    if (isDark) {
+      conf.content_css = 'dark';
+      conf.skin = 'oxide-dark';
+    } else {
+      conf.content_css = 'light';
+      conf.skin = 'oxide';
+    }
+
+    unmount = true;
+    setTimeout(() => {
+      unmount = false;
+    }, 200);
+  }
+
   $: value = !value ? '' : value;
+
+  $: handleModeChange($appStore.isDark);
 </script>
 
 <div>
-  <Editor bind:value {apiKey} {conf} />
+  {#if !unmount}
+  <Editor bind:value {apiKey} bind:conf />
+  {/if}
 </div>
diff --git a/apps/dashboard/src/routes/lms/community/ask/+page.svelte b/apps/dashboard/src/routes/lms/community/ask/+page.svelte
index 9824ab71..5d27b44f 100644
--- a/apps/dashboard/src/routes/lms/community/ask/+page.svelte
+++ b/apps/dashboard/src/routes/lms/community/ask/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import { currentOrg } from '$lib/utils/store/org';
@@ -8,8 +8,11 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import generateSlug from '$lib/utils/functions/generateSlug';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
 
-  let errors = {};
+  let errors: {
+    title?: string;
+  } = {};
   let fields = {
     title: '',
     body: ''
@@ -62,23 +65,11 @@
   </div>
 
   <div class="mb-3 p-2">
-    <input
-      class="title rounded-lg border border-1 border-gray p-2 w-full focus:outline-none"
-      error="false"
-      autocomplete="off"
-      placeholder="Title"
-      aria-label="Title"
-      aria-describedby="title-input-validation"
-      type="text"
-      name="discussion_title"
-      id="discussion_title"
+    <TextField 
       bind:value={fields.title}
+      placeholder="Title"
+      errorMessage={errors.title}
     />
-    {#if errors.title}
-      <p class="dark:text-white text-red-500 text-sm">
-        {errors.title}
-      </p>
-    {/if}
   </div>
 
   <TextEditor
diff --git a/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte b/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte
index e90a5512..9e5dba33 100644
--- a/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte
+++ b/apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
@@ -8,8 +8,11 @@
   import { snackbar } from '$lib/components/Snackbar/store';
   import generateSlug from '$lib/utils/functions/generateSlug';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
 
-  let errors = {};
+  let errors: {
+    title?: string;
+  } = {};
   let fields = {
     title: '',
     body: ''
@@ -64,23 +67,11 @@
   </div>
 
   <div class="mb-3 p-2">
-    <input
-      class="title rounded-lg border border-1 border-gray p-2 w-full dark:text-black focus:outline-none"
-      error="false"
-      autocomplete="off"
-      placeholder="Title"
-      aria-label="Title"
-      aria-describedby="title-input-validation"
-      type="text"
-      name="discussion_title"
-      id="discussion_title"
+    <TextField 
       bind:value={fields.title}
+      placeholder="Title"
+      errorMessage={errors.title}
     />
-    {#if errors.title}
-      <p class="dark:text-white text-red-500 text-sm">
-        {errors.title}
-      </p>
-    {/if}
   </div>
   <div class="px-2">
     <TextEditor