init: Init React Application

2025-05-29 13:21:33 +03:00
parent 9444939507
commit 17de7e495f
66 changed files with 10425 additions and 0 deletions
--- a/src/widgets/ReactMarkdownEditor/index.tsx
+++ b/src/widgets/ReactMarkdownEditor/index.tsx
@ -0,0 +1,109 @@
+import { styled } from "@mui/material/styles";
+import SimpleMDE, { SimpleMDEReactProps } 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,
+  },
+  // Стили для текста в редакторе
+  "& .CodeMirror-selected": {
+    backgroundColor: `${theme.palette.action.selected} !important`,
+  },
+  "& .CodeMirror-cursor": {
+    borderLeftColor: theme.palette.text.primary,
+  },
+  // Стили для markdown разметки
+  "& .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 = (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);
+        },
+        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",
+    ];
+  return (
+    <StyledMarkdownEditor
+      className="my-markdown-editor"
+      sx={{ marginTop: 1.5, marginBottom: 3 }}
+    >
+      <SimpleMDE {...props} />
+    </StyledMarkdownEditor>
+  );
+};