138 lines
3.4 KiB
TypeScript
138 lines
3.4 KiB
TypeScript
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 = `<u>${text}</u>`;
|
|
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 (
|
|
<StyledMarkdownEditor
|
|
className="my-markdown-editor"
|
|
sx={{ marginTop: 1.5, marginBottom: 3 }}
|
|
>
|
|
<SimpleMDE options={mergedOptions} {...restProps} />
|
|
</StyledMarkdownEditor>
|
|
);
|
|
};
|