diff --git a/package.json b/package.json index 8861d15b..85dea702 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@toast-ui/editor": "^3.2.1", "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0", "@toast-ui/react-editor": "^3.2.2", - "@types/node": "^18.11.19", + "@types/node": "^18.13.0", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "@udecode/plate": "16.8", @@ -56,7 +56,7 @@ "react-i18next": "^12.1.5", "react-redux": "^8.0.5", "react-refresh": "0.14.0", - "react-router-dom": "^6.8.0", + "react-router-dom": "^6.8.1", "react-scripts": "^5.0.1", "react-syntax-highlighter": "^15.5.0", "react-textarea-autosize": "^8.4.0", @@ -120,8 +120,8 @@ "@types/masonry-layout": "^4.2.5", "@types/react-helmet": "^6.1.6", "@types/react-syntax-highlighter": "^15.5.6", - "@typescript-eslint/eslint-plugin": "^5.50.0", - "@typescript-eslint/parser": "^5.50.0", + "@typescript-eslint/eslint-plugin": "^5.51.0", + "@typescript-eslint/parser": "^5.51.0", "@welldone-software/why-did-you-render": "^7.0.1", "autoprefixer": "^10.4.13", "babel-loader": "^9.1.2", @@ -134,13 +134,13 @@ "eslint-plugin-react-hooks": "^4.6.0", "gh-pages": "^5.0.0", "husky": "^8.0.3", - "lint-staged": "^13.1.0", + "lint-staged": "^13.1.1", "md5-file": "^5.0.0", "patch-package": "^6.5.1", "postcss": "^8.4.21", "postcss-loader": "^7.0.2", "postinstall-postinstall": "^2.1.0", - "prettier": "^2.8.3", - "tailwindcss": "^3.2.4" + "prettier": "^2.8.4", + "tailwindcss": "^3.2.6" } } diff --git a/src/assets/icons/fullscreen.exit.svg b/src/assets/icons/fullscreen.exit.svg index 85648d48..1ed8a127 100644 --- a/src/assets/icons/fullscreen.exit.svg +++ b/src/assets/icons/fullscreen.exit.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/fullscreen.svg b/src/assets/icons/fullscreen.svg index 1e65263e..dcbbd063 100644 --- a/src/assets/icons/fullscreen.svg +++ b/src/assets/icons/fullscreen.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/markdown.svg b/src/assets/icons/markdown.svg index 0832a420..2d0b789f 100644 --- a/src/assets/icons/markdown.svg +++ b/src/assets/icons/markdown.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/index.css b/src/assets/index.css index 8b997ad0..8a701be4 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -47,7 +47,7 @@ padding: 16px 0; } .md-editor .toastui-editor [contenteditable="true"] { - padding: 0; + padding: 6px 0; } .md-editor .toastui-editor-md-preview { padding-top: 16px; @@ -239,9 +239,9 @@ html.dark ::-webkit-scrollbar-thumb { padding-right: 0; padding-left: 8px; } -[class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-splitter { +/* [class^="toastui-editor-"] .toastui-editor-md-container .toastui-editor-md-splitter { background-color: #d0d5dd; -} +} */ [class^="toastui-editor-"] .toastui-editor-md-container .ProseMirror { height: 100%; } @@ -251,7 +251,6 @@ html.dark ::-webkit-scrollbar-thumb { font-weight: 400; font-size: 14px; line-height: 22px; - color: #475467; margin: 0 0 16px; word-break: break-all; } @@ -275,7 +274,6 @@ html.dark ::-webkit-scrollbar-thumb { [class^="toastui-editor-"] ul > li:before { margin-top: 10px !important; margin-left: -14px; - background-color: #475467; } [class^="toastui-editor-"] ol li { display: flex; @@ -290,5 +288,7 @@ html.dark ::-webkit-scrollbar-thumb { font-weight: 400; font-size: 14px; line-height: 20px; - color: #475467; +} +.toastui-editor-dark .toastui-editor-md-container { + background-color: #4e5762 !important; } diff --git a/src/common/component/MarkdownEditor/index.tsx b/src/common/component/MarkdownEditor/index.tsx index 19f993de..1a4f1384 100644 --- a/src/common/component/MarkdownEditor/index.tsx +++ b/src/common/component/MarkdownEditor/index.tsx @@ -2,11 +2,13 @@ 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/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"; import useUploadFile from "../../hook/useUploadFile"; import Button from "../styled/Button"; +import { isDarkMode } from "../../utils"; type Props = { updateDraft?: (draft: string) => void; @@ -24,12 +26,13 @@ const MarkdownEditor: FC = ({ sendMarkdown, setEditorInstance }) => { - const editorRef = useRef(undefined); + const editorRef = useRef(); const { uploadFile } = useUploadFile(); // const [pHolder, setPHolder] = useState(placeholder); useEffect(() => { const editor = editorRef?.current; if (editor) { + const editorInstance = editor.getInstance(); editorInstance.removeHook("addImageBlobHook"); editorInstance.addHook("addImageBlobHook", async (blob, callback) => { @@ -73,6 +76,7 @@ const MarkdownEditor: FC = ({ height={height} initialEditType="markdown" useCommandShortcut={true} + theme={isDarkMode() ? "dark" : "light"} />
- +
); diff --git a/src/common/component/Send/Toolbar.tsx b/src/common/component/Send/Toolbar.tsx index 68292582..30433abc 100644 --- a/src/common/component/Send/Toolbar.tsx +++ b/src/common/component/Send/Toolbar.tsx @@ -48,22 +48,22 @@ const Toolbar: FC = ({
- + {isMarkdown && (fullscreen ? ( - + ) : ( - + ))}
{!isMarkdown &&
- +