Fine-tune markup drawing

This adjusts markup color slightly for the dark display, makes it fully
opaque, alternates the squiggly line between grammar and spelling
mistakes to visualize one-word-two-mistake-types, paints most important
mistakes last/on top etc.

All to make the markup as visible as possible.

Readme.md

@@ -91,8 +91,8 @@ Kategorije pravopisnih pravil so:
 
 Privzeto servis uporablja podčrtovanje pravopisnih napak (nastavitev `'underline'`). Videz lahko spreminjamo.
 
-<img src="samples/markup_underline.png" alt="underline" width="448"/>
+<img src="samples/images/markup_underline.png" alt="underline" width="448"/>
-<img src="samples/markup_lector.png" alt="lector" width="448"/>
+<img src="samples/images/markup_lector.png" alt="lector" width="448"/>
 
 Levo `'underline'`, desno `'lector'`.
 

samples/ckeditor.html

@@ -15,8 +15,8 @@
     <p class="my-block">This is an example of a CKEditor edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
     <div id="editor">
       <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
-      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
+      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno <i>storiti</i>. Predavanje je trajalo dve ure. S njim grem v Kamnik.<br>Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
-      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
+      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik.<br/>On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
       <p>Na mizo nisem položil knjigo.</p>
       <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
     </div>

samples/div-contenteditable.html

@@ -14,8 +14,8 @@
     <p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
     <div id="my-editor" class="my-block my-control" contenteditable="true">
       <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
-      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
+      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno <i>storiti</i>. Predavanje je trajalo dve ure. S njim grem v Kamnik.<br>Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
-      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
+      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik.<br/>On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
       <p>Na mizo nisem položil knjigo.</p>
       <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
     </div>

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
+          my_ckeditor = newEditor.ui.view.editable.element
-          BesCKService.register(newEditor.ui.view.editable.element, newEditor, new BesCKStatusIconEventSink())
+          BesCKService.register(my_ckeditor, newEditor, new BesCKStatusIconEventSink())
         })
         .catch(error => console.error(error))
     </script>

samples/quill.html

@@ -19,24 +19,11 @@
     scroll around, click...</p>
   <div id="editor">
     <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
-    <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim
+    <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno <i>storiti</i>. Predavanje je trajalo dve ure. S njim grem v Kamnik.<br>Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
-      grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
+    <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik.<br/>On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
-    <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo.
-      Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar
-      daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v
-      Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek.
-      Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ
-      kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem
-      skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov
-      življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni
-      zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje
-      z dvemi vesli.</p>
     <p>Na mizo nisem položil knjigo.</p>
