formatting
This commit is contained in:
@@ -1,17 +1,21 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import axios from "../../axios";
|
||||
import "highlight.js/styles/github-dark.css";
|
||||
|
||||
import MarkdownPreview from "./MarckDownPreview";
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import axios from '../../axios';
|
||||
import 'highlight.js/styles/github-dark.css';
|
||||
|
||||
import MarkdownPreview from './MarckDownPreview';
|
||||
|
||||
interface MarkdownEditorProps {
|
||||
defaultValue?: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
const MarkdownEditor: FC<MarkdownEditorProps> = ({ defaultValue, onChange }) => {
|
||||
const [markdown, setMarkdown] = useState<string>(defaultValue || `# 🌙 Добро пожаловать в Markdown-редактор
|
||||
const MarkdownEditor: FC<MarkdownEditorProps> = ({
|
||||
defaultValue,
|
||||
onChange,
|
||||
}) => {
|
||||
const [markdown, setMarkdown] = useState<string>(
|
||||
defaultValue ||
|
||||
`# 🌙 Добро пожаловать в Markdown-редактор
|
||||
|
||||
Добро пожаловать в **Markdown-редактор**!
|
||||
Здесь ты можешь писать в формате Markdown и видеть результат **в реальном времени** 👇
|
||||
@@ -205,34 +209,42 @@ print(greet("Мир"))
|
||||
|
||||
**🖤 Конец демонстрации. Спасибо, что используешь Markdown-редактор!**
|
||||
|
||||
`);
|
||||
`,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
onChange(markdown);
|
||||
}, [markdown]);
|
||||
|
||||
// Обработчик вставки
|
||||
const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
|
||||
const handlePaste = async (
|
||||
e: React.ClipboardEvent<HTMLTextAreaElement>,
|
||||
) => {
|
||||
const items = e.clipboardData.items;
|
||||
|
||||
for (const item of items) {
|
||||
if (item.type.startsWith("image/")) {
|
||||
if (item.type.startsWith('image/')) {
|
||||
e.preventDefault(); // предотвращаем вставку картинки как текста
|
||||
|
||||
const file = item.getAsFile();
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const response = await axios.post("/media/upload", formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
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 cursorPos = (e.target as HTMLTextAreaElement)
|
||||
.selectionStart;
|
||||
const newText =
|
||||
markdown.slice(0, cursorPos) +
|
||||
`<img src=\"${imageUrl}\" alt=\"img\"/>` +
|
||||
@@ -240,7 +252,7 @@ print(greet("Мир"))
|
||||
|
||||
setMarkdown(newText);
|
||||
} catch (err) {
|
||||
console.error("Ошибка загрузки изображения:", err);
|
||||
console.error('Ошибка загрузки изображения:', err);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -251,15 +263,22 @@ print(greet("Мир"))
|
||||
{/* Предпросмотр */}
|
||||
<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)]"/>
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-100">
|
||||
👀 Предпросмотр
|
||||
</h2>
|
||||
<MarkdownPreview
|
||||
content={markdown}
|
||||
className="h-[calc(100%-40px)]"
|
||||
/>
|
||||
</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>
|
||||
<h2 className="text-lg font-semibold mb-3 text-gray-100">
|
||||
📝 Редактор
|
||||
</h2>
|
||||
<textarea
|
||||
value={markdown}
|
||||
onChange={(e) => setMarkdown(e.target.value)}
|
||||
|
||||
Reference in New Issue
Block a user