refactor(editor): Update editor theme padding and cursor color

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({

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,
 };