JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Tab-Mode: <span id="tabmode" data-tabmode="i">Insert</span>
<button type="button" id="addTab">|--></button>
</div>
<textarea>
  
</textarea>
<br>
<label for="dummy">Dummy-Eingabefeld:</label>
<input type="text">

CSS

textarea {
  width: 40em;
  height: 10em;
  border: 2px solid red;
  border-color: green;
}

JavaScript

const txa = document.querySelector("textarea");
const tabMode = document.querySelector("#tabmode");
const tabButton = document.querySelector("#addTab");

txa.addEventListener("keydown", function(e) {
console.log(e.key);
	if (e.key == "Tab") {
  	if (tabmode.dataset.tabmode != "i") return;
  	
    e.preventDefault();
    console.log("Cursor at ", txa.selectionStart, txa.selectionEnd);
		setTabInTextArea();
    return;
  }
  if (e.key == "Escape") {
  	tabMode.dataset.tabmode = tabMode.dataset.tabmode == "i" ? "s" : "i";
		tabMode.textContent = tabMode.dataset.tabmode == "i" ? "Insert" : "Change Focus";
  }
});

tabButton.addEventListener("click", function(e) {
	console.log("Selection at ", txa.selectionStart, txa.selectionEnd);
	setTabInTextArea();
  txa.focus();
});

function setTabInTextArea() {
  txa.setRangeText("\t", txa.selectionStart, txa.selectionEnd);
	txa.selectionStart = txa.selectionStart+1;
	txa.selectionEnd = txa.selectionStart;
}