Editorial Backend Header Content must be valid XHTML.

[lpanebr]

Hi! I'm trying to add a helper button that checks when we have submissions with more than 2 evaluations, alerts how many and paints their background, but I'm getting the following error when saving: Editorial Backend Header Content must be valid XHTML.

I've tried vanilla and jquery javascript but neither works.

However, when I paste them on the developer console both work as expected.

Any idea?
thanks!

<!-- teste custom headers  plugin para melhorar backend -->
<script>
// Cria um novo botão
var newButton = document.createElement('button');
newButton.innerHTML = 'Verificar Avaliações <span aria-hidden="true" class="fa fa-check-circle"></span>';

// Adiciona o botão ao cabeçalho
var headerActions = document.querySelector('.app__headerActions');
headerActions.appendChild(newButton);

// Adiciona o evento de clique ao botão
newButton.addEventListener('click', function() {
    var count = 0;
    document.querySelectorAll('li.listPanel__item').forEach(function(li) {
        if (li.textContent.match(/[2-9]+\/[2-9]+/)) {
            li.style.backgroundColor = '#99ff9d';
            count++;
        }
    });

    if (count > 0) {
        alert(count + ' submissões com 2 ou mais avaliações concluídas.');
    }
});
</script>

<!-- teste custom headers  plugin para melhorar backend -->
<script>
$(document).ready(function() {
    // Cria um novo botão
    var newButton = $('<button/>', {
        html: 'Verificar Avaliações <span aria-hidden="true" class="fa fa-check-circle"></span>',
        click: function() {
            var count = 0;
            $('li.listPanel__item').each(function() {
                if ($(this).text().match(/[2-9]+\/[2-9]+/)) {
                    $(this).css('backgroundColor', '#00FFbb');
                    count++;
                }
            });

            if (count > 0) {
                alert(count + ' submissões com 2 ou mais avaliações concluídas.');
            }
        }
    });

    // Adiciona o botão ao cabeçalho
    $('.app__headerActions').append(newButton);
});
</script>

[asmecher]

The plugin attempts to reduce the risk of broken HTML breaking the whole administration area by validating the HTML you submit (see this comment). However, it looks like the parser doesn't like HTML elements inside <script> elements.

Here's a minimal-ish example that shows the problem outside of OJS:

<?php

ini_set('display_errors', E_ALL);
$input = '
<script>
var html = \'<span>thing</span>\';
</script>
';
$dom = new DOMDocument();
$dom->loadHTML($input);

Expected output: Nothing.
Encountered output:

Warning: DOMDocument::loadHTML(): Unexpected end tag : span in Entity, line: 3 in .../test.php on line 10

This seems to be an unsolved problem on StackOverflow, judging by many unanswered questions like this one. Some basic work-arounds (wrapping <script> content in // <!-- / --> tags, breaking up elements with string concatenation) don't work.

It looks like we might have to revisit the DOMDocument::loadHTML approach entirely.

[asmecher]

@lpanebr, meanwhile -- if you don't mind taking the risk of bad HTML breaking your site -- you can work around it by applying this change:

diff --git a/CustomHeaderSettingsForm.php b/CustomHeaderSettingsForm.php
index 1a0bba1..066a7c1 100644
--- a/CustomHeaderSettingsForm.php
+++ b/CustomHeaderSettingsForm.php
@@ -90,6 +90,7 @@ class CustomHeaderSettingsForm extends Form {
         * @return boolean
         */
        function validateWellFormed($input) {
+               return true;
                $libxml_errors_setting = libxml_use_internal_errors();
                libxml_use_internal_errors(true);
                libxml_clear_errors();

[lpanebr]

Oh thanks a lot for all the research @asmecher !

I really appreciate the patch but I rather just not defaulting any validateXXX method to returning true. I'm too afraid! 😆

I might do it in the development server just for fun or for a proof of concept.

If I had time or a team I would really try finding a comfortable middle ground for this validation and send a pull request.

Thanks! ❤️

[asmecher]

Actually, @lpanebr, I think I found a better work-around. If you escape the / in HTML closing tags that appear in your Javascript with a \, the validator should accept it. For example, replace...

newButton.innerHTML = 'Verificar Avaliações <span aria-hidden="true" class="fa fa-check-circle"></span>';

...with...

newButton.innerHTML = 'Verificar Avaliações <span aria-hidden="true" class="fa fa-check-circle"><\/span>';

[lpanebr]

Dude, I was just reading about that on the SO below were I got from the one you mentioned before!

https://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write/236106#236106

I'll try it.

[lpanebr]

It saved!
But... now there's an error in the console.

Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at submissions:17:15

[lpanebr]

anyway. I guess now it's on me! Thanks!

[lpanebr]

all right! It works! I just had to wrap it all in a document.addEventListener('DOMContentLoaded', function() {});

Please feel free to close the issue, unless you still want to revisit the validation thing. 😉

Thanks and happy holidays!

[lpanebr]

I had to post it. Tell me if this ain't the most beautiful thing??

[asmecher]

@lpanebr, that's a great example of use for the back-end custom header support!

I'll leave this open for a little refinement of the validation tools; @ctgraham had a good suggestion that would at least allow the quirk to be easily worked around (at some risk).