From 601bc54fe44f129c8a6ffb6b43330ea65ca7f53f Mon Sep 17 00:00:00 2001 From: Blinko Date: Sat, 23 Nov 2024 14:20:17 +0800 Subject: [PATCH] fix: ui issue #158 #157 --- src/components/Common/Editor/index.tsx | 2 +- src/components/Common/MarkdownRender.tsx | 39 +++- src/pages/_app.tsx | 4 - src/styles/editor.css | 218 +++++++++++------------ src/styles/github-markdown.css | 2 - src/styles/globals.css | 19 ++ 6 files changed, 157 insertions(+), 127 deletions(-) diff --git a/src/components/Common/Editor/index.tsx b/src/components/Common/Editor/index.tsx index 80c55b6..953c0dd 100644 --- a/src/components/Common/Editor/index.tsx +++ b/src/components/Common/Editor/index.tsx @@ -1,4 +1,5 @@ import '@mdxeditor/editor/style.css'; +import '@/styles/editor.css'; import { RootStore } from '@/store'; import { PromiseState } from '@/store/standard/PromiseState'; import { ButtonWithTooltip, ChangeCodeMirrorLanguage, ConditionalContents, InsertCodeBlock, InsertSandpack, InsertImage, InsertTable, ListsToggle, MDXEditorMethods, SandpackConfig, sandpackPlugin, Select, ShowSandpackInfo, SingleChoiceToggleGroup, toolbarPlugin, UndoRedo, type CodeBlockEditorDescriptor } from '@mdxeditor/editor'; @@ -348,7 +349,6 @@ const Editor = observer(({ content, onChange, onSend, isSendLoading, bottomSlot, autoFocus={{ defaultSelection: 'rootEnd' }} - markdown={content} plugins={[ toolbarPlugin({ diff --git a/src/components/Common/MarkdownRender.tsx b/src/components/Common/MarkdownRender.tsx index 221952b..11d2aa5 100644 --- a/src/components/Common/MarkdownRender.tsx +++ b/src/components/Common/MarkdownRender.tsx @@ -4,12 +4,12 @@ import React, { useEffect, useRef, useState } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' -import { oneDark, oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism' +import { vscDarkPlus, oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism' import { observer } from 'mobx-react-lite'; import { useTranslation } from 'react-i18next'; import { api } from '@/lib/trpc'; import { LinkInfo } from '@/server/types'; -import { Card, Image } from '@nextui-org/react'; +import { Card, Image, Button } from '@nextui-org/react'; import { RootStore } from '@/store'; import { StorageState } from '@/store/standard/StorageState'; import { Icon } from '@iconify/react'; @@ -20,6 +20,7 @@ import rehypeKatex from 'rehype-katex' import 'katex/dist/katex.min.css' import Link from 'next/link'; import { BlinkoStore } from '@/store/blinkoStore'; +import { Copy } from './Copy'; const highlightTags = (text) => { if (!text) return text @@ -46,14 +47,34 @@ const highlightTags = (text) => { const Code = ({ className, children, ...props }) => { const { theme } = useTheme() const match = /language-(\w+)/.exec(className || ''); + + const handleCopy = () => { + const code = String(children).replace(/\n$/, ''); + navigator.clipboard.writeText(code); + }; + return match ? ( - +
+ + +
) : ( {children} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 75a4ca8..faca32e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,5 @@ import '../styles/globals.css'; import '../styles/nprogress.css'; -import '../styles/editor.css'; import '../styles/github-markdown.css'; import "swagger-ui-react/swagger-ui.css"; import 'react-photo-view/dist/react-photo-view.css'; @@ -16,9 +15,6 @@ import { initStore } from '@/store/init'; import { Inspector, InspectParams } from 'react-dev-inspector'; import { CommonLayout } from '@/components/Layout'; import { AppProvider } from '@/store/module/AppProvider'; -import TagSelectPop from '@/components/Common/PopoverFloat/tagSelectPop'; -import AiWritePop from '@/components/Common/PopoverFloat/aiWritePop'; - const MyApp = ({ Component, pageProps }) => { initStore(); useProgressBar(); diff --git a/src/styles/editor.css b/src/styles/editor.css index 7b0ce3d..3c3b426 100644 --- a/src/styles/editor.css +++ b/src/styles/editor.css @@ -1,27 +1,27 @@ .ͼo { - background-color: transparent !important; + background-color: transparent; } .ͼ1 .cm-scroller { - font-family: system-ui !important; + font-family: system-ui; } .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: #0969da !important; + color: #0969da; } ._linkDialogPopoverContent_uazmk_600, ._tableColumnEditorPopoverContent_uazmk_601, ._dialogContent_uazmk_602 { - background-color: var(--background) !important; + background-color: var(--background); } ._contentEditable_uazmk_379 { max-height: 80vh; overflow-y: scroll; - color: var(--foreground) !important; - padding: 0 !important; - padding-left: 7px !important; + color: var(--foreground); + padding: 0; + padding-left: 7px; } .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)), @@ -30,11 +30,11 @@ .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h6):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: var(--foreground) !important; + color: var(--foreground); } .prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: var(--foreground) !important; + color: var(--foreground); } .ͼ1x { @@ -43,31 +43,54 @@ height: 100%; } +._codeMirrorToolbar_uazmk_408 { + background-color: transparent; +} + +._codeMirrorWrapper_uazmk_391 { + border-color: var(--hover); +} +._selectWithLabel_uazmk_1002 label { + display: none; +} + +.ͼo { + color: var(--foreground); +} + +.ͼo .cm-activeLineGutter { + background-color: var(--sencondbackground); +} +div[id^="radix-"][role="dialog"] { + display: flex; + flex-direction: column; + padding-top: 10px; +} ._dialogContent_uazmk_602 { - border-radius: 16px !important; + border-radius: 16px; filter: unset; } ._imageWrapper_uazmk_922 img { - border-radius: 16px !important; + border-radius: 16px; } ._imageResizer_uazmk_1027 { - border-radius: 2px !important; - background-color: var(--desc) !important; + border-radius: 2px; + background-color: var(--desc); } ._editImageToolbar_uazmk_935 { - background-color: transparent !important; + background-color: transparent; } ._primaryButton_uazmk_506, ._secondaryButton_uazmk_507 { - background-color: var(--primary) !important; - color: var(--primary-foreground) !important; - border-radius: 12px !important; + background-color: var(--primary); + color: var(--primary-foreground); + border-radius: 12px; cursor: pointer; } @@ -77,148 +100,141 @@ display: none; } */ #radix-\:r1dv\: { - display: flex !important; - flex-direction: column !important; - gap: 10px !important; + display: flex; + flex-direction: column; + gap: 10px; } ._textInput_uazmk_1186 { - border: none !important; - background-color: var(--sencondbackground) !important; - border-radius: 12px !important; + border: none; + background-color: var(--sencondbackground); + border-radius: 12px; } #radix-\:rc2\: { - background-color: var(--background) !important; - color: var(--foreground) !important; + background-color: var(--background); + color: var(--foreground); } #radix-\:rm\: { - display: flex !important; - flex-direction: column !important; - padding: 10px !important; + display: flex; + flex-direction: column; + padding: 10px; } ._selectItem_uazmk_300 { - background-color: var(--background) !important; - color: var(--foreground) !important; + background-color: var(--background); + color: var(--foreground); cursor: pointer; transition: all 0.2s ease-in-out; - /* height: 30px !important;00 */ - padding-top: 2px !important; - padding-bottom: 2px !important; - padding-left: 10px !important; - padding-right: 10px !important; + /* height: 30px ;00 */ + padding-top: 2px; + padding-bottom: 2px; + padding-left: 10px; + padding-right: 10px; } -.ͼo .cm-activeLineGutter { - background-color: #7a1cac !important; - color: white !important; -} - ._code_1tncs_52 { - background-color: var(--background) !important; - color: var(--foreground) !important; + background-color: var(--background); + color: var(--foreground); } #cm-ac-czkr li { - background-color: var(--background) !important; - color: var(--foreground) !important; + background-color: var(--background); + color: var(--foreground); } #cm-ac-czkr li[aria-selected="true"] { - background-color: var(--foreground) !important; - color: var(--background) !important; + background-color: var(--foreground); + color: var(--background); } ._selectItem_uazmk_300:hover { - background-color: var(--sencondbackground) !important; + background-color: var(--sencondbackground); transition: all 0.2s ease-in-out; } #radix-\:r4q\: { - color: var(--foreground) !important; - display: block !important; + color: var(--foreground); + display: block; } /* ._codeMirrorToolbar_uazmk_408 { - background-color: transparent !important; + background-color: transparent ; } */ ._toolbarNodeKindSelectTrigger_uazmk_305, ._toolbarButtonSelectTrigger_uazmk_306, ._selectTrigger_uazmk_307 { - background-color: var(--background) !important; - color: var(--foreground) !important; + background-color: var(--background); + color: var(--foreground); } @media (hover: hover) { ._toolbarToggleItem_uazmk_206:hover, ._toolbarButton_uazmk_237:hover { - background-color: var(--sencondbackground) !important; + background-color: var(--sencondbackground); } } .mdxeditor-toolbar { - background-color: transparent !important; - padding: 0 !important; + background-color: transparent; + padding: 0; } .mdxeditor-toolbar svg { - width: 20px !important; - height: 20px !important; + width: 20px; + height: 20px; cursor: pointer; - color: var(--foreground) !important; + color: var(--foreground); } .mdxeditor-toolbar .blinko { - color: #EAB308 !important; + color: #EAB308; } .mdxeditor-toolbar .note { - color: #3B82F6 !important; + color: #3B82F6; } .mdxeditor-toolbar .white { - color: white !important; + color: white; } .mdxeditor-toolbar .green { - color: var(--green-500) !important; + color: var(--green-500); } .mdxeditor-toolbar .red { - color: var(--red-500) !important; + color: var(--red-500); } ._toolbarToggleItem_uazmk_206[data-state=on], ._toolbarButton_uazmk_237[data-state=on], ._toolbarToggleItem_uazmk_206:active, ._toolbarButton_uazmk_237:active { - background-color: var(--sencondbackground) !important; + background-color: var(--sencondbackground); } - - .mdxeditor-toolbar .custom-svg { - width: 18px !important; - height: 18px !important; + width: 18px; + height: 18px; cursor: pointer; } .mdxeditor-root-contenteditable>div:first-of-type { - padding: 0 !important; - padding-left: 7px !important; - padding-right: 5px !important; + padding: 0; + padding-left: 7px; + padding-right: 5px; } ._popupContainer_uazmk_1220 { position: relative; - z-index: 99 !important; + z-index: 99; } .mdxeditor { @@ -228,7 +244,7 @@ } .prose { - max-width: 100% !important; + max-width: 100%; } .prose li[role=checkbox] { @@ -249,73 +265,53 @@ } .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - color: var(--foreground) !important; + color: var(--foreground); } .blinko-toolbaricon { - color: rgb(234 179 8 / var(--tw-text-opacity)) !important; + color: rgb(234 179 8 / var(--tw-text-opacity)); } .note-toolbaricon { - color: rgb(59 130 246 / var(--tw-text-opacity)) !important; -} - -.contextmenu { - padding: 2px !important; - padding-top: 6px !important; - padding-bottom: 6px !important; - box-shadow: var(--shadow) !important; - border-radius: 17px !important; - border: 2px solid var(--desc); - background-color: var(--background) !important; -} - -.contextmenu .contextmenu__item { - border-radius: 12px !important; - margin-left: 3px !important; - margin-right: 3px !important; -} - -.contextmenu .contextmenu__item:hover { - background-color: var(--sencondbackground) !important; + color: rgb(59 130 246 / var(--tw-text-opacity)); } .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; - padding-inline-start: 15px !important; - margin-bottom: 0 !important; - margin-top: 0 !important; + padding-inline-start: 15px; + margin-bottom: 0; + margin-top: 0; } .prose :where(ol):not(:where([class~=not-prose], [class~=not-prose] *)) { - list-style-type: auto !important; - padding-inline-start: 15px !important; - margin-bottom: 0 !important; - margin-top: 0 !important; + list-style-type: auto; + padding-inline-start: 15px; + margin-bottom: 0; + margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - margin-top: 0 !important; + margin-top: 0; } .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - margin-top: 1px !important; - margin-bottom: 1px !important; + margin-top: 1px; + margin-bottom: 1px; } .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { - padding-inline-start: 0 !important; + padding-inline-start: 0; } .prose ul>li { - margin: 0 !important; + margin: 0; } .prose ol>li { - margin: 0 !important; + margin: 0; } .audio-recorder { - box-shadow: none !important; - background-color: transparent !important; + box-shadow: none; + background-color: transparent; } \ No newline at end of file diff --git a/src/styles/github-markdown.css b/src/styles/github-markdown.css index 447a6ea..7a2f5e7 100644 --- a/src/styles/github-markdown.css +++ b/src/styles/github-markdown.css @@ -12,8 +12,6 @@ -webkit-line-clamp: unset; } - - .markdown-body { --base-size-4: 0.25rem; --base-size-8: 0.5rem; diff --git a/src/styles/globals.css b/src/styles/globals.css index acea230..efa4ab0 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -85,6 +85,25 @@ body { text-decoration: none!important; } +.contextmenu { + padding: 2px!important;; + padding-top: 6px!important;; + padding-bottom: 6px!important;; + box-shadow: var(--shadow)!important;; + border-radius: 17px!important;; + border: 2px solid var(--desc)!important;; + background-color: var(--background)!important; +} + +.contextmenu .contextmenu__item { + border-radius: 12px; + margin-left: 3px; + margin-right: 3px; +} + +.contextmenu .contextmenu__item:hover { + background-color: var(--sencondbackground)!important; +} #__next { display: flex;