From d773a3f4934ebd4c8664a0a6562d459d40a543ce Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Fri, 2 May 2025 15:03:28 +0800
Subject: [PATCH] fix donasi deksripsi: - fix text editor di create & edit
 cerita penggalang - tampilan khusus html di detail setatus

---
 .../new/comp_V3_set_html_with_stiker.tsx      |  2 +-
 .../component/comp_table_set_html_stiker.tsx  |  4 +-
 .../admin/forum/sub_menu/table_posting.tsx    |  2 +-
 .../component/card_view/card_section_data.tsx | 12 ++--
 .../colab/component/detail/detail_data.tsx    |  6 +-
 .../detail_main/cerita_penggalang.tsx         | 16 ++++-
 .../create/create_cerita_penggalang.tsx       | 60 +++++++++++++++++--
 .../detail_main/cerita_penggalang/index.tsx   | 11 +++-
 .../donasi/detail/detail_review/index.tsx     | 25 ++++----
 .../edit/edit_cerita_penggalang/index.tsx     | 55 ++++++++++++++++-
 .../detail_component/detail_list_komentar.tsx |  4 +-
 .../detail_component/detail_view.tsx          |  4 +-
 .../forumku_component/forumku_view.tsx        |  4 +-
 .../component/main_component/card_view.tsx    |  4 +-
 14 files changed, 161 insertions(+), 48 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 f78e4a0d..fe164910 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,6 +1,6 @@
 import { MainColor } from "../../color";
 
