percobaan kirim stiker di forum

bun.lock

@@ -21,11 +21,12 @@
         "@react-pdf/renderer": "^3.4.4",
         "@tabler/icons-react": "^3.31.0",
         "@tiptap/extension-highlight": "^2.2.3",
+        "@tiptap/extension-image": "^2.11.7",
         "@tiptap/extension-link": "^2.2.3",
         "@tiptap/extension-subscript": "^2.2.3",
         "@tiptap/extension-superscript": "^2.2.3",
         "@tiptap/extension-text-align": "^2.2.3",
-        "@tiptap/extension-underline": "^2.2.3",
+        "@tiptap/extension-underline": "^2.11.7",
         "@tiptap/pm": "^2.2.3",
         "@tiptap/react": "^2.2.3",
         "@tiptap/starter-kit": "^2.2.3",
@@ -955,6 +956,8 @@
 
     "@tiptap/extension-horizontal-rule": ["@tiptap/extension-horizontal-rule@2.11.5", "", { "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-3up2r1Du8/5/4ZYzTC0DjTwhgPI3dn8jhOCLu73m5F3OGvK/9whcXoeWoX103hYMnGDxBlfOje71yQuN35FL4A=="],
 
+    "@tiptap/extension-image": ["@tiptap/extension-image@2.11.7", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-YvCmTDB7Oo+A56tR4S/gcNaYpqU4DDlSQcRp5IQvmQV5EekSe0lnEazGDoqOCwsit9qQhj4MPQJhKrnaWrJUrg=="],
+
     "@tiptap/extension-italic": ["@tiptap/extension-italic@2.11.5", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-9VGfb2/LfPhQ6TjzDwuYLRvw0A6VGbaIp3F+5Mql8XVdTBHb2+rhELbyhNGiGVR78CaB/EiKb6dO9xu/tBWSYA=="],
 
     "@tiptap/extension-link": ["@tiptap/extension-link@2.11.5", "", { "dependencies": { "linkifyjs": "^4.2.0" }, "peerDependencies": { "@tiptap/core": "^2.7.0", "@tiptap/pm": "^2.7.0" } }, "sha512-4Iu/aPzevbYpe50xDI0ZkqRa6nkZ9eF270Ue2qaF3Ab47nehj+9Jl78XXzo8+LTyFMnrETI73TAs1aC/IGySeQ=="],
@@ -977,7 +980,7 @@
 
     "@tiptap/extension-text-style": ["@tiptap/extension-text-style@2.11.5", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-YUmYl0gILSd/u/ZkOmNxjNXVw+mu8fpC2f8G4I4tLODm0zCx09j9DDEJXSrM5XX72nxJQqtSQsCpNKnL0hfeEQ=="],
 
-    "@tiptap/extension-underline": ["@tiptap/extension-underline@2.11.5", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-YpWHXNIkSoRSuzT2cvgKpyJ2tTz3LzqkTM64uC+uTJ8cUkvXIWUWejJR42q8ma/mTlQe4lHff4IQ0Sf58Digtw=="],
+    "@tiptap/extension-underline": ["@tiptap/extension-underline@2.11.7", "", { "peerDependencies": { "@tiptap/core": "^2.7.0" } }, "sha512-NtoQw6PGijOAtXC6G+0Aq0/Z5wwEjPhNHs8nsjXogfWIgaj/aI4/zfBnA06eI3WT+emMYQTl0fTc4CUPnLVU8g=="],
 
     "@tiptap/pm": ["@tiptap/pm@2.11.5", "", { "dependencies": { "prosemirror-changeset": "^2.2.1", "prosemirror-collab": "^1.3.1", "prosemirror-commands": "^1.6.2", "prosemirror-dropcursor": "^1.8.1", "prosemirror-gapcursor": "^1.3.2", "prosemirror-history": "^1.4.1", "prosemirror-inputrules": "^1.4.0", "prosemirror-keymap": "^1.2.2", "prosemirror-markdown": "^1.13.1", "prosemirror-menu": "^1.2.4", "prosemirror-model": "^1.23.0", "prosemirror-schema-basic": "^1.2.3", "prosemirror-schema-list": "^1.4.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.3", "prosemirror-trailing-node": "^3.0.0", "prosemirror-transform": "^1.10.2", "prosemirror-view": "^1.37.0" } }, "sha512-z9JFtqc5ZOsdQLd9vRnXfTCQ8v5ADAfRt9Nm7SqP6FUHII8E1hs38ACzf5xursmth/VonJYb5+73Pqxk1hGIPw=="],
 

package.json

@@ -32,11 +32,12 @@
     "@react-pdf/renderer": "^3.4.4",
     "@tabler/icons-react": "^3.31.0",
     "@tiptap/extension-highlight": "^2.2.3",
+    "@tiptap/extension-image": "^2.11.7",
     "@tiptap/extension-link": "^2.2.3",
     "@tiptap/extension-subscript": "^2.2.3",
     "@tiptap/extension-superscript": "^2.2.3",
     "@tiptap/extension-text-align": "^2.2.3",
-    "@tiptap/extension-underline": "^2.2.3",
+    "@tiptap/extension-underline": "^2.11.7",
     "@tiptap/pm": "^2.2.3",
     "@tiptap/react": "^2.2.3",
     "@tiptap/starter-kit": "^2.2.3",

src/app/dev/forum/detail/main-detail/[id]/page.tsx

@@ -3,10 +3,10 @@ import Forum_MainDetail from "@/app_modules/forum/detail/main_detail";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
-
   return (
     <>
       <Forum_MainDetail userLoginId={userLoginId as string} />
+      {/* <Forum_V3_MainDetail userLoginId={userLoginId as string} /> */}
     </>
   );
 }

src/app/zCoba/text_editor/page.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Group,
+  Image as MantineImage,
+  Stack,
+  Text,
+} from "@mantine/core";
+import Underline from "@tiptap/extension-underline";
+import { MainColor } from "@/app_modules/_global/color";
+
+const listStiker = [
+  {
+    id: 2,
+    name: "stiker2",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQN9AKmsBY4yqdn3GueJJEVPJbfmf853gDL4cN8uc9eqsCTiJ1fzhcpywzVP68NCJEA5NQ&usqp=CAU",
+  },
+  {
+    id: 3,
+    name: "stiker3",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2lkV3ZiQ8m-OELSui2JGVy80vnh1cyRUV7NrgFNluPVVs2HUAyCHwCMAKGe2s5jk2sn8&usqp=CAU",
+  },
+  {
+    id: 4,
+    name: "stiker4",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHy9ZdsPc6dHgVTl5yIGpRJ-KtpTIsXA2_kbfO1Oc-pv_f7CNKGxhO56RjKujE3xCyb9k&usqp=CAU",
+  },
+];
+
+export default function RichTextWithStickers() {
+  const [chat, setChat] = useState<string[]>([]);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit, // Sudah include Bold, Italic, dll
+      Underline, // Tambahan untuk underline
+      Image,
+    ],
+    content: "",
+  });
+
+  const insertSticker = (url: string) => {
+    editor?.chain().focus().setImage({ src: url }).run();
+  };
+
+  return (
+    <Stack p="md">
+      <Text fw={700}>Tiptap Editor dengan Stiker Inline</Text>
+
+      <Box
+        style={{
+          border: "1px solid #ccc",
+          borderRadius: 4,
+          padding: 8,
+          minHeight: 150,
+          backgroundColor: MainColor.white,
+        }}
+      >
+        <Group spacing="xs" mb="sm">
+          <Button
+            variant="default"
+            onClick={() => editor?.chain().focus().toggleBold().run()}
+          >
+            B
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => editor?.chain().focus().toggleItalic().run()}
+          >
+            I
+          </Button>
+          <Button
+            variant="default"
+            onClick={() => editor?.chain().focus().toggleUnderline().run()}
+          >
+            U
+          </Button>
+        </Group>
+        <EditorContent
+          editor={editor}
+          style={{
+            backgroundColor: "white",
+          }}
+        />
+      </Box>
+
+      <Button
+        mt="sm"
+        onClick={() => {
+          if (editor) {
+            setChat((prev) => [...prev, editor.getHTML()]);
+            editor.commands.clearContent();
+          }
+        }}
+      >
+        Kirim
+      </Button>
+
+      <Group>
+        {listStiker.map((item) => (
+          <Box
+            key={item.id}
+            component="button"
+            onClick={() => insertSticker(item.url)}
+            style={{
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+            }}
+          >
+            <MantineImage
+              w={30}
+              h={30}
+              src={item.url}
+              alt={item.name}
+              styles={{
+                image: {
+                  width: 30,
+                  height: 30,
+                },
+              }}
+            />
+          </Box>
+        ))}
+      </Group>
+
+      {/* <Stack mt="lg" p="md" bg="gray.1">
+        {chat.map((item, index) => (
+          <Box key={index} dangerouslySetInnerHTML={{ __html: item }} />
+        ))}
+      </Stack> */}
+    </Stack>
+  );
+}

