Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,77 @@
+import React, { ComponentProps, RefObject } 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;
+    maxHeight: string;
+    wrapperProps?: ComponentProps<typeof Border>;
+};
+
+export default function MarkdownEditorPreviewComponent({
+    value,
+    maxHeight,
+    wrapperProps,
+}: 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) => {});
+            } catch (error) {}
+        }, [value]);
+
+        return (
+            <Border
+                {...wrapperProps}
+                className={twMerge(
+                    `w-full max-h-[${maxHeight}] h-[${maxHeight}] block px-6 pb-10`,
+                    "overflow-auto",
+                    wrapperProps?.className
+                )}
+            >
+                {mdxSource ? (
+                    <MDXRemote
+                        {...mdxSource}
+                        components={{
+                            ...components,
+                        }}
+                    />
+                ) : null}
+            </Border>
+        );
+    } catch (error) {
+        return <EmptyContent title={`Markdown Syntax Error.`} />;
+    }
+}