req-040: Ajustes Finais no Pré-visualizador de Widgets e Elemento Fantasma do Cursor

Este documento detalha dois ajustes finos para finalizar a reformulação do Editor HTML Visual (BATCH-039 / req-039):

1. A renderização real e funcional dos widgets no iframe de pré-visualização da página pai (#iframe-visualizacao-pagina).

2. A exibição do próprio elemento renderizado (ou widget renderizado por AJAX) acompanhando o cursor no modo de inserção (elemento fantasma #html-editor-insert-ghost).

1. Requisitos do Lote

1.1 Renderização de Widgets no Pré-visualizador da Página (#iframe-visualizacao-pagina)

• Problema: Atualmente, quando o usuário clica em previsualizarVoltar, o HTML do CodeMirror é atualizado e o pré-visualizador é exibido (carregando o conteúdo no #iframe-visualizacao-pagina). Contudo, os widgets salvos no HTML (representados como blocos de comentários <!-- widgets#... < --> ... <!-- widgets#... > -->) aparecem vazios (ou mostram apenas os marcadores sem conteúdo). Eles precisam ser renderizados de forma funcional, idêntica a como aparecem dentro do Editor Visual.

• Solução:

  • Injetar uma rotina em Javascript no conteúdo gerado para o iframe de pré-visualização (#iframe-visualizacao-pagina) em previewHtmlConteudo() (em html-editor-interface.js).

  • Esta rotina, ao carregar a página (DOMContentLoaded/Ready), deve varrer o DOM em busca de nós de comentário de widget (padrão widgets#... < e widgets#... >).

  • Para cada par de comentários de widget identificado, substituir o intervalo de comentários (inclusive) por um contêiner (ex: <div class="c2f-preview-widget" style="display: contents;"></div>).

  • Fazer uma requisição AJAX para renderizar cada widget utilizando o endpoint existente html-editor-widget-render (através dos parâmetros do window.parent.gestor para obter a rota e credenciais corretas do AJAX).

  • Atualizar o conteúdo interno do contêiner com o HTML renderizado do widget retornado pelo endpoint, garantindo a exibição do widget rodando na pré-visualização.

1.2 Pré-visualização Real no Elemento Fantasma do Cursor (#html-editor-insert-ghost)

• Problema: Durante o modo de inserção, o elemento fantasma que acompanha o cursor (#html-editor-insert-ghost) exibe apenas um texto sintético representativo (ex: <a> para links, ou Widget: menus - teste para widgets). O usuário deseja ver o próprio elemento renderizado (rodando de verdade) acompanhando o cursor do mouse.

• Solução:

  • Em createInsertGhost(payload) (em html-editor.js), em vez de configurar ghost.textContent com a tag ou nome sintético do elemento/widget, construir o elemento real a ser inserido.

  • Para elementos HTML comuns, usar buildElement(payload.elementType) para gerar o elemento no DOM (ex: parágrafo com texto, link formatado, ou imagem com o caminho padrão).

  • Para widgets, usar buildWidgetWrapper(payload) para criar o wrapper do widget e imediatamente chamar requestWidgetRender(innerEl) para requisitar a renderização do widget via AJAX do pai.

  • Anexar o elemento construído como filho de #html-editor-insert-ghost para que ele seja exibido e acompanhe o cursor do mouse em tempo real.

  • Atualizar o CSS de #html-editor-insert-ghost em html-editor.js para agir como um contêiner limpo e elegante (remover restrições estritas como white-space: nowrap, overflow: hidden, padding: 4px 8px e color:#4c1d95 se elas distorcerem a exibição dos elementos internos, aplicando bordas leves, fundo branco e sombra para destacar a caixa flutuante).