feat: add multi line support for chatbox

msgbyte · May 16, 2023 · 7b17614 · 7b17614
1 parent 2d01f7c
commit 7b17614
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/client/web/src/components/ChatBox/ChatInputBox/input.less b/client/web/src/components/ChatBox/ChatInputBox/input.less
@@ -1,5 +1,5 @@
 .chatbox-mention-input {
-  @apply shadow-none border-0 px-4 py-2;
+  @apply shadow-none border-0 px-4 py-2 relative;
 
   &__control {
     @apply relative;

diff --git a/client/web/src/components/ChatBox/ChatInputBox/input.tsx b/client/web/src/components/ChatBox/ChatInputBox/input.tsx
@@ -8,6 +8,18 @@ import { useChatInputMentionsContext } from './context';
 import { MentionCommandItem } from './MentionCommandItem';
 import './input.less';
 
+const defaultChatInputBoxInputStyle = {
+  input: {
+    overflow: 'auto',
+    maxHeight: 70,
+  },
+  highlighter: {
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    maxHeight: 70,
+  },
+};
+
 interface ChatInputBoxInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
@@ -28,7 +40,7 @@ export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
         className="chatbox-mention-input"
         placeholder={placeholder ?? t('输入一些什么')}
         disabled={disabled}
-        singleLine={true}
+        style={defaultChatInputBoxInputStyle}
         maxLength={1000}
         value={props.value}
         onChange={(e, newValue, _, mentions) =>