From 8f420acd0e8eae4e5d6f1edd76b229b603396ece Mon Sep 17 00:00:00 2001
From: Filip Niklas <awdeegrays@gmail.com>
Date: Wed, 29 Jan 2025 23:55:49 +0100
Subject: [PATCH] fix: text encoding and decoding, add top to mdx editor
 toolbard

---
 app/globals.css                                |  4 ++++
 features/editor/components/EditorInternals.tsx |  2 +-
 lib/database/dbFuncs.ts                        | 17 +++++++++--------
 lib/utils/textEncoding.ts                      | 11 +++++++++++
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 lib/utils/textEncoding.ts

diff --git a/app/globals.css b/app/globals.css
index 976331df..2138269a 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -69,6 +69,10 @@ blockquote {
     @apply visible z-50;
 }
 
+.full-demo-mdxeditor [role="toolbar"] {
+    top: 105px;
+}
+
 /* Overrides for MDX Editor classes*/
 ._nestedEditor_uazmk_963 {
     @apply dark:bg-gray-900;
diff --git a/features/editor/components/EditorInternals.tsx b/features/editor/components/EditorInternals.tsx
index 2eff9017..92bd75ce 100644
--- a/features/editor/components/EditorInternals.tsx
+++ b/features/editor/components/EditorInternals.tsx
@@ -118,7 +118,7 @@ export default function EditorInternals({ material, title }: EditorProps) {
             </Heading>
             <EditorContext.Provider value={isLoading}>
                 <MDXEditor
-                    className="border-2 border-gray-200 rounded-lg"
+                    className="border-2 border-gray-200 rounded-lg full-demo-mdxeditor"
                     ref={editorRef}
                     markdown={material.mdx}
                     contentEditableClassName="prose dark:prose-invert max-w-none"
diff --git a/lib/database/dbFuncs.ts b/lib/database/dbFuncs.ts
index afb4fa15..68c99bf4 100644
--- a/lib/database/dbFuncs.ts
+++ b/lib/database/dbFuncs.ts
@@ -15,6 +15,7 @@ import {
     cache,
     CACHE_REVALIDATION_INTERVAL_COURSES_AND_LESSONS,
 } from "lib/server/cache";
+import { Text } from "lib/utils/textEncoding";
 
 /**
  * Calls the database to retrieve all courses.
@@ -268,7 +269,7 @@ export const dbGetLessonAndRelationsBySlug = async (slug: string) => {
 };
 /**
  * Calls the database to retrieve mdx field by id of the model as identifier.
- * Converts binary content of found record to string so that it can pass the tRPC network boundary
+ * Converts binary content of found record to string
  * and/or be passed down to Client Components from Server Components.
  * @supports LessonContent | LessonTranscript | CourseDetails
  * TODO fixme! Auth guard this
@@ -314,7 +315,7 @@ export const dbGetMdxByModelId = async (id: string) => {
             /**
              * Resolve third attempt if query successful.
              */
-            const courseDetailsContentAsString = courseDetails.mdx.toString();
+            const courseDetailsContentAsString = Text.Decode(courseDetails.mdx);
             const newResult = {
                 ...courseDetails,
                 mdx: courseDetailsContentAsString,
@@ -324,7 +325,7 @@ export const dbGetMdxByModelId = async (id: string) => {
         /**
          * Resolve second attempt if query successful.
          */
-        const transcriptAsString = lessonTranscript.mdx.toString();
+        const transcriptAsString = Text.Decode(lessonTranscript.mdx);
         const newResult = {
             ...lessonTranscript,
             mdx: transcriptAsString,
@@ -334,7 +335,7 @@ export const dbGetMdxByModelId = async (id: string) => {
     /**
      * Resolve first attempt if query successful.
      */
-    const contentAsString = lessonContent.mdx.toString();
+    const contentAsString = Text.Decode(lessonContent.mdx);
     const newResult = {
         ...lessonContent,
         mdx: contentAsString,
@@ -717,7 +718,7 @@ export const dbUpsertLessonContentById = async ({
         const validId = id ? z.string().parse(id) : "x"; // Prisma needs id of some value
         const validLessonId = z.string().parse(lessonId);
 
-        const contentAsBuffer = Uint8Array.from(content);
+        const contentAsBuffer = Text.Encode(content);
 
         const result = await prisma.lessonContent.upsert({
             where: {
@@ -755,7 +756,7 @@ export const dbUpsertLessonTranscriptById = async ({
         const validId = id ? z.string().parse(id) : "x"; // Prisma needs id of some value
         const validLessonId = z.string().parse(lessonId);
 
-        const contentAsBuffer = Uint8Array.from(transcript);
+        const contentAsBuffer = Text.Encode(transcript);
 
         const result = await prisma.lessonTranscript.upsert({
             where: {
@@ -792,7 +793,7 @@ export const dbUpsertCourseDetailsById = async ({
         const validId = id ? z.string().parse(id) : "x"; // Prisma needs id of some value
         const validCourseId = z.string().parse(courseId);
 
-        const contentAsBuffer = Uint8Array.from(content);
+        const contentAsBuffer = Text.Encode(content);
 
         const result = await prisma.courseDetails.upsert({
             where: {
@@ -827,7 +828,7 @@ export const dbUpdateMdxByModelId = async ({
         const validId = z.string().parse(id);
         const validContent = z.string().parse(content);
 
-        const contentAsBuffer = Buffer.from(validContent, "utf-8");
+        const contentAsBuffer = Text.Encode(validContent);
         /**
          * Prisma does not allow us to traverse two tables at once, so we made SQL executions directly with $executeRaw where
          * prisma returns the number of rows affected by the query instead of an error in the usual prisma.update().
diff --git a/lib/utils/textEncoding.ts b/lib/utils/textEncoding.ts
new file mode 100644
index 00000000..36b00a8c
--- /dev/null
+++ b/lib/utils/textEncoding.ts
@@ -0,0 +1,11 @@
+export class Text {
+    public static Encode(input: string): Uint8Array<ArrayBufferLike> {
+        const encoder = new TextEncoder();
+        return encoder.encode(input);
+    }
+
+    public static Decode(input: Uint8Array<ArrayBufferLike>) {
+        const decoder = new TextDecoder();
+        return decoder.decode(input);
+    }
+}