feat: Delete user preview + snapshot preview + coordinates update

This commit is contained in:
2025-06-06 20:15:02 +03:00
parent d74789a0d8
commit 1104e94ba8
14 changed files with 456 additions and 233 deletions

View File

@ -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>
);
};