feat: Delete user preview + snapshot preview + coordinates update

src/widgets/ReactMarkdownEditor/index.tsx

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