article form creator

src/views/articleeditor/Editor.tsx

@@ -1,34 +1,17 @@
 import { FC, useEffect, useState } 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 axios from "../../axios";
 import "highlight.js/styles/github-dark.css";
-import Header from "../mission/statement/Header";
 
-import { defaultSchema } from "hast-util-sanitize";
-
-const schema = {
-  ...defaultSchema,
-  attributes: {
-    ...defaultSchema.attributes,
-    div: [
-      ...(defaultSchema.attributes?.div || []),
-      ["style"] // разрешаем атрибут style на div
-    ]
-  }
-};
+import MarkdownPreview from "./MarckDownPreview";
 
 
 interface MarkdownEditorProps {
-  defaultValue?: string;
-  onChange: (value: string) => void;
+    defaultValue?: string;
+    onChange: (value: string) => void;
 }
 
 const MarkdownEditor: FC<MarkdownEditorProps> = ({ defaultValue, onChange }) => {
-  const [markdown, setMarkdown] = useState<string>(defaultValue || `# 🌙 Добро пожаловать в Markdown-редактор
+    const [markdown, setMarkdown] = useState<string>(defaultValue || `# 🌙 Добро пожаловать в Markdown-редактор
 
 Добро пожаловать в **Markdown-редактор**!  
 Здесь ты можешь писать в формате Markdown и видеть результат **в реальном времени** 👇
@@ -224,87 +207,72 @@ print(greet("Мир"))
     
 `);
 
-  useEffect(() => {
-    onChange(markdown);
-  }, [markdown]);
+    useEffect(() => {
+        onChange(markdown);
+    }, [markdown]);
 
-  // Обработчик вставки
-  const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
-    const items = e.clipboardData.items;
+    // Обработчик вставки
+    const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+        const items = e.clipboardData.items;
 
-    for (const item of items) {
-      if (item.type.startsWith("image/")) {
-        e.preventDefault(); // предотвращаем вставку картинки как текста
+        for (const item of items) {
+            if (item.type.startsWith("image/")) {
+                e.preventDefault(); // предотвращаем вставку картинки как текста
 
-        const file = item.getAsFile();
-        if (!file) return;
+                const file = item.getAsFile();
+                if (!file) return;
 
-        const formData = new FormData();
-        formData.append("file", file);
+                const formData = new FormData();
+                formData.append("file", file);
 
-        try {
-          const response = await axios.post("/media/upload", formData, {
-            headers: { "Content-Type": "multipart/form-data" },
-          });
+                try {
+                    const response = await axios.post("/media/upload", formData, {
+                        headers: { "Content-Type": "multipart/form-data" },
+                    });
 
-          const imageUrl = response.data.url;
-          // Вставляем ссылку на картинку в текст
-          const cursorPos = (e.target as HTMLTextAreaElement).selectionStart;
-          const newText =
-            markdown.slice(0, cursorPos) +
-            `<img src=\"${imageUrl}\" alt=\"img\"/>` +
-            markdown.slice(cursorPos);
+                    const imageUrl = response.data.url;
+                    // Вставляем ссылку на картинку в текст
+                    const cursorPos = (e.target as HTMLTextAreaElement).selectionStart;
+                    const newText =
+                        markdown.slice(0, cursorPos) +
+                        `<img src=\"${imageUrl}\" alt=\"img\"/>` +
+                        markdown.slice(cursorPos);
 
-          setMarkdown(newText);
-        } catch (err) {
-          console.error("Ошибка загрузки изображения:", err);
+                    setMarkdown(newText);
+                } catch (err) {
+                    console.error("Ошибка загрузки изображения:", err);
+                }
+            }
         }
-      }
-    }
-  };
+    };
 
-  return (
-    <div className="h-screen grid grid-rows-[60px,1fr]">
-      <div>
-        <Header missionId={1} />
-      </div>
-
-      <div className="grid grid-cols-2 h-full min-h-0">
-        {/* Предпросмотр */}
-        <div className="overflow-y-auto min-h-0 overflow-hidden">
-          <div className="p-4 border-r border-gray-700 flex flex-col h-full">
-            <h2 className="text-lg font-semibold mb-3 text-gray-100">👀 Предпросмотр</h2>
-            <div className="flex-1 bg-[#161b22] rounded-lg shadow-lg p-6 h-[calc(100%-40px)]">
-              <div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar">
-                <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={[rehypeRaw, [rehypeSanitize, schema], rehypeHighlight]}
-                >
-                  {markdown}
-                </ReactMarkdown>
-              </div>
+    return (
+        <div className="grid grid-cols-2 h-full min-h-0">
+            {/* Предпросмотр */}
+            <div className="overflow-y-auto min-h-0 overflow-hidden">
+                <div className="p-4 border-r border-gray-700 flex flex-col h-full">
+                    <h2 className="text-lg font-semibold mb-3 text-gray-100">👀 Предпросмотр</h2>
+                    <MarkdownPreview content={markdown} className="h-[calc(100%-40px)]"/>
+                </div>
             </div>
-          </div>
-        </div>
 
-        {/* Редактор */}
-        <div className="overflow-y-auto min-h-0 overflow-hidden">
-          <div className="p-4 border-r border-gray-700 flex flex-col h-full">
-            <h2 className="text-lg font-semibold mb-3 text-gray-100">📝 Редактор</h2>
-            <textarea
-              value={markdown}
-              onChange={(e) => setMarkdown(e.target.value)}
-              onPaste={handlePaste} // <-- вот сюда обработчик вставки
-              className="flex-1 w-full bg-[#0d1117] text-gray-200 border border-gray-700 
+            {/* Редактор */}
+            <div className="overflow-y-auto min-h-0 overflow-hidden">
+                <div className="p-4 border-r border-gray-700 flex flex-col h-full">
+                    <h2 className="text-lg font-semibold mb-3 text-gray-100">📝 Редактор</h2>
+                    <textarea
+                        value={markdown}
+                        onChange={(e) => setMarkdown(e.target.value)}
+                        onPaste={handlePaste} // <-- вот сюда обработчик вставки
+                        className="flex-1 w-full bg-[#0d1117] text-gray-200 border border-gray-700 
                 rounded-lg p-5 font-mono text-sm resize-none focus:outline-none focus:ring-2
                 medium-scrollbar"
-              placeholder="Пиши в формате Markdown..."
-            />
-          </div>
+                        placeholder="Пиши в формате Markdown..."
+                    />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default MarkdownEditor;