-    <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd
+    <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
-      obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je
+</div>
-      odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji
-      je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
-  </div>
   <bes-popup-el />
   <script>
     const quill = new Quill('#editor', {

samples/rule-categories.html

@@ -14,8 +14,8 @@
     <p class="my-block">This is an example of a simple <code>&lt;div contenteditable="true"&gt;</code> edit control with style grammar rules disabled. Compare the proofing results with <a href="div-contenteditable.html">the default example</a>.</p>
     <div id="my-editor" class="my-block my-control" contenteditable="true">
       <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
-      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
+      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno <i>storiti</i>. Predavanje je trajalo dve ure. S njim grem v Kamnik.<br>Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
-      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
+      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik.<br/>On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
       <p>Na mizo nisem položil knjigo.</p>
       <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
     </div>

samples/static-content.html

@@ -13,8 +13,8 @@
     <p class="my-block">This is an example of grammar-checking static HTML content. The below text contains proofing markup.</p>
     <div class="my-block my-control bes-service">
       <p>Tukaj vpišite besedilo ki ga želite popraviti.</p>
-      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno storiti. Predavanje je trajalo dve ure. S njim grem v Kamnik. Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
+      <p>Prišla je njena lepa hčera. Smatram da tega nebi bilo potrebno <i>storiti</i>. Predavanje je trajalo dve ure. S njim grem v Kamnik.<br>Janez jutri nebo prišel. Prišel je z 100 idejami.</p>
-      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik. On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
+      <p>To velja tudi v Bledu. To se je zgodilo na velikemu vrtu. Prišel je na Kamnik.<br/>On je včeraj prišel z svojo torbo. Dve žemlje prosim. Pogosto brskam po temu forumu. Prišel je včeraj in sicer s otroci. To ne vem. Pogleda vse kar daš v odložišče. Nisem jo videl. Ona izgleda dobro. Pri zanikanju ne smete uporabljati tožilnik. Vlak gre v Ljubljano čez Zidani Most. Skočil je čez okno. Slovenija meji na avstrijo. Jaz pišem v Slovenščini vsak Torek. Novica, da je skupina 25 planincev hodila pod vodstvom gorskega vodnika je napačna in zavajujoča. Želim da poješ kosmizailo. Jaz pogosto brskam po temu forumu. Med tem ko je iskal ključe, so se odprla vrata. V takoimenovanem skladišču je bilo veliko ljudi. V sobi sta dve mize. Stekel je h mami. Videl sem Jurčič Micko. To je bil njegov življenski cilj. Po vrsti popravite vse kar želite. Preden zaspiva mi prebere pravljico. Prišel je s stricom. Oni zadanejo tarčo. Mi gremo teči po polju. Mi gremo peči kruh. Usedel se je k miza. Postreži kosilo! Skul je veslanje z dvemi vesli.</p>
       <p>Na mizo nisem položil knjigo.</p>
       <p>Kvazimodo ji je ponavadi prinesel hrano in pijačo, medtem ko je spala, da ne bi videla njegov iznakažen in grd obraz. Poleg tega ji je pustil tudi piščalko, da bi ga lahko priklicala, če bi bilo to potrebno. Kvazimodo se je odločil, da razveseli Esmeraldo in ji obljubi, da ji bo pripeljal Febusa. Toda Febus ni želel priti. Kvazimodo ji je raje lagal, da ni mogel najti Febusa, kot da Esmeraldi pove resnico, ker bi ona trpela.</p>
     </div>

samples/styles.css

@@ -1,3 +1,14 @@
+body {
+  color: #000;
+  background-color: #eee;
+}
+
+input, textarea {
+  color: #000;
+  background-color: #f5f5f5;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
 .my-block {
   max-width: 500px;
   margin: 0 auto;
@@ -13,7 +24,6 @@
   border-radius: 10px;
   background-color: #f5f5f5;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  line-height: 20px;
 }
 
 .ck-editor__editable {
@@ -52,3 +62,22 @@
 .bes-status-icon.bes-status-mistakes {
   background-image: url('images/mistake-svgrepo-com.svg');
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #eee;
+    background-color: #444;
+    font-weight: bolder;
+  }
+
+  input, textarea {
+    color: #eee;
+    background-color: #222;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .my-control {
+    background-color: #222;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+}

service.js

@@ -1,4 +1,5 @@
 // TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
+// TODO: Add mutation observer should any style of hostElement/textElement change and repaint markup (e.g. notice font-weight difference when toggling light/dark color-scheme)
 
 /**
  * Collection of all grammar checking services in the document
@@ -59,7 +60,6 @@ class BesService {
     this.hostElement.setAttribute('data-gramm', 'false')
     this.hostElement.setAttribute('data-gramm_editor', 'false')
     this.hostElement.setAttribute('data-enable-grammarly', 'false')
-    this.textFont = window.getComputedStyle(this.hostElement).fontFamily
 
     this.onScroll = this.onScroll.bind(this)
     this.hostElement.addEventListener('scroll', this.onScroll)
@@ -362,23 +362,28 @@ class BesService {
    * @param {*} match Grammar checking rule match
    */
   drawMistakeMarkup(match) {
-    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) {
+    match.highlights = BesService.getClientRects(
-      rect.x -= canvasPanelRect.x
+      match.range,
-      rect.y -= canvasPanelRect.y
+      canvasPanelRect.x,
-    }
+      canvasPanelRect.y
+    )
+    if (match.highlights.length === 0) return
     const dpr = window.devicePixelRatio
     this.ctx.lineWidth = 2 * dpr // Use 2 for clearer visibility
+    let amplitude = 0
     const ruleId = match.match.rule.id
-    this.ctx.strokeStyle = ruleId.startsWith('MORFOLOGIK_RULE')
+    if (ruleId.startsWith('MORFOLOGIK_RULE')) {
-      ? 'rgba(0, 123, 255, 0.8)'
+      const styles = window.getComputedStyle(this.highlightSpelling)
-      : 'rgba(255, 115, 0, 0.8)'
+      this.ctx.strokeStyle = styles.color
-    this.ctx.fillStyle = ruleId.startsWith('MORFOLOGIK_RULE')
+      this.ctx.fillStyle = styles.color
-      ? 'rgba(0, 123, 255, 0.8)'
+      amplitude = -1
-      : 'rgba(255, 115, 0, 0.8)'
+    } else {
+      const styles = window.getComputedStyle(this.highlightGrammar)
+      this.ctx.strokeStyle = styles.color
+      this.ctx.fillStyle = styles.color
+      amplitude = 1
+    }
     let markerY1, markerY2
     switch (this.markupStyle) {
       case 'lector':
@@ -486,21 +491,29 @@ class BesService {
             const scale = (markerY2 - markerY1) / 18
 
             if (/^\s+$/.test(toRemove)) {
-              const rect = this.makeRange(
+              const rect = BesService.getClientRects(
-                match.data,
+                this.makeRange(
-                match.match.offset,
+                  match.data,
-                match.match.offset - lengthDiff
+                  match.match.offset,
-              )?.getClientRects()[0]
+                  match.match.offset - lengthDiff
+                ),
+                canvasPanelRect.x,
+                canvasPanelRect.y
+              )[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 this.makeRange(
+              for (let rect of BesService.getClientRects(
-                match.data,
+                this.makeRange(
-                match.match.offset,
+                  match.data,
-                match.match.offset - lengthDiff
+                  match.match.offset,
-              )?.getClientRects())
+                  match.match.offset - lengthDiff
+                ),
+                canvasPanelRect.x,
+                canvasPanelRect.y
+              ))
                 this.drawExcessiveText(
                   rect.left,
                   rect.bottom,
@@ -516,21 +529,29 @@ class BesService {
             const scale = (markerY2 - markerY1) / 18
 
             if (/^\s+$/.test(toRemove)) {
-              const rect = this.makeRange(
+              const rect = BesService.getClientRects(
-                match.data,
+                this.makeRange(
-                match.match.offset + match.match.length + lengthDiff,
+                  match.data,
-                match.match.offset + match.match.length
+                  match.match.offset + match.match.length + lengthDiff,
-              )?.getClientRects()[0]
+                  match.match.offset + match.match.length
+                ),
+                canvasPanelRect.x,
+                canvasPanelRect.y
+              )[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 this.makeRange(
+              for (let rect of BesService.getClientRects(
-                match.data,
+                this.makeRange(
-                match.match.offset + match.match.length + lengthDiff,
+                  match.data,
-                match.match.offset + match.match.length
+                  match.match.offset + match.match.length + lengthDiff,
-              )?.getClientRects())
+                  match.match.offset + match.match.length
+                ),
+                canvasPanelRect.x,
+                canvasPanelRect.y
+              ))
                 this.drawExcessiveText(
                   rect.left,
                   rect.bottom,
@@ -574,12 +595,14 @@ class BesService {
               }
             } else {
               // Patch differences.
-              const rects = Array.from(
+              const rects = BesService.getClientRects(
                 this.makeRange(
                   match.data,
                   match.match.offset + lengthL,
                   match.match.offset + match.match.length - lengthR
-                )?.getClientRects()
+                ),
+                canvasPanelRect.x,
+                canvasPanelRect.y
               )
               markerY1 = Math.min(...rects.map(rect => rect.top))
               markerY2 = Math.max(...rects.map(rect => rect.bottom))
@@ -664,7 +687,7 @@ class BesService {
           const x2 = rect.right
           const y = rect.bottom
           const scale = (rect.bottom - rect.top) / 18
-          this.drawAttentionRequired(x1, x2, y, scale)
+          this.drawAttentionRequired(x1, x2, y, amplitude, scale)
         }
 
         markerY1 = Math.min(...match.highlights.map(rect => rect.top))
@@ -706,7 +729,7 @@ class BesService {
     this.ctx.stroke()
 
     if (comment) {
-      this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
+      this.setCtxFont(scale, dpr)
       this.ctx.textAlign = 'center'
       this.ctx.textBaseline = 'bottom'
       this.ctx.fillText('?', (x + 2 * scale) * dpr, (y - 6 * scale) * dpr)
@@ -790,7 +813,7 @@ class BesService {
     this.ctx.lineTo(x2 * dpr, (y2 + 6 * scale) * dpr)
     this.ctx.stroke()
 
-    this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
+    this.setCtxFont(scale, dpr)
     this.ctx.textAlign = 'left' // Thou we want the text to be centered, we align it manually to prevent it getting off canvas.
     this.ctx.textBaseline = 'bottom'
     const textMetrics = this.ctx.measureText(text)
@@ -825,7 +848,7 @@ class BesService {
     this.ctx.lineTo(x * dpr, (y2 + 6 * scale) * dpr)
     this.ctx.stroke()
 
-    this.ctx.font = `${12 * scale * dpr}px ${this.textFont}`
+    this.setCtxFont(scale, dpr)
     this.ctx.textAlign = 'left' // Thou we want the text to be centered, we align it manually to prevent it getting off canvas.
     this.ctx.textBaseline = 'bottom'
     const textMetrics = this.ctx.measureText(text)
@@ -848,21 +871,52 @@ class BesService {
    * @param {Number} x1 Sign left [px]
    * @param {Number} x2 Sign right [px]
    * @param {Number} y Sign baseline [px]
+   * @param {Number} amplitude Sign amplitude [px]
    * @param {Number} scale Sign scale
    */
-  drawAttentionRequired(x1, x2, y, scale) {
+  drawAttentionRequired(x1, x2, y, amplitude, scale) {
     const dpr = window.devicePixelRatio
     this.ctx.beginPath()
-    this.ctx.moveTo(x1 * dpr, (y - scale) * dpr)
+    this.ctx.moveTo(x1 * dpr, (y - amplitude * scale) * dpr)
     for (let x = x1; ; ) {
       if (x >= x2) break
-      this.ctx.lineTo((x += 2 * scale) * dpr, (y + scale) * dpr)
+      this.ctx.lineTo((x += 2 * scale) * dpr, (y + amplitude * scale) * dpr)
       if (x >= x2) break
-      this.ctx.lineTo((x += 2 * scale) * dpr, (y - scale) * dpr)
+      this.ctx.lineTo((x += 2 * scale) * dpr, (y - amplitude * scale) * dpr)
     }
     this.ctx.stroke()
   }
 
+  /**
+   * Sets markup font
+   *
+   * @param {Number} scale Sign scale
+   * @param {Number} dpr Device pixel ratio
+   */
+  setCtxFont(scale, dpr) {
+    const styles = window.getComputedStyle(this.canvasPanel)
+    this.ctx.font = `${styles.fontStyle} ${styles.fontWeight} ${
+      14 * scale * dpr
+    }px ${styles.fontFamily}`
+  }
+
+  /**
+   * 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
    *
@@ -898,10 +952,16 @@ class BesService {
    * @param {Number} x X coordinate
    * @param {Number} y Y coordinate
    * @param {DOMRect} rect Rectangle
+   * @param {Number} tolerance Extra margin around the rectangle treated as "inside"
    * @returns
    */
-  static isPointInRect(x, y, rect) {
+  static isPointInRect(x, y, rect, tolerance) {
-    return rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom
+    return (
+      rect.left - tolerance <= x &&
+      x < rect.right + tolerance &&
+      rect.top - tolerance <= y &&
+      y < rect.bottom + tolerance
+    )
   }
 
   /**
@@ -919,7 +979,16 @@ class BesService {
     this.ctx = this.canvasPanel.getContext('2d')
     this.ctx.scale(1, 1)
 
+    this.highlightSpelling = document.createElement('div')
+    this.highlightSpelling.classList.add('bes-highlight-placeholder')
+    this.highlightSpelling.classList.add('bes-highlight-spelling')
+    this.highlightGrammar = document.createElement('div')
+    this.highlightGrammar.classList.add('bes-highlight-placeholder')
+    this.highlightGrammar.classList.add('bes-highlight-grammar')
+
     this.correctionPanel.appendChild(this.scrollPanel)
+    this.correctionPanel.appendChild(this.highlightSpelling)
+    this.correctionPanel.appendChild(this.highlightGrammar)
     this.scrollPanel.appendChild(this.canvasPanel)
     this.textElement.parentElement.insertBefore(
       this.correctionPanel,
@@ -942,23 +1011,6 @@ class BesService {
     this.disableMutationObserver()
 
     const styles = window.getComputedStyle(this.hostElement)
-    this.textFont = styles.fontFamily
-
-    // Resize canvas if needed.
-    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
-    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
-    const dpr = window.devicePixelRatio
-    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
-    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
-    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
-    if (
-      this.canvasPanel.width !== newCanvasWidth ||
-      this.canvasPanel.height !== newCanvasHeight
-    ) {
-      this.canvasPanel.width = newCanvasWidth
-      this.canvasPanel.height = newCanvasHeight
-      this.redrawAllMistakeMarkup()
-    }
 
     // Note: Firefox is not happy when syncing all margins at once.
     this.scrollPanel.style.marginLeft = styles.marginLeft
@@ -982,20 +1034,36 @@ class BesService {
       this.scrollPanel.style.height = `${hostRect.height}px`
     }
 
+    // Resize canvas if needed.
+    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
+    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
+    const dpr = window.devicePixelRatio
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
+    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
+    if (
+      this.canvasPanel.width !== newCanvasWidth ||
+      this.canvasPanel.height !== newCanvasHeight
+    ) {
+      this.canvasPanel.width = newCanvasWidth
+      this.canvasPanel.height = newCanvasHeight
+      this.redrawAllMistakeMarkup()
+    }
+
     this.enableMutationObserver()
   }
 
   /**
    * Prepares and displays popup.
    *
-   * @param {*} elMatch Array containing block element/paragraph containing grammar checking rule match and a match
+   * @param {*} hits Array containing block element/paragraph containing grammar checking rule match and a match
    * @param {PointerEvent} source Click event source
    */
-  preparePopup(elMatch, source) {
+  preparePopup(hits, source) {
     this.dismissPopup()
     const popup = document.querySelector('bes-popup-el')
     BesPopup.clearReplacements()
-    elMatch.forEach(({ el, match }) => {
+    hits.forEach(({ el, match }) => {
       popup.setContent(el, match, this, this.isContentEditable())
       this.highlightMistake(match)
     })
@@ -1014,8 +1082,8 @@ class BesService {
       el.classList.add('bes-highlight-rect')
       el.classList.add(
         match.match.rule.id.startsWith('MORFOLOGIK_RULE')
-          ? 'bes-highlight-spelling-rect'
+          ? 'bes-highlight-spelling'
-          : 'bes-highlight-grammar-rect'
+          : 'bes-highlight-grammar'
       )
       el.style.left = `${rect.x + canvasPanelRect.x + window.scrollX}px`
       el.style.top = `${rect.y + canvasPanelRect.y + window.scrollY}px`
@@ -1055,7 +1123,9 @@ class BesService {
   redrawAllMistakeMarkup() {
     this.ctx.clearRect(0, 0, this.canvasPanel.width, this.canvasPanel.height)
     this.results.forEach(result => {
-      result.matches.forEach(match => this.drawMistakeMarkup(match))
+      // Most important matches are first, we want to draw them last => iterate in reverse.
+      for (let i = result.matches.length; i-- > 0; )
+        this.drawMistakeMarkup(result.matches[i])
     })
   }
 
@@ -1211,9 +1281,11 @@ class BesTreeService extends BesService {
                     ),
                     match: match
                   }
-                  this.drawMistakeMarkup(m)
                   matches.push(m)
                 })
+                // Most important matches are first, we want to draw them last => iterate in reverse.
+                for (let i = matches.length; i-- > 0; )
+                  this.drawMistakeMarkup(matches[i])
                 this.markProofed(node, matches)
                 this.onProofingProgress(matches.length)
               })
@@ -1221,8 +1293,22 @@ class BesTreeService extends BesService {
           }
           return [{ text: `<${node.tagName}/>`, node: node, markup: true }]
         } else {
-          // Inline elements require no markup. Keep plain text only.
           let data = []
+          if (this.doesElementAddSpace(node)) {
+            // Inline element adds some space between text. Convert node to spaces.
+            const inner = node.innerHTML
+            const len =
+              inner.length > 0
+                ? node.outerHTML.indexOf(inner)
+                : node.outerHTML.length
+            data = data.concat({
+              text: ' '.repeat(len),
+              node: node,
+              markup: false
+            })
+          } else {
+            // Inline elements require no markup. Keep plain text only.
+          }
           for (const el2 of node.childNodes)
             data = data.concat(this.proofNode(el2, abortController))
           return data
@@ -1334,6 +1420,26 @@ class BesTreeService extends BesService {
     }
   }
 
+  /**
+   * Tests if given element adds space before child/next text
+   *
+   * @param {Element} el DOM element
+   * @returns true if adds space; false otherwise.
+   */
+  doesElementAddSpace(el) {
+    const prevNode = el.previousSibling
+    const nextNode = el.firstChild || el.nextSibling
+    if (!prevNode || !nextNode) return false
+    const range = document.createRange()
+    range.setStart(
+      prevNode,
+      prevNode.nodeType === Node.TEXT_NODE ? prevNode.length : 0
+    )
+    range.setEnd(nextNode, 0)
+    const bounds = range.getBoundingClientRect()
+    return bounds.width !== 0
+  }
+
   /**
    * Returns first block parent element of a node.
    *
@@ -1435,19 +1541,19 @@ class BesTreeService extends BesService {
     const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
     let x = source.clientX - canvasPanelRect.x
     let y = source.clientY - canvasPanelRect.y
-    const pointsInRect = []
+    const hits = []
     for (let result of this.results) {
       for (let m of result.matches) {
         for (let rect of m.highlights) {
-          if (BesService.isPointInRect(x, y, rect)) {
+          if (BesService.isPointInRect(x, y, rect, 5)) {
-            pointsInRect.push({ el, match: m })
+            hits.push({ el, match: m })
             break
           }
         }
       }
     }
     this.dismissPopup()
-    if (pointsInRect.length) this.preparePopup(pointsInRect, source)
+    if (hits.length) this.preparePopup(hits, source)
   }
 }
 
@@ -1966,9 +2072,11 @@ class BesPlainTextService extends BesService {
                 ),
                 match: match
               }
-              this.drawMistakeMarkup(m)
               matches.push(m)
             })
+            // Most important matches are first, we want to draw them last => iterate in reverse.
+            for (let i = matches.length; i-- > 0; )
+              this.drawMistakeMarkup(matches[i])
             this.markProofed(paragraphRange, matches)
             this.onProofingProgress(matches.length)
           })
@@ -2103,19 +2211,19 @@ class BesPlainTextService extends BesService {
     const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
     let x = source.clientX - canvasPanelRect.x
     let y = source.clientY - canvasPanelRect.y
-    const pointsInRect = []
+    const hits = []
     for (let result of this.results) {
       for (let m of result.matches) {
         for (let rect of m.highlights) {
-          if (BesService.isPointInRect(x, y, rect)) {
+          if (BesService.isPointInRect(x, y, rect, 5)) {
-            pointsInRect.push({ el: result.range, match: m })
+            hits.push({ el: result.range, match: m })
             break
           }
         }
       }
     }
     this.dismissPopup()
-    if (pointsInRect.length) this.preparePopup(pointsInRect, source)
+    if (hits.length) this.preparePopup(hits, source)
   }
 
   /**
@@ -2367,21 +2475,34 @@ class BesTAService extends BesPlainTextService {
     const scrollLeft = window.scrollX || document.documentElement.scrollLeft
     const styles = window.getComputedStyle(hostElement)
 
-    textElement.style.zIndex = hostElement.style.zIndex - 1
+    textElement.style.display = styles.display
     textElement.style.font = styles.font
     textElement.style.lineHeight = styles.lineHeight
     textElement.style.whiteSpace = styles.whiteSpace
     textElement.style.whiteSpaceCollapse = styles.whiteSpaceCollapse
     textElement.style.hyphens = styles.hyphens
-    textElement.style.boxSizing = styles.boxSizing
     textElement.style.scrollBehavior = styles.scrollBehavior
+    textElement.style.overflow = styles.overflow
     textElement.style.border = styles.border
     textElement.style.borderRadius = styles.borderRadius
+    textElement.style.borderColor = 'transparent'
     textElement.style.padding = styles.padding
     textElement.style.left = `${rect.left + scrollLeft}px`
     textElement.style.top = `${rect.top + scrollTop}px`
-    textElement.style.width = styles.width
+    textElement.style.width = `${
-    textElement.style.height = styles.height
+      rect.width -
+      parseFloat(styles.borderLeftWidth) -
+      parseFloat(styles.paddingLeft) -
+      parseFloat(styles.paddingRight) -
+      parseFloat(styles.borderRightWidth)
+    }px`
+    textElement.style.height = `${
+      rect.height -
+      parseFloat(styles.borderTopWidth) -
+      parseFloat(styles.paddingTop) -
+      parseFloat(styles.paddingBottom) -
+      parseFloat(styles.borderBottomWidth)
+    }px`
   }
 
   /**

styles.css

@@ -1,25 +1,29 @@
-/* TODO: Dark mode theme */
-
 /* Mistake types styles */
-.bes-spelling-mistake {
-  border-bottom: 2px solid #ff7300;
-  position: absolute;
-  z-index: 3;
-  cursor: text;
-}
-
 .bes-highlight-rect {
   position: absolute;
-  opacity: 0.3;
   cursor: text;
 }
 
-.bes-highlight-spelling-rect {
+.bes-highlight-spelling {
-  background: rgb(0, 123, 255);
+  color: hsl(211, 100%, 60%);
+  background: hsla(211, 100%, 60%, 0.3);
 }
 
-.bes-highlight-grammar-rect {
+.bes-highlight-grammar {
-  background: rgb(255, 115, 0);
+  color: hsl(27, 100%, 45%);
+  background: hsla(27, 100%, 45%, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  .bes-highlight-spelling {
+    color: hsl(211, 100%, 55%);
+    background: hsla(211, 100%, 55%, 0.3);
+  }
+
+  .bes-highlight-grammar {
+    color: hsl(27, 100%, 65%);
+    background: hsla(27, 100%, 65%, 0.3);
+  }
 }
 
 /* Styles required to ensure full functionality and optimal user experience. */
@@ -50,9 +54,14 @@
 
 .bes-text-panel {
   position: absolute;
-  overflow: hidden;
   margin: 0px;
   color: transparent;
   border-color: transparent;
   background: none;
+  z-index: -1;
+}
+
+.bes-highlight-placeholder {
+  display: none;
+  visibility: hidden;
 }