diff --git a/service.js b/service.js index 2fd1f07..1edcb03 100644 --- a/service.js +++ b/service.js @@ -877,9 +877,6 @@ class BesTAService { this.textAreaEl.addEventListener('scroll', () => { this.cloneDiv.scrollTop = this.textAreaEl.scrollTop }) - this.textAreaEl.addEventListener('resize', () => { - this.cloneDiv.style.width = this.textAreaEl.clientWidth + 'px' - }) } /** @@ -890,10 +887,25 @@ class BesTAService { */ createCloneDiv(textAreaEl) { const cloneDiv = document.createElement('div') + this.setCloneDivSize(textAreaEl, cloneDiv) + textAreaEl.style.zIndex = 2 + textAreaEl.style.position = 'relative' + textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl) + return cloneDiv + } + + /** + * Sets the size of the clone div element to match the textarea element + * + * @param {Node} textAreaEl + * @param {Node} cloneDiv + * @returns {void} + */ + setCloneDivSize(textAreaEl, cloneDiv) { const textAreaRect = textAreaEl.getBoundingClientRect() const scrollTop = window.scrollY || document.documentElement.scrollTop - const textAreaStyles = window.getComputedStyle(textAreaEl) + cloneDiv.style.fontSize = textAreaStyles.fontSize cloneDiv.style.fontFamily = textAreaStyles.fontFamily cloneDiv.style.lineHeight = textAreaStyles.lineHeight @@ -910,10 +922,6 @@ class BesTAService { cloneDiv.style.left = `${textAreaRect.left}px` cloneDiv.style.width = parseInt(textAreaStyles.width) + parseInt(scrollbarWidth) - 2 + 'px' - textAreaEl.style.zIndex = 2 - textAreaEl.style.position = 'relative' - textAreaEl.parentNode.insertBefore(cloneDiv, textAreaEl) - return cloneDiv } /** @@ -1317,6 +1325,12 @@ window.onload = () => { window.onresize = () => { besServices.forEach(service => { + if (service.textAreaService) { + service.textAreaService.setCloneDivSize( + service.textAreaService.textAreaEl, + service.textAreaService.cloneDiv + ) + } service.setCorrectionPanelSize( service.hostElement, service.correctionPanel,