Merge commit '159cd516846b196fd13c640d28d55b0821bbbdb3'

service2.js

@@ -1,5 +1,5 @@
 // TODO: Implement <textarea> class
-// TODO: Find a way to disable languageTool extension
+// TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
 
 /**
  * Collection of all grammar checking services in the document
@@ -8,10 +8,6 @@
  */
 let besServices = []
 
-window.addEventListener('scroll', () =>
-  besServices.forEach(service => service.onScroll())
-)
-
 // 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
@@ -151,16 +147,9 @@ class BesService {
   onScroll() {
     // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
     this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
-    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
 
-    // Markup is in a "position:absolute" <div> element requiring repositioning when scrolling host element or window.
-    // It is defered to reduce stress in a flood of scroll events.
-    // TODO: We could technically just update scrollTop and scrollLeft of all markup rects for even better performance?
-    if (this.scrollTimeout) clearTimeout(this.scrollTimeout)
-    this.scrollTimeout = setTimeout(() => {
-      this.repositionAllMarkup()
-      delete this.scrollTimeout
-    }, 500)
+    // Why do we need to set left to -scrollLeft? It destroys the position of highlights
+    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
   }
 
   /**
@@ -707,20 +696,24 @@ class BesTreeService extends BesService {
     const el = this.getBlockParent(source.targetElement || source.target)
     if (!el) return
 
-    const result = this.results.find(child =>
-      BesTreeService.isSameParagraph(child.element, el)
-    )
-    if (result) {
-      for (let m of result.matches) {
-        for (let r of m.rects) {
-          if (BesService.isPointInRect(source.clientX, source.clientY, r)) {
-            this.popupCorrectionPanel(el, m, source)
-            return
+    let resultMatch
+    for (let result of this.results) {
+      let match = result.matches.find(match => {
+        // This way we can check if the click was inside the rectangle of the highlight even if some content was removed or added.
+        // We used to check if the click was inside the stored rectangle coordinates which is not reliable because the content can change.
+        // But this way we can check if the click was inside the rectangle of the highlight even if some content was changed.
+        // TODO: what to do with rectLists inside match.rects?
+        let rect = match.highlights[0].getBoundingClientRect()
+        return BesService.isPointInRect(source.clientX, source.clientY, rect)
+      })
+      if (match) {
+        resultMatch = match
+        break
       }
     }
-      }
-    }
-    BesPopup.hide()
+
+    if (resultMatch) this.popupCorrectionPanel(el, resultMatch, source)
+    else BesPopup.hide()
   }
 }
 

styles.css

@@ -4,64 +4,32 @@
 .bes-typo-mistake {
   border-bottom: 2px solid red;
   position: absolute;
-  z-index: 2;
+  z-index: 3;
   cursor: text;
-  pointer-events: none;
+  /* pointer-events: none; */
 }
 
 .bes-correction-panel-parent {
-  z-index: 3;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  display: inline;
-  float: left;
   position: relative;
   overflow: visible;
-  visibility: visible;
+  float: left;
+  display: inline;
+  width: 0px;
+  height: 0px;
+  border: none;
+  z-index: 1;
 }
 
 .bes-correction-panel {
-  background: transparent;
-  border: none;
-  color: transparent;
-  cursor: initial;
-  display: block;
-  float: initial;
-  margin: 0;
-  max-height: initial;
-  min-height: initial;
-  max-width: initial;
-  min-width: initial;
-  outline: initial;
-  overflow: hidden;
-  padding: 0;
-  pointer-events: none;
   position: relative;
+  overflow: hidden;
+  border-color: transparent;
+  color: transparent;
+  pointer-events: none;
 }
 
 .bes-correction-panel-scroll {
-  pointer-events: none;
-  box-shadow: initial;
-  box-sizing: initial;
-  cursor: initial;
-  display: block;
-  float: initial;
-  max-height: initial;
-  min-height: initial;
-  max-width: initial;
-  min-width: initial;
-  position: absolute;
-  height: initial;
-  width: initial;
-  animation: auto ease 0s 1 normal none running none;
-  background: transparent;
-  border-width: initial;
-  border-style: none;
-  margin: 0px;
-  outline: initial;
-  padding: 0px;
+  position: relative;
 }
 
 .bes-status-div {
@@ -95,3 +63,27 @@
 .bes-status-icon.bes-status-mistakes {
   background-image: url('images/mistake-svgrepo-com.svg');
 }
+
+/* TODO: Styles below should be removed after testing period is over */
+.resizable {
+  overflow-x: scroll;
+  position: relative;
+  display: inline-block;
+  border: 1px solid #ccc;
+  width: 300px;
+  height: 400px;
+  border-radius: 3px;
+  background-color: #f9f9f9;
+}
+
+.mock-content {
+  width: 1000px;
+  height: 600px;
+  background-color: #f9f9f9;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}