(incubator-answer) 01/01: refactor(editor): Update editor theme padding and cursor color

[ro...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

robin0716 pushed a commit to branch refactor/editor
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git

commit f89c6f2f922f3fbe051f5b50cc295ec4417202b9
Author: robin <ro...@rnode.me>
AuthorDate: Wed Jul 17 14:34:09 2024 +0800

    refactor(editor): Update editor theme padding and cursor color
---
 ui/src/components/Editor/utils/index.ts | 8 +++++++-
 ui/src/utils/common.ts                  | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/Editor/utils/index.ts b/ui/src/components/Editor/utils/index.ts
index d49da78c..0624418a 100644
--- a/ui/src/components/Editor/utils/index.ts
+++ b/ui/src/components/Editor/utils/index.ts
@@ -26,6 +26,7 @@ import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { languages } from '@codemirror/language-data';
 
 import { Editor } from '../types';
+import { isDarkTheme } from '@/utils/common';
 
 import createEditorUtils from './extension';
 
@@ -81,16 +82,18 @@ export const useEditor = ({
   const [editor, setEditor] = useState<Editor | null>(null);
   const [value, setValue] = useState<string>('');
   const init = async () => {
+    const isDark = isDarkTheme();
+
     const theme = EditorView.theme({
       '&': {
         height: '100%',
+        padding: '.375rem .75rem',
       },
       '&.cm-focused': {
         outline: 'none',
       },
       '.cm-content': {
         width: '100%',
-        padding: '1rem',
       },
       '.cm-line': {
         whiteSpace: 'pre-wrap',
@@ -100,6 +103,9 @@ export const useEditor = ({
       '.ͼ7, .ͼ6': {
         textDecoration: 'none',
       },
+      '.cm-cursor': {
+        'border-left-color': isDark ? 'white' : 'black',
+      },
     });
 
     const startState = EditorState.create({
diff --git a/ui/src/utils/common.ts b/ui/src/utils/common.ts
index 431e8f8c..996da7f6 100644
--- a/ui/src/utils/common.ts
+++ b/ui/src/utils/common.ts
@@ -287,6 +287,11 @@ function changeTheme(mode: 'default' | 'light' | 'dark' | 'system') {
   }
 }
 
+function isDarkTheme() {
+  const htmlTag = document.querySelector('html') as HTMLHtmlElement;
+  return htmlTag.getAttribute('data-bs-theme') === 'dark';
+}
+
 export {
   thousandthDivision,
   formatCount,
@@ -304,4 +309,5 @@ export {
   base64ToSvg,
   getUaType,
   changeTheme,
+  isDarkTheme,
 };