Improve handling CKEditor events from plugins

This commit is contained in:
Aljaž Grilc 2024-05-13 09:55:27 +02:00
parent 133a278c9c
commit 970b43b8d6

View File

@ -73,18 +73,20 @@ class BesService {
* @param {Node} node DOM root node to proof
*/
proof(node) {
this.updateStatusIcon('bes-status-loading', 'BesService je v procesu preverjanja pravopisa.')
this.updateStatusIcon(
'bes-status-loading',
'BesService je v procesu preverjanja pravopisa.'
)
this.recursiveProof(node)
// TODO: Check count in 'makrofinančno' case.
const count = this.children?.reduce(
(total, child) => total + child.matches.length,
(total, child) => total + child?.matches?.length,
0
)
if (count > 0)
this.updateStatusIcon('bes-status-mistakes', 'Število napak: ' + count)
else
this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
else this.updateStatusIcon('bes-status-success', 'V besedilu ni napak.')
}
/**
@ -131,7 +133,10 @@ class BesService {
await fetch(request, { signal })
.then(response => {
if (!response.ok) {
this.updateStatusIcon('bes-status-error', 'Napaka pri preverjanju pravopisa.')
this.updateStatusIcon(
'bes-status-error',
'Napaka pri preverjanju pravopisa.'
)
throw new Error('Backend server response was not OK')
}
return response.json()
@ -190,7 +195,10 @@ class BesService {
})
.catch(error => {
if (error.name === 'AbortError') return
this.updateStatusIcon('bes-status-error', 'Napaka pri preverjanju pravopisa.')
this.updateStatusIcon(
'bes-status-error',
'Napaka pri preverjanju pravopisa.'
)
throw new Error(
'Parsing backend server response failed: ' + error
)
@ -346,12 +354,14 @@ class BesService {
let child = this.children?.find(child => child.element === el)
if (!child) return
if (this.textAreaService) child.isProofed = false
child.matches.forEach(match => {
if (match?.highlights) {
match.highlights.forEach(h => h.remove())
delete match.highlights
}
})
if (child.matches) {
child.matches.forEach(match => {
if (match?.highlights) {
match.highlights.forEach(h => h.remove())
delete match.highlights
}
})
}
}
/**
@ -369,7 +379,7 @@ class BesService {
repositionMistakes() {
this.children.forEach(child => {
this.clearMistakeMarkup(child.element)
child.matches.forEach(match => {
child?.matches.forEach(match => {
const { clientRects, highlights } = this.addMistakeMarkup(match.range)
match.rects = clientRects
match.highlights = highlights
@ -698,60 +708,40 @@ class BesCKService extends BesService {
const differ = this.ckEditorInstance.model.document.differ
const changes = Array.from(differ.getChanges())
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'
) {
this.clearAllMistakes(this.scrollPanel)
setTimeout(() => {
this.proof(hostElement)
window.dispatchEvent(new Event('resize'))
}, 500)
return
}
}
if (['table'].includes(insertedElement)) {
setTimeout(() => {
this.repositionMistakes()
window.dispatchEvent(new Event('resize'))
}, 500)
if (entry.type === 'attribute') {
const parentElement = entry.range.start.parent
const viewElement =
this.ckEditorInstance.editing.mapper.toViewElement(parentElement)
const domElement =
this.ckEditorInstance.editing.view.domConverter.mapViewToDom(
viewElement
)
const child = this.children.find(
child => child.element === domElement
)
if (child) {
child.matches.forEach(match => {
console.log(match)
match.highlights.forEach(highlight => {
highlight.remove()
delete match.highlights
})
})
delete child.matches
child.isProofed = false
}
setTimeout(() => {
this.proof(domElement)
window.dispatchEvent(new Event('resize'))
}, 500)
} else {
setTimeout(() => {
this.proof(hostElement)
window.dispatchEvent(new Event('resize'))
}, 500)
}
}
})
this.ckEditorInstance.commands.get('undo').on('execute', () => {
this.proofCKEditor()
})
this.ckEditorInstance.commands.get('redo').on('execute', () => {
this.proofCKEditor()
})
this.ckEditorInstance.commands.get('bold').on('execute', () => {
setTimeout(() => {
this.repositionMistakes()
window.dispatchEvent(new Event('resize'))
}, 500)
})
this.ckEditorInstance.commands.get('italic').on('execute', () => {
setTimeout(() => {
this.repositionMistakes()
window.dispatchEvent(new Event('resize'))
}, 500)
})
this.ckEditorInstance.commands.get('indent').on('execute', () => {
this.proofCKEditor()
})
this.ckEditorInstance.commands.get('outdent').on('execute', () => {
this.proofCKEditor()
})
this.ckEditorInstance.commands.get('numberedList').on('execute', () => {
this.proofCKEditor()
})
this.ckEditorInstance.commands.get('bulletedList').on('execute', () => {
this.proofCKEditor()
})
}
/**
@ -863,11 +853,13 @@ class BesCKService extends BesService {
repositionMistakes() {
this.children.forEach(child => {
this.clearMistakeMarkup(child.element)
child.matches.forEach(match => {
const { clientRects, highlights } = this.addMistakeMarkup(match.range)
match.rects = clientRects
match.highlights = highlights
})
if (child.matches) {
child.matches.forEach(match => {
const { clientRects, highlights } = this.addMistakeMarkup(match.range)
match.rects = clientRects
match.highlights = highlights
})
}
})
// window.dispatchEvent(new Event('resize'))
}
@ -1023,13 +1015,15 @@ class BesTAService {
this.service.setStatusDivPosition(textAreaEl, this.service.statusDiv)
this.service.children.forEach(child => {
this.service.clearMistakeMarkup(child.element)
child.matches.forEach(match => {
const { clientRects, highlights } = this.service.addMistakeMarkup(
match.range
)
match.rects = clientRects
match.highlights = highlights
})
if (child.matches) {
child.matches.forEach(match => {
const { clientRects, highlights } = this.service.addMistakeMarkup(
match.range
)
match.rects = clientRects
match.highlights = highlights
})
}
})
})
@ -1407,13 +1401,15 @@ window.onresize = () => {
service.setStatusDivPosition(service.hostElement, service.statusDiv)
service.children.forEach(child => {
service.clearMistakeMarkup(child.element)
child.matches.forEach(match => {
const { clientRects, highlights } = service.addMistakeMarkup(
match.range
)
match.rects = clientRects
match.highlights = highlights
})
if (child.matches) {
child.matches.forEach(match => {
const { clientRects, highlights } = service.addMistakeMarkup(
match.range
)
match.rects = clientRects
match.highlights = highlights
})
}
})
})
}