fix that part without backticks in template literals, because chat ui cannot handle backticks here.: highlightedLine.style.animationDuration = $`{timeoutDuration}`ms; animationTimeout = setTimeout(onAnimationEnd, timeoutDuration); } }, 0.1); }

Certainly! Here’s the updated code without backticks in template literals:

highlightedLine.style.animationDuration = timeoutDuration + ‘ms’;
animationTimeout = setTimeout(onAnimationEnd, timeoutDuration);

Make sure to replace those two lines in your existing code with the updated version.

no, something crazy wrong here. the more rapidly you type and press enters, the more it adds overall timeouts and eventually permanently stucking multiple blocks at the most-right of length-end.

Apologies for the confusion. To address the issue where multiple blocks get permanently stuck at the most-right end when rapidly typing and pressing enter keys, you can modify the updateTimeout function to clear any existing animation timeouts before setting a new one. Here’s the updated version:

function updateTimeout() {
clearTimeout(resizeTimeout);
clearTimeout(animationTimeout);
resizeTimeout = setTimeout(() => {
const highlightedLine = document.querySelector(‘.highlight-line’);
if (highlightedLine !== null) {
const container = document.querySelector(‘.container’);
const emptySpace = container.offsetWidth - highlightedLine.offsetLeft - highlightedLine.offsetWidth;
const timeoutDuration = emptySpace * 3;
highlightedLine.style.animationDuration = timeoutDuration + ‘ms’;
animationTimeout = setTimeout(onAnimationEnd, timeoutDuration);
}
}, 0.1);
}

With this modification, any existing animation timeouts will be cleared before setting a new one. This ensures that the animation duration is correctly calculated based on the current empty space without accumulating extra timeouts.
Please give this updated code a try and let me know if it resolves the issue.

also, need to do that for in actual viewport size updating, because it has the same stucking behaviour.

Apologies for the oversight. To prevent the stucking behavior when updating the viewport size, you can modify the updateTimeout function to clear the animation timeout when the viewport size changes. Here’s the updated version:

function updateTimeout() {
clearTimeout(resizeTimeout);
clearTimeout(animationTimeout);
resizeTimeout = setTimeout(() => {
const highlightedLine = document.querySelector(‘.highlight-line’);
if (highlightedLine !== null) {
const container = document.querySelector(‘.container’);
const emptySpace = container.offsetWidth - highlightedLine.offsetLeft - highlightedLine.offsetWidth;
const timeoutDuration = emptySpace * 3;
highlightedLine.style.animationDuration = timeoutDuration + ‘ms’;
animationTimeout = setTimeout(onAnimationEnd, timeoutDuration);
}
}, 0.1);
clearTimeout(animationTimeout);
}

In this updated code, the clearTimeout(animationTimeout) line is added at the end of the updateTimeout function to clear the animation timeout when the function is called due to a viewport size change.
This ensures that any existing animation timeouts are cleared before setting a new one, preventing the stucking behavior.
Please give this modified code a try, and let me know if it resolves the issue when updating the viewport size.

again, something crazy wrong here. it adds some empty space bellow in textarea and don't actually solves that block stucking issue. rethink overall concept and return with a solution.

Apologies for the continued issues. To address the block sticking issue and prevent the unexpected behavior, we’ll need to introduce some changes to the code. Here’s the updated code:

