From 970b43b8d65f24e85e568fafc26b8e63b2f9f002 Mon Sep 17 00:00:00 2001 From: Aljaz Grilc Date: Mon, 13 May 2024 09:55:27 +0200 Subject: [PATCH] Improve handling CKEditor events from plugins --- service.js | 160 ++++++++++++++++++++++++++--------------------------- 1 file changed, 78 insertions(+), 82 deletions(-) diff --git a/service.js b/service.js index 4dc6a0d..573042d 100644 --- a/service.js +++ b/service.js @@ -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 + }) + } }) }) }