diff --git a/index.html b/index.html index 2c6ceea..ed1b620 100644 --- a/index.html +++ b/index.html @@ -7,26 +7,25 @@ -
Tukaj vpišite besedilo ki ga želite popraviti.

- + -
-
To je preiskus.
+ -
-
Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.
+ - +
+ diff --git a/service.js b/service.js index 47bb864..958cb88 100644 --- a/service.js +++ b/service.js @@ -710,28 +710,17 @@ class BesTAService { this.cloneDiv = this.createCloneDiv(textAreaEl) this.service = BesService.register(this.cloneDiv, this) this.textAreaEl.addEventListener('input', () => this.handleInput()) - this.textAreaEl.addEventListener('click', e => { - //TODO: Consider adding some kind of proofing? - this.textAreaEl.style.display = 'none' - const deepestElement = document.elementFromPoint(e.clientX, e.clientY) - this.textAreaEl.style.display = '' - - const clickEvent = new CustomEvent('click', { - detail: { - clientX: e.clientX, - clientY: e.clientY, - targetElement: deepestElement - } - }) - - this.cloneDiv.dispatchEvent(clickEvent) + this.textAreaEl.addEventListener('click', e => this.handleTAClick(e)) + this.textAreaEl.addEventListener('scroll', () => { + this.cloneDiv.scrollTop = this.textAreaEl.scrollTop }) } createCloneDiv(textAreaEl) { const cloneDiv = document.createElement('div') const textAreaRect = textAreaEl.getBoundingClientRect() - cloneDiv.style.top = `${textAreaRect.top}px` + const scrollTop = window.scrollY || document.documentElement.scrollTop + cloneDiv.style.top = `${textAreaRect.top + scrollTop}px` cloneDiv.style.left = `${textAreaRect.left}px` const textAreaStyles = window.getComputedStyle(textAreaEl) cloneDiv.style.fontSize = textAreaStyles.fontSize @@ -739,8 +728,10 @@ class BesTAService { cloneDiv.style.lineHeight = textAreaStyles.lineHeight cloneDiv.style.width = textAreaStyles.width cloneDiv.style.height = textAreaStyles.height + cloneDiv.style.maxHeight = textAreaStyles.height cloneDiv.style.padding = textAreaStyles.padding cloneDiv.style.margin = textAreaStyles.margin + cloneDiv.style.overflowY = 'auto' cloneDiv.style.position = 'absolute' textAreaEl.style.position = 'relative' textAreaEl.style.zIndex = 2 @@ -762,6 +753,22 @@ class BesTAService { this.cloneDiv.dispatchEvent(customEvent) } + handleTAClick(e) { + //TODO: Consider adding some kind of proofing? + this.textAreaEl.style.display = 'none' + const deepestElement = document.elementFromPoint(e.clientX, e.clientY) + this.textAreaEl.style.display = '' + + const clickEvent = new CustomEvent('click', { + detail: { + clientX: e.clientX, + clientY: e.clientY, + targetElement: deepestElement + } + }) + this.cloneDiv.dispatchEvent(clickEvent) + } + // TODO: think of a way to reposition the cursor after the replacement handleReplacement(el) { this.textAreaEl.value = el.outerText