diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss index 7c04553d5a6a..1dab38ddaee2 100644 --- a/frontend/src/styles/test.scss +++ b/frontend/src/styles/test.scss @@ -242,7 +242,7 @@ } &.tabChar, &.nlChar { - margin: 0 0.25rem; + // margin: 0 0.25rem; opacity: 0.2; i { line-height: 0; diff --git a/frontend/src/ts/input/handlers/before-insert-text.ts b/frontend/src/ts/input/handlers/before-insert-text.ts index 9ca90677ff63..b51d585a7a00 100644 --- a/frontend/src/ts/input/handlers/before-insert-text.ts +++ b/frontend/src/ts/input/handlers/before-insert-text.ts @@ -88,11 +88,16 @@ export function onBeforeInsertText(data: string): boolean { const pendingWordData = TestUI.pendingWordData.get( TestState.activeWordIndex, ); - const topAfterAppend = TestUI.getActiveWordTopWithDifferentData( - (pendingWordData ?? TestInput.input.current) + data, - ); - const wordJumped = topAfterAppend > TestUI.activeWordTop; - if (wordJumped) { + const { top: topAfterAppend, height: heightAfterAppend } = + TestUI.getActiveWordTopAndHeightWithDifferentData( + (pendingWordData ?? TestInput.input.current) + data, + ); + if (topAfterAppend > TestUI.activeWordTop) { + //word jumped to next line + return true; + } + if (heightAfterAppend > TestUI.activeWordHeight) { + // letters wrapped to next line return true; } } diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts index b647c4dcdcac..ec867261db1c 100644 --- a/frontend/src/ts/test/test-ui.ts +++ b/frontend/src/ts/test/test-ui.ts @@ -153,15 +153,11 @@ const wordsWrapperEl = document.querySelector( ) as HTMLElement; export let activeWordTop = 0; +export let activeWordHeight = 0; export let lineTransition = false; export let currentTestLine = 0; export let resultCalculating = false; -export function setActiveWordTop(): void { - const activeWord = getActiveWordElement(); - activeWordTop = activeWord?.offsetTop ?? 0; -} - export function setResultCalculating(val: boolean): void { resultCalculating = val; } @@ -250,6 +246,7 @@ export function updateActiveElement( newActiveWord.classList.remove("typed"); activeWordTop = newActiveWord.offsetTop; + activeWordHeight = newActiveWord.offsetHeight; console.log("activewordtopupdated"); updateWordsInputPosition(); @@ -704,6 +701,7 @@ export function updateWordsWrapperHeight(force = false): void { function updateWordsMargin(): void { if (Config.tapeMode !== "off") { + wordsEl.style.marginLeft = "0"; void scrollTape(true); } else { const afterNewlineEls = @@ -1273,6 +1271,7 @@ export async function lineJump( onComplete: () => { currentLinesJumping = 0; activeWordTop = activeWordEl.offsetTop; + activeWordHeight = activeWordEl.offsetHeight; removeTestElements(lastElementIndexToRemove); wordsEl.style.marginTop = "0"; lineTransition = false; @@ -1731,7 +1730,10 @@ function updateLiveStatsColor(value: TimerColor): void { } } -export function getActiveWordTopWithDifferentData(data: string): number { +export function getActiveWordTopAndHeightWithDifferentData(data: string): { + top: number; + height: number; +} { const activeWord = getActiveWordElement(); if (!activeWord) throw new Error("No active word element found"); @@ -1747,11 +1749,12 @@ export function getActiveWordTopWithDifferentData(data: string): number { activeWord.append(...nodes); const top = activeWord.offsetTop; + const height = activeWord.offsetHeight; for (const node of nodes) { node.remove(); } - return top; + return { top, height }; } // this means input, delete or composition