62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { createStyles, TypographyStylesProvider } from "@mantine/core";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
const useStyles = createStyles(() => ({
|
|
paragraph: {
|
|
lineBreak: "anywhere",
|
|
},
|
|
}));
|
|
|
|
export function ParagraphContent({ content }: { content: string }) {
|
|
const { classes } = useStyles();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
ref.current.querySelectorAll("*").forEach((el) => {
|
|
if (!(el instanceof HTMLElement)) return;
|
|
console.log(el.tagName, el.style);
|
|
[
|
|
"outline",
|
|
"color",
|
|
"font-size",
|
|
"font-family",
|
|
"background-color",
|
|
"border-width",
|
|
"border-style",
|
|
"border-color",
|
|
"counter-reset",
|
|
"max-width",
|
|
"caret-color",
|
|
"letter-spacing",
|
|
"white-space",
|
|
"text-size-adjust",
|
|
"box-sizing",
|
|
"line-height",
|
|
"overflow-wrap",
|
|
].forEach((key) => el.style.removeProperty(key));
|
|
if (
|
|
el.tagName === "P" &&
|
|
el.childElementCount === 1 &&
|
|
(el.children[0].tagName === "BR" ||
|
|
(el.children[0].tagName === "SPAN" &&
|
|
el.children[0].childElementCount === 1 &&
|
|
el.children[0].children[0].tagName === "BR"))
|
|
) {
|
|
el.parentElement?.removeChild(el);
|
|
}
|
|
});
|
|
}
|
|
}, [ref]);
|
|
return (
|
|
<TypographyStylesProvider>
|
|
<div
|
|
ref={ref}
|
|
className={classes.paragraph}
|
|
dangerouslySetInnerHTML={{
|
|
__html: content,
|
|
}}
|
|
/>
|
|
</TypographyStylesProvider>
|
|
);
|
|
}
|