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

Support rendering mistakes for multiple active editors

Browse Source
This commit is contained in:
Aljaž Grilc 2024-02-07 14:04:57 +01:00
parent 1efc383c50
commit 40631798d1
1 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
online-editor.js
View File

@ -104,7 +104,7 @@ class BesEditor {
matches.push({
range: range,
rects: this.addMistakeMarkup(range, match),
rects: this.addMistakeMarkup(range, this.correctionPanel),
match: match
})
})
@ -141,22 +141,8 @@ class BesEditor {
const panelParent = document.createElement('div')
panelParent.classList.add('bes-correction-panel-parent')
const panel = document.createElement('div')
const styles = window.getComputedStyle(edit)
this.setCorrectionPanelSize(edit, panel)
panel.classList.add('bes-correction-panel')
const totalWidth =
parseFloat(styles.width) +
parseFloat(styles.marginLeft) +
parseFloat(styles.marginRight) +
parseFloat(styles.paddingLeft) +
parseFloat(styles.paddingRight)
const totalHeight =
parseFloat(styles.height) +
parseFloat(styles.marginTop) +
parseFloat(styles.marginBottom) +
parseFloat(styles.paddingTop) +
parseFloat(styles.paddingBottom)
panel.style.width = totalWidth + 'px'
panel.style.height = totalHeight + 'px'
panelParent.appendChild(panel)
edit.parentElement.insertBefore(panelParent, edit)
@ -214,6 +200,7 @@ class BesEditor {
let filteredChildren = this.children.filter(child => child.elements === el)
if (!filteredChildren.length) return
// TODO: Remove elements that are found in editor object, that way we can avoid looping through all elements.
filteredChildren[0].matches.forEach(match => {
for (const rect of match.rects) {
for (let child of this.correctionPanel.children) {
@ -232,14 +219,18 @@ class BesEditor {
}
// Adds grammar mistake markup
addMistakeMarkup(range, match) {
addMistakeMarkup(range, correctionPanel) {
// TODO: Consider using range.getClientRects() instead of range.getBoundingClientRect()
const clientRects = range.getClientRects()
const correctionPanelRect = correctionPanel.getBoundingClientRect()
for (let i = 0, n = clientRects.length; i < n; ++i) {
const rect = clientRects[i]
const highlight = document.createElement('div')
highlight.classList.add('bes-typo-mistake')
highlight.style.left = `${rect.left}px`
highlight.style.top = `${rect.top}px`
const topPosition = rect.top - correctionPanelRect.top
const leftPosition = rect.left - correctionPanelRect.left
highlight.style.left = `${leftPosition}px`
highlight.style.top = `${topPosition}px`
highlight.style.width = `${rect.width}px`
highlight.style.height = `${rect.height}px`
this.correctionPanel.appendChild(highlight)
@ -314,6 +305,24 @@ class BesEditor {
return false
}
setCorrectionPanelSize(editor, correctionPanel) {
const styles = window.getComputedStyle(editor)
const totalWidth =
parseFloat(styles.width) +
parseFloat(styles.marginLeft) +
parseFloat(styles.marginRight) +
parseFloat(styles.paddingLeft) +
parseFloat(styles.paddingRight)
const totalHeight =
parseFloat(styles.height) +
parseFloat(styles.marginTop) +
parseFloat(styles.marginBottom) +
parseFloat(styles.paddingTop) +
parseFloat(styles.paddingBottom)
correctionPanel.style.width = totalWidth + 'px'
correctionPanel.style.height = totalHeight + 'px'
}
static isPointInRect(x, y, rect) {
return (
x >= rect.x &&
@ -333,10 +342,14 @@ window.onload = () => {
window.onresize = () => {
besEditors.forEach(editor => {
editor.setCorrectionPanelSize(editor.el, editor.correctionPanel)
editor.children.forEach(child => {
editor.clearMistakeMarkup(child.elements)
child.matches.forEach(match => {
match.rects = editor.addMistakeMarkup(match.range, match)
match.rects = editor.addMistakeMarkup(
match.range,
editor.correctionPanel
)
})
})
})