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

fix set html

Browse Source 
deksrispi:
- fix di bagian tampilan forum diisi bg
This commit is contained in:
Bagasbanuna02
2025-04-30 17:35:31 +08:00
parent 42c19b0303
commit fd978d4b69
8 changed files with 122 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/app_modules/_global/component/new/comp_V3_set_html_with_stiker.tsx
View File

@@ -1,21 +1,53 @@
export function Comp_V3_SetHtmlWithSticker({
import { MainColor } from "../../color";
export function Comp_V3_SetInnerHTML({
props,
className,
color,
style,
}: {
props: string;
props: string | undefined;
className?: string;
color?: string;
style?: React.CSSProperties;
}) {
const baseStyle: React.CSSProperties = {
color: color ?? MainColor.white,
};
return (
<>
<div
className={className}
style={{ ...style, color: color ? color : "white" }}
dangerouslySetInnerHTML={{ __html: props }}
// className={className}
style={{ ...baseStyle, ...style }}
dangerouslySetInnerHTML={{ __html: props ?? "" }}
/>
<style>
{`
div p {
margin: 0 0 8px 0;
}
div ul, div ol {
margin: 0 0 8px 20px;
padding-left: 16px;
}
div h1, div h2, div h3 {
margin: 0 0 12px 0;
}
div li {
margin-bottom: 4px;
}
img {
max-width: 70px !important;
max-height: 70px !important;
}
`}
</style>
</>
);
}

5
src/app_modules/_global/component/new/comp_set_inner_html.tsx
View File

@@ -11,8 +11,8 @@ export const Comp_DangerouslySetInnerHTML = ({
}) => {
const baseStyle: React.CSSProperties = {
color: color ?? MainColor.white,
wordBreak: "break-word",
overflow: "hidden",
// wordBreak: "break-word",
// overflow: "hidden",
};
return (
@@ -22,7 +22,6 @@ export const Comp_DangerouslySetInnerHTML = ({
...baseStyle,
...styleInput,
}}
className="rich-html-content"
dangerouslySetInnerHTML={{
__html: props ?? "",
}}

4
src/app_modules/admin/forum/component/comp_table_set_html_stiker.tsx
View File

@@ -1,4 +1,4 @@
import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { Box, Spoiler } from "@mantine/core";
export const AdminForum_CompTableSetHtmlStiker = ({
@@ -20,7 +20,7 @@ export const AdminForum_CompTableSetHtmlStiker = ({
hideLabel="sembunyikan"
showLabel="tampilkan"
>
<Comp_V3_SetHtmlWithSticker props={data} className={classname} />
<Comp_V3_SetInnerHTML props={data} className={classname} />
</Spoiler>
</Box>
</>

2
src/app_modules/admin/forum/sub_menu/table_posting.tsx
View File

@@ -28,7 +28,7 @@ import { Admin_V3_ComponentPaginationBreakpoint } from "../../_components_v3/com
import ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html";
import { Comp_V3_SetHtmlWithSticker } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
export default function AdminForum_TablePosting() {

67
src/app_modules/forum/component/detail_component/detail_list_komentar.tsx
View File

@@ -1,10 +1,12 @@
"use client";
import { Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
import { Box, Card, Divider, Spoiler, Stack, Text } from "@mantine/core";
import { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { useShallowEffect } from "@mantine/hooks";
import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_KomentarView({
data,
@@ -18,7 +20,6 @@ export default function ComponentForum_KomentarView({
userLoginId: string;
}) {
useShallowEffect(() => {
// Add custom style for stickers inside Quill editor
const style = document.createElement("style");
style.textContent = `
@@ -44,34 +45,42 @@ export default function ComponentForum_KomentarView({
return (
<>
<ComponentGlobal_CardStyles>
<ComponentForum_KomentarAuthorNameOnHeader
tglPublish={data?.createdAt}
userId={data?.Author?.id}
komentarId={data?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
profile={data.Author.Profile}
/>
<Stack>
<ComponentForum_KomentarAuthorNameOnHeader
tglPublish={data?.createdAt}
userId={data?.Author?.id}
komentarId={data?.id}
isMoreButton={true}
setKomentar={setKomentar}
postingId={postingId}
userLoginId={userLoginId}
profile={data.Author.Profile}
/>
<Stack spacing={"xs"} sx={{ zIndex: 0 }} p={"sm"}>
<Text fz={"sm"} lineClamp={4} c={"white"}>
{data.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<div
className="chat-content"
dangerouslySetInnerHTML={{ __html: data.komentar }}
/>
</Spoiler>
) : (
""
)}
</Text>
<Box
style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
>
<Text fz={"sm"} lineClamp={4} c={"white"}>
{data.komentar ? (
<Spoiler
hideLabel="sembunyikan"
maxHeight={100}
showLabel="tampilkan"
>
<Comp_V3_SetInnerHTML
props={data?.komentar}
className="chat-content"
/>
</Spoiler>
) : (
""
)}
</Text>
</Box>
</Stack>
</ComponentGlobal_CardStyles>
</>

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

@@ -6,7 +6,8 @@ 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";
import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_DetailForumView({
data,
@@ -19,21 +20,21 @@ 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);
};
}, []);
// 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 (
<>
@@ -49,12 +50,18 @@ export default function ComponentForum_DetailForumView({
/>
{/* CONTENT */}
<Box p={"lg"}>
<Box
style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
>
<Text fz={"sm"} color="white">
{data?.diskusi ? (
<Comp_V3_SetHtmlWithSticker
<Comp_V3_SetInnerHTML
props={data?.diskusi}
className="chat-content"
// className="chat-content"
/>
) : (
""

12
src/app_modules/forum/component/forumku_component/forumku_view.tsx
View File

@@ -11,8 +11,9 @@ 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 { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { useShallowEffect } from "@mantine/hooks";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_ForumkuMainCardView({
data,
@@ -57,15 +58,18 @@ export default function ComponentForum_ForumkuMainCardView({
/>
<Box
sx={{ zIndex: 0 }}
p={"lg"}
style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
onClick={() => {
setVisible(true);
router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<Comp_V3_SetHtmlWithSticker
<Comp_V3_SetInnerHTML
props={data?.diskusi}
className="chat-content"
style={{

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

@@ -11,8 +11,9 @@ 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 { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
import { useShallowEffect } from "@mantine/hooks";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_BerandaCardView({
data,
@@ -58,13 +59,17 @@ export default function ComponentForum_BerandaCardView({
<Box
sx={{ zIndex: 0 }}
p={"lg"}
style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
onClick={() => {
setVisible(true), router.push(RouterForum.main_detail + data?.id);
}}
>
<Text c={"white"} fz={"sm"} lineClamp={4}>
<Comp_V3_SetHtmlWithSticker
<Comp_V3_SetInnerHTML
props={data?.diskusi}
className="chat-content"
style={{