From 082ee41058118a714cfbfebdc9b75f1554893415 Mon Sep 17 00:00:00 2001
From: hanif salafi <hanifsalafi456@gmail.com>
Date: Tue, 21 Jan 2025 00:04:10 +0700
Subject: [PATCH] feat: ckeditor in article form

---
 .../form/article/create-article-form.tsx      | 25 ++++++-----
 components/form/article/edit-article-form.tsx | 41 +++++++++++++------
 styles/globals.css                            |  4 ++
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index a51a030..a70e8c1 100644
--- a/components/form/article/create-article-form.tsx
+++ b/components/form/article/create-article-form.tsx
@@ -29,12 +29,12 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { getCategoryById } from "@/service/master-categories";
 
-// const CustomEditor = dynamic(
-//   () => {
-//     return import("@/components/editor/custom-editor");
-//   },
-//   { ssr: false }
-// );
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 interface FileWithPreview extends File {
   preview: string;
@@ -405,12 +405,17 @@ export default function CreateArticleForm() {
           name="description"
           render={({ field: { onChange, value } }) => (
             // <CustomEditor onChange={onChange} initialData={value} />
-            <JoditEditor
-              ref={editor}
-              value={value}
+            // <JoditEditor
+            //   ref={editor}
+            //   value={value}
+            //   onChange={onChange}
+            //   className="dark:text-black"
+            // />
+            <CustomEditor
               onChange={onChange}
-              className="dark:text-black"
+              initialData={value}
             />
+
           )}
         />
         {errors?.description && (
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 10a741a..81ac866 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -33,12 +33,18 @@ import GetSeoScore from "./get-seo-score-form";
 import Link from "next/link";
 import { stringify } from "querystring";
 
-// const CustomEditor = dynamic(
-//   () => {
-//     return import("@/components/editor/custom-editor");
-//   },
-//   { ssr: false }
-// );
+const ViewEditor = dynamic(
+  () => {
+    return import("@/components/editor/view-editor");
+  },
+  { ssr: false }
+);
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 interface FileWithPreview extends File {
   preview: string;
@@ -413,13 +419,22 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
           name="description"
           render={({ field: { onChange, value } }) => (
             // <CustomEditor onChange={onChange} initialData={value} />
-            <JoditEditor
-              ref={editor}
-              value={value}
-              onChange={onChange}
-              config={{ readonly: isDetail }}
-              className="dark:text-black"
-            />
+            // <JoditEditor
+            //   ref={editor}
+            //   value={value}
+            //   onChange={onChange}
+            //   config={{ readonly: isDetail }}
+            //   className="dark:text-black"
+            // />
+            isDetail ?
+              <ViewEditor 
+                initialData={value}
+              />
+            : 
+              <CustomEditor 
+                onChange={onChange}
+                initialData={value}
+              />
           )}
         />
         {errors?.description && (
diff --git a/styles/globals.css b/styles/globals.css
index a8bc2db..315d878 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -28,6 +28,10 @@
   display: none;
 }
 
+.ck-editor__editable_inline {
+  min-height: 200px;
+}
+
 .sidebar-scrollbar {
   --scroll-shadow-size: 40px;
 }