add css in mdedfitor

This commit is contained in:
Виталий Лавшонок
2025-11-04 13:17:59 +03:00
parent 7ef7bdf055
commit 04dbc5eeb1

View File

@@ -8,6 +8,20 @@ import axios from "../../axios";
import "highlight.js/styles/github-dark.css"; import "highlight.js/styles/github-dark.css";
import Header from "../mission/statement/Header"; 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
]
}
};
interface MarkdownEditorProps { interface MarkdownEditorProps {
defaultValue?: string; defaultValue?: string;
onChange: (value: string) => void; onChange: (value: string) => void;
@@ -125,6 +139,17 @@ print(greet("Мир"))
![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg) ![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
или
<img src=\"https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg\" alt=\"img\"/>
или если нужно выравнивание по центру
<div style=\"display: flex; items-align: center; justify-content: center; background: gray;\">
<img src=\"https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg\" alt=\"img\"/>
</div>
--- ---
## 🧠 8. Цитаты и вложенность ## 🧠 8. Цитаты и вложенность
@@ -227,7 +252,7 @@ print(greet("Мир"))
const cursorPos = (e.target as HTMLTextAreaElement).selectionStart; const cursorPos = (e.target as HTMLTextAreaElement).selectionStart;
const newText = const newText =
markdown.slice(0, cursorPos) + markdown.slice(0, cursorPos) +
`![image](${imageUrl})` + `<img src=\"${imageUrl}\" alt=\"img\"/>` +
markdown.slice(cursorPos); markdown.slice(cursorPos);
setMarkdown(newText); setMarkdown(newText);
@@ -253,7 +278,7 @@ print(greet("Мир"))
<div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar"> <div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw, rehypeSanitize, rehypeHighlight]} rehypePlugins={[rehypeRaw, [rehypeSanitize, schema], rehypeHighlight]}
> >
{markdown} {markdown}
</ReactMarkdown> </ReactMarkdown>