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

Add distinct highlighting for various error types

Browse Source
This commit is contained in:
Aljaž Grilc 2024-06-05 09:15:28 +02:00
parent 7a72474cd3
commit 81d60bd37e
2 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
service2.js
View File

@ -177,13 +177,13 @@ class BesService {
* @param {Range} range Grammar mistake range * @param {Range} range Grammar mistake range
* @returns {Object} Client rectangles and grammar mistake highlight elements * @returns {Object} Client rectangles and grammar mistake highlight elements
*/ */
addMistakeMarkup(range) { addMistakeMarkup(range, ruleType) {
const clientRects = range.getClientRects() const clientRects = range.getClientRects()
const scrollPanelRect = this.scrollPanel.getBoundingClientRect() const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
let highlights = [] let highlights = []
for (let rect of clientRects) { for (let rect of clientRects) {
const highlight = document.createElement('div') const highlight = document.createElement('div')
highlight.classList.add('bes-typo-mistake') highlight.classList.add(ruleType)
highlight.style.left = `${rect.left - scrollPanelRect.left}px` highlight.style.left = `${rect.left - scrollPanelRect.left}px`
highlight.style.top = `${rect.top - scrollPanelRect.top}px` highlight.style.top = `${rect.top - scrollPanelRect.top}px`
highlight.style.width = `${rect.width}px` highlight.style.width = `${rect.width}px`
@ -464,8 +464,22 @@ class BesTreeService extends BesService {
} }
} }
const { clientRects, highlights } = // TODO: Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors.
this.addMistakeMarkup(range) // So to do that, we need to add a CSS class to the highlight element based on the rule type.
const ruleTypes = {
BESANA_1: 'bes-spelling-mistake',
BESANA_2: 'bes-spelling-mistake',
BESANA_3: 'bes-spelling-mistake',
BESANA_4: 'bes-grammar-mistake',
BESANA_5: 'bes-spelling-mistake'
}
const ruleType =
ruleTypes[match.rule.id] || 'bes-spelling-mistake'
const { clientRects, highlights } = this.addMistakeMarkup(
range,
ruleType
)
matches.push({ matches.push({
rects: clientRects, rects: clientRects,
highlights: highlights, highlights: highlights,

13
styles.css
View File

@ -1,14 +1,21 @@
/* TODO: Dark mode theme */ /* TODO: Dark mode theme */
/* Mistake types styles */ /* Mistake types styles */
.bes-typo-mistake { .bes-spelling-mistake {
border-bottom: 2px solid red; border-bottom: 2px solid #ff7300;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
cursor: text; cursor: text;
/* pointer-events: none; */
} }
.bes-grammar-mistake {
border-bottom: 2px solid #007bff;
position: absolute;
z-index: 3;
cursor: text;
}
/* Styles required to ensure full functionality and optimal user experience. */
.bes-correction-panel-parent { .bes-correction-panel-parent {
position: relative; position: relative;
overflow: visible; overflow: visible;