78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { serialize } from "next-mdx-remote/serialize";
|
|
import remarkGfm from "remark-gfm";
|
|
import rehypePrismPlus from "rehype-prism-plus";
|
|
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
|
|
import Border from "../../elements/Border";
|
|
import { useMDXComponents } from "../mdx-components";
|
|
import EmptyContent from "../../elements/EmptyContent";
|
|
|
|
type Props = {
|
|
value: string;
|
|
setValue: React.Dispatch<any>;
|
|
maxHeight: string;
|
|
};
|
|
|
|
export default function MarkdownEditorPreviewComponent({
|
|
value,
|
|
setValue,
|
|
maxHeight,
|
|
}: Props) {
|
|
try {
|
|
const [mdxSource, setMdxSource] =
|
|
React.useState<
|
|
MDXRemoteSerializeResult<
|
|
Record<string, unknown>,
|
|
Record<string, unknown>
|
|
>
|
|
>();
|
|
|
|
const { components } = useMDXComponents();
|
|
|
|
React.useEffect(() => {
|
|
try {
|
|
// const { data, content } = matter(value);
|
|
|
|
const parsedValue = value
|
|
.replace(/---([^(---)]+)---/, "")
|
|
.trim();
|
|
|
|
serialize(parsedValue, {
|
|
mdxOptions: {
|
|
remarkPlugins: [remarkGfm],
|
|
rehypePlugins: [rehypePrismPlus],
|
|
},
|
|
// scope: data,
|
|
})
|
|
.then((mdxSrc) => {
|
|
setMdxSource(mdxSrc);
|
|
})
|
|
.catch((err) => {
|
|
console.log(`Markdown Parsing Error => ${err.message}`);
|
|
});
|
|
} catch (error) {}
|
|
}, [value]);
|
|
|
|
return (
|
|
<Border
|
|
className={twMerge(
|
|
`w-full max-h-[${maxHeight}] h-[${maxHeight}] block px-6 pb-10`,
|
|
"overflow-auto"
|
|
)}
|
|
>
|
|
{mdxSource ? (
|
|
<MDXRemote
|
|
{...mdxSource}
|
|
components={{
|
|
...components,
|
|
}}
|
|
/>
|
|
) : null}
|
|
</Border>
|
|
);
|
|
} catch (error) {
|
|
return <EmptyContent title={`Markdown Syntax Error.`} />;
|
|
}
|
|
}
|