diff --git a/service2.js b/service2.js index f7607ba..5cc0844 100644 --- a/service2.js +++ b/service2.js @@ -26,6 +26,7 @@ class BesService { this.hostElement = hostElement this.results = [] // Results of grammar-checking, one per each block/paragraph of text this.createCorrectionPanel() + this.firstCall = true // Disable browser built-in spell-checker to prevent collision with our grammar markup. this.originalSpellcheck = this.hostElement.spellcheck @@ -777,7 +778,16 @@ class BesDOMService extends BesTreeService { */ onInput() { // Now that the text is done changing, we can correctly calculate markup position. - this.repositionAllMarkup() + // This is a way to resolve lagginess in repositioning markup with many mistakes. + if (this.firstCall) { + this.repositionAllMarkup() + this.firstCall = false + } + clearTimeout(this.debounceTimer) + this.debounceTimer = setTimeout(() => { + this.repositionAllMarkup() + this.firstCall = true + }, 300) // Defer grammar-checking to reduce stress on grammar-checking server. this.timer = setTimeout(() => { @@ -1369,6 +1379,7 @@ class BesPopup extends HTMLElement { display: block; } .popup-text { + font-size: 0.93rem; max-width: 160px; color: black; text-align: center; @@ -1376,9 +1387,10 @@ class BesPopup extends HTMLElement { z-index: 1; } .bes-popup-container { + font-family: Arial, sans-serif; visibility: hidden; min-width: 200px; - max-width: 300px; + max-width: 350px; background-color: rgb(241, 243, 249); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; @@ -1414,6 +1426,9 @@ class BesPopup extends HTMLElement { .bes-replacement-btn:hover{ background-color: #1976f0; } + .bes-replacement-div{ + margin-top: 4px; + } :host(.show) .bes-popup-container { visibility: visible; animation: fadeIn 1s; @@ -1511,7 +1526,7 @@ class BesPopup extends HTMLElement { */ changeMessage(text) { this.clearReplacements() - this.shadowRoot.querySelector('.popup-text').textContent = text + this.shadowRoot.querySelector('.popup-text').innerText = text } /**