-export function Comp_V3_SetInnerHTML({
+export function Comp_V3_SetInnerHTMLWithStiker({
   props,
   className,
   color,
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 95994aee..ac191cba 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_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } 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_SetInnerHTML props={data} className={classname} />
+          <Comp_V3_SetInnerHTMLWithStiker 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 d995b9a2..4d028d0f 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_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } 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/colab/component/card_view/card_section_data.tsx b/src/app_modules/colab/component/card_view/card_section_data.tsx
index af12bdec..676545bb 100644
--- a/src/app_modules/colab/component/card_view/card_section_data.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_data.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { Card, Center, Grid, Stack, Text, Title } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { MODEL_COLLABORATION } from "../../model/interface";
-import { useState } from "react";
+import { MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
 import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
-import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { Card, Center, Stack, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MODEL_COLLABORATION } from "../../model/interface";
 
 export default function ComponentColab_CardSectionData({
   colabId,
diff --git a/src/app_modules/colab/component/detail/detail_data.tsx b/src/app_modules/colab/component/detail/detail_data.tsx
index 89a57ce6..e8d9f678 100644
--- a/src/app_modules/colab/component/detail/detail_data.tsx
+++ b/src/app_modules/colab/component/detail/detail_data.tsx
@@ -3,7 +3,7 @@
 import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
 import ComponentColab_AuthorNameOnHeader from "../header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
-import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
 
 export default function ComponentColab_DetailData({
@@ -25,11 +25,11 @@ export default function ComponentColab_DetailData({
     },
     {
       title: "Tujuan Proyek",
-      value: <Comp_V3_SetInnerHTML props={data?.purpose} />,
+      value: <Comp_V3_SetInnerHTMLWithStiker props={data?.purpose} />,
     },
     {
       title: "Keuntungan Proyek",
-      value: <Comp_V3_SetInnerHTML props={data?.benefit} />,
+      value: <Comp_V3_SetInnerHTMLWithStiker props={data?.benefit} />,
     },
   ];
 
diff --git a/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx b/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
index e9ffcb33..6a4c9512 100644
--- a/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
+++ b/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
@@ -3,7 +3,15 @@
 import { useRouter } from "next/navigation";
 import { MODEL_DONASI } from "../../model/interface";
 import { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
-import { Stack, Title, Paper, Group, ActionIcon, Text } from "@mantine/core";
+import {
+  Stack,
+  Title,
+  Paper,
+  Group,
+  ActionIcon,
+  Text,
+  Box,
+} from "@mantine/core";
 import { IconCircleChevronRight } from "@tabler/icons-react";
 import moment from "moment";
 import { useState } from "react";
@@ -12,6 +20,8 @@ import {
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 
 export default function ComponentDonasi_CeritaPenggalangMain({
   donasi,
@@ -63,7 +73,9 @@ export default function ComponentDonasi_CeritaPenggalangMain({
                 )}
               </ActionIcon>
             </Group>
-            <Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
+            <Text lineClamp={4}>
+              {funReplaceHtml({ html: donasi?.CeritaDonasi.cerita })}
+            </Text>
             {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
           </Stack>
         </Paper>
diff --git a/src/app_modules/donasi/create/create_cerita_penggalang.tsx b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
index 845a536c..8eeef095 100644
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -23,7 +23,7 @@ import {
   Image,
   Stack,
   TextInput,
-  Textarea
+  Textarea,
 } from "@mantine/core";
 import { IconPhoto } from "@tabler/icons-react";
 import { useAtom } from "jotai";
@@ -34,6 +34,10 @@ import { WibuRealtime } from "wibu-pkg";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
 import { gs_donasi_hot_menu } from "../global_state";
 import { MODEL_DONASI_TEMPORARY } from "../model/interface";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
@@ -138,11 +142,48 @@ export default function CreateCeritaPenggalangDonasi({
   return (
     <>
       <Stack spacing={50} px={"xl"} pb={"md"}>
-        {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
           <ComponentGlobal_BoxInformation informasi="Cerita Anda adalah kunci untuk menginspirasi kebaikan. Jelaskan dengan jujur dan jelas tujuan penggalangan dana ini agar calon donatur memahami dampak positif yang dapat mereka wujudkan melalui kontribusi mereka." />
 
           <Stack spacing={5}>
+            <Component_V3_Label_TextInput text="Pembukaan cerita" />
+
+            <Component_V3_TextEditor
+              data={data.pembukaan}
+              onSetData={(val) => {
+                setData({
+                  ...data,
+                  pembukaan: val,
+                });
+              }}
+            />
+
+            <ComponentGlobal_InputCountDown
+              lengthInput={funReplaceHtml({ html: data.pembukaan }).length}
+              maxInput={maxInputLength}
+            />
+          </Stack>
+
+          <Stack spacing={5}>
+            <Component_V3_Label_TextInput text="Inti cerita" />
+
+            <Component_V3_TextEditor
+              data={data.cerita}
+              onSetData={(val) => {
+                setData({
+                  ...data,
+                  cerita: val,
+                });
+              }}
+            />
+
+            <ComponentGlobal_InputCountDown
+              lengthInput={funReplaceHtml({ html: data.cerita }).length}
+              maxInput={maxInputLength}
+            />
+          </Stack>
+
+          {/* <Stack spacing={5}>
             <Textarea
               styles={{
                 label: {
@@ -173,9 +214,9 @@ export default function CreateCeritaPenggalangDonasi({
               maxInput={500}
               lengthInput={data.pembukaan.length}
             />
-          </Stack>
+          </Stack> */}
 
-          <Stack spacing={5}>
+          {/* <Stack spacing={5}>
             <Textarea
               styles={{
                 label: {
@@ -206,7 +247,7 @@ export default function CreateCeritaPenggalangDonasi({
               maxInput={1000}
               lengthInput={data.cerita.length}
             />
-          </Stack>
+          </Stack> */}
 
           <Stack spacing={5}>
             <ComponentGlobal_BoxUploadImage>
@@ -289,7 +330,14 @@ export default function CreateCeritaPenggalangDonasi({
           style={{
             transition: "0.5s",
           }}
-          disabled={_.values(data).includes("") || file === null ? true : false}
+          disabled={
+            _.values(data).includes("") ||
+            file === null ||
+            funReplaceHtml({ html: data.pembukaan }).length > maxInputLength ||
+            funReplaceHtml({ html: data.pembukaan }).length === 0 ||
+            funReplaceHtml({ html: data.cerita }).length > maxInputLength ||
+            funReplaceHtml({ html: data.cerita }).length === 0
+          }
           loaderPosition="center"
           loading={isLoading ? true : false}
           w={"100%"}
diff --git a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx
index a7fc4807..1d56d232 100644
--- a/src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx
+++ b/src/app_modules/donasi/detail/detail_main/cerita_penggalang/index.tsx
@@ -2,6 +2,8 @@
 
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_LoadImageLandscape } from "@/app_modules/_global/component";
+import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { MODEL_CERITA_DONASI } from "@/app_modules/donasi/model/interface";
 import { Stack, Text } from "@mantine/core";
 import { useState } from "react";
@@ -31,10 +33,15 @@ export default function CeritaPenggalangDonasi({
           )}
         </Text>
         <Text fw={"bold"}> #HaloOrangBaik</Text>
-        <Text>{data.pembukaan}</Text>
+        {/* <Text>{data.pembukaan}</Text> */}
+
+        <Comp_DangerouslySetInnerHTML props={data?.pembukaan} />
 
         <ComponentGlobal_LoadImageLandscape fileId={data.imageId} />
-        <Text>{data.cerita}</Text>
+
+        <Comp_DangerouslySetInnerHTML props={data?.cerita} />
+
+        {/* <Text>{data.cerita}</Text> */}
       </Stack>
     </>
   );
diff --git a/src/app_modules/donasi/detail/detail_review/index.tsx b/src/app_modules/donasi/detail/detail_review/index.tsx
index 9c936242..444a59b3 100644
--- a/src/app_modules/donasi/detail/detail_review/index.tsx
+++ b/src/app_modules/donasi/detail/detail_review/index.tsx
@@ -41,18 +41,11 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
   const [openModal, setOpenModal] = useState(false);
 
   async function onChangeStatus() {
+    setLoading(true);
     const check = await donasi_checkStatus({ id: donasi.id });
     if (check) {
       const res = await Donasi_funGantiStatus(donasi.id, "3");
       if (res.status === 200) {
-        // const dataNotif = {
-        //   appId: res.data?.id as any,
-        //   status: res.data?.DonasiMaster_Status?.name as any,
-        //   userId: res.data?.authorId as any,
-        //   pesan: res.data?.title as any,
-        //   kategoriApp: "DONASI",
-        //   title: "Membatalkan review",
-        // };
 
         const dataNotifikasi: IRealtimeData = {
           appId: res.data?.id as any,
@@ -80,13 +73,14 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
           });
 
           ComponentGlobal_NotifikasiBerhasil("Berhasil Dibatalkan");
-          setLoading(true);
           router.push(RouterDonasi.status_galang_dana({ id: "3" }));
         }
       } else {
+        setLoading(false);
         ComponentGlobal_NotifikasiPeringatan(res.message);
       }
     } else {
+      setLoading(false);
       ComponentGlobal_NotifikasiPeringatan("Donasi telah direview admin");
     }
   }
@@ -96,10 +90,9 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
         mt={"lg"}
         style={{
           transition: "0.5s",
-          backgroundColor: MainColor.orange
+          backgroundColor: MainColor.orange,
         }}
         radius={"xl"}
-        
         c={MainColor.darkblue}
         onClick={() => setOpenModal(true)}
       >
@@ -111,14 +104,18 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
         opened={openModal}
         close={() => setOpenModal(false)}
         buttonKiri={
-          <Button style={{ backgroundColor: AccentColor.blue }}
-          c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
+          <Button
+            style={{ backgroundColor: AccentColor.blue }}
+            c={AccentColor.white}
+            radius={"xl"}
+            onClick={() => setOpenModal(false)}
+          >
             Batal
           </Button>
         }
         buttonKanan={
           <Button
-          style={{ backgroundColor: AccentColor.yellow }}
+            style={{ backgroundColor: AccentColor.yellow }}
             loaderPosition="center"
             loading={isLoading ? true : false}
             radius={"xl"}
diff --git a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
index b3ea5286..6d1dcfb4 100644
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/index.tsx
@@ -30,6 +30,10 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Donasi_funUpdateCerita } from "../../fun/update/fun_update_cerita_donasi";
 import { MODEL_CERITA_DONASI } from "../../model/interface";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function EditCeritaPenggalangDonasi({
   dataCerita,
@@ -109,6 +113,25 @@ export default function EditCeritaPenggalangDonasi({
     <>
       <Stack px={"sm"}>
         <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Pembukaan cerita" />
+
+          <Component_V3_TextEditor
+            data={data.pembukaan}
+            onSetData={(val) => {
+              setData({
+                ...data,
+                pembukaan: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: data.pembukaan }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -141,7 +164,7 @@ export default function EditCeritaPenggalangDonasi({
             lengthInput={data.pembukaan.length}
             maxInput={500}
           />
-        </Stack>
+        </Stack> */}
 
         <Stack spacing={0}>
           <ComponentGlobal_BoxUploadImage>
@@ -173,6 +196,25 @@ export default function EditCeritaPenggalangDonasi({
         </Stack>
 
         <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Inti cerita" />
+
+          <Component_V3_TextEditor
+            data={data.cerita}
+            onSetData={(val) => {
+              setData({
+                ...data,
+                cerita: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: data.cerita }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -205,7 +247,7 @@ export default function EditCeritaPenggalangDonasi({
             lengthInput={data.cerita.length}
             maxInput={1000}
           />
-        </Stack>
+        </Stack> */}
 
         <Button
           my={"lg"}
@@ -214,7 +256,14 @@ export default function EditCeritaPenggalangDonasi({
           }}
           loaderPosition="center"
           loading={isLoading ? true : false}
-          disabled={data.cerita === "" || data.pembukaan === "" ? true : false}
+          disabled={
+            data.cerita === "" ||
+            data.pembukaan === "" ||
+            funReplaceHtml({ html: data.pembukaan }).length > maxInputLength ||
+            funReplaceHtml({ html: data.pembukaan }).length === 0 ||
+            funReplaceHtml({ html: data.cerita }).length > maxInputLength ||
+            funReplaceHtml({ html: data.cerita }).length === 0
+          }
           w={"100%"}
           radius={"xl"}
           onClick={() => {
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 f84ef7cf..43ac1640 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
@@ -5,7 +5,7 @@ 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 { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_KomentarView({
@@ -71,7 +71,7 @@ export default function ComponentForum_KomentarView({
                   maxHeight={100}
                   showLabel="tampilkan"
                 >
-                  <Comp_V3_SetInnerHTML
+                  <Comp_V3_SetInnerHTMLWithStiker
                     props={data?.komentar}
                     className="chat-content"
                   />
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 5efac61d..dbbcd224 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,7 @@ 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_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentForum_DetailForumView({
@@ -59,7 +59,7 @@ export default function ComponentForum_DetailForumView({
           >
             <Text fz={"sm"} color="white">
               {data?.diskusi ? (
-                <Comp_V3_SetInnerHTML
+                <Comp_V3_SetInnerHTMLWithStiker
                   props={data?.diskusi}
                   // 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 98c71fdc..3135ebe4 100644
--- a/src/app_modules/forum/component/forumku_component/forumku_view.tsx
+++ b/src/app_modules/forum/component/forumku_component/forumku_view.tsx
@@ -11,7 +11,7 @@ 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_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { useShallowEffect } from "@mantine/hooks";
 import { MainColor } from "@/app_modules/_global/color";
 
@@ -69,7 +69,7 @@ export default function ComponentForum_ForumkuMainCardView({
             }}
           >
             <Text c={"white"} fz={"sm"} lineClamp={4}>
-              <Comp_V3_SetInnerHTML
+              <Comp_V3_SetInnerHTMLWithStiker
                 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 8b913d5a..15355e60 100644
--- a/src/app_modules/forum/component/main_component/card_view.tsx
+++ b/src/app_modules/forum/component/main_component/card_view.tsx
@@ -11,7 +11,7 @@ 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_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Comp_V3_SetInnerHTMLWithStiker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
 import { useShallowEffect } from "@mantine/hooks";
 import { MainColor } from "@/app_modules/_global/color";
 
@@ -69,7 +69,7 @@ export default function ComponentForum_BerandaCardView({
             }}
           >
             <Text c={"white"} fz={"sm"} lineClamp={4}>
-              <Comp_V3_SetInnerHTML
+              <Comp_V3_SetInnerHTMLWithStiker
                 props={data?.diskusi}
                 className="chat-content"
                 style={{