req-162: Eliminação do Erro 404 de [[pagina#url-raiz]] no Editor Visual de Layouts e Paridade de Renderização de Variáveis

Descrição do Problema / Contexto

Ao editar um layout no painel administrativo ([REDACTED]), o console do navegador registra sucessivos erros HTTP 404:

about:srcdoc:360  GET [REDACTED] 404 (Not Found)
/404#url-raiz]]images/Logomarca200.png:1  GET [REDACTED] 404 (Not Found)
Image
(anonymous) @ html-editor.js:1
extractUserHtml @ html-editor.js:1
captureSnapshot @ html-editor.js:1
init @ html-editor.js:1
...
/404#url-raiz]]images/Logomarca200.png:1  GET [REDACTED] 404 (Not Found)
Image
(anonymous) @ html-editor.js:1
extractUserHtml @ html-editor.js:1
getCleanHtml @ html-editor.js:1
window.htmlEditorGetCleanHtml @ html-editor.js:1
(anonymous) @ html-editor-interface.js:1

Causa Raiz Mapeada

1. Variáveis em Atributos: O layout gravado no banco contém marcadores como <img src="@[[pagina#url-raiz]]@images/Logomarca200.png" ...> e <a href="@[[pagina#url-raiz]]@...">. Ao abrir para edição, admin-layouts.php converte para a notação de edição [[pagina#url-raiz]].

2. Assincronia e Falta de Pré-Processamento em Layouts: Na biblioteca gestor/assets/interface/html-editor-interface.js, dentro da função editorHtmlVisual():

   • Para páginas (alvo !== 'layouts'), o código chama htmlEditorRenderVars(htmlDoUsuario, function(data) { abrirEditorVisualSrcdoc((data && data.boxes) || htmlDoUsuario, ...) }), enviando o HTML para o backend (html_editor_boxes_variaveis), que resolve [[pagina#url-raiz]] para /.

   • Para layouts (alvo === 'layouts', linha 1557), o código pula completamente o htmlEditorRenderVars e injeta diretamente o htmlDoUsuario cru com [[pagina#url-raiz]] no srcdoc do iframe.

3. Quebra de URL pelo Navegador: O caractere # na URL é o delimitador de fragmento/âncora da especificação de URI. O navegador divide a URL em:

   • Caminho: [REDACTED]

   • Fragmento: #url-raiz]]images/Logomarca200.png O roteador do Gestor não encontra a rota [[pagina e emite um redirecionamento HTTP 302 para /404. O navegador segue o redirect e obtém 404 Not Found.

4. Multiplicação pelo extractUserHtml do Motor: Quando o motor do editor visual (html-editor.js) inicializa, ele executa captureSnapshot(), chamando extractUserHtml(). O método clona as tags <img> via node.cloneNode(true) para um contêiner auxiliar desconectado do DOM. O motor Blink/WebKit reavalia o atributo src e dispara novas requisições para a mesma URL quebrada. O mesmo ocorre ao acionar htmlEditorGetCleanHtml().

Proposta de Alterações Detalhada

1. Paridade de Renderização de Variáveis no Editor Visual de Layouts

• Em gestor/assets/interface/html-editor-interface.js:

  • Na função editorHtmlVisual(), integrar a chamada a htmlEditorRenderVars(htmlDoUsuario, callback) também para o ramo alvo === 'layouts', exatamente como já é feito para páginas e componentes.

  • Ao receber data.boxes (ou data.values), injetar o HTML com as variáveis já resolvidas no srcdoc do iframe do editor visual.

2. Preservação Reversível de Atributos com Variáveis

• Em gestor/bibliotecas/html-editor.php (html_editor_boxes_variaveis):

  • Quando uma variável global estiver contida em um atributo (ex.: src, href), além de resolver o valor em runtime para o preview/edição, preservar o marcador original através de um atributo auxiliar de restauração (ex.: data-c2f-orig-src="[[pagina#url-raiz]]images/...").

• Em gestor/assets/interface/html-editor-interface.js (htmlEditorReconstructVars):

  • Ao salvar (previsualizarConfirmar ou previsualizarVoltar), inspecionar elementos com atributos data-c2f-orig-*. Caso o atributo original não tenha sido alterado manualmente pelo usuário no editor visual, restaurar o valor com a variável original antes de persistir no CodeMirror e remover o atributo auxiliar de marcação.

3. Blindagem de Clonagem em extractUserHtml (html-editor.js)

• Em gestor/assets/interface/html-editor.js:

  • Assegurar que a clonagem em extractUserHtml() não dispare requisições espúrias caso ainda existam imagens ou mídias com marcadores pendentes de interpolação.

Validação e Critérios de Aceite

1. Nenhum Erro 404 no Console:

   • Abrir [REDACTED] e o modal do Editor Visual: zero chamadas GET para [REDACTED] ou caminhos [[pagina.

   • Logomarca e imagens do layout renderizam perfeitamente no iframe com HTTP 200.

2. Preservação de Variáveis no Save:

   • Editar um layout no Editor Visual, salvar as alterações e verificar no banco de dados se as variáveis originais (como @[[pagina#url-raiz]]@ ou [[pagina#url-raiz]]) foram mantidas e não substituídas fixamente por /.

3. Pipeline e Testes:

   • Executar php -l em arquivos PHP alterados e validação de sintaxe JS.

   • Rodar a suíte Vitest e PHPUnit garantindo regressão zero.

   • Sincronizar os recursos via ./c2f resources:sync --force incrementando as versões de metadados correspondentes.