Resolve issue with resizing in textarea instances

This commit is contained in:
Aljaž Grilc 2024-04-25 09:17:42 +02:00
parent 5ed444f577
commit 2192845cae

View File

@ -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,