percobaan kirim stiker di forum

2025-04-23 15:21:12 +08:00
parent cf84daedba
commit 14a080992e
9 changed files with 535 additions and 8 deletions
--- a/src/app/zCoba/text_editor/page.tsx
+++ b/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>
+  );
+}