141 lines
3.4 KiB
TypeScript
141 lines
3.4 KiB
TypeScript
"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>
|
|
);
|
|
}
|