Я создаю игру с набором текста и не могу понять, как сделать так, чтобы вкладка распознавалась как 4 пробела. ⇐ Html

[Anonymous]

Мои фрагменты в моей игре с набором текста представляют собой фрагменты кода, поэтому мне, очевидно, нужно использовать табуляцию, но у меня есть некоторая логика, которая отображает желтый блок для текущего символа, который я должен ввести, но когда я нажимаю Enter и пытаюсь нажать Tab, чтобы перейти к первому символу в новой строке, это просто сбивается.
И чтобы заставить средство проверки символов перейти к первому символу, мне нужно нажать пробел. Я добавил событие нажатия клавиши в текстовую область, чтобы предотвратить использование вкладки по умолчанию, но не могу понять больше.
Может быть, у кого-нибудь появится какая-нибудь идея? Я не уверен, какой код сюда поместить, потому что его будет так много, поэтому я просто спрашиваю гипотетически. Я ценю каждую мысль. Спасибо, ребята.
Кстати, я использую nextjs и tsx. Я не смог найти никакого полезного ответа.
Я попробовал это и предотвратил дефолт самостоятельно:
onKeyDown={(e: React.KeyboardEvent) => {
if (e.key === 'Tab') {
e.preventDefault();
const textarea = e.currentTarget;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

// 4 Spaces instead of Tab, PLEASE fix the bug
const newValue =
text.substring(0, start) + ' ' + text.substring(end);
setText(newValue);

requestAnimationFrame(() => {
textarea.selectionStart = textarea.selectionEnd = start + 4
})

}


Подробнее здесь: https://stackoverflow.com/questions/797 ... recognized