diff --git a/service.js b/service.js
index 59d6a17..b696e86 100644
--- a/service.js
+++ b/service.js
@@ -1,7 +1,4 @@
// TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
-// TODO: Revise absolute/relative placement of auxiliary
we inject into DOM. Absolute is more
-// controllable, but lacks PlacementObserver; relative is tricky to prevent document flow
-// issues, but moves with the DOM element.
/**
* Collection of all grammar checking services in the document
@@ -10,11 +7,6 @@
*/
let besServices = []
-// TODO: Window resize may cause host element(s) to move. That needs correction panel and status
-// icon repositioning. Also, should any parent element of our service host element move, we
-// should reposition correction panel and status icon. How to do this? Alas there is no
-// PlacementObserver to monitor host element movements. Switch to relative placement for our
-// auxiliary
s?
window.addEventListener('resize', () =>
besServices.forEach(service => service.onReposition())
)
@@ -65,12 +57,10 @@ class BesService {
this.onScroll = this.onScroll.bind(this)
this.hostElement.addEventListener('scroll', this.onScroll)
- this.resizeObserver = new ResizeObserver(this.onResize.bind(this))
- this.resizeObserver.observe(this.hostElement)
-
this.hostBoundingClientRect = this.hostElement.getBoundingClientRect()
- this.positionObserver = new MutationObserver(this.onBodyMutate.bind(this))
- this.positionObserver.observe(document.body, {
+ this.mutationObserver = new MutationObserver(this.onBodyMutate.bind(this))
+ this.mutationObserver.observe(document.body, {
+ attributes: true,
childList: true,
subtree: true
})
@@ -108,8 +98,7 @@ class BesService {
unregister() {
if (this.abortController) this.abortController.abort()
besServices = besServices.filter(item => item !== this)
- this.positionObserver.disconnect()
- this.resizeObserver.disconnect()
+ this.mutationObserver.disconnect()
this.hostElement.removeEventListener('scroll', this.onScroll)
this.hostElement.setAttribute('spellcheck', this.originalSpellcheck)
this.hostElement.setAttribute('data-gramm', this.originalDataGramm)
@@ -337,18 +326,17 @@ class BesService {
* Resizes correction and scroll panels to match host element size.
*/
setCorrectionPanelSize() {
- // TODO: This woodoo looks so wrong it can't be true. Revise together!
- const styles = window.getComputedStyle(this.textElement)
+ const styles = window.getComputedStyle(this.hostElement)
this.correctionPanel.style.marginLeft = styles.marginLeft
+ this.correctionPanel.style.marginTop = styles.marginTop
this.correctionPanel.style.marginRight = styles.marginRight
+ this.correctionPanel.style.marginBottom = styles.marginBottom
this.correctionPanel.style.paddingLeft = styles.paddingLeft
+ this.correctionPanel.style.paddingTop = styles.paddingTop
this.correctionPanel.style.paddingRight = styles.paddingRight
- this.scrollPanel.style.width = `${this.textElement.scrollWidth}px`
- this.scrollPanel.style.height = `${this.textElement.scrollHeight}px`
- const hStyles =
- this.hostElement !== this.textElement
- ? window.getComputedStyle(this.hostElement)
- : styles
+ this.correctionPanel.style.paddingBottom = styles.paddingBottom
+ this.scrollPanel.style.width = `${this.hostElement.scrollWidth}px`
+ this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
if (this.isHostElementInline()) {
const totalWidth =
parseFloat(styles.paddingLeft) +
@@ -357,14 +345,10 @@ class BesService {
parseFloat(styles.marginRight) +
parseFloat(styles.paddingRight)
this.correctionPanel.style.width = `${totalWidth}px`
- this.correctionPanel.style.height = hStyles.height
+ this.correctionPanel.style.height = styles.height
} else {
this.correctionPanel.style.width = styles.width
- const totalHeight =
- parseFloat(styles.height) +
- parseFloat(styles.paddingTop) +
- parseFloat(styles.paddingBottom)
- this.correctionPanel.style.height = `${totalHeight}px`
+ this.correctionPanel.style.height = styles.height
}
}
@@ -1584,7 +1568,6 @@ class BesTAService extends BesPlainTextService {
static createTextElement(hostElement) {
const textElement = document.createElement('div')
textElement.classList.add('bes-text-panel')
- textElement.style.zIndex = hostElement.style.zIndex - 1
BesTAService.setTextElementSize(hostElement, textElement)
hostElement.parentNode.insertBefore(textElement, hostElement)
return textElement
@@ -1592,8 +1575,6 @@ class BesTAService extends BesPlainTextService {
/**
* Sets the size of the clone div element to match the