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, props,
className, className,
color, color,
style, style,
}: { }: {
props: string; props: string | undefined;
className?: string; className?: string;
color?: string; color?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
}) { }) {
const baseStyle: React.CSSProperties = {
color: color ?? MainColor.white,
};
return ( return (
<> <>
<div <div
className={className} // className={className}
style={{ ...style, color: color ? color : "white" }} style={{ ...baseStyle, ...style }}
dangerouslySetInnerHTML={{ __html: props }} 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 = { const baseStyle: React.CSSProperties = {
color: color ?? MainColor.white, color: color ?? MainColor.white,
wordBreak: "break-word", // wordBreak: "break-word",
overflow: "hidden", // overflow: "hidden",
}; };
return ( return (
@@ -22,7 +22,6 @@ export const Comp_DangerouslySetInnerHTML = ({
...baseStyle, ...baseStyle,
...styleInput, ...styleInput,
}} }}
className="rich-html-content"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: props ?? "", __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"; import { Box, Spoiler } from "@mantine/core";
export const AdminForum_CompTableSetHtmlStiker = ({ export const AdminForum_CompTableSetHtmlStiker = ({
@@ -20,7 +20,7 @@ export const AdminForum_CompTableSetHtmlStiker = ({
hideLabel="sembunyikan" hideLabel="sembunyikan"
showLabel="tampilkan" showLabel="tampilkan"
> >
<Comp_V3_SetHtmlWithSticker props={data} className={classname} /> <Comp_V3_SetInnerHTML props={data} className={classname} />
</Spoiler> </Spoiler>
</Box> </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 ComponentAdminForum_ButtonDeletePosting from "../component/button_delete";
import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum"; import { apiGetAdminForumPublish } from "../lib/api_fetch_admin_forum";
import { Comp_DangerouslySetInnerHTML } from "@/app_modules/_global/component/new/comp_set_inner_html"; 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"; import { AdminForum_CompTableSetHtmlStiker } from "../component/comp_table_set_html_stiker";
export default function AdminForum_TablePosting() { 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"; "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 { MODEL_FORUM_KOMENTAR } from "../../model/interface";
import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name"; import ComponentForum_KomentarAuthorNameOnHeader from "../komentar_component/komentar_author_header_name";
import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component"; import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
import { useShallowEffect } from "@mantine/hooks"; 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({ export default function ComponentForum_KomentarView({
data, data,
@@ -18,7 +20,6 @@ export default function ComponentForum_KomentarView({
userLoginId: string; userLoginId: string;
}) { }) {
useShallowEffect(() => { useShallowEffect(() => {
// Add custom style for stickers inside Quill editor // Add custom style for stickers inside Quill editor
const style = document.createElement("style"); const style = document.createElement("style");
style.textContent = ` style.textContent = `
@@ -44,34 +45,42 @@ export default function ComponentForum_KomentarView({
return ( return (
<> <>
<ComponentGlobal_CardStyles> <ComponentGlobal_CardStyles>
<ComponentForum_KomentarAuthorNameOnHeader <Stack>
tglPublish={data?.createdAt} <ComponentForum_KomentarAuthorNameOnHeader
userId={data?.Author?.id} tglPublish={data?.createdAt}
komentarId={data?.id} userId={data?.Author?.id}
isMoreButton={true} komentarId={data?.id}
setKomentar={setKomentar} isMoreButton={true}
postingId={postingId} setKomentar={setKomentar}
userLoginId={userLoginId} postingId={postingId}
profile={data.Author.Profile} userLoginId={userLoginId}
/> profile={data.Author.Profile}
/>
<Stack spacing={"xs"} sx={{ zIndex: 0 }} p={"sm"}> <Box
<Text fz={"sm"} lineClamp={4} c={"white"}> style={{
{data.komentar ? ( backgroundColor: MainColor.soft_darkblue,
<Spoiler padding: 10,
hideLabel="sembunyikan" borderRadius: 8,
maxHeight={100} }}
showLabel="tampilkan" >
> <Text fz={"sm"} lineClamp={4} c={"white"}>
<div {data.komentar ? (
className="chat-content" <Spoiler
dangerouslySetInnerHTML={{ __html: data.komentar }} hideLabel="sembunyikan"
/> maxHeight={100}
</Spoiler> showLabel="tampilkan"
) : ( >
"" <Comp_V3_SetInnerHTML
)} props={data?.komentar}
</Text> className="chat-content"
/>
</Spoiler>
) : (
""
)}
</Text>
</Box>
</Stack> </Stack>
</ComponentGlobal_CardStyles> </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 { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_DetailHeader from "./detail_header"; import ComponentForum_DetailHeader from "./detail_header";
import { useShallowEffect } from "@mantine/hooks"; 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({ export default function ComponentForum_DetailForumView({
data, data,
@@ -19,21 +20,21 @@ export default function ComponentForum_DetailForumView({
userLoginId: string; userLoginId: string;
onLoadData: (val: any) => void; onLoadData: (val: any) => void;
}) { }) {
useShallowEffect(() => { // useShallowEffect(() => {
// Add custom style for stickers inside Quill editor // // Add custom style for stickers inside Quill editor
const style = document.createElement("style"); // const style = document.createElement("style");
style.textContent = ` // style.textContent = `
.chat-content img { // .chat-content img {
max-width: 70px !important; // max-width: 70px !important;
max-height: 70px !important; // max-height: 70px !important;
} // }
`; // `;
document.head.appendChild(style); // document.head.appendChild(style);
return () => { // return () => {
// Clean up when component unmounts // // Clean up when component unmounts
document.head.removeChild(style); // document.head.removeChild(style);
}; // };
}, []); // }, []);
return ( return (
<> <>
@@ -49,12 +50,18 @@ export default function ComponentForum_DetailForumView({
/> />
{/* CONTENT */} {/* CONTENT */}
<Box p={"lg"}> <Box
style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
>
<Text fz={"sm"} color="white"> <Text fz={"sm"} color="white">
{data?.diskusi ? ( {data?.diskusi ? (
<Comp_V3_SetHtmlWithSticker <Comp_V3_SetInnerHTML
props={data?.diskusi} 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 { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface"; import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_ForumkuHeaderCard from "./forumku_header"; 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 { useShallowEffect } from "@mantine/hooks";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_ForumkuMainCardView({ export default function ComponentForum_ForumkuMainCardView({
data, data,
@@ -57,15 +58,18 @@ export default function ComponentForum_ForumkuMainCardView({
/> />
<Box <Box
sx={{ zIndex: 0 }} style={{
p={"lg"} backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
onClick={() => { onClick={() => {
setVisible(true); setVisible(true);
router.push(RouterForum.main_detail + data?.id); router.push(RouterForum.main_detail + data?.id);
}} }}
> >
<Text c={"white"} fz={"sm"} lineClamp={4}> <Text c={"white"} fz={"sm"} lineClamp={4}>
<Comp_V3_SetHtmlWithSticker <Comp_V3_SetInnerHTML
props={data?.diskusi} props={data?.diskusi}
className="chat-content" className="chat-content"
style={{ 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 { useState } from "react";
import { MODEL_FORUM_POSTING } from "../../model/interface"; import { MODEL_FORUM_POSTING } from "../../model/interface";
import ComponentForum_BerandaHeaderCard from "./card_header"; 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 { useShallowEffect } from "@mantine/hooks";
import { MainColor } from "@/app_modules/_global/color";
export default function ComponentForum_BerandaCardView({ export default function ComponentForum_BerandaCardView({
data, data,
@@ -58,13 +59,17 @@ export default function ComponentForum_BerandaCardView({
<Box <Box
sx={{ zIndex: 0 }} sx={{ zIndex: 0 }}
p={"lg"} style={{
backgroundColor: MainColor.soft_darkblue,
padding: 10,
borderRadius: 8,
}}
onClick={() => { onClick={() => {
setVisible(true), router.push(RouterForum.main_detail + data?.id); setVisible(true), router.push(RouterForum.main_detail + data?.id);
}} }}
> >
<Text c={"white"} fz={"sm"} lineClamp={4}> <Text c={"white"} fz={"sm"} lineClamp={4}>
<Comp_V3_SetHtmlWithSticker <Comp_V3_SetInnerHTML
props={data?.diskusi} props={data?.diskusi}
className="chat-content" className="chat-content"
style={{ style={{