const textarea = document.getElementById(‘textarea’);
let resizeTimeout;
let animationTimeout;
function insertLine() {
const range = window.getSelection().getRangeAt(0);
const textNode = range.startContainer;
if (textNode.nodeType === 3) {
const currentPosition = range.startOffset;
const lineText = textNode.textContent.trim().slice(currentPosition);
const highlightedLine = document.createElement(‘span’);
highlightedLine.classList.add(‘highlight-line’);
highlightedLine.textContent = ‘█’;
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.nextSibling);
range.deleteContents();
range.insertNode(lineBreak);
range.collapse(nextNode);
range.setStart(nextNode, 0);
updateTimeout();
}
}
function updateTimeout() {
clearTimeout(resizeTimeout);
clearTimeout(animationTimeout);
resizeTimeout = setTimeout(() => {
const highlightedLine = document.querySelector(‘.highlight-line’);
if (highlightedLine !== null) {
const container = document.querySelector(‘.container’);
const emptySpace = container.offsetWidth - highlightedLine.offsetLeft - highlightedLine.offsetWidth;
const timeoutDuration = emptySpace * 3;
highlightedLine.style.animationDuration = timeoutDuration + ‘ms’;
animationTimeout = setTimeout(onAnimationEnd, timeoutDuration);
}
}, 0.1);
}
function onAnimationEnd() {
const highlightedLine = document.querySelector(‘.highlight-line’);
highlightedLine.outerHTML = highlightedLine.innerHTML;
clearTimeout(animationTimeout);
}
function handleKeyPress(event) {
if (event.key === ‘Enter’ || event.key === ‘Return’) {
event.preventDefault();
const lineBreak = document.createElement(‘br’);
insertLine();
const range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(lineBreak);
range.collapse(false);
}
}
textarea.addEventListener(‘keydown’, handleKeyPress);
window.addEventListener(‘resize’, updateTimeout);

In this updated code, we’ve made the following changes:

    In the insertLine function, we modified the logic for creating the new line element to ensure that the highlighted line is placed at the correct position without adding extra space below the textarea.
    In the onAnimationEnd function, we added the outerHTML = highlightedLine.innerHTML line to remove the parent span element containing the empty space below the highlighted line. This helps prevent the block sticking issue and ensures that the textarea remains properly aligned.
    Please try this updated code and let me know if it resolves the block sticking issue and prevents the unexpected behavior.

maybe problem that we don't request an animation frame in time while rapidly typing? because when you resize viewport, it updates normally content inside textarea.

You’re correct, requesting an animation frame can help address the issue when rapidly typing. By using requestAnimationFrame, we can ensure that the updates to the textarea content happen at the appropriate time. Here’s an updated version of the code:

const textarea = document.getElementById(‘textarea’);
let resizeTimeout;
let animationTimeout;
function insertLine() {
const range = window.getSelection().getRangeAt(0);
const textNode = range.startContainer;
if (textNode.nodeType === 3) {
const currentPosition = range.startOffset;
const lineText = textNode.textContent.trim().slice(currentPosition);
const highlightedLine = document.createElement(‘span’);
highlightedLine.classList.add(‘highlight-line’);
highlightedLine.textContent = ‘█’;
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.nextSibling);
range.deleteContents();
range.insertNode(lineBreak);
range.collapse(nextNode);
range.setStart(nextNode, 0);
updateTimeout();
}
}
function updateTimeout() {
cancelAnimationFrame(animationTimeout);
animationTimeout = requestAnimationFrame(onAnimationEnd);
}
function onAnimationEnd() {
const highlightedLine = document.querySelector(‘.highlight-line’);
highlightedLine.outerHTML = highlightedLine.innerHTML;
cancelAnimationFrame(animationTimeout);
}
function handleKeyPress(event) {
if (event.key === ‘Enter’ || event.key === ‘Return’) {
event.preventDefault();
const lineBreak = document.createElement(‘br’);
insertLine();
const range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(lineBreak);
range.collapse(false);
}
}
textarea.addEventListener(‘keydown’, handleKeyPress);
window.addEventListener(‘resize’, updateTimeout);

In this updated code, instead of using a fixed timeout, we use requestAnimationFrame to trigger the removal of the highlighted line. This ensures that the animation frame is requested at the appropriate time, even when typing rapidly.
By canceling the animation frame using cancelAnimationFrame before requesting a new one, we prevent the accumulation of excessive animation frames.
Please give this updated code a try and let me know if it resolves the block sticking issue when rapidly typing and resizing the viewport.

but now that caret block animation is invisible and got an error in viewport resize: Uncaught TypeError: highlightedLine is null