ishangsf/DeepCodeGeniusWeb-vscode
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add auto-resizing functionality to message input

Browse Source 
This commit adds the ability for the message input to automatically resize based on the number of lines of text entered. The input container will also resize accordingly. The function `autoResizeTextarea()` is called on input and sets the height of the message input and input container based on the number of lines of text entered. The default height is set to 16.
This commit is contained in:
Rankin Zheng 2023-05-03 22:42:18 +08:00
parent 0445ae7931
commit cad699681b
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
media/inputContainer.js
View File

@ -1,4 +1,20 @@
const messageInput = document.getElementById('message-input');
const inputContainer = document.getElementById('input-container');
const defaultHeight = 16;
function autoResizeTextarea() {
const lineCount = (messageInput.value.match(/\n/g) || []).length + 1;
messageInput.style.height = 'auto';
messageInput.style.height = (lineCount <= 1 ? defaultHeight : messageInput.scrollHeight) + 'px';
inputContainer.style.height = 'auto';
inputContainer.style.height = messageInput.style.height + 25;
}
messageInput.addEventListener('input', autoResizeTextarea);
autoResizeTextarea();
function initInputContainer() {
const messageInput = document.getElementById('message-input');
@ -15,6 +31,7 @@ function initInputContainer() {
} else if (!e.shiftKey) {
e.preventDefault();
messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end');
autoResizeTextarea();
}
}
});
@ -33,6 +50,7 @@ function initInputContainer() {
command: 'sendMessage',
text: message
});
autoResizeTextarea();
}
});