((the caret getting stuck at most-right of container width issue when pressing the space key endlessly, the Enter/Return key not switching to a new line, most probably because need to set specific keycodes for keys, not just some "enter/return" which browser don't understands how to interpret.)). what if we use a grid overall method to align and wrap all things and effects normally and correctly? any ideas? maybe we can use overall grid template calculations inside javscript to handkle all effect for caret triling effect after space press or enter. we can replace all these index calculations functions in javascript to purely handle every typing by in-grid templates. how about that? try replacing all these range calculations and else by in-grid stylings. remodify entire code and make similar but based on gridual functionality completely. just create a completely new code based on in-gridual remodulations. no, just do an absolutely new code on per in-gridual remodulative inergraduations. as an example for you:```<html>
<head> <style> html, body { background: radial-gradient(circle at center right, rgba(15,10,0,0.9), rgba(25,1,5,0.9)); }


.textarea {
  display:grid;
  width: 100vw;
  height: auto;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-WEIGHT: BOLD;
  color: CYAN;
  background: rgba(1,1,3,0.9);
  border: 6px solid #252555;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.highlight-line {
  position: relative;
  top:5px;
  width: 100%;
  height: 9px;
  display: inline-block;
        background: linear-gradient(to right, rgba(155,0,0,0.1), rgba(0,0,155,0.2));
  animation: shot 2.5s  forwards, blink .05s .1s infinite;
}

span {
  content: '';
  color: white;
  width: 100%;
}

.highlight-line:before {
  content: '█';
  color: white;
  position: absolute;
  left: 99%;
  top:0;
  width: 0;
  height: 100%;
  background: linear-gradient(to right, rgba(155,200,55,0.2), rgba(155,0,0,0.1));
  pointer-events: none;
  animation: shot .5s  backwards, blink .05s .1s infinite;
}

@keyframes shot {
  from {
    left: 0;
    width: 99%;
  }

  to {
    right: 0;
    width: 0;
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

</style> </head> <body> <div id='container' class='textarea' contenteditable='true'></div> <script> const container = document.getElementById('container'); let previousContent = container.innerHTML; let wordEndPosition = 1;


function getPosition(node) {
  const range = window.getSelection().getRangeAt(0).cloneRange();
  range.selectNodeContents(node);
  range.setEnd(range.startContainer, range.startOffset);
  return range.toString().length;
}

function insertLine() {
  const range = window.getSelection().getRangeAt(0);
  if (range.startContainer.nodeType === 3) {
    const textNode = range.startContainer;
    const currentPosition = range.startOffset;
    const lineText = textNode.textContent.slice(wordEndPosition);
    if (!lineText.trim().length) return;
    const remainingSpace = container.clientWidth - range.getBoundingClientRect().left;
    const highlightedLine = document.createElement('span');
    highlightedLine.classList.add('highlight-line');
    highlightedLine.textContent = '█';
    highlightedLine.style.maxWidth = remainingSpace + 'px';
    highlightedLine.style.textAlign = 'left';
    const gradientLine = document.createElement('span');
    gradientLine.style.width = container.clientWidth + 'px';

    highlightedLine.appendChild(gradientLine);
    range.deleteContents();
    range.insertNode(highlightedLine);
    range.collapse();
    setTimeout(() => {
      highlightedLine.remove();
    }, 200);
  }
}

function handleKeyPress(event) {
  if (event.key === 'Enter' || event.key === 'Return') {
    event.preventDefault();
    insertLine();
    return;
  }
  if (event.key === ' ') {
    const range = window.getSelection().getRangeAt(0);
    wordEndPosition = getPosition(range.startContainer) + range.startOffset - 1;
  }
}

function handleKeyUp(event) {
  if (['Enter', ' ', ',', '.'].includes(event.key)) {
    event.preventDefault();
    if (previousContent !== container.innerHTML) {
      insertLine();
    }
  }
}
container.addEventListener('keydown', handleKeyPress);
container.addEventListener('keyup', handleKeyUp);

</script> </body> </html>```