diff --git a/service.js b/service.js index d61abc3..d7e6dc0 100644 --- a/service.js +++ b/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 + } + } } /**************************************************************************************************