Relax line height in the samples

Due to popular demand. 😉

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)
@@ -723,7 +723,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)
@@ -807,7 +807,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)
@@ -842,7 +842,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)
@@ -880,6 +880,18 @@ class BesService {
     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
    *
@@ -999,8 +1011,6 @@ class BesService {
       this.scrollPanel.style.height = `${hostRect.height}px`
     }
 
-    this.textFont = styles.fontFamily
-
     // Resize canvas if needed.
     this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
     this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`

styles.css

@@ -1,5 +1,3 @@
-/* TODO: Dark mode theme */
-
 /* Mistake types styles */
 .bes-spelling-mistake {
   border-bottom: 2px solid #ff7300;