diff --git a/service.js b/service.js index b7f2de2..402771a 100644 --- a/service.js +++ b/service.js @@ -291,16 +291,10 @@ class BesService { panelParent.appendChild(this.correctionPanel) this.correctionPanel.appendChild(this.scrollPanel) - // Inline elements (textarea) and CKEditor. - if ( - this.hostElement.tagName !== 'DIV' || - this.hostElement.classList.contains('ck-editor__editable') - ) { + if (this.isHostElementInline()) { this.textElement.parentElement.insertBefore(panelParent, this.textElement) this.setCorrectionPanelSize() - } - // Block elements (contenteditable = 'true', readonly). This also works correctly if DIV element has display set to inline-block. - else { + } else { document.body.insertBefore(panelParent, document.body.firstChild) this.setCorrectionPanelSize() } @@ -342,10 +336,7 @@ class BesService { this.correctionPanel.style.paddingLeft = styles.paddingLeft this.correctionPanel.style.paddingRight = styles.paddingRight this.scrollPanel.style.width = `${this.textElement.scrollWidth}px` - if ( - this.hostElement.tagName !== 'DIV' || - this.hostElement.classList.contains('ck-editor__editable') - ) { + if (this.isHostElementInline()) { const hStyles = window.getComputedStyle(this.hostElement) const totalWidth = parseFloat(styles.paddingLeft) + @@ -464,6 +455,25 @@ class BesService { this.statusIcon.classList.add(status) this.statusDiv.title = title } + + /** + * Tests if host element is inline + * + * @returns true if CSS display property is inline; false otherwise. + */ + isHostElementInline() { + switch ( + document.defaultView + .getComputedStyle(this.hostElement, null) + .getPropertyValue('display') + .toLowerCase() + ) { + case 'inline': + return true + default: + return false + } + } } /************************************************************************************************** @@ -1077,6 +1087,15 @@ class BesCKService extends BesTreeService { this.statusDiv.style.right = `10px` this.statusDiv.style.bottom = `10px` } + + /** + * Tests if host element is inline + * + * @returns true as CKEditor host elements always behave this way. + */ + isHostElementInline() { + return true + } } /**************************************************************************************************