Amebis/BesService
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance popupCorrectionPanel to highlight selected elements #2

Browse Source
This commit is contained in:
Aljaž Grilc 2025-01-13 10:27:05 +01:00
parent 7344379e85
commit ac7fe2b90e
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
service.js
View File

@ -426,11 +426,11 @@ class BesService {
* @param {*} match Grammar checking rule match * @param {*} match Grammar checking rule match
* @param {PointerEvent} source Click event source * @param {PointerEvent} source Click event source
*/ */
popupCorrectionPanel(el, match, source) { popupCorrectionPanel(el, match, source, highlightEl) {
const popup = document.querySelector('bes-popup-el') const popup = document.querySelector('bes-popup-el')
popup.changeMessage(match.match.message) popup.changeMessage(match.match.message)
popup.appendReplacements(el, match, this, this.isContentEditable()) popup.appendReplacements(el, match, this, this.isContentEditable())
popup.show(source.clientX, source.clientY) popup.show(source.clientX, source.clientY, highlightEl)
} }
/** /**
@ -868,7 +868,7 @@ class BesTreeService extends BesService {
h.getBoundingClientRect() h.getBoundingClientRect()
) )
) { ) {
this.popupCorrectionPanel(el, m, source) this.popupCorrectionPanel(el, m, source, h)
return return
} }
} }
@ -1406,7 +1406,7 @@ class BesPlainTextService extends BesService {
h.getBoundingClientRect() h.getBoundingClientRect()
) )
) { ) {
this.popupCorrectionPanel(result.range, m, source) this.popupCorrectionPanel(result.range, m, source, h)
return return
} }
} }
@ -1953,8 +1953,10 @@ class BesPopup extends HTMLElement {
* @param {Number} x X location hint * @param {Number} x X location hint
* @param {Number} y Y location hint * @param {Number} y Y location hint
*/ */
show(x, y) { show(x, y, highlightEl) {
this.style.position = 'fixed' this.style.position = 'fixed'
this.highlightEl = highlightEl
this.highlightEl.classList.add('bes-mistake-highlight-selected')
// Element needs some initial placement for the browser to provide this.offsetWidth and this. // Element needs some initial placement for the browser to provide this.offsetWidth and this.
// offsetHeight measurements. // offsetHeight measurements.
@ -2074,9 +2076,12 @@ class BesPopup extends HTMLElement {
* Dismisses all the popups. * Dismisses all the popups.
*/ */
static hide() { static hide() {
document document.querySelectorAll('bes-popup-el').forEach(popup => {
.querySelectorAll('bes-popup-el') popup.classList.remove('show')
.forEach(popup => popup.classList.remove('show')) })
document.querySelectorAll('.bes-mistake-highlight-selected').forEach(el => {
el.classList.remove('bes-mistake-highlight-selected')
})
} }
} }

10
styles.css
View File

@ -15,6 +15,16 @@
cursor: text; cursor: text;
} }
.bes-spelling-mistake.bes-mistake-highlight-selected {
background: #cc7024;
opacity: 0.5;
}
.bes-grammar-mistake.bes-mistake-highlight-selected {
background: #3691f3;
opacity: 0.5;
}
/* Styles required to ensure full functionality and optimal user experience. */ /* Styles required to ensure full functionality and optimal user experience. */
.bes-correction-panel-parent { .bes-correction-panel-parent {
position: relative; position: relative;