feat: ckeditor in article form

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 && (

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 && (

styles/globals.css

@@ -28,6 +28,10 @@
   display: none;
 }
 
+.ck-editor__editable_inline {
+  min-height: 200px;
+}
+
 .sidebar-scrollbar {
   --scroll-shadow-size: 40px;
 }