Esta especificação define o lote de trabalho req-022 (BATCH-022) para o Engenheiro Executor. O escopo abrange a unificação e refatoração do pré-visualizador de HTML externo nos três módulos criados (publisher-highlights, menus e galleries).
1. Contexto e Objetivo
Atualmente, a geração do documento HTML para o srcdoc do iframe de pré-visualização de widgets está duplicada de forma hardcoded no sucesso da chamada AJAX opcao: 'widget-preview' de cada um dos seguintes arquivos de controle JavaScript:
Para melhorar a manutenibilidade e garantir que melhorias futuras no pré-visualizador (como a detecção de classes do Quill editor e folhas de estilo customizadas do Tailwind de projeto) reflitam automaticamente em todos os módulos, as implementações hardcoded devem ser substituídas pelo consumo da função centralizada:
window.previewExternalHtmlConteudo(params)
Definida em html-editor-interface.js.
2. Parâmetros da Função de Biblioteca
A função de biblioteca window.previewExternalHtmlConteudo espera receber um objeto de parâmetros contendo:
{
htmlDoUsuario: dados.html || '', // O HTML retornado pela resposta AJAX do widget
cssDoUsuario: css, // O CSS customizado do editor (já disponível no escopo do JS)
framework: (gestor.html_editor && gestor.html_editor.framework_css) ? gestor.html_editor.framework_css : 'fomantic-ui'
}E retorna uma string correspondente ao documento HTML completo estruturado para ser injetado no atributo srcdoc do iframe.
3. Substituições nos Arquivos JavaScript
Para cada um dos três arquivos a seguir, localize o manipulador de sucesso (success) na requisição AJAX de ajaxOpcao: 'widget-preview':
3.1 Módulo Destaques (publisher-highlights.js)
Código Atual:
var doc = '<!doctype html><html><head><meta charset="utf-8">';
// Reaproveitar o CSS framework do iframe interno do html-editor — picsum funciona via URL absoluta
doc += `<!-- CDN do TailwindCSS -->
<script>
// Remove Tailwind CDN warnings
const originalWarn = console.warn;
console.warn = function (...args) {
if (args[0] && args[0].includes('[REDACTED]')) return;
originalWarn.apply(console, args);
};
</script><script src="[REDACTED]"></script>`;
doc += '</head><body>' + (dados.html || '') + '</body></html>';
$iframe.on('load', function () { $dimmer.removeClass('active'); });
$iframe.attr('srcdoc', doc);Substituição Proposta:
var doc = '';
if (typeof window.previewExternalHtmlConteudo === 'function') {
doc = window.previewExternalHtmlConteudo({
htmlDoUsuario: dados.html || '',
cssDoUsuario: css,
framework: (gestor.html_editor && gestor.html_editor.framework_css) ? gestor.html_editor.framework_css : 'fomantic-ui'
});
} else {
// Fallback de contingência caso a função de biblioteca falhe em carregar
doc = '<!doctype html><html><head><meta charset="utf-8">';
doc += `<!-- CDN do TailwindCSS -->
<script>
const originalWarn = console.warn;
console.warn = function (...args) {
if (args[0] && args[0].includes('[REDACTED]')) return;
originalWarn.apply(console, args);
};
</script><script src="[REDACTED]"></script>`;
doc += '</head><body>' + (dados.html || '') + '</body></html>';
}
$iframe.on('load', function () { $dimmer.removeClass('active'); });
$iframe.attr('srcdoc', doc);3.2 Módulo Menus (menus.js)
Código Atual:
var doc = '<!doctype html><html><head><meta charset="utf-8">';
doc += `<!-- CDN do TailwindCSS -->
<script>
const originalWarn = console.warn;
console.warn = function (...args) {
if (args[0] && args[0].includes('[REDACTED]')) return;
originalWarn.apply(console, args);
};
</script><script src="[REDACTED]"></script>`;
doc += '</head><body>' + (dados.html || '') + '</body></html>';
$iframe.on('load', function () { $dimmer.removeClass('active'); });
$iframe.attr('srcdoc', doc);Substituição Proposta:
A mesma lógica descrita para o publisher-highlights.js no item 3.1.
3.3 Módulo Galerias (galleries.js)
Código Atual:
var doc = '<!doctype html><html><head><meta charset="utf-8">';
doc += `<!-- CDN do TailwindCSS -->
<script>
const originalWarn = console.warn;
console.warn = function (...args) {
if (args[0] && args[0].includes('[REDACTED]')) return;
originalWarn.apply(console, args);
};
</script><script src="[REDACTED]"></script>`;
doc += '</head><body>' + (dados.html || '') + '</body></html>';
$iframe.on('load', function () { $dimmer.removeClass('active'); });
$iframe.attr('srcdoc', doc);Substituição Proposta:
A mesma lógica descrita para o publisher-highlights.js no item 3.1.