feat: md preview

src/components/html/md/Preview.tsx

@@ -1,16 +1,53 @@
 import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
 // import './Preview.css';
+import { md2html } from '@kevisual/markdown-editor/tiptap/index.ts';
 
+export const clearMeta = (markdown?: string) => {
+  if (!markdown) return '';
+  // Remove YAML front matter if present
+  const yamlRegex = /^---\n[\s\S]*?\n---\n/;
+  return markdown.replace(yamlRegex, '');
+};
 type Props = {
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  content?: string; // Optional content prop for markdown text
   [key: string]: any; // Allow any additional props
 };
 export const MarkdownPreview = (props: Props) => {
   return (
-    <div className={cn('markdown-body scrollbar h-full overflow-auto px-6 py-2 max-w-[800px] border my-4 flex flex-col justify-self-center rounded-md shadow-md', props.className)} style={props.style}>
-      {props.children}
+    <div
+      className={cn(
+        'markdown-body scrollbar h-full overflow-auto w-full px-6 py-2 max-w-[800px] border my-4 flex flex-col justify-self-center rounded-md shadow-md',
+        props.className,
+      )}
+      style={props.style}>
+      {props.children ? <WrapperText>{props.children}</WrapperText> : <MarkdownPreviewWrapper content={clearMeta(props.content)} />}
     </div>
   );
 };
+
+export const WrapperText = (props: { children?: React.ReactNode; html?: string }) => {
+  if (props.html) {
+    return <div className='w-full' dangerouslySetInnerHTML={{ __html: props.html }} />;
+  }
+  return <div className='w-full h-full'>{props.children}</div>;
+};
+
+export const MarkdownPreviewWrapper = (props: Props) => {
+  const [html, setHtml] = useState<string>('');
+  useEffect(() => {
+    init();
+  }, [props.content]);
+  const init = async () => {
+    if (props.content) {
+      const htmlContent = await md2html(props.content);
+      setHtml(htmlContent);
+    } else {
+      setHtml('');
+    }
+  };
+  return <WrapperText html={html} />;
+};