From 4060f0866c784f19e6bc3598c4e16f9f377fcaa6 Mon Sep 17 00:00:00 2001
From: Simon Rozman <simon@rozman.si>
Date: Fri, 14 Jun 2024 12:25:33 +0200
Subject: [PATCH] service2.js: Finish <textarea> support

---
 samples/textarea.html |  25 ++
 service2.js           | 735 +++++++++++++++++++++++++++++-------------
 styles.css            |   7 +
 3 files changed, 546 insertions(+), 221 deletions(-)
 create mode 100644 samples/textarea.html
diff --git a/samples/textarea.html b/samples/textarea.html
new file mode 100644
index 0000000..b96f7f5
--- /dev/null
+++ b/samples/textarea.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BesService &lt;textarea&gt; Example</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <script>const besUrl = 'http://localhost:225/api/v2';</script>
+    <script src="../service2.js"></script>
+  </head>
+  <body>
+    <p class="my-block">This is an example of a <code>&lt;textarea&gt;</code> edit control. Edit the text, resize the control or browser window, scroll around, click...</p>
+    <div class="my-block">
+      <textarea class="my-control bes-service">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.</textarea>
+    </div>
+    <bes-popup-el/>
+  </body>
+</html>
diff --git a/service2.js b/service2.js
index 37a8258..b150703 100644
--- a/service2.js
+++ b/service2.js
@@ -1,5 +1,7 @@
-// TODO: Implement <textarea> class
 // TODO: Research if there is a way to disable languageTool & Grammarly extensions in CKEditor
+// TODO: Revise absolute/relative placement of auxiliary <div> we inject into DOM. Absolute is more
+//       controllable, but lacks PlacementObserver; relative is tricky to prevent document flow
+//       issues, but moves with the DOM element.
 
 /**
  * Collection of all grammar checking services in the document
@@ -8,33 +10,38 @@
  */
 let besServices = []
 
-// TODO: Window resize may cause host element(s) to move. That needs correction panel and status icon
-// repositioning. Also, should any parent element of our service host element move, we should reposition
-// correction panel and status icon. How to do this? Alas there is no PlacementObserver to monitor host
-// element movements.
+// TODO: Window resize may cause host element(s) to move. That needs correction panel and status
+//       icon repositioning. Also, should any parent element of our service host element move, we
+//       should reposition correction panel and status icon. How to do this? Alas there is no
+//       PlacementObserver to monitor host element movements. Switch to relative placement for our
+//       auxiliary <div>s?
 window.addEventListener('resize', () =>
   besServices.forEach(service => service.onReposition())
 )
 
