req-093: Renderização de Variáveis e Widgets no Editor HTML Visual e Pré-visualizador de Módulos (Igual à Editbar)

Renderização no Editor Visual e Preview no Iframe: * Problema: Atualmente, a aba de visualização de página (data-tab="visualizacao-pagina", que hospeda o…

Descrição do Problema / Contexto

Esta requisição (BATCH-093) visa estender a infraestrutura de mapeamento e renderização de variáveis e widgets (criada e validada com sucesso no Dashboard Site Toolbar / Editbar) para o Editor HTML Clássico e a pré-visualização de páginas dentro de módulos como /admin-paginas/ e /publisher-pages/.

Renderização no Editor Visual e Preview no Iframe:
- Problema: Atualmente, a aba de visualização de página (data-tab="visualizacao-pagina", que hospeda o #iframe-visualizacao-pagina) e o Editor HTML Visual (editorHtmlVisual) nos módulos do painel administrativo exibem variáveis literais (ex.: @[[pagina#url-raiz]]@) e assinaturas de widgets textuais. Isso prejudica a fidelidade visual e a usabilidade de edição direta dentro do painel.
- Comportamento Esperado: Integrar a mesma sistemática da Editbar para que as variáveis e widgets sejam substituídos pelos seus valores reais renderizados tanto no preview do iframe quanto no Editor Visual.
- Mapeamento e Reconstrução: O editor deve mapear esses blocos dinâmicos utilizando a infraestrutura existente de anotações (contornos, atributos e containers ocultos). Ao salvar as alterações no editor visual, o HTML gerado deve passar pelo processo de reconstrução (reconstructOriginal), garantindo que as caixas renderizadas voltem a ser gravadas no banco de dados como as variáveis (@[[var]]@) e comentários de widget () originais, em vez dos valores estáticos finais.
Unificação de Variáveis Locais e Globais em Módulos de Simulação (ex.: /publisher-pages/):
- Problema: Módulos como o /publisher-pages/ possuem rotinas próprias de "simulação de valores" de variáveis locais (geradas dinamicamente pelos modelos da página). Variáveis que não fazem parte desse escopo local (variáveis globais como @[[pagina#url-raiz]]@) acabam aparecendo cruas ou não são resolvidas.
- Comportamento Esperado: Harmonizar o carregamento e renderização no editor visual para esses módulos. O editor deve:
  - Manter e aplicar a simulação de valores locais das variáveis nativas do módulo.
  - Identificar as variáveis que não estão no escopo local (variáveis globais do sistema) e resolvê-las automaticamente usando a mesma infraestrutura global da Editbar.
  - Garantir que todas as variáveis locais e globais sejam devidamente anotadas e protegidas, revertendo aos seus respectivos marcadores originais no momento do salvamento do formulário.

Proposta de Alterações Detalhada

1. Extensão do Mecanismo de Mapeamento para o Editor Clássico e Preview Iframe

Na biblioteca do Editor HTML (html-editor.js / html-editor-interface.js):
- Adaptar o comportamento de carregamento do conteúdo no Editor Visual e no #iframe-visualizacao-pagina para que os dados brutos passem pelos processos de injeção de caixas de variáveis (dashboard_site_toolbar_boxes_variaveis()) e widgets (dashboard_site_toolbar_boxes_widgets()) no backend antes de serem carregados pelo visualizador.
- No carregamento do Editor Visual, inicializar o mapeamento de árvore (mapTree) ligando o DOM editável ao contêiner de HTML original oculto.
- Sobrescrever ou interceptar o método de obtenção de HTML do editor para invocar o reconstructOriginal() antes de transferir o código de volta ao textarea original ou submeter o formulário.

2. Integração Otimizada de Variáveis Globais e Locais

Nos módulos com simulação de variáveis (publisher-pages.php e equivalentes):
- Ajustar a rotina de preparação de variáveis de visualização no backend para mesclar o escopo local (simulado) com o escopo global.
- Assegurar que as variáveis globais sejam processadas e convertidas em caixas dinâmicas no editor visual da mesma forma que ocorre na Editbar.
- No frontend, certificar-se de que a regex de reversão diferencie as variáveis locais das variáveis globais, aplicando a correta tradução para os formatos de persistência do banco correspondentes.

Validação e Testes

Validação de Sintaxe:
- Executar php -l nos arquivos PHP e node --check nos JS.
- Certificar-se de que testes existentes não quebrem.
Testes Unitários:
- Criar ou adaptar testes de unidade para verificar que o Editor Visual e o preview do iframe resolvem e anotam corretamente tanto variáveis globais quanto widgets dinâmicos.
- Validar o fluxo de salvamento (get HTML) confirmando a reversão correta para as strings marcadas.
Validação Visual e Manual:
- No painel do /admin-paginas/, acessar a edição de uma página:
  - Confirmar que o preview no #iframe-visualizacao-pagina renderiza as variáveis globais.
  - Entrar no Editor Visual e confirmar que as variáveis e widgets aparecem renderizados com destaque visual (caixas protegidas) em vez das tags literais.
  - Fazer uma modificação simples no texto, salvar a página e checar no banco de dados que as variáveis originais foram preservadas (não salvas como valor final).
- No /publisher-pages/, verificar se as variáveis locais simuladas e as variáveis globais aparecem renderizadas em harmonia no Editor Visual e no preview.

# req-093: Renderização de Variáveis e Widgets no Editor HTML Visual e Pré-visualizador de Módulos (Igual à Editbar)
## Descrição do Problema / Contexto
Esta requisição (BATCH-093) visa estender a infraestrutura de mapeamento e renderização de variáveis e widgets (criada e validada com sucesso no Dashboard Site Toolbar / Editbar) para o Editor HTML Clássico e a pré-visualização de páginas dentro de módulos como `/admin-paginas/` e `/publisher-pages/`.
1. **Renderização no Editor Visual e Preview no Iframe**:
   * *Problema*: Atualmente, a aba de visualização de página (`data-tab="visualizacao-pagina"`, que hospeda o `#iframe-visualizacao-pagina`) e o Editor HTML Visual (`editorHtmlVisual`) nos módulos do painel administrativo exibem variáveis literais (ex.: `@[[pagina#url-raiz]]@`) e assinaturas de widgets textuais. Isso prejudica a fidelidade visual e a usabilidade de edição direta dentro do painel.
   * *Comportamento Esperado*: Integrar a mesma sistemática da Editbar para que as variáveis e widgets sejam substituídos pelos seus valores reais renderizados tanto no preview do iframe quanto no Editor Visual.
   * *Mapeamento e Reconstrução*: O editor deve mapear esses blocos dinâmicos utilizando a infraestrutura existente de anotações (contornos, atributos e containers ocultos). Ao salvar as alterações no editor visual, o HTML gerado deve passar pelo processo de reconstrução (`reconstructOriginal`), garantindo que as caixas renderizadas voltem a ser gravadas no banco de dados como as variáveis (`@[[var]]@`) e comentários de widget (``) originais, em vez dos valores estáticos finais.
2. **Unificação de Variáveis Locais e Globais em Módulos de Simulação (ex.: `/publisher-pages/`)**:
   * *Problema*: Módulos como o `/publisher-pages/` possuem rotinas próprias de "simulação de valores" de variáveis locais (geradas dinamicamente pelos modelos da página). Variáveis que não fazem parte desse escopo local (variáveis globais como `@[[pagina#url-raiz]]@`) acabam aparecendo cruas ou não são resolvidas.
   * *Comportamento Esperado*: Harmonizar o carregamento e renderização no editor visual para esses módulos. O editor deve:
     * Manter e aplicar a simulação de valores locais das variáveis nativas do módulo.
     * Identificar as variáveis que não estão no escopo local (variáveis globais do sistema) e resolvê-las automaticamente usando a mesma infraestrutura global da Editbar.
     * Garantir que todas as variáveis locais e globais sejam devidamente anotadas e protegidas, revertendo aos seus respectivos marcadores originais no momento do salvamento do formulário.
---
## Proposta de Alterações Detalhada
### 1. Extensão do Mecanismo de Mapeamento para o Editor Clássico e Preview Iframe
* **Na biblioteca do Editor HTML (`html-editor.js` / `html-editor-interface.js`)**:
  * Adaptar o comportamento de carregamento do conteúdo no Editor Visual e no `#iframe-visualizacao-pagina` para que os dados brutos passem pelos processos de injeção de caixas de variáveis (`dashboard_site_toolbar_boxes_variaveis()`) e widgets (`dashboard_site_toolbar_boxes_widgets()`) no backend antes de serem carregados pelo visualizador.
  * No carregamento do Editor Visual, inicializar o mapeamento de árvore (`mapTree`) ligando o DOM editável ao contêiner de HTML original oculto.
  * Sobrescrever ou interceptar o método de obtenção de HTML do editor para invocar o `reconstructOriginal()` antes de transferir o código de volta ao textarea original ou submeter o formulário.
### 2. Integração Otimizada de Variáveis Globais e Locais
* **Nos módulos com simulação de variáveis (`publisher-pages.php` e equivalentes)**:
  * Ajustar a rotina de preparação de variáveis de visualização no backend para mesclar o escopo local (simulado) com o escopo global.
  * Assegurar que as variáveis globais sejam processadas e convertidas em caixas dinâmicas no editor visual da mesma forma que ocorre na Editbar.
  * No frontend, certificar-se de que a regex de reversão diferencie as variáveis locais das variáveis globais, aplicando a correta tradução para os formatos de persistência do banco correspondentes.
---
## Validação e Testes
1. **Validação de Sintaxe**:
   * Executar `php -l` nos arquivos PHP e `node --check` nos JS.
   * Certificar-se de que testes existentes não quebrem.
2. **Testes Unitários**:
   * Criar ou adaptar testes de unidade para verificar que o Editor Visual e o preview do iframe resolvem e anotam corretamente tanto variáveis globais quanto widgets dinâmicos.
   * Validar o fluxo de salvamento (get HTML) confirmando a reversão correta para as strings marcadas.
3. **Validação Visual e Manual**:
   * No painel do `/admin-paginas/`, acessar a edição de uma página:
     * Confirmar que o preview no `#iframe-visualizacao-pagina` renderiza as variáveis globais.
     * Entrar no Editor Visual e confirmar que as variáveis e widgets aparecem renderizados com destaque visual (caixas protegidas) em vez das tags literais.
     * Fazer uma modificação simples no texto, salvar a página e checar no banco de dados que as variáveis originais foram preservadas (não salvas como valor final).
   * No `/publisher-pages/`, verificar se as variáveis locais simuladas e as variáveis globais aparecem renderizadas em harmonia no Editor Visual e no preview.