Implement event handling for CKEditor plugins to improve responsiveness

This commit is contained in:
Aljaž Grilc 2024-04-16 15:56:19 +02:00
parent 38b0b87644
commit 64b53fbf51

View File

@ -180,7 +180,7 @@ class BesService {
}
if (isInitialCall) {
// TODO: Check count in 'makrofinančno' case.
const count = this.children.reduce(
const count = this.children?.reduce(
(total, child) => total + child.matches.length,
0
)
@ -283,7 +283,7 @@ class BesService {
* @returns {Boolean} true if the element has already been grammar-proofed; false otherwise.
*/
isProofed(el) {
return this.children.find(child => child.element === el)?.isProofed
return this.children?.find(child => child.element === el)?.isProofed
}
/**
@ -320,7 +320,7 @@ class BesService {
* @param {Element} el DOM element that we should re-grammar-proof
*/
clearMistakeMarkup(el) {
let child = this.children.find(child => child.element === el)
let child = this.children?.find(child => child.element === el)
if (!child) return
child.matches.forEach(match => {
if (match?.highlights) {
@ -336,7 +336,7 @@ class BesService {
* @param {Element} el DOM element for removal
*/
removeChild(el) {
this.children = this.children.filter(child => child.element !== el)
this.children = this.children?.filter(child => child.element !== el)
}
/**
@ -663,6 +663,47 @@ class BesCKService extends BesService {
e => this.handleBeforeCKInput(e),
false
)
this.ckEditorInstance.model.document.on('change:data', () => {
const differ = this.ckEditorInstance.model.document.differ
const changes = Array.from(differ.getChanges())
// TODO: on font style changes etc.
for (const entry of changes) {
if (entry.type === 'insert' || entry.type === 'remove') {
const insertedElement = entry.name
if (['paragraph', 'blockQuote'].includes(insertedElement)) {
if (
entry.attributes.has('listIndent') ||
entry.name === 'blockQuote'
) {
setTimeout(() => {
this.proof(hostElement)
window.dispatchEvent(new Event('resize'))
}, 500)
return
}
}
if (['table'].includes(insertedElement)) {
setTimeout(() => {
this.repositionMistakes()
window.dispatchEvent(new Event('resize'))
}, 500)
}
}
}
})
this.ckEditorInstance.commands.get('undo').on('execute', () => {
this.clearAllMistakes(this.scrollPanel)
setTimeout(() => {
this.proof(hostElement)
}, 500)
})
this.ckEditorInstance.commands.get('redo').on('execute', () => {
this.clearAllMistakes(this.scrollPanel)
setTimeout(() => {
this.proof(hostElement)
}, 500)
})
}
/**
@ -687,7 +728,6 @@ class BesCKService extends BesService {
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)
@ -696,7 +736,6 @@ class BesCKService extends BesService {
}
})
})
console.log(blockElements)
blockElements.forEach(block => {
service.clearMistakeMarkup(block)
service.removeChild(block)
@ -786,7 +825,7 @@ class BesCKService extends BesService {
* @param {Element} el DOM element for removal
*/
removeChild(el) {
this.children = this.children.filter(child => child.element !== el)
this.children = this.children?.filter(child => child.element !== el)
}
/**