service.js

@@ -63,8 +63,6 @@ class BesService {
 
     this.onScroll = this.onScroll.bind(this)
     this.hostElement.addEventListener('scroll', this.onScroll)
-    this.onShortcutNavigation = this.onShortcutNavigation.bind(this)
-    this.hostElement.addEventListener('keydown', this.onShortcutNavigation)
 
     this.hostBoundingClientRect = this.hostElement.getBoundingClientRect()
     this.mutationObserver = new MutationObserver(this.onBodyMutate.bind(this))
@@ -111,7 +109,6 @@ class BesService {
     if (this.abortController) this.abortController.abort()
     besServices = besServices.filter(item => item !== this)
     this.mutationObserver.disconnect()
-    this.hostElement.removeEventListener('keydown', this.onShortcutNavigation)
     this.hostElement.removeEventListener('scroll', this.onScroll)
     this.hostElement.setAttribute('spellcheck', this.originalSpellcheck)
     this.hostElement.setAttribute('data-gramm', this.originalDataGramm)
@@ -279,9 +276,6 @@ class BesService {
    */
   onProofingProgress(numberOfMatches) {
     this.proofingMatches += numberOfMatches
-    // Sorting the array here is preferable to sorting only in onEndProofing.This way it allows users to interact
-    // with and navigate newly detected mistakes as soon as they appear.
-    this.sortMatchesArray()
     if (this.eventSink && 'proofingProgress' in this.eventSink)
       this.eventSink.proofingProgress(this)
     if (--this.proofingCount <= 0) this.onEndProofing()
@@ -330,46 +324,6 @@ class BesService {
     }
   }
 
-  /**
-   * Called to report keydown event
-   *
-   * @param {Event} e
-   */
-  onShortcutNavigation(e) {
-    switch (e.code) {
-      case 'BracketLeft':
-        if (e.ctrlKey) {
-          // Handle Ctrl + [  OR Ctrl + Š
-          e.preventDefault()
-          e.stopPropagation()
-          BesService.findNextMistake(this, -1)
-        }
-        break
-      case 'BracketRight':
-        if (e.ctrlKey) {
-          // Handle Ctrl + ] OR Ctrl + Đ
-          e.preventDefault()
-          e.stopPropagation()
-          BesService.findNextMistake(this, 1)
-        }
-        break
-      case 'Enter':
-        // Handle Ctrl + Enter
-        if (e.ctrlKey) {
-          if (!this.highlightElements.length) return
-          e.preventDefault()
-          e.stopPropagation()
-          this.acceptReplacement()
-        }
-        break
-      case 'Escape':
-        this.dismissPopup()
-        break
-      default:
-        break
-    }
-  }
-
   /**
    * Called to report repositioning
    */
@@ -424,11 +378,6 @@ class BesService {
       this.ctx.strokeStyle = styles.color
       this.ctx.fillStyle = styles.color
       amplitude = -1
-    } else if (ruleId === 'BESANA_178' /*PR_VNAP_POPRAVEK_UI*/) {
-      const styles = window.getComputedStyle(this.highlightAI)
-      this.ctx.strokeStyle = styles.color
-      this.ctx.fillStyle = styles.color
-      amplitude = 1
     } else {
       const styles = window.getComputedStyle(this.highlightGrammar)
       this.ctx.strokeStyle = styles.color
@@ -738,9 +687,7 @@ class BesService {
           const x2 = rect.right
           const y = rect.bottom
           const scale = (rect.bottom - rect.top) / 18
-          if (ruleId !== 'MORFOLOGIK_RULE') {
+          this.drawAttentionRequired(x1, x2, y, amplitude, scale)
-            this.drawDoubleUnderline(x1, x2, y, scale)
-          } else this.drawAttentionRequired(x1, x2, y, amplitude, scale)
         }
 
         markerY1 = Math.min(...match.highlights.map(rect => rect.top))
@@ -940,23 +887,6 @@ class BesService {
     this.ctx.stroke()
   }
 
-  /**
-   *
-   * @param {Number} x1 Sign left [px]
-   * @param {Number} x2 Sign right [px]
-   * @param {Number} y Sign baseline [px]
-   * @param {Number} scale Sign scale
-   */
-  drawDoubleUnderline(x1, x2, y, scale) {
-    const dpr = window.devicePixelRatio
-    this.ctx.beginPath()
-    this.ctx.moveTo(x1 * dpr, (y - 2 * scale) * dpr)
-    this.ctx.lineTo(x2 * dpr, (y - 2 * scale) * dpr)
-    this.ctx.moveTo(x1 * dpr, (y + 1 * scale) * dpr)
-    this.ctx.lineTo(x2 * dpr, (y + 1 * scale) * dpr)
-    this.ctx.stroke()
-  }
-
   /**
    * Sets markup font
    *
@@ -1034,11 +964,6 @@ class BesService {
     )
   }
 
-  static arrowBtnNavigation(value, service) {
-    const direction = value === 'forward' ? 1 : value === 'back' ? -1 : 0
-    BesService.findNextMistake(service, direction)
-  }
-
   /**
    * Creates auxiliary DOM elements for text adornments.
    */
@@ -1057,16 +982,12 @@ class BesService {
     this.highlightSpelling = document.createElement('div')
     this.highlightSpelling.classList.add('bes-highlight-placeholder')
     this.highlightSpelling.classList.add('bes-highlight-spelling')
-    this.highlightAI = document.createElement('div')
-    this.highlightAI.classList.add('bes-highlight-placeholder')
-    this.highlightAI.classList.add('bes-highlight-ai')
     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.highlightAI)
     this.correctionPanel.appendChild(this.highlightGrammar)
     this.scrollPanel.appendChild(this.canvasPanel)
     this.textElement.parentElement.insertBefore(
@@ -1145,14 +1066,8 @@ class BesService {
     hits.forEach(({ el, match }) => {
       popup.setContent(el, match, this, this.isContentEditable())
       this.highlightMistake(match)
-      const containerRect = this.hostElement.getBoundingClientRect()
-      match.highlights.forEach(rect => {
-        const clientX = rect.x + containerRect.left
-        const clientY =
-          rect.y + containerRect.top + rect.height - this.hostElement.scrollTop
-        popup.show(clientX, clientY, this)
-      })
     })
+    popup.show(source.clientX, source.clientY)
   }
 
   /**
@@ -1168,8 +1083,6 @@ class BesService {
       el.classList.add(
         match.match.rule.id.startsWith('MORFOLOGIK_RULE')
           ? 'bes-highlight-spelling'
-          : match.match.rule.id === 'BESANA_178' /*PR_VNAP_POPRAVEK_UI*/
-          ? 'bes-highlight-ai'
           : 'bes-highlight-grammar'
       )
       el.style.left = `${rect.x + canvasPanelRect.x + window.scrollX}px`
@@ -1177,113 +1090,19 @@ class BesService {
       el.style.width = `${rect.width}px`
       el.style.height = `${rect.height}px`
       document.body.appendChild(el)
-      const matchSorted =
+      this.highlightElements.push(el)
-        this.sortedMatches.find(entry => entry.match === match) || null
-      this.highlightElements.push({ el, matchSorted })
     })
   }
 
-  /**
-   * This function finds the next/previous mistake.
-   * @param {Number} direction Navigation direction: 1 for next, -1 for previous
-   * @returns
-   */
-  static findNextMistake(service, direction = 1) {
-    if (!service || !service.sortedMatches || !service.sortedMatches.length)
-      return
-    const active = service.highlightElements.find(
-      ({ matchSorted }) => matchSorted
-    )
-    let current = -1
-    if (active && active.matchSorted) {
-      current = service.sortedMatches.findIndex(
-        entry => entry.match === active.matchSorted.match
-      )
-    }
-
-    const len = service.sortedMatches.length
-    const next = (current + direction + len) % len
-    service.activeMatchIndex = next
-    const { el, match } = service.sortedMatches[next]
-
-    if (el && typeof el.scrollIntoView === 'function') {
-      el.scrollIntoView({ behavior: 'instant', block: 'center' })
-    }
-    // Not the cleanest solution to setTimeout()
-    setTimeout(() => {
-      service.dismissPopup()
-      const popup = document.querySelector('bes-popup-el')
-      BesPopup.clearReplacements()
-      popup.setContent(el, match, service, service.isContentEditable())
-      service.highlightMistake(match)
-      const containerRect = service.hostElement.getBoundingClientRect()
-      match.highlights.forEach(rect => {
-        const clientX = rect.x + containerRect.left
-        const clientY =
-          rect.y +
-          containerRect.top +
-          rect.height -
-          service.hostElement.scrollTop
-        popup.show(clientX, clientY, service)
-      })
-    }, 150)
-  }
-
-  /**
-   * Accepts the replacement for the current grammar mistake.
-   */
-  acceptReplacement() {
-    const popup = document.querySelector('bes-popup-el')
-    const replacementDiv = popup.shadowRoot.querySelector(
-      '.bes-replacement-div'
-    )
-    const firstReplacement = replacementDiv?.firstChild
-    if (replacementDiv.childElementCount === 1) {
-      // Is this an ugly solution?
-      firstReplacement.click()
-    } else if (replacementDiv.childElementCount > 1) {
-      firstReplacement.focus()
-    } else BesService.findNextMistake(this, 1)
-  }
-
   /**
    * Clears highlight and hides popup
    */
   dismissPopup() {
     BesPopup.hide()
-    this.highlightElements.forEach(obj => {
+    this.highlightElements.forEach(el => el.remove())
-      if (obj.el && typeof obj.el.remove === 'function') {
-        obj.el.remove()
-      }
-    })
     this.highlightElements = []
   }
 
-  /**
-   * This function collects all matches from the results array, flattens them into a single array,
-   * and sorts them in order: first by their Y axis, then by X axis.
-   */
-  sortMatchesArray() {
-    this.sortedMatches = []
-    this.results.forEach(element => {
-      element.matches.forEach(match => {
-        if (!match.highlights || !match.highlights.length) return
-        this.sortedMatches.push({
-          el: element.element,
-          match,
-          top: match.highlights[0].top
-        })
-      })
-    })
-    this.sortedMatches.sort((a, b) => {
-      if (a.top !== b.top) return a.top - b.top
-
-      const aLeft = a.match.highlights[0].left
-      const bLeft = b.match.highlights[0].left
-      return aLeft - bLeft
-    })
-  }
-
   /**
    * Checks if host element content is editable.
    *
@@ -2038,7 +1857,6 @@ class BesQuillService extends BesTreeService {
   onChangeData(delta) {
     let index = 0
     let reproofNeeded = false
-    const affectedBlocks = new Set()
 
     delta.ops.forEach(op => {
       if (op.retain) {
@@ -2048,12 +1866,11 @@ class BesQuillService extends BesTreeService {
         }
       } else if (op.insert) {
         reproofNeeded = true
-        index += typeof op.insert === 'string' ? op.insert.length : 1 // Handle string or embed
+        index += op.insert.length
       } else if (op.delete) {
         reproofNeeded = true
       }
     })
-
     if (reproofNeeded) {
       const editorLength = this.quillInstance.getLength()
       const clampedIndex = Math.min(index, editorLength - 1)
@@ -2062,55 +1879,22 @@ class BesQuillService extends BesTreeService {
       if (leaf) {
         let domElement = leaf.domNode
 
-        // Traverse up to find the block element
         while (domElement && !this.isBlockElement(domElement)) {
           domElement = domElement.parentNode
         }
+        if (domElement) {
+          this.clearProofing(domElement)
 
-        if (domElement) affectedBlocks.add(domElement)
+          setTimeout(() => {
+            this.redrawAllMistakeMarkup()
+            this.scheduleProofing(1000)
+          }, 0)
+        }
       } else {
         console.warn(
           'Leaf is null. The index might be out of bounds or the editor content is empty.'
         )
       }
-
-      // Handle pasted content spanning multiple blocks
-      const selection = this.quillInstance.getSelection()
-      if (selection) {
-        const [startLeaf] = this.quillInstance.getLeaf(selection.index)
-        const [endLeaf] = this.quillInstance.getLeaf(
-          selection.index + selection.length
-        )
-
-        if (startLeaf && endLeaf) {
-          let startElement = startLeaf.domNode
-          let endElement = endLeaf.domNode
-
-          while (startElement && !this.isBlockElement(startElement)) {
-            startElement = startElement.parentNode
-          }
-          while (endElement && !this.isBlockElement(endElement)) {
-            endElement = endElement.parentNode
-          }
-
-          if (startElement && endElement) {
-            let currentElement = startElement
-            while (currentElement) {
-              affectedBlocks.add(currentElement)
-              if (currentElement === endElement) break
-              currentElement = currentElement.nextElementSibling
-            }
-          }
-        }
-      }
-
-      // Clear proofing for all affected blocks
-      affectedBlocks.forEach(block => this.clearProofing(block))
-
-      // Schedule proofing for all affected blocks
-      setTimeout(() => {
-        this.scheduleProofing(1000)
-      }, 0)
     }
   }
 
@@ -2916,7 +2700,7 @@ class BesPopup extends HTMLElement {
           padding: 3px 2px;
         }
         .bes-toolbar button {
-          margin-right: 0px;
+          margin-right: 2px;
         }
         .bes-popup-title {
           color: #333;
@@ -2941,12 +2725,6 @@ class BesPopup extends HTMLElement {
         }
         .bes-replacement-btn:hover{
           background-color: #1976f0;
-        }
-          .bes-replacement-btn:focus{
-          outline: -webkit-focus-ring-color auto 1px;
-        }
-          .bes-replacement-btn:focus-visible{
-          outline: -webkit-focus-ring-color auto 1px;
         }
         .bes-replacement-div{
           margin-top: 4px;
@@ -2962,17 +2740,11 @@ class BesPopup extends HTMLElement {
         .bes-close-btn svg {
           width: 100%;
           height: 100%;
-        }
+          fill: #333;
-        .bes-mistake-nav{
-          margin-right: 10px;
-        }
-        :host{
-          --bes-close-icon: #485362;
-          --hover-bg-clr: #dee3ed;
         }
         .bes-close-btn:hover {
-          background: var(--hover-bg-clr);
+          background: #dee3ed;
-          border-radius: 4px
+          border-radius: 8px
         }
         :host(.show) .bes-popup-container {
           visibility: visible;
@@ -3001,45 +2773,17 @@ class BesPopup extends HTMLElement {
             background-color: #111213;
             border: 1px solid #2e3036;
           }
-          :host{
-            --bes-close-icon: #a4b5c7;
-            --hover-bg-clr:rgba(189, 189, 189, 0.28);
-            }
         }
       </style>
       <div class="bes-popup-container">
         <div class="bes-toolbar">
           <div class="bes-popup-title">Besana</div>
-           <div class="bes-mistake-nav">
-          <button class="bes-close-btn" title="Prejšnja napaka">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 20V7.825l-5.6 5.6L4 12l8-8l8 8l-1.4 1.425l-5.6-5.6V20z"/></svg>
-          </button>
-          <button class="bes-close-btn" title="Naslednja napaka">
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="var(--bes-close-icon)" d="M11 4v12.175l-5.6-5.6L4 12l8 8l8-8l-1.4-1.425l-5.6 5.6V4z"/></svg>
-          </button>
-          </div>
           <button class="bes-close-btn" onclick="BesPopup.dismiss()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="var(--bes-close-icon)" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"/></svg>
           </button>
         </div>
       </div>
     `
-    const prevBtn = this.shadowRoot.querySelector(
-      '.bes-mistake-nav .bes-close-btn[title="Prejšnja napaka"]'
-    )
-    const nextBtn = this.shadowRoot.querySelector(
-      '.bes-mistake-nav .bes-close-btn[title="Naslednja napaka"]'
-    )
-
-    prevBtn.addEventListener('click', () => {
-      if (this.hostElService)
-        BesService.arrowBtnNavigation('back', this.hostElService)
-    })
-    nextBtn.addEventListener('click', () => {
-      if (this.hostElService)
-        BesService.arrowBtnNavigation('forward', this.hostElService)
-    })
-
     this.addEventListener('mousedown', this.onMouseDown)
   }
 
@@ -3049,9 +2793,8 @@ class BesPopup extends HTMLElement {
    * @param {Number} x X location hint
    * @param {Number} y Y location hint
    */
-  show(x, y, service) {
+  show(x, y) {
     this.style.position = 'fixed'
-    this.hostElService = service
 
     // Element needs some initial placement for the browser to provide this.offsetWidth and this.
     // offsetHeight measurements.

styles.css

@@ -5,34 +5,24 @@
 }
 
 .bes-highlight-spelling {
-  color: rgb(242, 90, 90);
+  color: hsl(211, 100%, 60%);
-  background: hsla(0, 100%, 67%, 0.18);
+  background: hsla(211, 100%, 60%, 0.3);
-}
-
-.bes-highlight-ai {
-  color: rgb(139, 62, 223);
-  background: hsla(262, 70%, 56%, 0.18);
 }
 
 .bes-highlight-grammar {
-  color: rgb(60, 120, 220);
+  color: hsl(27, 100%, 45%);
-  background: hsla(220, 80%, 56%, 0.18);
+  background: hsla(27, 100%, 45%, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
   .bes-highlight-spelling {
-    color: rgb(255, 120, 120);
+    color: hsl(211, 100%, 55%);
-    background: hsla(0, 100%, 67%, 0.32);
+    background: hsla(211, 100%, 55%, 0.3);
-  }
-
-  .bes-highlight-ai {
-    color: rgb(180, 120, 255);
-    background: hsla(262, 70%, 56%, 0.32);
   }
 
   .bes-highlight-grammar {
-    color: rgb(100, 164, 243);
+    color: hsl(27, 100%, 65%);
-    background: hsla(220, 80%, 56%, 0.32);
+    background: hsla(27, 100%, 65%, 0.3);
   }
 }