💄 style: Fix CodeEditor

lobehub · Jan 5, 2025 · 90569fc · 90569fc
1 parent 8638c5b
commit 90569fc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/CodeEditor/index.tsx b/src/CodeEditor/index.tsx
@@ -18,6 +18,7 @@ export interface CodeEditorProps {
   autoFocus?: boolean;
   className?: string;
   disabled?: boolean;
+  fontSize?: number | string;
   form?: string;
   ignoreTabKey?: boolean;
   insertSpaces?: boolean;
@@ -55,11 +56,12 @@ const CodeEditor = forwardRef<TextAreaRef, CodeEditorProps>(
       className,
       textareaClassName,
       type = 'ghost',
+      fontSize = 12,
       ...rest
     },
     ref,
   ) => {
-    const { styles, cx } = useStyles({ resize, type });
+    const { styles, cx } = useStyles({ fontSize, resize, type });
     return (
       <div className={cx(styles.container, className)} style={style}>
         {/* @ts-ignore */}

diff --git a/src/CodeEditor/style.ts b/src/CodeEditor/style.ts
@@ -1,7 +1,16 @@
 import { createStyles } from 'antd-style';
+import { isNumber } from 'lodash-es';
 
 export const useStyles = createStyles(
-  ({ cx, css, token }, { type, resize }: { resize: boolean; type: 'ghost' | 'block' | 'pure' }) => {
+  (
+    { cx, css, token },
+    {
+      type,
+      resize,
+      fontSize,
+    }: { fontSize: string | number; resize: boolean; type: 'ghost' | 'block' | 'pure' },
+  ) => {
+    const size = isNumber(fontSize) ? `${fontSize}px` : fontSize;
     const typeStylish = css`
       padding-block: 8px;
       padding-inline: 12px;
@@ -28,6 +37,11 @@ export const useStyles = createStyles(
           overflow: hidden auto;
           width: 100%;
           height: fit-content;
+
+          * {
+            font-size: ${size} !important;
+            line-height: 1.5 !important;
+          }
         `,
       ),
       editor: css`