Автосайз textarea

На этом блоге я пишу текст в обычном textarea, безо всяких визивигов. Это осознанный выбор. Markdown наше все. Но все же писать в просто textarea не столь удобно. Хочется автосайз и несколько шорткатов: чтобы CTRL+D и Tab работали как в обычных текстовых редакторах. Сейчас про автосайз. Самое первое нагугленое решение такое

function autosize(e) {
	e.target.style.height = '1px';
	e.target.style.height = e.target.scrollHeight + 'px';
}

function AutosizeTextArea() {
	return <textarea style={{overflowY: 'hidden'}} onInput={autosize}/>;
}
Copy

Если вы его запустите, то будете довольны. Работает превосходно.

До поры до времени. Все дело в этом 1px. Когда текст будет большой, то при уменьшении размера до 1-го пиксела, будет и изменен скрол страницы. При восстановлении размера, будет скрол обратно. Это раздражает.

Кажется тут пригодиться старая добрая техника запоминания скрола.

function autosize(e) {
	const scrollTop = window.scrollY;
	e.target.style.height = '1px';
	e.target.style.height = e.target.scrollHeight + 'px';
	window.scrollTo({ top: scrollTop });
}
Copy

Все работает прекрасно, но есть нюанс =)

Если у вас включено.

html {
	scroll-behavior: smooth;
}
Copy

А скорее всего оно у вас включено, то скролл вы все же увидите. Поэтому нужно эту штуку выключать, а потом включать:

function autosize(e) {
	document.documentElement.style.scrollBehavior = 'auto';
	const scrollTop = window.scrollY;
	e.target.style.height = '1px';
	e.target.style.height = e.target.scrollHeight + 'px';
	window.scrollTo({ top: scrollTop });
	document.documentElement.style.scrollBehavior = 'smooth';
}
Copy

Все работает превосходно. Как микро оптимизацию, я бы рекомендовал обернуть функцию в тротлер

const autosize = throttle((e) => {
	document.documentElement.style.scrollBehavior = 'auto';
	const scrollTop = window.scrollY;
	e.target.style.height = '1px';
	e.target.style.height = e.target.scrollHeight + 'px';
	window.scrollTo({ top: scrollTop });
	document.documentElement.style.scrollBehavior = 'smooth';
}, 100);
Copy

Вот и все. Всем добра!