samples/markup-style.html

@@ -75,8 +75,8 @@ Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi
       let my_ckeditor = null
       ClassicEditor.create(document.querySelector('#ckeditor-control'))
         .then(newEditor => {
-          my_ckeditor = newEditor.ui.view.editable.element
-          BesCKService.register(my_ckeditor, newEditor, new BesCKStatusIconEventSink())
+          my_ckeditor = newEditor
+          BesCKService.register(newEditor.ui.view.editable.element, newEditor, new BesCKStatusIconEventSink())
         })
         .catch(error => console.error(error))
     </script>

service.js

@@ -362,13 +362,14 @@ class BesService {
    * @param {*} match Grammar checking rule match
    */
   drawMistakeMarkup(match) {
-    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
-    match.highlights = BesService.getClientRects(
-      match.range,
-      canvasPanelRect.x,
-      canvasPanelRect.y
-    )
+    const range = match.range
+    match.highlights = Array.from(range.getClientRects())
     if (match.highlights.length === 0) return
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    for (let rect of match.highlights) {
+      rect.x -= canvasPanelRect.x
+      rect.y -= canvasPanelRect.y
+    }
     const dpr = window.devicePixelRatio
     this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility
     const ruleId = match.match.rule.id
@@ -485,29 +486,21 @@ class BesService {
             const scale = (markerY2 - markerY1) / 18
 
             if (/^\s+$/.test(toRemove)) {
-              const rect = BesService.getClientRects(
-                this.makeRange(
+              const rect = this.makeRange(
                 match.data,
                 match.match.offset,
                 match.match.offset - lengthDiff
-                ),
-                canvasPanelRect.x,
-                canvasPanelRect.y
-              )[0]
+              )?.getClientRects()[0]
               const x = (rect.left + rect.right) / 2
               const y1 = rect.top
               const y2 = rect.bottom
               this.drawWrongSpacing(x, y1, y2, scale)
             } else {
-              for (let rect of BesService.getClientRects(
-                this.makeRange(
+              for (let rect of this.makeRange(
                 match.data,
                 match.match.offset,
                 match.match.offset - lengthDiff
-                ),
-                canvasPanelRect.x,
-                canvasPanelRect.y
-              ))
+              )?.getClientRects())
                 this.drawExcessiveText(
                   rect.left,
                   rect.bottom,
@@ -523,29 +516,21 @@ class BesService {
             const scale = (markerY2 - markerY1) / 18
 
             if (/^\s+$/.test(toRemove)) {
-              const rect = BesService.getClientRects(
-                this.makeRange(
+              const rect = this.makeRange(
                 match.data,
                 match.match.offset + match.match.length + lengthDiff,
                 match.match.offset + match.match.length
-                ),
-                canvasPanelRect.x,
-                canvasPanelRect.y
-              )[0]
+              )?.getClientRects()[0]
               const x = (rect.left + rect.right) / 2
               const y1 = rect.top
               const y2 = rect.bottom
               this.drawWrongSpacing(x, y1, y2, scale)
             } else {
-              for (let rect of BesService.getClientRects(
-                this.makeRange(
+              for (let rect of this.makeRange(
                 match.data,
                 match.match.offset + match.match.length + lengthDiff,
                 match.match.offset + match.match.length
-                ),
-                canvasPanelRect.x,
-                canvasPanelRect.y
-              ))
+              )?.getClientRects())
                 this.drawExcessiveText(
                   rect.left,
                   rect.bottom,
@@ -589,14 +574,12 @@ class BesService {
               }
             } else {
               // Patch differences.
-              const rects = BesService.getClientRects(
+              const rects = Array.from(
                 this.makeRange(
                   match.data,
                   match.match.offset + lengthL,
                   match.match.offset + match.match.length - lengthR
-                ),
-                canvasPanelRect.x,
-                canvasPanelRect.y
+                )?.getClientRects()
               )
               markerY1 = Math.min(...rects.map(rect => rect.top))
               markerY2 = Math.max(...rects.map(rect => rect.bottom))
@@ -880,23 +863,6 @@ class BesService {
     this.ctx.stroke()
   }
 
-  /**
-   * Calculates rectangles covering a given range and compensates for scroll offset
-   *
-   * @param {Range} range Range to get client rectangles for
-   * @param {Number} offsetX X offset to subtract from coordinates [px]
-   * @param {Number} offsetY Y offset to subtract from coordinates [px]
-   * @returns Array of rectangles
-   */
-  static getClientRects(range, offsetX, offsetY) {
-    const rects = Array.from(range.getClientRects())
-    for (let rect of rects) {
-      rect.x -= offsetX
-      rect.y -= offsetY
-    }
-    return rects
-  }
-
   /**
    * Calculates common string prefix length
    *