article form creator

src/views/articleeditor/MarckDownPreview.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import "highlight.js/styles/github-dark.css";
+
+import { defaultSchema } from "hast-util-sanitize";
+import { cn } from "../../lib/cn";
+
+const schema = {
+    ...defaultSchema,
+    attributes: {
+        ...defaultSchema.attributes,
+        div: [
+            ...(defaultSchema.attributes?.div || []),
+            ["style"] // разрешаем атрибут style на div
+        ]
+    }
+};
+
+interface MarkdownPreviewProps {
+    content: string;
+    className?: string;
+}
+
+const MarkdownPreview: FC<MarkdownPreviewProps> = ({ content, className="" }) => {
+    return (
+        <div className={cn("flex-1 bg-[#161b22] rounded-lg shadow-lg p-6", className)}>
+            <div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar">
+                <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw, [rehypeSanitize, schema], rehypeHighlight]}
+                >
+                    {content}
+                </ReactMarkdown>
+            </div>
+        </div>
+    );
+};
+
+export default MarkdownPreview;