From 390e2e5ac9a630c61c5a8d27ea51f894adfdd84e Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Wed, 12 Apr 2023 07:41:57 +0800
Subject: [PATCH] refactor: markdown input css

---
 src/assets/index.css                          | 11 ++++++++++-
 src/common/component/MarkdownEditor/index.tsx |  2 +-
 src/common/component/MarkdownRender.tsx       |  9 ++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 8d13565c..590e0003 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -282,8 +282,17 @@ html.dark ::-webkit-scrollbar-thumb {
   font-size: 14px;
   line-height: 20px;
 }
+.toastui-editor-md-preview {
+  overflow-x: hidden;
+}
 .toastui-editor-dark .toastui-editor-md-container {
-  background-color: #4e5762 !important;
+  background-color: transparent !important;
+}
+.toastui-editor-md-container.toastui-editor-md-vertical-style {
+  align-items: flex-start;
+}
+html.dark .send.markdown {
+  background-color: #222 !important;
 }
 html.dark .slate-mention {
   background: #333;
diff --git a/src/common/component/MarkdownEditor/index.tsx b/src/common/component/MarkdownEditor/index.tsx
index 1a4f1384..5db0807c 100644
--- a/src/common/component/MarkdownEditor/index.tsx
+++ b/src/common/component/MarkdownEditor/index.tsx
@@ -1,7 +1,7 @@
 import { useRef, useEffect, FC } from "react";
-import "@toast-ui/editor/dist/toastui-editor.css";
 import { Editor } from "@toast-ui/react-editor";
 import "prismjs/themes/prism.css";
+import "@toast-ui/editor/dist/toastui-editor.css";
 import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
diff --git a/src/common/component/MarkdownRender.tsx b/src/common/component/MarkdownRender.tsx
index a9bf1196..065598fd 100644
--- a/src/common/component/MarkdownRender.tsx
+++ b/src/common/component/MarkdownRender.tsx
@@ -1,10 +1,13 @@
 import { useRef, FC } from "react";
 import "prismjs/themes/prism.css";
-import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
+import { Viewer } from "@toast-ui/react-editor";
+import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
+import '@toast-ui/editor/dist/toastui-editor-viewer.css';
+// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
+// import '@toast-ui/editor/dist/toastui-editor.css';
+// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 //@ts-ignore
-import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
-import { Viewer } from "@toast-ui/react-editor";
 
 import { isDarkMode } from "../utils";
 import ImagePreview from "./ImagePreview";