From 9815ddfed050255379518aa2a22627967f89f650 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Mon, 3 Mar 2025 14:21:16 +0100
Subject: [PATCH] Get markup text from <canvas> element

This allows setting markup text font separately from the host element.
E.g.: A different font is desired for the markup other than font used in
the edit box.
---
 service.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/service.js b/service.js
index 4591ed5..1f2bb3a 100644
--- a/service.js
+++ b/service.js
@@ -59,7 +59,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 +722,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 +806,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 +841,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 +879,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} ${12 * scale * dpr}px ${styles.fontFamily}`
+  }
+
   /**
    * Calculates rectangles covering a given range and compensates for scroll offset
    *
@@ -999,8 +1010,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`