analyze this code and think on what can be wrong in distance calcultion and key press freedom through this caret trail effect in typings: ```
<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 {
      width: 100%;
      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.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>```