From 81d60bd37eb435e3b0b817dcbf98983a1a220cff Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Wed, 5 Jun 2024 09:15:28 +0200 Subject: [PATCH 1/3] Add distinct highlighting for various error types --- service2.js | 22 ++++++++++++++++++---- styles.css | 13 ++++++++++--- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/service2.js b/service2.js index fb59b87..158ef31 100644 --- a/service2.js +++ b/service2.js @@ -177,13 +177,13 @@ class BesService { * @param {Range} range Grammar mistake range * @returns {Object} Client rectangles and grammar mistake highlight elements */ - addMistakeMarkup(range) { + addMistakeMarkup(range, ruleType) { const clientRects = range.getClientRects() const scrollPanelRect = this.scrollPanel.getBoundingClientRect() let highlights = [] for (let rect of clientRects) { 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.top = `${rect.top - scrollPanelRect.top}px` highlight.style.width = `${rect.width}px` @@ -464,8 +464,22 @@ class BesTreeService extends BesService { } } - const { clientRects, highlights } = - this.addMistakeMarkup(range) + // TODO: Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors. + // 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({ rects: clientRects, highlights: highlights, diff --git a/styles.css b/styles.css index 247268a..b9f02c5 100644 --- a/styles.css +++ b/styles.css @@ -1,14 +1,21 @@ /* TODO: Dark mode theme */ /* Mistake types styles */ -.bes-typo-mistake { - border-bottom: 2px solid red; +.bes-spelling-mistake { + border-bottom: 2px solid #ff7300; position: absolute; z-index: 3; 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 { position: relative; overflow: visible; From 54ba1dea3312e42a0d70d6a0142fbc97e541da94 Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Wed, 5 Jun 2024 09:47:57 +0200 Subject: [PATCH 2/3] Push ruleType into matches object, since it is needed later to correctly reposition markup --- service2.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/service2.js b/service2.js index 158ef31..b07e194 100644 --- a/service2.js +++ b/service2.js @@ -484,7 +484,8 @@ class BesTreeService extends BesService { rects: clientRects, highlights: highlights, range: range, - match: match + match: match, + ruleType: ruleType }) }) this.markProofed(node, matches) @@ -549,7 +550,10 @@ class BesTreeService extends BesService { repositionAllMarkup() { this.results.forEach(result => { result.matches.forEach(match => { - const { clientRects, highlights } = this.addMistakeMarkup(match.range) + const { clientRects, highlights } = this.addMistakeMarkup( + match.range, + match.ruleType + ) match.rects = clientRects if (match.highlights) match.highlights.forEach(h => h.remove()) match.highlights = highlights @@ -1287,7 +1291,10 @@ class BesPlainTextService extends BesService { repositionAllMarkup() { this.results.forEach(result => { result.matches.forEach(match => { - const { clientRects, highlights } = this.addMistakeMarkup(match.range) + const { clientRects, highlights } = this.addMistakeMarkup( + match.range, + match.ruleType + ) match.rects = clientRects if (match.highlights) match.highlights.forEach(h => h.remove()) match.highlights = highlights From edbe39722f32f3963534ab220ba3294a9298fa2d Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Wed, 5 Jun 2024 10:18:55 +0200 Subject: [PATCH 3/3] Refactor ruleType logic to make it accessible within other besService subclasses --- service2.js | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/service2.js b/service2.js index b07e194..b98c5d2 100644 --- a/service2.js +++ b/service2.js @@ -49,6 +49,16 @@ class BesService { this.resizeObserver = new ResizeObserver(this.onResize.bind(this)) this.resizeObserver.observe(this.hostElement) + // TODO: Include missing rules + // Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors. + this.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' + } + besServices.push(this) } @@ -464,18 +474,8 @@ class BesTreeService extends BesService { } } - // TODO: Initial user feedback indicated a requirement for clear differentiation between spelling and grammar errors. - // 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' - + this.ruleTypes[match.rule.id] || 'bes-spelling-mistake' const { clientRects, highlights } = this.addMistakeMarkup( range, ruleType @@ -1206,13 +1206,19 @@ class BesPlainTextService extends BesService { nodes[nodeIdx].node, matchEnd - nodes[nodeIdx].start ) - const { clientRects, highlights } = - this.addMistakeMarkup(matchRange) + + const ruleType = + this.ruleTypes[match.rule.id] || 'bes-spelling-mistake' + const { clientRects, highlights } = this.addMistakeMarkup( + matchRange, + ruleType + ) matches.push({ rects: clientRects, highlights: highlights, range: matchRange, - match: match + match: match, + ruleType: ruleType }) }) this.markProofed(paragraphRange, matches)