src/app/zCoba/text_editor2/page.tsx

@@ -0,0 +1,226 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+  Modal,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import dynamic from "next/dynamic";
+import { MainColor } from "@/app_modules/_global/color";
+
+// Dynamic import ReactQuill dengan SSR disabled
+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: () => <p>Loading Editor...</p> }
+);
+
+const listStiker = [
+  {
+    id: 1,
+    name: "stiker2",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQN9AKmsBY4yqdn3GueJJEVPJbfmf853gDL4cN8uc9eqsCTiJ1fzhcpywzVP68NCJEA5NQ&usqp=CAU",
+  },
+  {
+    id: 2,
+    name: "stiker3",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2lkV3ZiQ8m-OELSui2JGVy80vnh1cyRUV7NrgFNluPVVs2HUAyCHwCMAKGe2s5jk2sn8&usqp=CAU",
+  },
+  {
+    id: 3,
+    name: "stiker4",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHy9ZdsPc6dHgVTl5yIGpRJ-KtpTIsXA2_kbfO1Oc-pv_f7CNKGxhO56RjKujE3xCyb9k&usqp=CAU",
+  },
+];
+
+type ChatItem = {
+  content: string; // HTML content including text and stickers
+};
+
+export default function Page() {
+  const [editorContent, setEditorContent] = useState("");
+  const [chat, setChat] = useState<ChatItem[]>([]);
+  const [opened, { open, close }] = useDisclosure(false);
+  const quillRef = React.useRef<any>(null);
+  const [quillLoaded, setQuillLoaded] = useState(false);
+
+  // Load CSS on client-side only
+  useEffect(() => {
+    // 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: 40px !important;
+      max-height: 40px !important;
+    }
+      .chat-content img {
+      max-width: 40px !important;
+      max-height: 40px !important;
+    }
+  `;
+    document.head.appendChild(style);
+
+    setQuillLoaded(true);
+
+    return () => {
+      // Clean up when component unmounts
+      document.head.removeChild(link);
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  // Custom toolbar options for ReactQuill
+  const modules = {
+    toolbar: [
+      [{ header: [1, 2, false] }],
+      ["bold", "italic", "underline", "strike", "blockquote"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      ["link", "image"],
+      ["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() !== "") {
+      setChat((prev) => [...prev, { content: editorContent }]);
+      setEditorContent(""); // Clear after sending
+    }
+  };
+
+  return (
+    <Stack p={"md"} spacing="md">
+      <SimpleGrid cols={2}>
+        <Stack bg={"gray.1"} h={560} p="md">
+          <Stack>
+            <ScrollArea>
+              {chat.map((item, index) => (
+                <Box key={index} mb="md">
+                  <div
+                    className="chat-content"
+                    dangerouslySetInnerHTML={{ __html: item.content }}
+                  />
+                </Box>
+              ))}
+            </ScrollArea>
+          </Stack>
+        </Stack>
+        <Paper withBorder p="md">
+          <Text size="sm" weight={500} mb="xs">
+            Chat Preview Data:
+          </Text>
+          <ScrollArea h={520}>
+            <pre style={{ whiteSpace: "pre-wrap" }}>
+              {JSON.stringify(chat, null, 2)}
+            </pre>
+          </ScrollArea>
+        </Paper>
+      </SimpleGrid>
+
+      <Box w="100%" maw={800}>
+        <Box mb="xs" bg={MainColor.white}>
+          {quillLoaded && (
+            <ReactQuill
+              forwardedRef={quillRef}
+              theme="snow"
+              value={editorContent}
+              onChange={setEditorContent}
+              modules={modules}
+              formats={formats}
+              placeholder="Ketik pesan di sini atau tambahkan stiker..."
+              style={{
+                height: 120,
+                marginBottom: 40,
+                backgroundColor: MainColor.white,
+              }}
+            />
+          )}
+        </Box>
+
+        <Group position="apart">
+          <Button variant="outline" onClick={open} color="blue">
+            Tambah Stiker
+          </Button>
+
+          <Button onClick={sendMessage}>Kirim Pesan</Button>
+        </Group>
+      </Box>
+
+      {/* Sticker Modal */}
+      <Modal opened={opened} onClose={close} title="Pilih Stiker" size="md">
+        <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>
+      </Modal>
+    </Stack>
+  );
+}

src/app_modules/_global/lib/stiker.ts

@@ -0,0 +1,17 @@
+export const listStiker = [
+  {
+    id: 1,
+    name: "stiker2",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQN9AKmsBY4yqdn3GueJJEVPJbfmf853gDL4cN8uc9eqsCTiJ1fzhcpywzVP68NCJEA5NQ&usqp=CAU",
+  },
+  {
+    id: 2,
+    name: "stiker3",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2lkV3ZiQ8m-OELSui2JGVy80vnh1cyRUV7NrgFNluPVVs2HUAyCHwCMAKGe2s5jk2sn8&usqp=CAU",
+  },
+  {
+    id: 3,
+    name: "stiker4",
+    url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHy9ZdsPc6dHgVTl5yIGpRJ-KtpTIsXA2_kbfO1Oc-pv_f7CNKGxhO56RjKujE3xCyb9k&usqp=CAU",
+  },
+];

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

@@ -0,0 +1,133 @@
+"use client";
+
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
+import { Stack, Paper, Group, Button, Divider } from "@mantine/core";
+import { useState } from "react";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(
+  () => {
+    return import("react-quill");
+  },
+  { ssr: false }
+);
+import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
+import { forum_funGetAllKomentarById } from "../../fun/get/get_all_komentar_by_id";
+import { MODEL_FORUM_POSTING } from "../../model/interface";
+import { useParams, useRouter } from "next/navigation";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import mqtt_client from "@/util/mqtt_client";
+import backendLogger from "@/util/backendLogger";
+import { clientLogger } from "@/util/clientLogger";
+export default function Forum_CompCreateComment({
+  data,
+  userLoginId,
+  onSetNewKomentar,
+}: {
+  data: MODEL_FORUM_POSTING;
+  userLoginId: string;
+  onSetNewKomentar: (val: string) => void;
+}) {
+  const param = useParams<{ id: string }>();
+  const postingId = param.id;
+  const [value, setValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  async function onComment() {
+    if (value.length > 500) {
+      return null;
+    }
+
+    try {
+      setLoading(true);
+      const createComment = await forum_funCreateKomentar(postingId, value);
+      if (createComment.status === 201) {
+        onSetNewKomentar(value);
+        setValue("");
+        setIsEmpty(true);
+        ComponentGlobal_NotifikasiBerhasil(createComment.message, 2000);
+
+        if (userLoginId !== data.Author.id) {
+          const dataNotif = {
+            appId: data.id,
+            userId: data.authorId,
+            pesan: value,
+            kategoriApp: "FORUM",
+            title: "Komentar baru",
+          };
+
+          const createNotifikasi = await notifikasiToUser_funCreate({
+            data: dataNotif as any,
+          });
+
+          if (createNotifikasi.status === 201) {
+            mqtt_client.publish(
+              "USER",
+              JSON.stringify({
+                userId: dataNotif.userId,
+                count: 1,
+              })
+            );
+          }
+        }
+      } else {
+        setLoading(false);
+        ComponentGlobal_NotifikasiGagal(createComment.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      clientLogger.error("Error create komentar forum", error);
+    }
+  }
+
+  return (
+    <>
+      <Stack>
+        <Paper withBorder shadow="lg">
+          <ReactQuill
+            value={value}
+            theme="bubble"
+            placeholder="Ketik komentar anda?"
+            onChange={(val) => {
+              setValue(val);
+            }}
+            style={{
+              overflowY: "auto",
+              maxHeight: 100,
+              minHeight: 50,
+            }}
+          />
+        </Paper>
+
+        <Group position="apart">
+          <ComponentGlobal_InputCountDown
+            maxInput={500}
+            lengthInput={value.length}
+          />
+          <Button
+            style={{
+              transition: "0.5s",
+            }}
+            disabled={
+              value === "" || value === "<p><br></p>" || value.length > 500
+                ? true
+                : false
+            }
+            bg={MainColor.yellow}
+            color={"yellow"}
+            c="black"
+            loaderPosition="center"
+            loading={loading}
+            radius={"xl"}
+            onClick={() => onComment()}
+          >
+            Balas
+          </Button>
+        </Group>
+      </Stack>
+    </>
+  );
+}

src/app_modules/forum/detail/main_detail.tsx

@@ -34,7 +34,9 @@ export default function Forum_MainDetail({
   const [dataPosting, setDataPosting] = useState<MODEL_FORUM_POSTING | null>(
     null
   );
-  const [listKomentar, setListKomentar] = useState<MODEL_FORUM_KOMENTAR[]>([]);
+  const [listKomentar, setListKomentar] = useState<
+    MODEL_FORUM_KOMENTAR[] | null
+  >(null);
   const [activePage, setActivePage] = useState(1);
   const [newKomentar, setNewKomentar] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -130,7 +132,7 @@ export default function Forum_MainDetail({
   return (
     <>
       <Stack>
-        {!dataPosting || !listKomentar ? (
+        {!dataPosting ? (
           <CustomSkeleton height={200} width={"100%"} />
         ) : (
           <ComponentForum_DetailForumView
@@ -158,7 +160,7 @@ export default function Forum_MainDetail({
           )
         )}
 
-        {!listKomentar.length && isLoading ? (
+        {!listKomentar ? (
           <Forum_SkeletonListKomentar />
         ) : _.isEmpty(listKomentar) ? (
           <ComponentGlobal_IsEmptyData text="Tidak ada komentar" />
@@ -172,7 +174,7 @@ export default function Forum_MainDetail({
                 </Center>
               )}
               data={listKomentar}
-              setData={setListKomentar}
+              setData={setListKomentar as any}
               moreData={handleMoreDataKomentar}
             >
               {(item) => (

src/app_modules/forum/model/interface.tsx

@@ -75,3 +75,8 @@ export interface MODEL_FORUM_REPORT_KOMENTAR {
   userId: string;
   User: MODEL_USER;
 }
+
+export type CommentItem = {
+  deskripsi: string;
+  // Add any other properties that CommentItem should have
+};