fix stiker on forum

src/app/dev/forum/edit/posting/[id]/page.tsx

@@ -1,10 +1,11 @@
 import { Forum_EditPosting } from "@/app_modules/forum";
+import Forum_V3_EditPosting from "@/app_modules/forum/edit/posting/V3_edit_posting";
 
 export default async function Page() {
-
   return (
     <>
-      <Forum_EditPosting  />
+      {/* <Forum_EditPosting  /> */}
+      <Forum_V3_EditPosting/>
     </>
   );
 }

src/app_modules/_global/lib/stiker.ts

@@ -32,7 +32,7 @@ const dummyStiker = [
   {
     id: 7,
     name: "stiker7",
-    url: "https://play-lh.googleusercontent.com/MHPScwJ_owQJtf26PpiANC83sGj8d_cPz_83R3XhmFN9nJUuoWHJ0Y-GaEsKhXk4sA",
+    url: "https://down-id.img.susercontent.com/file/39fbca466b027a644d8386f265330365",
   },
   {
     id: 8,

src/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker.tsx

@@ -0,0 +1,45 @@
+import { Paper, ScrollArea } from "@mantine/core";
+import React from "react";
+import { MainColor } from "../../color";
+import { ReactQuillDynamic } from "./react_quill_dynamix";
+import {
+    formatsReactQuill,
+    modulesReactQuill,
+} from "./react_quill_format_for_stiker";
+
+const ReactQuill = ReactQuillDynamic;
+
+export function Component_V3_TextEditorWithSticker({
+  quillRef,
+  data,
+  onSetData,
+}: {
+  quillRef: React.MutableRefObject<any>;
+  data: any;
+  onSetData: (value: any) => void;
+}) {
+  return (
+    <>
+      <Paper p="sm" shadow="lg" mah={300} bg={MainColor.white}>
+        <ScrollArea h={280}>
+          <ReactQuill
+            forwardedRef={quillRef}
+            theme="snow"
+            value={data}
+            onChange={(val: any) => {
+              onSetData(val);
+            }}
+            modules={modulesReactQuill}
+            formats={formatsReactQuill}
+            placeholder="Ketik pesan di sini atau tambahkan stiker..."
+            style={{
+              color: "black",
+              backgroundColor: MainColor.white,
+              border: "none",
+            }}
+          />
+        </ScrollArea>
+      </Paper>
+    </>
+  );
+}

src/app_modules/_global/lib/stiker/comp_button_sticker.tsx

@@ -0,0 +1,56 @@
+import { ActionIcon, Box, Image, ScrollArea, SimpleGrid, Tooltip } from "@mantine/core";
+import { IconMoodSmileFilled } from "@tabler/icons-react";
+import { MainColor } from "../../color";
+import { UIGlobal_Modal } from "../../ui";
+import { listStiker } from "../stiker";
+import { insertStickerReactQuill } from "./react_quill_format_for_stiker";
+
+interface Props {
+  open: () => void;
+  close: () => void;
+  opened: boolean;
+  quillRef: any;
+}
+export const Comp_ButtonSticker = ({open, close, opened, quillRef}: Props) => {
+  return (
+    <>
+      <ActionIcon onClick={open} variant="transparent">
+        <IconMoodSmileFilled color={MainColor.white} size={30} />
+      </ActionIcon>
+
+      <UIGlobal_Modal
+        opened={opened}
+        close={close}
+        title="Pilih Stiker"
+        closeButton
+      >
+        <Box mah={`${400}dvh`}>
+          <ScrollArea h={380}>
+            <SimpleGrid cols={3} spacing="md">
+              {listStiker.map((item) => (
+                <Box key={item.id}>
+                  <Tooltip label={item.name}>
+                    <Image
+                      src={item.url}
+                      height={100}
+                      width={100}
+                      alt={item.name}
+                      style={{ cursor: "pointer" }}
+                      onClick={() =>
+                        insertStickerReactQuill({
+                          stickerUrl: item.url,
+                          quillRef: quillRef,
+                          close: close,
+                        })
+                      }
+                    />
+                  </Tooltip>
+                </Box>
+              ))}
+            </SimpleGrid>
+          </ScrollArea>
+        </Box>
+      </UIGlobal_Modal>
+    </>
+  );
+}

src/app_modules/_global/lib/stiker/react_quill_dynamix.tsx

@@ -0,0 +1,20 @@
+import { Text } from "@mantine/core";
+import dynamic from "next/dynamic";
+
+export const ReactQuillDynamic = dynamic(
+  async () => {
+    const { default: RQ } = await import("react-quill");
+    // Tidak perlu import CSS dengan import statement
+    return function comp({ forwardedRef, ...props }: any) {
+      return <RQ ref={forwardedRef} {...props} />;
+    };
+  },
+  {
+    ssr: false,
+    loading: () => (
+      <Text fs={"italic"} c={"gray.8"} fz={12}>
+        Ketik pesan di sini atau tambahkan stiker...
+      </Text>
+    ),
+  }
+);

src/app_modules/_global/lib/stiker/react_quill_format_for_stiker.ts

@@ -0,0 +1,61 @@
+import React from "react";
+
+export {
+    modulesReactQuill,
+    formatsReactQuill,
+    insertStickerReactQuill
+};
+
+const modulesReactQuill = {
+  toolbar: [
+    [{ header: [1, 2, false] }],
+    ["bold", "italic", "underline", "strike", "blockquote"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link"],
+    ["clean"],
+  ],
+};
+
+const formatsReactQuill = [
+  "header",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "blockquote",
+  "list",
+  "bullet",
+  "link",
+  "image",
+];
+
+ const insertStickerReactQuill = ({
+   stickerUrl,
+   quillRef,
+   close,
+ }: {
+   stickerUrl: string;
+   quillRef: React.MutableRefObject<any>;
+   close: () => void;
+ }) => {
+   if (!quillRef.current) return;
+
+   const quill = quillRef.current.getEditor();
+   const range = quill.getSelection(true);
+
+   // Custom image insertion with size
+   // Use custom blot or HTML string with size attributes
+   const stickerHtml = `<img src="${stickerUrl}" alt="sticker" style="width: 40px; height: 40px;">`;
+
+   // Insert HTML at cursor position
+   quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml);
+
+   // Move cursor after inserted sticker
+   quill.setSelection(range.index + 1, 0);
+
+   // Focus back on editor
+   quill.focus();
+
+   // Close sticker modal
+   close();
+ };

src/app_modules/_global/ui/ui_modal.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { Modal, Stack, Title, Group, Button, Box, ActionIcon } from "@mantine/core";
+import {
+  Modal,
+  Stack,
+  Title,
+  Group,
+  Button,
+  Box,
+  ActionIcon,
+} from "@mantine/core";
 import { MainColor, AccentColor } from "../color/color_pallet";
 import React from "react";
 import { IconX } from "@tabler/icons-react";
@@ -12,7 +20,7 @@ export default function UIGlobal_Modal({
   buttonKiri,
   buttonKanan,
   children,
-  closeButton
+  closeButton,
 }: {
   opened: any;
   close: any;
@@ -20,7 +28,7 @@ export default function UIGlobal_Modal({
   buttonKiri?: any;
   buttonKanan?: any;
   children?: React.ReactNode;
-  closeButton?: boolean
+  closeButton?: boolean;
 }) {
   return (
     <>
@@ -41,16 +49,22 @@ export default function UIGlobal_Modal({
         <Stack spacing={"lg"}>
           <Group position="apart">
             <Title order={6} color={MainColor.white} align="center">
-            {title}
+              {title}
-          </Title>
+            </Title>
-          {closeButton ? <ActionIcon onClick={close} variant="transparent">
+            {closeButton ? (
-            <IconX color="white" size={25}/>
+              <ActionIcon onClick={close} variant="transparent">
-          </ActionIcon> : null}
+                <IconX color="white" size={25} />
+              </ActionIcon>
+            ) : null}
           </Group>
-          {children ? children : <Group position="center">
+          {children ? (
-            <Box>{buttonKiri}</Box>
+            children
-            <Box>{buttonKanan}</Box>
+          ) : (
-          </Group>}
+            <Group position="center">
+              <Box>{buttonKiri}</Box>
+              <Box>{buttonKanan}</Box>
+            </Group>
+          )}
         </Stack>
       </Modal>
     </>

src/app_modules/forum/component/button/button_create_posting.tsx

@@ -0,0 +1,65 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import {
+  ComponentGlobal_NotifikasiBerhasil,
+  ComponentGlobal_NotifikasiGagal,
+} from "@/app_modules/_global/notif_global";
+import { Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funCreate } from "../../fun/create/fun_create";
+import mqtt_client from "@/util/mqtt_client";
+
+interface ButtonActionProps {
+  value: string;
+}
+
+export default function Forum_ButtonCreatePosting({
+  value,
+}: ButtonActionProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  async function onCreate() {
+    try {
+      setLoading(true);
+      const create = await forum_funCreate(value);
+      if (create.status === 201) {
+        ComponentGlobal_NotifikasiBerhasil(create.message);
+        router.back();
+
+        mqtt_client.publish(
+          "Forum_create_new",
+          JSON.stringify({ isNewPost: true, count: 1 })
+        );
+      } else {
+        ComponentGlobal_NotifikasiGagal(create.message);
+        setLoading(false);
+      }
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Button
+      style={{ transition: "all 0.5s" }}
+      disabled={
+        value === "<p><br></p>" ||
+        value === "" ||
+        funReplaceHtml({ html: value }).length > maxInputLength
+      }
+      bg={MainColor.yellow}
+      color="yellow"
+      c="black"
+      radius="xl"
+      loading={loading}
+      loaderPosition="center"
+      onClick={onCreate}
+    >
+      Posting
+    </Button>
+  );
+}

src/app_modules/forum/component/button/button_update_posting.tsx

@@ -0,0 +1,64 @@
+import { MainColor } from "@/app_modules/_global/color";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import { ComponentGlobal_NotifikasiBerhasil, ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global";
+import { clientLogger } from "@/util/clientLogger";
+import { Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { forum_funEditPostingById } from "../../fun/edit/fun_edit_posting_by_id";
+
+export default function Forum_ButtonUpdatePosting({
+  postingId,
+  diskusi,
+}: {
+  postingId: string;
+  diskusi: string;
+}) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  async function onUpdate() {
+    try {
+      setLoading(true);
+      const update = await forum_funEditPostingById(postingId, diskusi);
+
+      if (update.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(update.message);
+        router.back();
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(update.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error update forum", error);
+    }
+  }
+
+  return (
+    <>
+      <Button
+        style={{
+          transition: "0.5s",
+        }}
+        disabled={
+          diskusi === "<p><br></p>" ||
+          diskusi === "" ||
+          funReplaceHtml({ html: diskusi }).length > maxInputLength
+        }
+        loaderPosition="center"
+        loading={loading}
+        radius={"xl"}
+        bg={MainColor.yellow}
+        color={"yellow"}
+        c={"black"}
+        onClick={() => {
+          onUpdate();
+        }}
+      >
+        Update
+      </Button>
+    </>
+  );
+}

src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx

@@ -4,28 +4,23 @@ import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
-import { listStiker } from "@/app_modules/_global/lib/stiker";
+import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker";
+import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
-import { UIGlobal_Modal } from "@/app_modules/_global/ui";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
 import { clientLogger } from "@/util/clientLogger";
 import mqtt_client from "@/util/mqtt_client";
 import {
   ActionIcon,
-  Box,
   Button,
   Group,
-  Image,
   Paper,
-  ScrollArea,
-  SimpleGrid,
   Stack,
-  Text,
+  Text
-  Tooltip,
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconMoodSmileFilled, IconX } from "@tabler/icons-react";
+import { IconX } from "@tabler/icons-react";
 import dynamic from "next/dynamic";
 import React, { useState } from "react";
 import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
@@ -158,53 +153,6 @@ export default function Forum_V3_CreateKomentar({
     };
   }, []);
 
-  // Custom toolbar options for ReactQuill
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike", "blockquote"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link"],
-      ["clean"],
-    ],
-  };
-
-  const formats = [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "blockquote",
-    "list",
-    "bullet",
-    "link",
-    "image",
-  ];
-
-  const insertSticker = (stickerUrl: string) => {
-    if (!quillRef.current) return;
-
-    const quill = quillRef.current.getEditor();
-    const range = quill.getSelection(true);
-
-    // Custom image insertion with size
-    // Use custom blot or HTML string with size attributes
-    const stickerHtml = `<img src="${stickerUrl}" alt="sticker" style="width: 40px; height: 40px;">`;
-
-    // Insert HTML at cursor position
-    quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml);
-
-    // Move cursor after inserted sticker
-    quill.setSelection(range.index + 1, 0);
-
-    // Focus back on editor
-    quill.focus();
-
-    // Close sticker modal
-    close();
-  };
-
   //  // Function to send message
   //  const sendMessage = () => {
   //    if (editorContent.trim() !== "") {
@@ -218,7 +166,7 @@ export default function Forum_V3_CreateKomentar({
       <Stack>
         {isComment ? (
           <Stack>
-            <Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white}>
+            <Paper p={5} shadow="lg" bg={MainColor.white}>
               <Group position="right">
                 <ActionIcon
                   onClick={() => setIsComment(false)}
@@ -227,23 +175,14 @@ export default function Forum_V3_CreateKomentar({
                   <IconX size={25} color={MainColor.darkblue} />
                 </ActionIcon>
               </Group>
-              <ScrollArea h={250}>
+
-                {quillLoaded && (
+              {quillLoaded && (
-                  <ReactQuill
+                <Component_V3_TextEditorWithSticker
-                    forwardedRef={quillRef}
+                  quillRef={quillRef}
-                    theme="snow"
+                  data={editorContent}
-                    value={editorContent}
+                  onSetData={setEditorContent}
-                    onChange={setEditorContent}
+                />
-                    modules={modules}
+              )}
-                    formats={formats}
-                    placeholder="Ketik pesan di sini atau tambahkan stiker..."
-                    style={{
-                      marginBottom: 40,
-                      backgroundColor: MainColor.white,
-                    }}
-                  />
-                )}
-              </ScrollArea>
             </Paper>
             <Group position="apart">
               <ComponentGlobal_InputCountDown
@@ -252,9 +191,12 @@ export default function Forum_V3_CreateKomentar({
               />
 
               <Group position="right">
-                <ActionIcon onClick={open} variant="transparent">
+                <Comp_ButtonSticker
-                  <IconMoodSmileFilled color={MainColor.white} size={30} />
+                  open={open}
-                </ActionIcon>
+                  close={close}
+                  opened={opened}
+                  quillRef={quillRef}
+                />
 
                 <Button
                   style={{
@@ -289,34 +231,10 @@ export default function Forum_V3_CreateKomentar({
             bg={MainColor.white}
           >
             <Text fs={"italic"} c={"gray.8"} fz={12}>
-              Ketik pesan di sini atau tambahkan stiker...
+              Buka kolom komentar untuk menambahkan komentar ...
             </Text>
           </Paper>
         )}
-
-        <UIGlobal_Modal
-          opened={opened}
-          close={close}
-          title="Pilih Stiker"
-          closeButton
-        >
-          <SimpleGrid cols={3} spacing="md">
-            {listStiker.map((item) => (
-              <Box key={item.id}>
-                <Tooltip label={item.name}>
-                  <Image
-                    src={item.url}
-                    height={100}
-                    width={100}
-                    alt={item.name}
-                    style={{ cursor: "pointer" }}
-                    onClick={() => insertSticker(item.url)}
-                  />
-                </Tooltip>
-              </Box>
-            ))}
-          </SimpleGrid>
-        </UIGlobal_Modal>
       </Stack>
     </>
   );

src/app_modules/forum/component/detail_component/detail_header.tsx

@@ -278,6 +278,7 @@ function ComponentForum_DetailButtonMore_V2({
             }}
             radius={"xl"}
             onClick={close}
+            c={"black"}
           >
             Batal
           </Button>

src/app_modules/forum/component/forumku_component/forumku_more_button.tsx

@@ -178,6 +178,7 @@ export default function ComponentForum_ForumkuMoreButton({
               border: `1px solid ${AccentColor.yellow}`,
             }}
             radius={"xl"}
+            c="black"
             onClick={close}
           >
             Batal

src/app_modules/forum/component/forumku_component/forumku_view.tsx

@@ -11,6 +11,8 @@ 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 { useShallowEffect } from "@mantine/hooks";
 
 export default function ComponentForum_ForumkuMainCardView({
   data,
@@ -26,6 +28,22 @@ export default function ComponentForum_ForumkuMainCardView({
   const router = useRouter();
   const [visable, setVisible] = useState(false);
 
+    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 (
     <>
       <ComponentGlobal_CardStyles>
@@ -47,7 +65,10 @@ export default function ComponentForum_ForumkuMainCardView({
             }}
           >
             <Text c={"white"} fz={"sm"} lineClamp={4}>
-              <div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
+              <Comp_V3_SetHtmlWithSticker
+                props={data?.diskusi}
+                className="chat-content"
+              />
             </Text>
           </Box>
 

src/app_modules/forum/component/komentar_component/komentar_button_more.tsx

@@ -124,9 +124,10 @@ export default function ComponentForum_KomentarButtonMore({
               border: `1px solid ${AccentColor.yellow}`,
             }}
             radius={"xl"}
+            c="black"
             onClick={close}
           >
-            Batal
+            <Text c="black">Batal </Text>
           </Button>
         </Stack>
       </Drawer>

src/app_modules/forum/component/main_component/card_more_button.tsx

@@ -180,7 +180,7 @@ export default function ComponentForum_BerandaMoreButton({
             radius={"xl"}
             onClick={close}
           >
-            <Text c={"white"}>Batal</Text>
+            <Text c="black">Batal </Text>
           </Button>
         </Stack>
       </Drawer>

src/app_modules/forum/create/V3_create.tsx

@@ -1,53 +1,16 @@
 "use client";
 
-import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import {
-  ActionIcon,
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Stack,
-  Text,
-  Tooltip,
-} from "@mantine/core";
-import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import React, { useState } from "react";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/navigation";
-import { MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
 import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
 import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
-import { listStiker } from "@/app_modules/_global/lib/stiker";
+import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker";
-import {
+import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker";
-  ComponentGlobal_NotifikasiBerhasil,
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-  ComponentGlobal_NotifikasiGagal,
+import { Group, Stack } from "@mantine/core";
-} from "@/app_modules/_global/notif_global";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import { useRouter } from "next/navigation";
-import { IconMoodSmileFilled } from "@tabler/icons-react";
+import React, { useState } from "react";
-import { forum_funCreate } from "../fun/create/fun_create";
+import Forum_ButtonCreatePosting from "../component/button/button_create_posting";
-
-const ReactQuill = dynamic(
-  async () => {
-    const { default: RQ } = await import("react-quill");
-    // Tidak perlu import CSS dengan import statement
-    return function comp({ forwardedRef, ...props }: any) {
-      return <RQ ref={forwardedRef} {...props} />;
-    };
-  },
-  {
-    ssr: false,
-    loading: () => (
-      <Text fs={"italic"} c={"gray.8"} fz={12}>
-        Ketik pesan di sini atau tambahkan stiker...
-      </Text>
-    ),
-  }
-);
 
 export function Forum_V3_Create() {
   const router = useRouter();
@@ -95,76 +58,16 @@ export function Forum_V3_Create() {
     };
   }, []);
 
-  // Custom toolbar options for ReactQuill
-  const modules = {
-    toolbar: [
-      [{ header: [1, 2, false] }],
-      ["bold", "italic", "underline", "strike", "blockquote"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      ["link"],
-      ["clean"],
-    ],
-  };
-
-  const formats = [
-    "header",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "blockquote",
-    "list",
-    "bullet",
-    "link",
-    "image",
-  ];
-
-  const insertSticker = (stickerUrl: string) => {
-    if (!quillRef.current) return;
-
-    const quill = quillRef.current.getEditor();
-    const range = quill.getSelection(true);
-
-    // Custom image insertion with size
-    // Use custom blot or HTML string with size attributes
-    const stickerHtml = `<img src="${stickerUrl}" alt="sticker" style="width: 40px; height: 40px;">`;
-
-    // Insert HTML at cursor position
-    quill.clipboard.dangerouslyPasteHTML(range.index, stickerHtml);
-
-    // Move cursor after inserted sticker
-    quill.setSelection(range.index + 1, 0);
-
-    // Focus back on editor
-    quill.focus();
-
-    // Close sticker modal
-    close();
-  };
-
   return (
     <>
       {isReady ? (
         <Stack>
           {quillLoaded && (
-            <Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white}>
+            <Component_V3_TextEditorWithSticker
-              <ScrollArea h={280}>
+              quillRef={quillRef}
-                <ReactQuill
+              data={editorContent}
-                  forwardedRef={quillRef}
+              onSetData={setEditorContent}
-                  theme="snow"
+            />
-                  value={editorContent}
-                  onChange={setEditorContent}
-                  modules={modules}
-                  formats={formats}
-                  placeholder="Ketik pesan di sini atau tambahkan stiker..."
-                  style={{
-                    color: "black",
-                    backgroundColor: MainColor.white,
-                    border: "none",
-                  }}
-                />
-              </ScrollArea>
-            </Paper>
           )}
 
           <Group position="apart">
@@ -174,37 +77,16 @@ export function Forum_V3_Create() {
             />
 
             <Group position="right">
-              <ActionIcon onClick={open} variant="transparent">
+              <Comp_ButtonSticker
-                <IconMoodSmileFilled color={MainColor.white} size={30} />
+                open={open}
-              </ActionIcon>
+                close={close}
+                opened={opened}
+                quillRef={quillRef}
+              />
 
-              <ButtonAction value={editorContent} />
+              <Forum_ButtonCreatePosting value={editorContent} />
             </Group>
           </Group>
-
-          <UIGlobal_Modal
-            opened={opened}
-            close={close}
-            title="Pilih Stiker"
-            closeButton
-          >
-            <SimpleGrid cols={3} spacing="md">
-              {listStiker.map((item) => (
-                <Box key={item.id}>
-                  <Tooltip label={item.name}>
-                    <Image
-                      src={item.url}
-                      height={100}
-                      width={100}
-                      alt={item.name}
-                      style={{ cursor: "pointer" }}
-                      onClick={() => insertSticker(item.url)}
-                    />
-                  </Tooltip>
-                </Box>
-              ))}
-            </SimpleGrid>
-          </UIGlobal_Modal>
         </Stack>
       ) : (
         <CustomSkeleton height={300} />
@@ -212,54 +94,3 @@ export function Forum_V3_Create() {
     </>
   );
 }
-
-interface ButtonActionProps {
-  value: string;
-}
-
-function ButtonAction({ value }: ButtonActionProps) {
-  const router = useRouter();
-  const [loading, setLoading] = useState<boolean>(false);
-
-  async function onCreate() {
-    try {
-      setLoading(true);
-      const create = await forum_funCreate(value);
-      if (create.status === 201) {
-        ComponentGlobal_NotifikasiBerhasil(create.message);
-        router.back();
-
-        mqtt_client.publish(
-          "Forum_create_new",
-          JSON.stringify({ isNewPost: true, count: 1 })
-        );
-      } else {
-        ComponentGlobal_NotifikasiGagal(create.message);
-      }
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <Button
-      style={{ transition: "all 0.5s" }}
-      disabled={
-        value === "<p><br></p>" ||
-        value === "" ||
-        funReplaceHtml({ html: value }).length > maxInputLength
-      }
-      bg={MainColor.yellow}
-      color="yellow"
-      c="black"
-      radius="xl"
-      loading={loading}
-      loaderPosition="center"
-      onClick={onCreate}
-    >
-      Posting
-    </Button>
-  );
-}

src/app_modules/forum/edit/posting/V3_edit_posting.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
+import { Comp_ButtonSticker } from "@/app_modules/_global/lib/stiker/comp_button_sticker";
+import { Component_V3_TextEditorWithSticker } from "@/app_modules/_global/lib/stiker/comp_V3_text_editor_stiker";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
+import { Group, Stack } from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
+import { apiGetOneForumById } from "../../component/api_fetch_forum";
+import Forum_ButtonUpdatePosting from "../../component/button/button_update_posting";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+
+export default function Forum_V3_EditPosting() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_FORUM_POSTING | null>(null);
+
+  //   New State
+  const [opened, { open, close }] = useDisclosure(false);
+  const quillRef = React.useRef<any>(null);
+  const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
+
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetOneForumById({
+        id: param.id,
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data forum", error);
+    }
+  };
+
+  useShallowEffect(() => {
+    // Add Quill CSS via <link> tag
+    const link = document.createElement("link");
+    link.href = "https://cdn.quilljs.com/1.3.6/quill.snow.css";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+
+    // Add custom style for stickers inside Quill editor
+    const style = document.createElement("style");
+    style.textContent = `
+      .ql-editor img {
+      max-width: 70px !important;
+      max-height: 70px !important;
+    }
+    //   .chat-content img {
+    //   max-width: 70px !important;
+    //   max-height: 70px !important;
+    // }
+  `;
+    document.head.appendChild(style);
+
+    setQuillLoaded(true);
+
+    return () => {
+      // Clean up when component unmounts
+      document.head.removeChild(link);
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  if (!data) return <CustomSkeleton height={200} />;
+
+  return (
+    <>
+      <Stack>
+        {quillLoaded && (
+          <Component_V3_TextEditorWithSticker
+            quillRef={quillRef}
+            data={data.diskusi}
+            onSetData={(val) => {
+              setData({
+                ...data,
+                diskusi: val,
+              });
+            }}
+          />
+        )}
+
+        <Group position="apart">
+          <ComponentGlobal_InputCountDown
+            maxInput={maxInputLength}
+            lengthInput={funReplaceHtml({ html: data.diskusi }).length}
+          />
+
+          <Group position="right">
+            <Comp_ButtonSticker
+              open={open}
+              close={close}
+              opened={opened}
+              quillRef={quillRef}
+            />
+
+            <Forum_ButtonUpdatePosting
+              diskusi={data.diskusi}
+              postingId={param.id}
+            />
+          </Group>
+        </Group>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/forumku/index.tsx

@@ -30,7 +30,7 @@ export default function Forum_Forumku({
   const params = useParams<{ id: string }>();
   const userId = params.id;
   const [dataUser, setDataUser] = useState<MODEL_USER | null>(null);
-  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING[]>([]);
+  const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING[] | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [activePage, setActivePage] = useState(1);
 
@@ -108,11 +108,11 @@ export default function Forum_Forumku({
         ) : (
           <ComponentForum_ViewForumProfile
             auhtorSelectedData={dataUser}
-            totalPosting={dataPosting.length}
+            totalPosting={dataPosting?.length || 0}
           />
         )}
 
-        {!dataPosting.length && isLoading ? (
+        {!dataPosting || isLoading ? (
           <Forum_SkeletonCard />
         ) : _.isEmpty(dataPosting) ? (
           <Forum_ComponentIsDataEmpty />
@@ -125,8 +125,8 @@ export default function Forum_Forumku({
                 <Loader color={"yellow"} />
               </Center>
             )}
-            data={dataPosting}
+            data={dataPosting as MODEL_FORUM_POSTING[]}
-            setData={setDataPosting}
+            setData={setDataPosting as any}
             moreData={handleMoreData}
           >
             {(item) => (
@@ -136,7 +136,7 @@ export default function Forum_Forumku({
                 onLoadData={(val) => {
                   setDataPosting(val);
                 }}
-                allData={dataPosting}
+                allData={dataPosting || []}
               />
             )}
           </ScrollOnly>