drops an error "TypeError: highlightedLine is null ", when trying to resize viewport.: ```<html>

<head>
  <style>
    html,
    body {
      background: radial-gradient(circle at center right, rgba(15, 10, 0, 0.9), rgba(25, 1, 5, 0.9));
      padding: 10px;
    }

    .container {
      display: grid;
      width: 100%;
      height: 100%;
      padding-top: 0px;
      place-items: center;
    }

    .textarea {
      width: 100%;
      height: auto;
      max-height: 50vh;
      font-family: 'Courier New', monospace;
      font-size: 18px;
      font-weight: bold;
      color: cyan;
      background: rgba(1, 1, 3, 0.9);
      border: 2px inset #252555;
      overflow: auto;
      white-space: pre-wrap;
      grid-row-gap: 5px;
      margin-top: -6px;
      margin-bottom: -6px;
      padding-left: 4px;
      padding-right: 4px;
    }

    .highlight-line {
      position: relative;
      height: 9px;
      background: linear-gradient(to right, rgba(155, 0, 0, 0.1), rgba(0, 0, 155, 0.2));
      animation: shot 2.5s forwards, blink 0.05s 0.1s infinite;
    }

    .highlight-line:before {
      padding: 5px;
      content: '█';
      color: white;
      position: absolute;
      left: 100%;
      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 0.5s backwards, blink 0.05s 0.1s infinite;
    }

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

      to {
        left: 100%;
        width: 100%;
      }
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class='container'>
    <div id='textarea' class='textarea' contenteditable='true'></div>
  </div>
  <script>
    const textarea = document.getElementById('textarea');
    let resizeTimeout;

function insertLine() {
const range = window.getSelection().getRangeAt(0);
const textNode = range.startContainer;
if (textNode.nodeType === 3) {
// Check if startContainer is a Text node
const currentPosition = range.startOffset;
const lineText = textNode.textContent.trim().slice(currentPosition);
const highlightedLine = document.createElement('span');
highlightedLine.classList.add('highlight-line');
highlightedLine.textContent = '█';
range.deleteContents();
const lineBreak = document.createElement('br');
const newLine = document.createElement('span');
newLine.appendChild(lineBreak);
newLine.appendChild(highlightedLine);
const nextNode = currentPosition > 0 ? textNode.splitText(currentPosition) : textNode;
nextNode.parentNode.insertBefore(newLine, nextNode);
range.deleteContents();
range.insertNode(highlightedLine);
range.collapse();
updateTimeout();
}
}

    function updateTimeout() {
      clearTimeout(resizeTimeout);
      resizeTimeout = setTimeout(() => {
        const container = document.querySelector('.container');
        const containerWidth = container.offsetWidth;
        const highlightedLine = document.querySelector('.highlight-line');
        const caretPosition = highlightedLine.offsetLeft + highlightedLine.offsetWidth;
        const emptySpace = containerWidth - caretPosition;
        const timeoutDuration = emptySpace * 1; // Adjust the multiplier to control the timeout duration
        setTimeout(() => {
          highlightedLine.remove();
        }, timeoutDuration);
      }, 200);
    }

    function handleKeyPress(event) {
      const range = window.getSelection().getRangeAt(0);
      if (!range.collapsed && range.toString().trim().length > 0) {}
      if (event.key === 'Enter' || event.key === 'Return') {
        event.preventDefault();
        const lineBreak = document.createElement('br');
        insertLine();
        range.deleteContents();
        range.insertNode(lineBreak);
        range.collapse(false);
      }
    }
    textarea.addEventListener('keydown', handleKeyPress);
    window.addEventListener('resize', updateTimeout);
  </script>
</body>

</html>```