fix(Mentions): style have issue when single line

yuntijs · Jul 31, 2024 · a5f85ea · a5f85ea
1 parent e8f9903
commit a5f85ea
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/Mentions/demos/SingleLine.tsx b/src/Mentions/demos/SingleLine.tsx
@@ -0,0 +1,33 @@
+import { Icon } from '@lobehub/ui';
+import { Mentions } from '@yuntijs/ui';
+import { Carrot, Cloud, Smile } from 'lucide-react';
+
+export default () => {
+  return (
+    <Mentions
+      autoSize={{
+        minRows: 1,
+      }}
+      defaultValue="👋，I'm {{1.zhang}}"
+      options={[
+        {
+          label: 'zhang',
+          value: '1.zhang',
+          icon: <Icon icon={Smile} />,
+        },
+        {
+          label: 'luobo',
+          value: '2.luobo',
+          icon: <Icon icon={Carrot} />,
+        },
+        {
+          label: 'yunti',
+          value: '3.yunti',
+          icon: <Icon icon={Cloud} />,
+        },
+      ]}
+      preTriggerChars=".*"
+      triggers={['@']}
+    />
+  );
+};
diff --git a/src/Mentions/index.md b/src/Mentions/index.md
@@ -31,6 +31,10 @@ export default () => {
 
 <code src="./demos/index.tsx" center></code>
 
+### Single line
+
+<code src="./demos/SingleLine.tsx" center></code>
+
 ### Playground
 
 <code src="./demos/Playground.tsx" center></code>

diff --git a/src/Mentions/style.ts b/src/Mentions/style.ts
@@ -2,8 +2,10 @@ import { createStyles } from 'antd-style';
 
 import { AutoSize } from './types';
 
+const inputHeight = 32;
+const lineHeight = 22;
 const calculateHeight = (rows: number) => {
-  return 32 + Math.max(rows - 1, 0) * 22;
+  return inputHeight + Math.max(rows - 1, 0) * lineHeight;
 };
 
 export const useStyles = createStyles(
@@ -20,9 +22,13 @@ export const useStyles = createStyles(
         user-select: none;
 
         position: absolute;
-        top: 4px;
-        left: 11px;
+        top: 0;
+        left: 13px;
 
+        height: ${inputHeight}px;
+
+        font-size: ${token.fontSize}px;
+        line-height: ${inputHeight}px;
         color: ${token.colorTextPlaceholder};
       `,
       root: css`
@@ -59,6 +65,7 @@ export const useStyles = createStyles(
         p {
           margin-bottom: 0;
           margin-block: 0 0;
+          line-height: ${lineHeight}px;
         }
       `,
       filled: css`