From fd978d4b6995d10d4de2e40187500918d4cbdccb Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Wed, 30 Apr 2025 17:35:31 +0800
Subject: [PATCH] fix set html deksrispi: - fix di bagian tampilan forum diisi
 bg

---
 .../new/comp_V3_set_html_with_stiker.tsx      | 42 ++++++++++--
 .../component/new/comp_set_inner_html.tsx     |  5 +-
 .../component/comp_table_set_html_stiker.tsx  |  4 +-
 .../admin/forum/sub_menu/table_posting.tsx    |  2 +-
 .../detail_component/detail_list_komentar.tsx | 67 +++++++++++--------
 .../detail_component/detail_view.tsx          | 45 +++++++------
 .../forumku_component/forumku_view.tsx        | 12 ++--
 .../component/main_component/card_view.tsx    | 11 ++-
 8 files changed, 122 insertions(+), 66 deletions(-)

diff --git a/src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx b/src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx
index 2baa57bf..f78e4a0d 100644
--- a/src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx
+++ b/src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx
@@ -1,21 +1,53 @@
-export function Comp_V3_SetHtmlWithSticker({
+import { MainColor } from "../../color";
+
+export function Comp_V3_SetInnerHTML({
   props,
   className,
   color,
   style,
 }: {
-  props: string;
+  props: string | undefined;
   className?: string;
   color?: string;
   style?: React.CSSProperties;
 }) {
+  const baseStyle: React.CSSProperties = {
+    color: color ?? MainColor.white,
+  };
+
   return (
     <>
       <div
-        className={className}
-        style={{ ...style, color: color ? color : "white" }}
-        dangerouslySetInnerHTML={{ __html: props }}
+        // className={className}
+        style={{ ...baseStyle, ...style }}
+        dangerouslySetInnerHTML={{ __html: props ?? "" }}
       />
+
+      <style>
+        {`
+      div p {
+        margin: 0 0 8px 0;
+      }
+
+      div ul, div ol {
+        margin: 0 0 8px 20px;
+        padding-left: 16px;
+      }
+
+      div h1, div h2, div h3 {
+        margin: 0 0 12px 0;
+      }
+
+      div li {
+        margin-bottom: 4px;
+      }
+
+      img {
+        max-width: 70px !important;
+        max-height: 70px !important;
+      }
+    `}
+      </style>
     </>
   );
 }
diff --git a/src/app_modules/_global/component/new/comp_set_inner_html.tsx b/src/app_modules/_global/component/new/comp_set_inner_html.tsx
index a04f1b0b..293f4b10 100644
--- a/src/app_modules/_global/component/new/comp_set_inner_html.tsx
+++ b/src/app_modules/_global/component/new/comp_set_inner_html.tsx
@@ -11,8 +11,8 @@ export const Comp_DangerouslySetInnerHTML = ({
 }) => {
   const baseStyle: React.CSSProperties = {
     color: color ?? MainColor.white,
-    wordBreak: "break-word",
-    overflow: "hidden",
+    // wordBreak: "break-word",
+    // overflow: "hidden",
   };
  
   return (
@@ -22,7 +22,6 @@ export const Comp_DangerouslySetInnerHTML = ({
           ...baseStyle,
           ...styleInput,
         }}
-        className="rich-html-content"
         dangerouslySetInnerHTML={{
           __html: props ?? "",
         }}
diff --git a/src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx b/src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx
index e1949c4d..95994aee 100644
--- a/src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx
+++ b/src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx
@@ -1,4 +1,4 @@
-import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { Box, Spoiler } from "@mantine/core";
 
 export const AdminForum_CompTableSetHtmlStiker = ({
@@ -20,7 +20,7 @@ export const AdminForum_CompTableSetHtmlStiker = ({
           hideLabel="sembunyikan"
           showLabel="tampilkan"
         >
-          <Comp_V3_SetHtmlWithSticker props={data} className={classname} />
+          <Comp_V3_SetInnerHTML props={data} className={classname} />
         </Spoiler>
       </Box>
     </>
diff --git a/src/app_modules/admin/forum/sub_menu/table_posting.tsx b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
index 4ea8d2f7..d995b9a2 100644
--- a/src/app_modules/admin/forum/sub_menu/table_posting.tsx
+++ b/src/app_modules/admin/forum/sub_menu/table_posting.tsx
@@ -28,7 +28,7 @@ import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/com
 import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
 import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
 import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
-import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
 
 export default function AdminForum_TablePosting() {
diff --git a/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx b/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
index ed672fe1..f84ef7cf 100644
--- a/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
+++ b/src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import { Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
+import { Box, Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
 import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
 import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { useShallowEffect } from "@mantine/hooks";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_KomentarView({
   data,
@@ -18,7 +20,6 @@ export default function ComponentForum_KomentarView({
   userLoginId: string;
 }) {
   useShallowEffect(() => {
-   
     // Add custom style for stickers inside Quill editor
     const style = document.createElement("style");
     style.textContent = `
@@ -44,34 +45,42 @@ export default function ComponentForum_KomentarView({
   return (
     <>
       <ComponentGlobal_CardStyles>
-        <ComponentForum_KomentarAuthorNameOnHeader
-          tglPublish={data?.createdAt}
-          userId={data?.Author?.id}
-          komentarId={data?.id}
-          isMoreButton={true}
-          setKomentar={setKomentar}
-          postingId={postingId}
-          userLoginId={userLoginId}
-          profile={data.Author.Profile}
-        />
+        <Stack>
+          <ComponentForum_KomentarAuthorNameOnHeader
+            tglPublish={data?.createdAt}
+            userId={data?.Author?.id}
+            komentarId={data?.id}
+            isMoreButton={true}
+            setKomentar={setKomentar}
+            postingId={postingId}
+            userLoginId={userLoginId}
+            profile={data.Author.Profile}
+          />
 
-        <Stack spacing={"xs"} sx={{ zIndex: 0 }} p={"sm"}>
-          <Text fz={"sm"} lineClamp={4} c={"white"}>
-            {data.komentar ? (
-              <Spoiler
-                hideLabel="sembunyikan"
-                maxHeight={100}
-                showLabel="tampilkan"
-              >
-                <div
-                  className="chat-content"
-                  dangerouslySetInnerHTML={{ __html: data.komentar }}
-                />
-              </Spoiler>
-            ) : (
-              ""
-            )}
-          </Text>
+          <Box
+            style={{
+              backgroundColor: MainColor.soft_darkblue,
+              padding: 10,
+              borderRadius: 8,
+            }}
+          >
+            <Text fz={"sm"} lineClamp={4} c={"white"}>
+              {data.komentar ? (
+                <Spoiler
+                  hideLabel="sembunyikan"
+                  maxHeight={100}
+                  showLabel="tampilkan"
+                >
+                  <Comp_V3_SetInnerHTML
+                    props={data?.komentar}
+                    className="chat-content"
+                  />
+                </Spoiler>
+              ) : (
+                ""
+              )}
+            </Text>
+          </Box>
         </Stack>
       </ComponentGlobal_CardStyles>
     </>
diff --git a/src/app_modules/forum/component/detail_component/detail_view.tsx b/src/app_modules/forum/component/detail_component/detail_view.tsx
index 4205a409..5efac61d 100644
--- a/src/app_modules/forum/component/detail_component/detail_view.tsx
+++ b/src/app_modules/forum/component/detail_component/detail_view.tsx
@@ -6,7 +6,8 @@ import { IconMessageCircle, IconMessageCircleX } from "@tabler/icons-react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_DetailHeader from "./detail_header";
 import { useShallowEffect } from "@mantine/hooks";
-import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_DetailForumView({
   data,
@@ -19,21 +20,21 @@ export default function ComponentForum_DetailForumView({
   userLoginId: string;
   onLoadData: (val: any) => void;
 }) {
-  useShallowEffect(() => {
-    // Add custom style for stickers inside Quill editor
-    const style = document.createElement("style");
-    style.textContent = `
-        .chat-content img {
-        max-width: 70px !important;
-        max-height: 70px !important;
-      }
-    `;
-    document.head.appendChild(style);
-    return () => {
-      // Clean up when component unmounts
-      document.head.removeChild(style);
-    };
-  }, []);
+  // useShallowEffect(() => {
+  //   // Add custom style for stickers inside Quill editor
+  //   const style = document.createElement("style");
+  //   style.textContent = `
+  //       .chat-content img {
+  //       max-width: 70px !important;
+  //       max-height: 70px !important;
+  //     }
+  //   `;
+  //   document.head.appendChild(style);
+  //   return () => {
+  //     // Clean up when component unmounts
+  //     document.head.removeChild(style);
+  //   };
+  // }, []);
 
   return (
     <>
@@ -49,12 +50,18 @@ export default function ComponentForum_DetailForumView({
           />
 
           {/* CONTENT */}
-          <Box p={"lg"}>
+          <Box
+            style={{
+              backgroundColor: MainColor.soft_darkblue,
+              padding: 10,
+              borderRadius: 8,
+            }}
+          >
             <Text fz={"sm"} color="white">
               {data?.diskusi ? (
-                <Comp_V3_SetHtmlWithSticker
+                <Comp_V3_SetInnerHTML
                   props={data?.diskusi}
-                  className="chat-content"
+                  // className="chat-content"
                 />
               ) : (
                 ""
diff --git a/src/app_modules/forum/component/forumku_component/forumku_view.tsx b/src/app_modules/forum/component/forumku_component/forumku_view.tsx
index 84e9d8f5..98c71fdc 100644
--- a/src/app_modules/forum/component/forumku_component/forumku_view.tsx
+++ b/src/app_modules/forum/component/forumku_component/forumku_view.tsx
@@ -11,8 +11,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_ForumkuHeaderCard from "./forumku_header";
-import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { useShallowEffect } from "@mantine/hooks";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_ForumkuMainCardView({
   data,
@@ -57,15 +58,18 @@ export default function ComponentForum_ForumkuMainCardView({
           />
 
           <Box
-            sx={{ zIndex: 0 }}
-            p={"lg"}
+            style={{
+              backgroundColor: MainColor.soft_darkblue,
+              padding: 10,
+              borderRadius: 8,
+            }}
             onClick={() => {
               setVisible(true);
               router.push(RouterForum.main_detail + data?.id);
             }}
           >
             <Text c={"white"} fz={"sm"} lineClamp={4}>
-              <Comp_V3_SetHtmlWithSticker
+              <Comp_V3_SetInnerHTML
                 props={data?.diskusi}
                 className="chat-content"
                 style={{
diff --git a/src/app_modules/forum/component/main_component/card_view.tsx b/src/app_modules/forum/component/main_component/card_view.tsx
index 66aeffcc..8b913d5a 100644
--- a/src/app_modules/forum/component/main_component/card_view.tsx
+++ b/src/app_modules/forum/component/main_component/card_view.tsx
@@ -11,8 +11,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { MODEL_FORUM_POSTING } from "../../model/interface";
 import ComponentForum_BerandaHeaderCard from "./card_header";
-import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { useShallowEffect } from "@mantine/hooks";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_BerandaCardView({
   data,
@@ -58,13 +59,17 @@ export default function ComponentForum_BerandaCardView({
 
           <Box
             sx={{ zIndex: 0 }}
-            p={"lg"}
+            style={{
+              backgroundColor: MainColor.soft_darkblue,
+              padding: 10,
+              borderRadius: 8,
+            }}
             onClick={() => {
               setVisible(true), router.push(RouterForum.main_detail + data?.id);
             }}
           >
             <Text c={"white"} fz={"sm"} lineClamp={4}>
-              <Comp_V3_SetHtmlWithSticker
+              <Comp_V3_SetInnerHTML
                 props={data?.diskusi}
                 className="chat-content"
                 style={{