fix: Refactor block element check in BesQuillService to use isBlockElement method #5

service.js

@@ -1215,10 +1215,7 @@ class BesQuillService extends BesTreeService {
       if (leaf) {
         let domElement = leaf.domNode
 
-        // TODO: Think of a way to get the block element containing the leaf. Because it is not necessary that the user will use this types of tag names.
-        const acceptedTagNames = ['P', 'H1', 'H2']
-
-        while (domElement && !acceptedTagNames.includes(domElement.tagName)) {
+        while (domElement && !this.isBlockElement(domElement)) {
           domElement = domElement.parentNode
         }
         if (domElement) {
@@ -1252,6 +1249,32 @@ class BesQuillService extends BesTreeService {
     match.range.insertNode(document.createTextNode(replacement))
     this.scheduleProofing(20)
   }
+
+  /**
+   * Tests if given element is block element.
+   *
+   * @param {Element} el DOM element
+   * @returns false if CSS display property is inline; true otherwise.
+   */
+  isBlockElement(el) {
+    // Always treat our host element as block.
+    // Otherwise, should one make it inline, proofing would not start on it misbelieving it's a
+    // part of a bigger block of text.
+    if (el === this.textElement) return true
+    // Ensure element is a valid DOM element
+    if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+    switch (
+      document.defaultView
+        .getComputedStyle(el, null)
+        .getPropertyValue('display')
+        .toLowerCase()
+    ) {
+      case 'inline':
+        return false
+      default:
+        return true
+    }
+  }
 }
 
 /**************************************************************************************************