I'm trying to make a plugin (tinymce 6) that will find basic WCAG 2.1 errors. I'm stuck because I don't know how to add buttons that would switch me between the next or previous error, while also marking the element inside the tinymce, e.g. in a blue frame (when I'm on a given element), and marking this error in the dialog box.
if (options.enable) {
editor.ui.registry.addButton('wcagwalidator', {
icon: 'wcagwalidator',
text: 'wcag walidator',
tooltip: 'wcag walidator',
onAction: function () {
//Inicjalizacja walidatora
console.log(11);
initializeValidator();
}
});
// Lista elementów z klasą --wcagError
var wcagErrorElements = [];
var currentErrorIndex = 0;
function initializeValidator() {
// Pobierz wszystkie elementy z klasą --wcagError
var elements = editor.dom.select('.--wcagError');
// Wypełnij listę elementami
wcagErrorElements = Array.from(elements);
if (wcagErrorElements.length > 0) {
// Oznacz pierwszy element
markCurrentError();
}
}
function markCurrentError() {
// Oznacz aktualny element (indeks currentErrorIndex) na niebiesko
wcagErrorElements[currentErrorIndex].style.border = '2px solid #3498DB';
// Wyświetl popup z informacjami o błędzie dla aktualnego elementu
showPopup(currentErrorIndex + 1, wcagErrorElements.length);
}
function showPopup(errorIndex, totalErrors) {
var errorDescription = wcagErrorElements[currentErrorIndex].getAttribute('data-error-description');
var popupHtml = '<div>';
popupHtml += '<h3>Błąd WCAG 2.1</h3>';
popupHtml += '<p>';
popupHtml += '<span onclick="wcag_prev();">Prev</span>';
popupHtml += '<span onclick="wcag_next();">Next</span>';
popupHtml += '</p>';
popupHtml += '<p>Numer błędu: ' + errorIndex + ' z ' + totalErrors + '</p>';
popupHtml += '<p>Opis błędu: ' + (errorDescription || 'Brak dostępnego opisu') + '</p>';
popupHtml += '</div';
editor.windowManager.open({
title: 'Błąd WCAG',
body: {
type: 'panel',
items: [
{
type: 'htmlpanel',
html: popupHtml
}
]
},
buttons: [
{
type: 'custom',
text: 'Poprzedni błąd',
disabled: currentErrorIndex === 0,
onclick: function () {
if (currentErrorIndex > 0) {
currentErrorIndex--;
markCurrentError();
}
}
},
{
type: 'custom',
text: 'Następny błąd',
disabled: currentErrorIndex === wcagErrorElements.length - 1,
onclick: function () {
if (currentErrorIndex < wcagErrorElements.length - 1) {
currentErrorIndex++;
markCurrentError();
}
}
},
{
type: 'cancel',
text: 'Zamknij'
}
]
},{ inline: 'toolbar' });
}
function wcag_prev(){
console.log(1);
}
function wcag_next(){
console.log(2);
}
}
I would like it to look similar to the original tinymce plugin
What's the best way to approach this topic of iterating between bugs? I will add error detection itself later, but for now I am trying to solve this problem.