-/*************************************************************************
+/**************************************************************************************************
  *
  * Base class for all grammar-checking services
  *
- * This class provides properties and implementations of methods common to
- * all types of HTML controls.
+ * This class provides properties and implementations of methods common to all types of HTML
+ * controls.
  *
- * This is an intermediate class and may not be used directly in client
- * code.
+ * This is an intermediate class and may not be used directly in client code.
  *
- *************************************************************************/
+ *************************************************************************************************/
 class BesService {
   /**
    * Constructs class.
    *
-   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service for
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   * @param {Element} textElement The element in DOM tree that hosts coordinate-measurable clone of
+   *                              the text to proof. Same as hostElement for <div>, separate for
+   *                              <textarea> and <input> hosts.
    */
-  constructor(hostElement) {
+  constructor(hostElement, textElement) {
     this.hostElement = hostElement
+    this.textElement = textElement
     this.results = [] // Results of grammar-checking, one per each block/paragraph of text
     this.createCorrectionPanel()
 
@@ -159,6 +166,11 @@ class BesService {
     // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
     this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
     this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
+
+    if (this.hostElement !== this.textElement) {
+      this.textElement.scrollTop = this.hostElement.scrollTop
+      this.textElement.scrollLeft = this.hostElement.scrollLeft
+    }
   }
 
   /**
@@ -234,7 +246,7 @@ class BesService {
 
     this.correctionPanel.appendChild(this.scrollPanel)
     panelParent.appendChild(this.correctionPanel)
-    this.hostElement.parentElement.insertBefore(panelParent, this.hostElement)
+    this.textElement.parentElement.insertBefore(panelParent, this.textElement)
 
     this.statusDiv = document.createElement('div')
     this.statusDiv.classList.add('bes-status-div')
@@ -242,9 +254,9 @@ class BesService {
     this.statusIcon.classList.add('bes-status-icon')
     this.statusDiv.appendChild(this.statusIcon)
     this.setStatusDivPosition()
-    this.hostElement.parentNode.insertBefore(
+    this.textElement.parentNode.insertBefore(
       this.statusDiv,
-      this.hostElement.nextSibling
+      this.textElement.nextSibling
     )
     // const statusPopup = document.createElement('bes-popup-status')
     // document.body.appendChild(statusPopup)
@@ -267,7 +279,7 @@ class BesService {
    * Resizes correction and scroll panels to match host element size.
    */
   setCorrectionPanelSize() {
-    const styles = window.getComputedStyle(this.hostElement)
+    const styles = window.getComputedStyle(this.textElement)
     const totalWidth =
       parseFloat(styles.paddingLeft) +
       parseFloat(styles.marginLeft) +
@@ -286,7 +298,7 @@ class BesService {
     this.correctionPanel.style.marginRight = styles.marginRight
     this.correctionPanel.style.paddingLeft = styles.paddingLeft
     this.correctionPanel.style.paddingRight = styles.paddingRight
-    this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
+    this.scrollPanel.style.height = `${this.textElement.scrollHeight}px`
   }
 
   /**
@@ -299,15 +311,19 @@ class BesService {
   popupCorrectionPanel(el, match, source) {
     const popup = document.querySelector('bes-popup-el')
     popup.changeMessage(match.match.message)
-    popup.appendReplacements(
-      el,
-      match,
-      this,
-      this.hostElement.contentEditable !== 'false'
-    )
+    popup.appendReplacements(el, match, this, this.isContentEditable())
     popup.show(source.clientX, source.clientY)
   }
 
+  /**
+   * Checks if host element content is editable.
+   *
+   * @returns true if editable; false otherwise
+   */
+  isContentEditable() {
+    return this.hostElement.contentEditable !== 'false'
+  }
+
   /**
    * Updates all grammar mistake markup positions.
    */
@@ -343,18 +359,13 @@ class BesService {
    * Repositions status DIV element.
    */
   setStatusDivPosition() {
-    const rect = this.hostElement.getBoundingClientRect()
-    const parentRect = this.hostElement.parentElement.getBoundingClientRect()
+    const rect = this.textElement.getBoundingClientRect()
     const scrollbarWidth =
-      this.hostElement.offsetWidth - this.hostElement.clientWidth
-    this.statusDiv.style.left = `${
-      rect.right - parentRect.left - 40 - scrollbarWidth
-    }px`
+      this.textElement.offsetWidth - this.textElement.clientWidth
+    this.statusDiv.style.left = `${rect.right - 40 - scrollbarWidth}px`
     const scrollbarHeight =
-      this.hostElement.offsetHeight - this.hostElement.clientHeight
-    this.statusDiv.style.top = `${
-      rect.bottom - parentRect.top - 30 - scrollbarHeight
-    }px`
+      this.textElement.offsetHeight - this.textElement.clientHeight
+    this.statusDiv.style.top = `${rect.bottom - 30 - scrollbarHeight}px`
   }
 
   /**
@@ -378,36 +389,38 @@ class BesService {
   }
 }
 
-/*************************************************************************
+/**************************************************************************************************
  *
  * Grammar-checking service base class for tree-organized editors
  *
- * This class provides common properties and methods for HTML controls
- * where text content is organized as a DOM tree. The grammar is checked
- * recursively and the DOM elements in tree specify which parts of text
- * represent same unit of text: block element => one standalone paragraph
+ * This class provides common properties and methods for HTML controls where text content is
+ * organized as a DOM tree. The grammar is checked recursively and the DOM elements in tree specify
+ * which parts of text represent same unit of text: block element => one standalone paragraph
  *
- * This is an intermediate class and may not be used directly in client
- * code.
+ * This is an intermediate class and may not be used directly in client code.
  *
- *************************************************************************/
+ *************************************************************************************************/
 class BesTreeService extends BesService {
   /**
    * Constructs class.
    *
-   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service for
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   * @param {Element} textElement The element in DOM tree that hosts coordinate-measurable clone of
+   *                              the text to proof. Same as hostElement for <div>, separate for
+   *                              <textarea> and <input> hosts.
    */
-  constructor(hostElement) {
-    super(hostElement)
+  constructor(hostElement, textElement) {
+    super(hostElement, textElement)
     this.onClick = this.onClick.bind(this)
-    this.hostElement.addEventListener('click', this.onClick)
+    this.textElement.addEventListener('click', this.onClick)
   }
 
   /**
    * Unregisters grammar checking service.
    */
   unregister() {
-    this.hostElement.removeEventListener('click', this.onClick)
+    this.textElement.removeEventListener('click', this.onClick)
     super.unregister()
   }
 
@@ -416,7 +429,7 @@ class BesTreeService extends BesService {
    */
   proofAll() {
     this.onStartProofing()
-    this.proofNode(this.hostElement, this.abortController)
+    this.proofNode(this.textElement, this.abortController)
     this.onProofingProgress(0)
   }
 
@@ -508,7 +521,7 @@ class BesTreeService extends BesService {
                   ) {
                     if (
                       !data[idx].markup &&
-                      /*startingOffset <= endOffset ← not needed, kept for reference &&*/ endOffset <=
+                      /*startingOffset <= endOffset &&*/ endOffset <=
                         startingOffset + data[idx].text.length
                     ) {
                       range.setEnd(data[idx].node, endOffset - startingOffset)
@@ -545,7 +558,8 @@ class BesTreeService extends BesService {
    * Tests if given block element has already been grammar-checked.
    *
    * @param {Element} el DOM element to check
-   * @returns {*} Result of grammar check if the element has already been grammar-checked; undefined otherwise.
+   * @returns {*} Result of grammar check if the element has already been grammar-checked;
+   *              undefined otherwise.
    */
   getProofing(el) {
     return this.results.find(result =>
@@ -615,8 +629,9 @@ class BesTreeService extends BesService {
    */
   isBlockElement(el) {
     // Always treat our host element as block.
-    // Otherwise, should one make it inline, proofing would not start on it misbelieving it's a part of a bigger block of text.
-    if (el === this.hostElement) return true
+    // Otherwise, should one make it inline, proofing would not start on it misbelieving it's a
+    // part of a bigger block of text.
+    if (el === this.textElement) return true
     switch (
       document.defaultView
         .getComputedStyle(el, null)
@@ -720,7 +735,9 @@ class BesTreeService extends BesService {
    *
    * Displays or hides grammar mistake popup.
    *
-   * @param {PointerEvent} event The event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
+   * @param {PointerEvent} event The event produced by a pointer such as the geometry of the
+   *                             contact point, the device type that generated the event, the
+   *                             amount of pressure that was applied on the contact surface, etc.
    */
   onClick(event) {
     const source = event?.detail !== 1 ? event?.detail : event
@@ -747,26 +764,25 @@ class BesTreeService extends BesService {
   }
 }
 
-/*************************************************************************
+/**************************************************************************************************
  *
  * DOM grammar-checking service
  *
- * This class provides grammar-checking functionality to contenteditable=
- * "true" HTML controls.
+ * This class provides grammar-checking functionality to contenteditable="true" HTML controls.
  *
- * May also be used on most of the HTML elements to highlight grammar
- * mistakes. Replacing text with suggestions from the grammar-checker will
- * not be possible when contenteditable is not "true".
+ * May also be used on most of the HTML elements to highlight grammar mistakes. Replacing text with
+ * suggestions from the grammar-checker will not be possible when contenteditable is not "true".
  *
- *************************************************************************/
+ *************************************************************************************************/
 class BesDOMService extends BesTreeService {
   /**
    * Constructs class.
    *
-   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service for
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
    */
   constructor(hostElement) {
-    super(hostElement)
+    super(hostElement, hostElement)
     this.onBeforeInput = this.onBeforeInput.bind(this)
     this.hostElement.addEventListener('beforeinput', this.onBeforeInput)
     this.onInput = this.onInput.bind(this)
@@ -831,23 +847,23 @@ class BesDOMService extends BesTreeService {
   }
 }
 
-/*************************************************************************
+/**************************************************************************************************
  *
  * CKEditor grammar-checking service
  *
- * This class provides grammar-checking functionality to CKEditor
- * controls.
+ * This class provides grammar-checking functionality to CKEditor controls.
  *
- *************************************************************************/
+ *************************************************************************************************/
 class BesCKService extends BesTreeService {
   /**
    * Constructs class.
    *
-   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service for
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
    * @param {*} ckEditorInstance CKEditor instance
    */
   constructor(hostElement, ckEditorInstance) {
-    super(hostElement)
+    super(hostElement, hostElement)
     this.ckEditorInstance = ckEditorInstance
     this.disableCKEditorSpellcheck()
     this.onChangeData = this.onChangeData.bind(this)
@@ -893,9 +909,10 @@ class BesCKService extends BesTreeService {
       this.clearProofing(domElement)
     }
 
-    // TODO: Research if input event or any other event that is called *after* the change is completed
-    // is possible with CKEditor, and move the code below this line there.
-    // SetTimeout is in fact necessary, because if we set specific height to the editable CKeditor element, it will not be updated immediately.
+    // TODO: Research if input event or any other event that is called *after* the change is
+    // completed is possible with CKEditor, and move the code below this line there.
+    // SetTimeout is in fact necessary, because if we set specific height to the editable CKeditor
+    // element, it will not be updated immediately.
     setTimeout(() => {
       // Now that the text is done changing, we can correctly calculate markup position.
       this.repositionAllMarkup()
@@ -981,26 +998,26 @@ class BesCKService extends BesTreeService {
   }
 }
 
-/*************************************************************************
+/**************************************************************************************************
  *
  * Plain-text grammar-checking service
  *
- * This class provides grammar-checking functionality to contenteditable=
- * "plaintext-only" HTML controls.
+ * This class provides common properties and methods for plain-text-only HTML controls like
+ * <input>, <textarea>, <div contenteditable="plaintext-only">...
  *
- * Note: Chrome and Edge only, as Firefox reverts contenteditable=
- * "plaintext-only" to "false". The grammar mistakes will be highlighted
- * nevertheless, but consider using BesDOMService on Firefox instead.
- *
- *************************************************************************/
+ *************************************************************************************************/
 class BesPlainTextService extends BesService {
   /**
    * Constructs class.
    *
-   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service for
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   * @param {Element} textElement The element in DOM tree that hosts coordinate-measurable clone of
+   *                              the text to proof. Same as hostElement for <div>, separate for
+   *                              <textarea> and <input> hosts.
    */
-  constructor(hostElement) {
-    super(hostElement)
+  constructor(hostElement, textElement) {
+    super(hostElement, textElement)
     this.reEOP = /(\r?\n){2,}/g
     this.onBeforeInput = this.onBeforeInput.bind(this)
     this.hostElement.addEventListener('beforeinput', this.onBeforeInput)
@@ -1010,18 +1027,6 @@ class BesPlainTextService extends BesService {
     this.hostElement.addEventListener('click', this.onClick)
   }
 
-  /**
-   * Registers grammar checking service.
-   *
-   * @param {Element} hostElement DOM element to register grammar checking service for
-   * @returns {BesPlainTextService} Grammar checking service instance
-   */
-  static register(hostElement) {
-    let service = new BesPlainTextService(hostElement)
-    service.proofAll()
-    return service
-  }
-
   /**
    * Unregisters grammar checking service.
    */
@@ -1033,123 +1038,6 @@ class BesPlainTextService extends BesService {
     super.unregister()
   }
 
-  /**
-   * Called to report the text is about to change
-   *
-   * Marks section of the text that is about to change as not-yet-grammar-checked.
-   *
-   * @param {InputEvent} event The event notifying the user of editable content changes
-   */
-  onBeforeInput(event) {
-    if (this.timer) clearTimeout(this.timer)
-    if (this.abortController) this.abortController.abort()
-
-    // Firefox does not support contenteditable="plaintext-only" at all, Chrome/Edge's InputEvent.getTargetRanges() return
-    // a useless empty array for contenteditable="plaintext-only". This makes tracking location of changes a pain.
-    // We need to save the text on beforeinput and compare it to the text on input event to do the this.clearProofing().
-    let { text } = this.getTextFromNodes()
-    this.textBeforeChange = text
-    // Continues in onInput...
-  }
-
-  /**
-   * Called to report the text has changed
-   *
-   * @param {InputEvent} event The event notifying the user of editable content changes
-   */
-  onInput(event) {
-    // ...Continued from onBeforeInput: Remove markup of all paragraphs that changed.
-    // Use the offsets before change, as paragraph changes have not been updated yet.
-    let paragraphRanges = new Set()
-    this.getTargetRanges().forEach(range => {
-      this.results.forEach(result => {
-        if (BesPlainTextService.isOverlappingParagraph(result.range, range))
-          paragraphRanges.add(result.range)
-      })
-    })
-    paragraphRanges.forEach(range => this.clearProofing(range))
-    delete this.textBeforeChange
-
-    // Now that the text is done changing, we can correctly calculate markup position.
-    this.repositionAllMarkup()
-
-    // Defer grammar-checking to reduce stress on grammar-checking server.
-    this.timer = setTimeout(() => {
-      this.proofAll()
-      delete this.timer
-    }, 1000)
-  }
-
-  /**
-   * Returns an array of ranges that will be affected by a change to the DOM.
-   *
-   * This method attempts to fix the Chrome/Edge shortcoming in InputEvent.getTargetRanges()
-   * failing to return meaningful range array on beforeinput event.
-   */
-  getTargetRanges() {
-    let textA = this.textBeforeChange
-    let { text, nodes } = this.getTextFromNodes()
-    let textB = text
-    let nodesB = nodes
-
-    let ranges = []
-    for (let i = 0, j = 0, nodeIdxB = 0; ; ) {
-      if (i >= textA.length && j >= textB.length) break
-      if (i >= textA.length) {
-        // Some text was appended.
-        let range = document.createRange()
-        range.setStart(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
-        range.setEndAfter(nodesB[nodesB.length - 1].node)
-        ranges.push(range)
-        break
-      }
-      if (j >= textB.length) {
-        // Some text was deleted at the end.
-        let range = document.createRange()
-        // range.setStartAfter(nodesB[nodesB.length - 1].node) // This puts range start at the </div>:1???
-        range.setStart(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
-        range.setEndAfter(nodesB[nodesB.length - 1].node)
-        ranges.push(range)
-        break
-      }
-      if (textA.charAt(i) != textB.charAt(j)) {
-        let range = document.createRange()
-        range.setStart(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
-        let a = textA.indexOf(textB.substr(j, 3), i)
-        if (a < 0) a = textA.length
-        let b = textB.indexOf(textA.substr(i, 3), j)
-        if (b < 0) b = textB.length
-        if (3 * (a - i) <= b - j) {
-          // Suppose some text was deleted.
-          i = a
-          range.setEnd(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
-        } else if (3 * (b - j) <= a - i) {
-          // Suppose some text was inserted.
-          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end < b)
-            nodeIdxB++
-          range.setEnd(nodesB[nodeIdxB].node, (j = b) - nodesB[nodeIdxB].start)
-          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end <= b)
-            nodeIdxB++
-        } else {
-          // Suppose some text was replaced.
-          i = a
-          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end < b)
-            nodeIdxB++
-          range.setEnd(nodesB[nodeIdxB].node, (j = b) - nodesB[nodeIdxB].start)
-          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end <= b)
-            nodeIdxB++
-        }
-        ranges.push(range)
-        while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end <= j) nodeIdxB++
-        continue
-      }
-      i++
-      while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end <= j) nodeIdxB++
-      j++
-    }
-    return ranges
-  }
-
   /**
    * Grammar-(re)checks the host element.
    */
@@ -1267,7 +1155,7 @@ class BesPlainTextService extends BesService {
     let nodes = []
     let text = ''
     for (
-      let node = this.hostElement.childNodes[0];
+      let node = this.textElement.childNodes[0];
       node;
       node = node.nextSibling
     ) {
@@ -1285,7 +1173,8 @@ class BesPlainTextService extends BesService {
    * Tests if given paragraph has already been grammar-checked.
    *
    * @param {Range} range Paragraph range
-   * @returns {*} Result of grammar check if the element has already been grammar-checked; undefined otherwise.
+   * @returns {*} Result of grammar check if the element has already been grammar-checked;
+   *              undefined otherwise.
    */
   getProofing(range) {
     return this.results.find(result =>
@@ -1370,7 +1259,9 @@ class BesPlainTextService extends BesService {
    *
    * Displays or hides grammar mistake popup.
    *
-   * @param {PointerEvent} event The event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
+   * @param {PointerEvent} event The event produced by a pointer such as the geometry of the
+   *                             contact point, the device type that generated the event, the
+   *                             amount of pressure that was applied on the contact surface, etc.
    */
   onClick(event) {
     const source = event?.detail !== 1 ? event?.detail : event
@@ -1395,16 +1286,416 @@ class BesPlainTextService extends BesService {
     }
     BesPopup.hide()
   }
+
+  /**
+   * Simple string compare.
+   * 
+   * For performance reasons, this method compares only string beginnings and endings. Maximum one
+   * difference is reported.
+   *
+   * @param {String} x First string
+   * @param {String} y Second string
+   * @returns {Array} Array of string differences
+   */
+  static diffStrings(x, y) {
+    let m = x.length,
+      n = y.length
+    for (let i = 0; ; ++i) {
+      if (i >= m && i >= n) return []
+      if (i >= m) return [{ type: '+', start: i, length: n - i }]
+      if (i >= n) return [{ type: '-', start: i, end: m }]
+      if (x.charAt(i) !== y.charAt(i)) {
+        for (;;) {
+          if (m <= i) return [{ type: '+', start: i, length: n - i }]
+          if (n <= i) return [{ type: '-', start: i, end: m }]
+          --m, --n
+          if (x.charAt(m) !== y.charAt(n))
+            return [{ type: '*', start: i, end: m + 1, length: n - i + 1 }]
+        }
+      }
+    }
+  }
 }
 
-/*************************************************************************
+/**************************************************************************************************
+ *
+ * Plain-text grammar-checking service
+ *
+ * This class provides grammar-checking functionality to contenteditable="plaintext-only" HTML
+ * controls.
+ *
+ * Note: Chrome and Edge only, as Firefox reverts contenteditable="plaintext-only" to "false". The
+ * grammar mistakes will be highlighted nevertheless, but consider using BesDOMService on Firefox
+ * instead.
+ *
+ *************************************************************************************************/
+class BesDOMPlainTextService extends BesPlainTextService {
+  /**
+   * Constructs class.
+   *
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   */
+  constructor(hostElement) {
+    super(hostElement, hostElement)
+  }
+
+  /**
+   * Registers grammar checking service.
+   *
+   * @param {Element} hostElement DOM element to register grammar checking service for
+   * @returns {BesDOMPlainTextService} Grammar checking service instance
+   */
+  static register(hostElement) {
+    let service = new BesDOMPlainTextService(hostElement)
+    service.proofAll()
+    return service
+  }
+
+  /**
+   * Called to report the text is about to change
+   *
+   * Marks section of the text that is about to change as not-yet-grammar-checked.
+   *
+   * @param {InputEvent} event The event notifying the user of editable content changes
+   */
+  onBeforeInput(event) {
+    if (this.timer) clearTimeout(this.timer)
+    if (this.abortController) this.abortController.abort()
+
+    // Firefox does not support contenteditable="plaintext-only" at all, Chrome/Edge's InputEvent.
+    // getTargetRanges() return a useless empty array for contenteditable="plaintext-only". This
+    // makes tracking location of changes a pain. We need to save the text on beforeinput and
+    // compare it to the text on input event to do the this.clearProofing().
+    let { text } = this.getTextFromNodes()
+    this.textBeforeChange = text
+    // Continues in onInput...
+  }
+
+  /**
+   * Called to report the text has changed
+   *
+   * @param {InputEvent} event The event notifying the user of editable content changes
+   */
+  onInput(event) {
+    // ...Continued from onBeforeInput: Remove markup of all paragraphs that changed.
+    // Use the offsets before change, as paragraph changes have not been updated yet.
+    let paragraphRanges = new Set()
+    this.getTargetRanges().forEach(range => {
+      this.results.forEach(result => {
+        if (BesPlainTextService.isOverlappingParagraph(result.range, range))
+          paragraphRanges.add(result.range)
+      })
+    })
+    paragraphRanges.forEach(range => this.clearProofing(range))
+    delete this.textBeforeChange
+
+    // Now that the text is done changing, we can correctly calculate markup position.
+    this.repositionAllMarkup()
+
+    // Defer grammar-checking to reduce stress on grammar-checking server.
+    this.timer = setTimeout(() => {
+      this.proofAll()
+      delete this.timer
+    }, 1000)
+  }
+
+  /**
+   * Returns an array of ranges that will be affected by a change to the DOM.
+   *
+   * This method attempts to fix the Chrome/Edge shortcoming in InputEvent.getTargetRanges()
+   * failing to return meaningful range array on beforeinput event.
+   */
+  getTargetRanges() {
+    let textA = this.textBeforeChange
+    let { text, nodes } = this.getTextFromNodes()
+    let textB = text
+    let nodesB = nodes
+    let diff = BesPlainTextService.diffStrings(textA, textB)
+    let ranges = []
+    for (
+      let i = 0, j = 0, nodeIdxB = 0, diffIdx = 0;
+      diffIdx < diff.length;
+      ++diffIdx
+    ) {
+      let length = diff[diffIdx].start - i
+      i = diff[diffIdx].start
+      j += length
+      while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end < j) nodeIdxB++
+      let range = document.createRange()
+      range.setStart(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
+      switch (diff[diffIdx].type) {
+        case '-': {
+          // Suppose some text was deleted.
+          i = diff[diffIdx].end
+          range.setEnd(nodesB[nodeIdxB].node, j - nodesB[nodeIdxB].start)
+          break
+        }
+        case '+': {
+          // Suppose some text was inserted.
+          let b = j + diff[diffIdx].length
+          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end < b)
+            nodeIdxB++
+          range.setEnd(nodesB[nodeIdxB].node, (j = b) - nodesB[nodeIdxB].start)
+          break
+        }
+        case 'x': {
+          // Suppose some text was replaced.
+          i = diff[diffIdx].end
+          let b = j + diff[diffIdx].length
+          while (nodeIdxB < nodesB.length && nodesB[nodeIdxB].end < b)
+            nodeIdxB++
+          range.setEnd(nodesB[nodeIdxB].node, (j = b) - nodesB[nodeIdxB].start)
+          break
+        }
+      }
+      ranges.push(range)
+    }
+    return ranges
+  }
+}
+
+/**************************************************************************************************
+ *
+ * Plain-text grammar-checking service
+ *
+ * This class provides grammar-checking functionality to <textarea> HTML controls.
+ *
+ *************************************************************************************************/
+class BesTAService extends BesPlainTextService {
+  /**
+   * Constructs class.
+   *
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   */
+  constructor(hostElement) {
+    super(hostElement, BesTAService.createTextElement(hostElement))
+    this.textElement.replaceChildren(
+      document.createTextNode(this.hostElement.value)
+    )
+  }
+
+  /**
+   * Registers grammar checking service.
+   *
+   * @param {Element} hostElement DOM element to register grammar checking service for
+   * @returns {BesTAService} Grammar checking service instance
+   */
+  static register(hostElement) {
+    let service = new BesTAService(hostElement)
+    service.proofAll()
+    return service
+  }
+
+  /**
+   * Creates a clone div element for the <textarea> element
+   *
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   * @returns The element in DOM tree that hosts text to proof. Same as hostElement, separate for
+   *          <textarea> and <input> hosts.
+   */
+  static createTextElement(hostElement) {
+    const textElement = document.createElement('div')
+    textElement.classList.add('bes-text-panel')
+    textElement.style.zIndex = hostElement.style.zIndex - 1
+    BesTAService.setTextElementSize(hostElement, textElement)
+    hostElement.parentNode.insertBefore(textElement, hostElement)
+    return textElement
+  }
+
+  /**
+   * Sets the size of the clone div element to match the <textarea> element
+   * TODO: This method should sync text element size only. Add another method for keeping styles in
+   *       sync using MutationObserver.
+   *
+   * @param {Element} hostElement The element in DOM tree we are providing grammar-checking service
+   *                              for
+   * @param {Element} textElement The element in DOM tree that hosts coordinate-measurable clone of
+   *                              the text to proof. Same as hostElement for <div>, separate for
+   *                              <textarea> and <input> hosts.
+   */
+  static setTextElementSize(hostElement, textElement) {
+    const rect = hostElement.getBoundingClientRect()
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft
+    const styles = window.getComputedStyle(hostElement)
+
+    textElement.style.fontSize = styles.fontSize
+    textElement.style.fontFamily = styles.fontFamily
+    textElement.style.lineHeight = styles.lineHeight
+    textElement.style.whiteSpace = styles.whiteSpace
+    textElement.style.whiteSpaceCollapse = styles.whiteSpaceCollapse
+    textElement.style.hyphens = styles.hyphens
+    textElement.style.margin = styles.margin
+    textElement.style.border = styles.border
+    textElement.style.borderRadius = styles.borderRadius
+    textElement.style.padding = styles.padding
+    textElement.style.height = styles.height
+    textElement.style.minHeight = styles.minHeight
+    textElement.style.maxHeight = styles.maxHeight
+    textElement.style.overflow = styles.overflow
+    textElement.style.overflowWrap = styles.overflowWrap
+    textElement.style.top = `${rect.top + scrollTop}px`
+    textElement.style.left = `${rect.left + scrollLeft}px`
+    textElement.style.width = styles.width
+    textElement.style.minWidth = styles.minWidth
+    textElement.style.maxWidth = styles.maxWidth
+  }
+
+  /**
+   * Called to report resizing
+   */
+  onResize() {
+    BesTAService.setTextElementSize(this.hostElement, this.textElement)
+    super.onResize()
+  }
+
+  /**
+   * Called to report repositioning
+   */
+  onReposition() {
+    BesTAService.setTextElementSize(this.hostElement, this.textElement)
+    super.onReposition()
+  }
+
+  /**
+   * Called to report the text is about to change
+   *
+   * @param {InputEvent} event The event notifying the user of editable content changes
+   */
+  onBeforeInput(event) {
+    if (this.timer) clearTimeout(this.timer)
+    if (this.abortController) this.abortController.abort()
+  }
+
+  /**
+   * Called to report <textarea> content change
+   */
+  onInput(event) {
+    // Determine ranges of text that will change.
+    let { text, nodes } = this.getTextFromNodes()
+    let textA = text
+    let nodesA = nodes
+    let textB = this.hostElement.value
+    let diff = BesPlainTextService.diffStrings(textA, textB)
+    let changes = []
+    for (
+      let i = 0, j = 0, nodeIdxA = 0, diffIdx = 0;
+      diffIdx < diff.length;
+      ++diffIdx
+    ) {
+      let length = diff[diffIdx].start - i
+      i = diff[diffIdx].start
+      while (nodeIdxA < nodesA.length && nodesA[nodeIdxA].end < i) nodeIdxA++
+      let change = {
+        range: document.createRange()
+      }
+      change.range.setStart(nodesA[nodeIdxA].node, i - nodesA[nodeIdxA].start)
+      j += length
+      switch (diff[diffIdx].type) {
+        case '-': {
+          // Suppose some text was deleted.
+          while (
+            nodeIdxA < nodesA.length &&
+            nodesA[nodeIdxA].end < diff[diffIdx].end
+          )
+            nodeIdxA++
+          change.range.setEnd(
+            nodesA[nodeIdxA].node,
+            (i = diff[diffIdx].end) - nodesA[nodeIdxA].start
+          )
+          break
+        }
+        case '+': {
+          // Suppose some text was inserted.
+          let b = j + diff[diffIdx].length
+          change.range.setEnd(nodesA[nodeIdxA].node, i - nodesA[nodeIdxA].start)
+          change.replacement = textB.substring(j, b)
+          j = b
+          break
+        }
+        case 'x': {
+          // Suppose some text was replaced.
+          while (
+            nodeIdxA < nodesA.length &&
+            nodesA[nodeIdxA].end < diff[diffIdx].end
+          )
+            nodeIdxA++
+          change.range.setEnd(
+            nodesA[nodeIdxA].node,
+            (i = diff[diffIdx].end) - nodesA[nodeIdxA].start
+          )
+          let b = j + diff[diffIdx].length
+          change.replacement = textB.substring(j, b)
+          j = b
+          break
+        }
+      }
+      changes.push(change)
+    }
+
+    // Clear proofing for paragraphs that are about to change.
+    let paragraphRanges = new Set()
+    changes.forEach(change => {
+      this.results.forEach(result => {
+        if (
+          BesPlainTextService.isOverlappingParagraph(result.range, change.range)
+        )
+          paragraphRanges.add(result.range)
+      })
+    })
+    paragraphRanges.forEach(range => this.clearProofing(range))
+
+    // Sync changes between hostElement and textElement.
+    changes.forEach(change => {
+      change.range.deleteContents()
+      if (change.replacement)
+        change.range.insertNode(document.createTextNode(change.replacement))
+    })
+
+    // Now that the text is done changing, we can correctly calculate markup position.
+    this.repositionAllMarkup()
+
+    // Defer grammar-checking to reduce stress on grammar-checking server.
+    this.timer = setTimeout(() => {
+      this.proofAll()
+      delete this.timer
+    }, 1000)
+  }
+
+  /**
+   * Checks if host element content is editable.
+   *
+   * @returns true if editable; false otherwise
+   */
+  isContentEditable() {
+    return !this.hostElement.disabled && !this.hostElement.readOnly
+  }
+
+  /**
+   * Replaces grammar checking match with a suggestion provided by grammar checking service.
+   *
+   * @param {*} el Block element/paragraph containing grammar checking rule match
+   * @param {*} match Grammar checking rule match
+   * @param {String} replacement Text to replace grammar checking match with
+   */
+  replaceText(el, match, replacement) {
+    super.replaceText(el, match, replacement)
+    let { text, nodes } = this.getTextFromNodes()
+    this.hostElement.value = text
+  }
+}
+
+/**************************************************************************************************
  *
  * Grammar mistake popup dialog
  *
- * This is internal class implementing the pop-up dialog user may invoke
- * by clicking on a highlighted grammar mistake in text.
+ * This is internal class implementing the pop-up dialog user may invoke by clicking on a
+ * highlighted grammar mistake in text.
  *
- *************************************************************************/
+ *************************************************************************************************/
 class BesPopup extends HTMLElement {
   constructor() {
     super()
@@ -1509,7 +1800,8 @@ class BesPopup extends HTMLElement {
   show(x, y) {
     this.style.position = 'fixed'
 
-    // Element needs some initial placement for the browser to provide this.offsetWidth and this.offsetHeight measurements.
+    // Element needs some initial placement for the browser to provide this.offsetWidth and this.
+    // offsetHeight measurements.
     // The fade-in effect on the popup window should prevent flicker.
     this.style.left = `0px`
     this.style.top = `0px`
@@ -1547,7 +1839,8 @@ class BesPopup extends HTMLElement {
    * @param {*} el Block element/paragraph containing the grammar mistake
    * @param {*} match Grammar checking rule match
    * @param {BesService} service Grammar checking service
-   * @param {Boolean} allowReplacements Host element is mutable and grammar mistake may be replaced by suggestion
+   * @param {Boolean} allowReplacements Host element is mutable and grammar mistake may be replaced
+   *                                    by suggestion
    */
   appendReplacements(el, match, service, allowReplacements) {
     const replacementDiv = this.shadowRoot.querySelector('.bes-replacement-div')
@@ -1789,7 +2082,7 @@ window.addEventListener('load', () => {
       hostElement.getAttribute('contenteditable').toLowerCase() ===
       'plaintext-only'
     ) {
-      BesPlainTextService.register(hostElement)
+      BesDOMPlainTextService.register(hostElement)
     } else {
       BesDOMService.register(hostElement)
     }
diff --git a/styles.css b/styles.css
index b9f02c5..b316aed 100644
--- a/styles.css
+++ b/styles.css
@@ -71,6 +71,13 @@
   background-image: url('images/mistake-svgrepo-com.svg');
 }
 
+.bes-text-panel {
+  position: absolute;
+  color: transparent;
+  border-color: transparent;
+  background: none;
+}
+
 /* TODO: Styles below should be removed after testing period is over */
 .resizable {
   overflow-x: scroll;
