Merge remote-tracking branch 'remotes/origin/revise-canvas'

Resize first, then repaint. The Range.getClientRects() is returning
funny coordinates before resize.

Readme.md

@@ -87,6 +87,24 @@ Kategorije pravopisnih pravil so:
 | BESANA_CAT_5 | slovnične napake                                |
 | BESANA_CAT_6 | nomotehnične napake (potrebuje posebno licenco) |
 
+### 4. Nastavljanje videza korekturnih znamenj
+
+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/markup_lector.png" alt="lector" width="448"/>
+
+Levo `'underline'`, desno `'lector'`.
+
+Primer:
+
+```JavaScript
+// Registriramo servis za naš urejevalnik.
+BesService
+  .registerByElement(el)
+  .setMarkupStyle('lector')
+```
+
 ## Navodila za razvijalce
 
 Programsko kodo v tem repozitoriju razvijamo s programom Visual Studio Code. Potrebna je namestitev vtičnika `esbenp.prettier-vscode`.

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>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>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.<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/common.js

@@ -59,10 +59,10 @@ class BesStatusIconEventSink {
     const rect = service.textElement.getBoundingClientRect()
     const scrollbarWidth =
       service.textElement.offsetWidth - service.textElement.clientWidth
-    this.statusDiv.style.left = `${rect.right - 40 - scrollbarWidth}px`
+    this.statusDiv.style.left = `${rect.right - 40 - scrollbarWidth + window.scrollX}px`
     const scrollbarHeight =
       service.textElement.offsetHeight - service.textElement.clientHeight
-    this.statusDiv.style.top = `${rect.bottom - 30 - scrollbarHeight}px`
+    this.statusDiv.style.top = `${rect.bottom - 30 - scrollbarHeight + window.scrollY}px`
   }
 
   /**

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>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>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.<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

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BesService Markup Styles Example</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
+    <script>const besUrl = 'http://localhost:225/api/v2';</script>
+    <script src="../service.js"></script>
+    <script src="common.js"></script>
+  </head>
+  <body>
+    <p class="my-block">This is an example how to switch markup style.</p>
+    <p class="my-block">
+      <input type="radio" id="markup_style_underline" name="markup_style" onchange="set_markup_style('underline')" checked="true"/> <label for="markup_style_underline">Underline parts of sentences where grammar mistake is detected (default)</label><br>
+      <input type="radio" id="markup_style_lector" name="markup_style" onchange="set_markup_style('lector')"/> <label for="markup_style_lector">Use lector signs to markup grammar mistakes</label>
+    </p>
+    </p>
+    <script>
+      function set_markup_style(style) {
+        BesService.getServiceByElement(document.getElementById('textarea-control'))?.setMarkupStyle(style)
+        BesService.getServiceByElement(document.getElementById('contenteditable-control'))?.setMarkupStyle(style)
+        BesService.getServiceByElement(document.getElementById('readonly-control'))?.setMarkupStyle(style)
+        BesService.getServiceByElement(my_ckeditor)?.setMarkupStyle(style)
+      }
+    </script>
+
+    <h1 class="my-block">&lt;textarea&gt; Control</h1>
+    <div class="my-block">
+      <textarea id="textarea-control" class="my-control">Tukaj vpišite besedilo ki ga želite popraviti.
+
+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.
+
+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.
+
+Na mizo nisem položil knjigo.
+
+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.</textarea>
+    </div>
+
+    <h1 class="my-block">&lt;div contenteditable="true"&gt; Control</h1>
+    <div id="contenteditable-control" class="my-block my-control" contenteditable="true">
+      <p style="font-size: 30px;">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>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 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>
+
+    <h1 class="my-block">Static Content</h1>
+    <div id="readonly-control" class="my-block my-control">
+      <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>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 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>
+
+    <h1 class="my-block">CKEditor Control</h1>
+    <div class="my-block">
+      <div id="ckeditor-control">
+        <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>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 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>
+    </div>
+    <script>
+      BesService.registerByElement(document.getElementById('textarea-control'), new BesStatusIconEventSink())
+      BesService.registerByElement(document.getElementById('contenteditable-control'), new BesStatusIconEventSink())
+      BesService.registerByElement(document.getElementById('readonly-control'), new BesStatusIconEventSink())
+      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())
+        })
+        .catch(error => console.error(error))
+    </script>
+
+    <bes-popup-el/>
+  </body>
+</html>

samples/mock-page.html

@@ -8,9 +8,33 @@
     <link rel="stylesheet" href="styles.css" />
     <script>const besUrl = 'http://localhost:225/api/v2';</script>
     <script src="../service.js"></script>
+    <style>
+      .mock-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;
+      }
+
+      .mock-flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
   </head>
   <body>
-    <div class="flex">
+    <div class="mock-flex">
       <div class="mock-content">
         <p>Element to delete</p>
         <p>Element to delete</p>
@@ -18,7 +42,7 @@
         <p>Element to delete</p>
         <p>Element to delete</p>
       </div>
-      <div class="resizable">
+      <div class="mock-resizable">
         <div class="my-block my-control bes-service" 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>

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
-      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. 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>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.<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>
+    <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>
   <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>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>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.<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>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>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.<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>

styles.css

@@ -8,25 +8,22 @@
   cursor: text;
 }
 
-.bes-grammar-mistake {
-  border-bottom: 2px solid #007bff;
+.bes-highlight-rect {
   position: absolute;
-  z-index: 3;
+  opacity: 0.3;
   cursor: text;
 }
 
-.bes-spelling-mistake.bes-mistake-highlight-selected {
-  background: #cc7024;
-  opacity: 0.5;
+.bes-highlight-spelling-rect {
+  background: rgb(0, 123, 255);
 }
 
-.bes-grammar-mistake.bes-mistake-highlight-selected {
-  background: #3691f3;
-  opacity: 0.5;
+.bes-highlight-grammar-rect {
+  background: rgb(255, 115, 0);
 }
 
 /* Styles required to ensure full functionality and optimal user experience. */
-.bes-correction-panel-parent {
+.bes-correction-panel {
   position: relative;
   overflow: visible;
   float: left;
@@ -37,7 +34,7 @@
   z-index: 1;
 }
 
-.bes-correction-panel {
+.bes-scroll-panel {
   position: relative;
   overflow: hidden;
   border-color: transparent;
@@ -45,8 +42,10 @@
   pointer-events: none;
 }
 
-.bes-correction-panel-scroll {
+.bes-canvas {
   position: relative;
+  z-index: 3;
+  cursor: text;
 }
 
 .bes-text-panel {
@@ -55,28 +54,5 @@
   color: transparent;
   border-color: transparent;
   background: none;
-}
-
-/* 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;
+  z-index: -1;
 }