wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix stiker di forum

Browse Source
This commit is contained in:
Bagasbanuna02
2025-04-24 17:36:21 +08:00
parent 5b3c99be39
commit 65c69a96e5
13 changed files with 730 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/app_modules/forum/component/detail_component/comp_V3_create.comment.tsx
View File

@@ -2,8 +2,12 @@
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 { 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";
@@ -13,7 +17,6 @@ import {
Button,
Group,
Image,
Modal,
Paper,
ScrollArea,
SimpleGrid,
@@ -21,20 +24,15 @@ import {
Text,
Tooltip,
} from "@mantine/core";
import { useRouter } from "next/navigation";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconMoodSmileFilled, IconX } from "@tabler/icons-react";
import dynamic from "next/dynamic";
import React, { useState } from "react";
import { forum_funCreateKomentar } from "../../fun/create/fun_create_komentar";
import {
MODEL_FORUM_KOMENTAR,
MODEL_FORUM_POSTING,
} from "../../model/interface";
import dynamic from "next/dynamic";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { listStiker } from "@/app_modules/_global/lib/stiker";
import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
import { IconMoodSmileFilled, IconX } from "@tabler/icons-react";
const ReactQuill = dynamic(
async () => {
@@ -54,9 +52,6 @@ const ReactQuill = dynamic(
}
);
type ChatItem = {
content: string; // HTML content including text and stickers
};
export default function Forum_V3_CreateKomentar({
postingId,
data,
@@ -299,15 +294,11 @@ export default function Forum_V3_CreateKomentar({
</Paper>
)}
{/* <Text c="white">{JSON.stringify(editorContent, null, 2)}</Text> */}
{/* Sticker Modal */}
<Modal
<UIGlobal_Modal
opened={opened}
onClose={close}
close={close}
title="Pilih Stiker"
size="md"
centered
closeButton
>
<SimpleGrid cols={3} spacing="md">
{listStiker.map((item) => (
@@ -325,36 +316,7 @@ export default function Forum_V3_CreateKomentar({
</Box>
))}
</SimpleGrid>
</Modal>
{/* <Group position="apart">
<ComponentGlobal_InputCountDown
maxInput={500}
lengthInput={editorContent.length}
/>
<Button
style={{
transition: "0.5s",
}}
disabled={
editorContent === "" ||
editorContent === "<p><br></p>" ||
editorContent.length > 500
? true
: false
}
bg={MainColor.yellow}
color={"yellow"}
c="black"
loaderPosition="center"
loading={loading}
radius={"xl"}
onClick={() => onComment()}
>
Balas
</Button>
</Group> */}
</UIGlobal_Modal>
</Stack>
</>
);

25
src/app_modules/forum/component/detail_component/detail_view.tsx
View File

@@ -5,6 +5,8 @@ import { Box, Group, Stack, Text } from "@mantine/core";
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_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
export default function ComponentForum_DetailForumView({
data,
@@ -17,6 +19,22 @@ export default function ComponentForum_DetailForumView({
userLoginId: string;
onLoadData: (val: any) => void;
}) {
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>
@@ -31,10 +49,13 @@ export default function ComponentForum_DetailForumView({
/>
{/* CONTENT */}
<Box p={"lg"} >
<Box p={"lg"}>
<Text fz={"sm"} color="white">
{data?.diskusi ? (
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
<Comp_V3_SetHtmlWithSticker
props={data?.diskusi}
className="chat-content"
/>
) : (
""
)}

25
src/app_modules/forum/component/main_component/card_view.tsx
View File

@@ -11,6 +11,8 @@ 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_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { useShallowEffect } from "@mantine/hooks";
export default function ComponentForum_BerandaCardView({
data,
@@ -26,6 +28,22 @@ export default function ComponentForum_BerandaCardView({
const router = useRouter();
const [visible, 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>
@@ -45,8 +63,11 @@ export default function ComponentForum_BerandaCardView({
setVisible(true), router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c="white" fz={"sm"} lineClamp={4}>
<div dangerouslySetInnerHTML={{ __html: data?.diskusi }} />
<Text c={"white"} fz={"sm"} lineClamp={4}>
<Comp_V3_SetHtmlWithSticker
props={data?.diskusi}
className="chat-content"
/>
</Text>
</Box>

265
src/app_modules/forum/create/V3_create.tsx Normal file
View File

@@ -0,0 +1,265 @@
"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 {
ComponentGlobal_NotifikasiBerhasil,
ComponentGlobal_NotifikasiGagal,
} from "@/app_modules/_global/notif_global";
import { UIGlobal_Modal } from "@/app_modules/_global/ui";
import { IconMoodSmileFilled } from "@tabler/icons-react";
import { forum_funCreate } from "../fun/create/fun_create";
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();
const [editorContent, setEditorContent] = useState("");
const [opened, { open, close }] = useDisclosure(false);
const quillRef = React.useRef<any>(null);
const [quillLoaded, setQuillLoaded] = useState<boolean>(false);
const [isReady, setIsReady] = useState<boolean>(false);
useShallowEffect(() => {
setIsReady(true); // Set ready on client-side mount
}, []);
useShallowEffect(() => {
setQuillLoaded(true); // Set ready on client-side mount
}, []);
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);
};
}, []);
// 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}>
<ScrollArea h={280}>
<ReactQuill
forwardedRef={quillRef}
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">
<ComponentGlobal_InputCountDown
maxInput={maxInputLength}
lengthInput={funReplaceHtml({ html: editorContent }).length}
/>
<Group position="right">
<ActionIcon onClick={open} variant="transparent">
<IconMoodSmileFilled color={MainColor.white} size={30} />
</ActionIcon>
<ButtonAction 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} />
)}
</>
);
}
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>
);
}

4
src/app_modules/forum/create/new_create.tsx
View File

@@ -2,7 +2,6 @@
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentTextEditor } from "@/app_modules/_global/component/new/new_text_editor";
import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
@@ -12,6 +11,7 @@ import { useRouter } from "next/navigation";
import { useState } from "react";
import "react-quill/dist/quill.snow.css";
import { forum_funCreate } from "../fun/create/fun_create";
import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
export default function Forum_NewCreate() {
const [data, setData] = useState<string>("");
@@ -19,7 +19,7 @@ export default function Forum_NewCreate() {
return (
<Stack>
<ComponentTextEditor
<Component_V3_TextEditor
data={data}
onSetData={(val) => {
setData(val);

4
src/app_modules/forum/edit/posting/index.tsx
View File

@@ -2,7 +2,7 @@
import { MainColor } from "@/app_modules/_global/color/color_pallet";
import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
import { ComponentTextEditor } from "@/app_modules/_global/component/new/new_text_editor";
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";
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -45,7 +45,7 @@ export default function Forum_EditPosting() {
return (
<>
<Stack>
<ComponentTextEditor
<Component_V3_TextEditor
data={data.diskusi}
onSetData={(value) => {
setData({