feat: Delete user
preview + snapshot
preview + coordinates update
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import { useMemo } from "react";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import SimpleMDE, { SimpleMDEReactProps } from "react-simplemde-editor";
|
||||
import SimpleMDE from "react-simplemde-editor";
|
||||
import "easymde/dist/easymde.min.css";
|
||||
|
||||
const StyledMarkdownEditor = styled("div")(({ theme }) => ({
|
||||
@ -19,7 +20,6 @@ const StyledMarkdownEditor = styled("div")(({ theme }) => ({
|
||||
"& .editor-statusbar": {
|
||||
display: "none",
|
||||
},
|
||||
// Стили для самого редактора
|
||||
"& .CodeMirror": {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
color: theme.palette.text.primary,
|
||||
@ -33,14 +33,12 @@ const StyledMarkdownEditor = styled("div")(({ theme }) => ({
|
||||
minHeight: "200px",
|
||||
maxHeight: "500px",
|
||||
},
|
||||
// Стили для текста в редакторе
|
||||
"& .CodeMirror-selected": {
|
||||
backgroundColor: `${theme.palette.action.selected} !important`,
|
||||
},
|
||||
"& .CodeMirror-cursor": {
|
||||
borderLeftColor: theme.palette.text.primary,
|
||||
},
|
||||
// Стили для markdown разметки
|
||||
"& .cm-header": {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
@ -57,13 +55,11 @@ const StyledMarkdownEditor = styled("div")(({ theme }) => ({
|
||||
"& .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,
|
||||
@ -73,45 +69,53 @@ const StyledMarkdownEditor = styled("div")(({ theme }) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export const ReactMarkdownEditor = (props: SimpleMDEReactProps) => {
|
||||
if (props.options)
|
||||
props.options.toolbar = [
|
||||
"bold",
|
||||
"italic",
|
||||
"strikethrough",
|
||||
{
|
||||
name: "Underline",
|
||||
action: (editor: any) => {
|
||||
const cm = editor.codemirror;
|
||||
let output = "";
|
||||
const selectedText = cm.getSelection();
|
||||
const text = selectedText ?? "placeholder";
|
||||
|
||||
output = "<u>" + text + "</u>";
|
||||
cm.replaceSelection(output);
|
||||
export const ReactMarkdownEditor = ({
|
||||
options: incomingOptions,
|
||||
...restProps
|
||||
}: any) => {
|
||||
const mergedOptions = useMemo(() => {
|
||||
return {
|
||||
...incomingOptions,
|
||||
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)",
|
||||
},
|
||||
className: "fa fa-underline", // Look for a suitable icon
|
||||
title: "Underline (Ctrl/Cmd-Alt-U)",
|
||||
},
|
||||
"heading",
|
||||
"quote",
|
||||
"unordered-list",
|
||||
"ordered-list",
|
||||
"link",
|
||||
"image",
|
||||
"code",
|
||||
"table",
|
||||
"horizontal-rule",
|
||||
"preview",
|
||||
"fullscreen",
|
||||
"guide",
|
||||
];
|
||||
"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 {...props} />
|
||||
<SimpleMDE options={mergedOptions} {...restProps} />
|
||||
</StyledMarkdownEditor>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user