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

Refactor service.js to enhance the logic for repositioning grammar mistakes

Browse Source
This commit is contained in:
Aljaž Grilc 2024-04-15 10:17:55 +02:00
parent 37855374bb
commit 38b0b87644
2 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
samples/index.html
View File

@ -9,8 +9,8 @@
<script src="../service.js"></script> <script src="../service.js"></script>
</head> </head>
<body> <body>
<!-- <div class="bes-service any-other-class" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div> <div class="bes-service any-other-class" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br /> --> <br />
<!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.</div> <!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.</div>
<div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.</div> <div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.</div>
<div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.</div> <div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.Popravite kar želite.</div>
@ -441,7 +441,7 @@
<br> --> <br> -->
<!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div> <!-- <div class="bes-service any-other-class" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<br /> --> <br /> -->
<textarea class="bes-service any-other-class"> <!-- <textarea class="bes-service any-other-class">
Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite. Popravite kar želite.
@ -728,7 +728,7 @@ Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.
Popravite kar želite. Popravite kar želite.
Na mizo nisem položil knjigo. Popravite kar želite.</textarea> Na mizo nisem položil knjigo. Popravite kar želite.</textarea>
<br /> <br /> -->
<!-- <textarea class="bes-service any-other-class">Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.</textarea> <!-- <textarea class="bes-service any-other-class">Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.Na mizo nisem položil knjigo. Popravite kar želite.Popravite kar želite. Na mizo nisem položil knjigo. Popravite kar želite.</textarea>
<br /> --> <br /> -->
<!-- <textarea class="bes-service any-other-class"></textarea> <!-- <textarea class="bes-service any-other-class"></textarea>

66
service.js
View File

@ -299,6 +299,19 @@ class BesService {
element: el, element: el,
matches: matches matches: matches
}) })
const dataToChange = this
let observer = new MutationObserver(function (mutations) {
mutations.forEach(mutation => {
if (mutation.type === 'characterData') {
const el = dataToChange.children?.find(
child => child.element === mutation.target
)
if (el) el.isProofed = false
}
})
})
observer.observe(el, { characterData: true, subtree: true })
} }
/** /**
@ -309,7 +322,6 @@ class BesService {
clearMistakeMarkup(el) { clearMistakeMarkup(el) {
let child = this.children.find(child => child.element === el) let child = this.children.find(child => child.element === el)
if (!child) return if (!child) return
child.isProofed = false
child.matches.forEach(match => { child.matches.forEach(match => {
if (match?.highlights) { if (match?.highlights) {
match.highlights.forEach(h => h.remove()) match.highlights.forEach(h => h.remove())
@ -646,9 +658,11 @@ class BesCKService extends BesService {
super(hostElement) super(hostElement)
this.ckEditorInstance = ckEditorInstance this.ckEditorInstance = ckEditorInstance
this.disableCKEditorSpellcheck(this.ckEditorInstance) this.disableCKEditorSpellcheck(this.ckEditorInstance)
this.ckEditorInstance.model.document.on('change:data', () => { hostElement.addEventListener(
this.handleCKInput(hostElement, ckEditorInstance) 'beforeinput',
}) e => this.handleBeforeCKInput(e),
false
)
} }
/** /**
@ -664,6 +678,50 @@ class BesCKService extends BesService {
return service return service
} }
handleBeforeCKInput(event) {
const hostElement = event.target
let service = besServices.find(e => e.hostElement === hostElement)
if (!service) return
if (service.timer) clearTimeout(service.timer)
service.abortController.abort()
let blockElements = new Set()
event.getTargetRanges().forEach(range => {
BesService.getNodesInRange(range).forEach(el => {
console.log(el)
if (
el === hostElement ||
Array.from(hostElement.childNodes).includes(el)
) {
blockElements.add(service.getBlockParent(el))
}
})
})
console.log(blockElements)
blockElements.forEach(block => {
service.clearMistakeMarkup(block)
service.removeChild(block)
})
// Not a nice way to do it, but it works for now the repositionMistakes function is called before the DOM updates are finished.
// If users will experience performance issues, we can consider debouncing this function.
// The lagginess becomes noticeable if the text is long and has many grammar mistakes.
service.repositionMistakes()
setTimeout(() => {
window.dispatchEvent(new Event('resize'))
}, 100)
service.timer = setTimeout(function () {
service.abortController = new AbortController()
service.proof(hostElement)
}, 1000)
}
clearAllMistakes(el) {
if (el.children.length) {
for (let i = 0; i < el.children.length; i++) {
el.children[i].remove()
}
}
}
handleCKInput(hostElement, ckEditorInstance) { handleCKInput(hostElement, ckEditorInstance) {
let service = besServices.find(e => e.hostElement === hostElement) let service = besServices.find(e => e.hostElement === hostElement)
if (!service) return if (!service) return