Merge pull request #7 from runjinz/type_a_request

Add auto-resizing functionality and Ctrl+Enter support to message input
This commit is contained in:
Rankin Zheng 2023-05-04 17:27:01 +08:00 committed by GitHub
commit 0988effe3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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');
@ -12,12 +28,18 @@ function initInputContainer() {
let commandList = [];
messageInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter' && !e.shiftKey) {
if (e.key === 'Enter') {
if (e.ctrlKey) {
e.preventDefault();
const message = messageInput.value.trim();
if (message !== '') {
sendButton.click();
}
} else if (!e.shiftKey) {
e.preventDefault();
messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end');
autoResizeTextarea();
}
}
});
@ -35,6 +57,7 @@ function initInputContainer() {
command: 'sendMessage',
text: message
});
autoResizeTextarea();
}
});