req-077: Desacoplamento de Scripts do Iframe e Mapeamento Inteligente de Variáveis no Live Editor

Descrição do Problema / Contexto

Durante os testes visuais pós-implementação do BATCH-075, foram identificados dois problemas no funcionamento da Site Toolbar e do Live Editor:

1. Scripts Inline no HTML da Toolbar: O arquivo de template da toolbar (dashboard-site-toolbar.html em pt-br e en) possui o código Javascript embutido na tag <script>. Deseja-se extrair este script para um arquivo Javascript estático próprio (dashboard.iframe-toolbar.js) e carregá-lo de forma dinâmica no iframe.

2. Substituição de Layout Destrutiva: Ao ativar a edição (c2f-toolbar-edit), a rotina startEdit no frontend busca o HTML do banco via AJAX e substitui diretamente o root.innerHTML da página hospedeira. Isso quebra scripts ativos, CSSs e o comportamento funcional do site original.

Deseja-se alterar o motor de edição para que o HTML cru/original retornado pelo backend seja guardado em um contêiner oculto (paginaHTMLAntesEdicao) no frontend. Faremos um mapeamento inteligente (DOM diffing/mapping) entre a página live (root.innerHTML) e o contêiner oculto, marcando dinamicamente variáveis e atributos (ex: data-c2f-variable="ID_VAR_N"), permitindo que a edição aconteça na página live e a reconstrução dos marcadores originais (@[[var]]@) aconteça no salvamento.

Proposta de Alterações Detalhada

1. Desacoplamento do Script da Toolbar do Iframe

• Extração do Script:

  • Remover a tag <script> contendo a lógica do iframe de dashboard-site-toolbar.html (e da versão en).

  • Mover esta lógica para o arquivo estático dashboard.iframe-toolbar.js (Nota: usar o hífen iframe-toolbar garante compatibilidade automática com a regex /^[A-Za-z0-9-]+$/ do roteador de arquivos estáticos arquivo-estatico.php sem causar erros de rota).

• Injeção do Script:

  • Incluir o script no iframe c2f-site-toolbar quando o mesmo for carregado.

  • Estratégia Recomendada: Chamar gestor_pagina_javascript_incluir(Array('tipo' => 'iframe-toolbar', 'modulo_id' => 'dashboard')) diretamente na função dashboard_site_toolbar() em dashboard.php para injetá-lo na área de javascripts do iframe.

2. Mapeamento Inteligente de Variáveis e Atributos no Live Editor

• Problema na Carga (startEdit):

  • Ao clicar em "Editar Página", o script dashboard.toolbar.js faz uma chamada AJAX a site-toolbar-render.

  • Nova Lógica: Ao invés de substituir root.innerHTML com o HTML renderizado retornado pelo AJAX (o que quebra elementos e dependências do layout vivo), vamos carregar a resposta HTML (que contém as variáveis cruas e marcadores) em um div oculto: <div id="paginaHTMLAntesEdicao" style="display:none"></div>

  • Fazer uma varredura paralela nos dois elementos DOM: o live (root) e o de backup (paginaHTMLAntesEdicao).

  • Onde existirem variáveis (como @[[var]]@) no texto do corpo, envolver os elementos no DOM live com wrappers não editáveis (protegidos, similar aos widgets).

  • Onde existirem variáveis em atributos (ex: src="@[[pagina#url-raiz]]@..." em tags <img>), marcar a tag no DOM live com data-c2f-variable="ID_VAR_N".

  • Armazenar o mapa de IDs de variáveis em memória (array Javascript): "ID_VAR_N": { "param": "src", "variable": "@[[pagina#url-raiz]]@", "valor": "/caminho-real/" }

• Problema no Salvar (saveEdit):

  • Ao clicar em "Salvar alterações" (c2f-editbar-save), capturar o HTML atual de root.innerHTML (que foi modificado).

  • Comparar com o DOM de paginaHTMLAntesEdicao.

  • Substituir os valores reais das variáveis e dos wrappers protegidos de volta para as notações originais @[[var]]@ e marcadores de widgets nos locais correspondentes utilizando o array de mapeamento.

  • Enviar este HTML reconstruído e limpo para o backend persistir no banco de dados.

Validação e Testes

1. Validação de Sintaxe:

   • Rodar node --check no novo arquivo dashboard.iframe-toolbar.js.

   • Rodar php -l nos arquivos de backend.

2. Validação Funcional:

   • Verificar se o iframe da toolbar inicializa os comportamentos e comunicações com o [REDACTED] erros de Javascript no console.

   • Iniciar edição visual in-place e validar se o layout/scripts do site hospedeiro continuam funcionando (sem quebras de CSS).

   • Validar se imagens e links que utilizam a variável @[[pagina#url-raiz]]@ são preservados corretamente no banco de dados após a rodada de edição e salvamento.