Interactions between the dialog box and the tinymce 6 window

36 Views Asked by At

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

enter image description here

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.

0

There are 0 best solutions below