From bddae0793ed60f7c6e088cb2197ce1180a42ced6 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Mon, 24 Jun 2024 14:52:16 +0200
Subject: [PATCH] Revise host element display detection logic

BesService may be registered on any HTML element: <p>, <body>,
<whatever>... Not only <div>, <textarea> and CKEditor. Therefore, we
need more generic test to distinguish which resize strategy works best.
---
 service.js | 43 +++++++++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 12 deletions(-)
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
+  }
 }
 
 /**************************************************************************************************
