import { useMemo } from "react"; import { styled } from "@mui/material/styles"; import SimpleMDE from "react-simplemde-editor"; import "easymde/dist/easymde.min.css"; const StyledMarkdownEditor = styled("div")(({ theme }) => ({ "& .editor-toolbar": { backgroundColor: theme.palette.background.paper, borderColor: theme.palette.divider, }, "& .editor-toolbar button": { color: theme.palette.text.primary, }, "& .editor-toolbar button:hover": { backgroundColor: theme.palette.action.hover, }, "& .editor-toolbar button:active, & .editor-toolbar button.active": { backgroundColor: theme.palette.action.selected, }, "& .editor-statusbar": { display: "none", }, "& .CodeMirror": { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, borderColor: theme.palette.divider, height: "auto", minHeight: "400px", maxHeight: "500px", overflowY: "auto", overflowX: "hidden", wordWrap: "break-word", // ✅ добавлено whiteSpace: "pre-wrap", // ✅ добавлено }, "& .CodeMirror-scroll": { minHeight: "400px", maxHeight: "500px", overflowY: "auto", overflowX: "hidden", "&::-webkit-scrollbar": { display: "none", }, "&": { scrollbarWidth: "none", }, wordBreak: "break-word", // ✅ добавлено }, "& .CodeMirror-selected": { backgroundColor: `${theme.palette.action.selected} !important`, }, "& .CodeMirror-cursor": { borderLeftColor: theme.palette.text.primary, }, "& .cm-header": { color: theme.palette.primary.main, }, "& .cm-quote": { color: theme.palette.text.secondary, fontStyle: "italic", }, "& .cm-link": { color: theme.palette.primary.main, }, "& .cm-url": { color: theme.palette.secondary.main, }, "& .cm-formatting": { color: theme.palette.text.secondary, }, "& .CodeMirror .editor-preview-full": { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, borderColor: theme.palette.divider, }, "& .EasyMDEContainer": { position: "relative", zIndex: 1000, }, "& .guide": { display: "none", }, })); export const ReactMarkdownEditor = ({ options: incomingOptions, ...restProps }: any) => { const mergedOptions = useMemo(() => { return { ...incomingOptions, codeMirrorOptions: { lineWrapping: true, }, forceSync: true, spellChecker: false, toolbar: [ "bold", "italic", "strikethrough", { name: "Underline", action: (editor: any) => { const cm = editor.codemirror; const selectedText = cm.getSelection(); const text = selectedText || "placeholder"; const output = `${text}`; cm.replaceSelection(output); }, className: "fa fa-underline", title: "Underline (Ctrl/Cmd-Alt-U)", }, "heading", "quote", "unordered-list", "ordered-list", "link", "image", "code", "table", "horizontal-rule", "preview", "fullscreen", "guide", ], }; }, []); // создаётся один раз return ( ); };