Estou usando decorateCooked no tema do meu site para pós-processar blocos de código do HighlightJS para uma linguagem específica. Funciona quando ``` é usado para indicar código em uma postagem, mas falha quando a indentação é usada para incluir código.
No caso bem-sucedido, as classes do HighlightJS estão presentes antes que meu código decorateCooked seja invocado, e posso usar o jQuery para encontrar blocos de código que carregam minha classe de linguagem (‘applescript’). No caso que falha, parece que o HighlightJS está aplicando sua mágica após a execução do código do meu plugin, pois as classes do HighlightJS (hljs applescript) estão ausentes. Mas essas classes estão presentes quando inspeciono a página carregada posteriormente.
Aqui está meu código, definido na parte <head> do meu tema:
<script type="text/discourse-plugin" version="0.1">
if (navigator.appVersion.indexOf('Mac') >= 0) { // Faça isso apenas no Mac
api.decorateCooked(
$elem => {
console.log($elem.find('code'));
console.log($elem.find('code').attr('class'));
$elem.find('.lang-applescript, .applescript').filter(function () {
return $(this).parents('.d-editor-preview').length < 1; // Não faça isso nas prévias do editor
}).each(function(index) {
var src = encodeURIComponent(this.innerText);
$( '<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Abrir no Script Debugger</a>' ).insertAfter($(this).parent());
});
},
{ id: 'applescript-decorator' }
);
}
</script>
Ao observar o log do console, vejo que estou encontrando os blocos <code> nas minhas postagens, mas o atributo class é reportado como undefined.
Existe alguma maneira de fazer meu código decorateCooked rodar depois que o HighlightJS tiver feito o seu trabalho?
Encontrei uma solução alternativa para esse problema usando MutationObserver, mas não tenho certeza se essa é a melhor abordagem:
<script type="text/discourse-plugin" version="0.1">
if (navigator.appVersion.indexOf('Mac') >= 0) { // Faça isso apenas no Mac
if (typeof myObserver == 'undefined') {
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
var target = $(mutation.target);
if (target.hasClass('applescript')) {
var src = encodeURIComponent(mutation.target.innerText);
$('<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Open in Script Debugger</a>').insertAfter(target.parent());
}
});
});
var obsConfig = { childList: false, characterData: false, attributes: true, subtree: false };
}
api.decorateCooked(
$elem => {
$elem.find('.lang-applescript, .applescript').filter(function () {
return $(this).parents('.d-editor-preview').length < 1; // Não faça isso nas pré-visualizações do editor
}).each(function(index) {
var src = encodeURIComponent(this.innerText);
$('<a class="widget-button btn btn-default" href="sdapplescript://com.apple.scripteditor?action=new&script=' + src + '">Open in Script Debugger</a>').insertAfter($(this).parent());
});
// Lide com o caso em que o HighlightJS é aplicado *após* a chamada de decorateCooked. Isso acontece para
// blocos de código inseridos usando indentação em vez de ```.
$elem.find('code:not(.applescript,.lang-applescript)').filter(function () {
return $(this).parents('.d-editor-preview').length < 1; // Não faça isso nas pré-visualizações do editor
}).each(function () {
myObserver.observe(this, obsConfig);
});
},
{ id: 'applescript-decorator', onlyStream: true }
);
}
</script>