init

frontend/src/components/MdPreview.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+import { Marked } from 'marked';
+import hljs from 'highlight.js';
+import { markedHighlight } from 'marked-highlight';
+
+const markedAndHighlight = new Marked(
+  markedHighlight({
+    emptyLangClass: 'hljs',
+    langPrefix: 'hljs language-',
+    highlight(code, lang, info) {
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  }),
+);
+
+export const md2html = async (md: string) => {
+  const html = markedAndHighlight.parse(md);
+  return html;
+};
+
+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 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} />;
+};