Human Request: Correções de Select, Abas do Editor HTML, Simulação de Destaques e Novo Esqueleto (req-008)

Esta especificação detalha as correções, ajustes de layout e extensões de simulação a serem aplicados sobre a implementação anterior (req-007), a fim de corrigir comportamentos de busca AJAX, estrutura de abas corrompidas e placeholders de simulação não substituídos.

Detalhes das Correções e Ajustes Solicitados

1. Busca Manual via AJAX no Dropdown de "Itens selecionados"

• Problema: O dropdown .ui.multiple.search.selection.dropdown para curadoria manual não realiza chamadas de rede ao digitar, impedindo a listagem dos itens ativos.

• Ajuste:

  • Desativar a inicialização automática do Fomantic UI com a chave apiSettings em publisher-highlights.js.

  • Inicializar o dropdown de forma local (sem apiSettings).

  • Capturar o elemento input.search interno gerado dinamicamente pelo Fomantic UI.

  • Ouvir o evento de digitação (input ou keyup) com um debounce de 250ms.

  • Ao digitar:

    1. Realizar uma requisição manual $.ajax (tipo POST) para o endpoint publisher-pages-search passando publisher_id, q e opcao: gestor.moduloOpcao.

    2. No PHP backend (publisher-highlights.php), aceitar os parâmetros publisher_id e q tanto no nível raiz quanto dentro do objeto params de $_REQUEST.

    3. Ao retornar os resultados, atualizar as opções do <select> nativo: limpar as opções que não estão atualmente selecionadas (mantendo as selecionadas em schema.selected_items) e adicionar as novas opções retornadas.

    4. Atualizar o menu chamando $sel.dropdown('refresh') e reaplicar a seleção chamando $sel.dropdown('set selected', schema.selected_items).

2. Correção no Layout de Abas de "Conteúdo do Destaque" (Duplo Nível)

• Problema: Na tentativa anterior, a reestruturação removeu sub-abas importantes do editor HTML (Modelos, IA, Variáveis) em vez de preservá-las.

• Ajuste:

  • O editor HTML (#html-editor#) deve continuar com toda a sua estrutura original e as 5 sub-abas originais intactas.

  • Na página de edição do Destaque, criar duas novas abas principais externas sob o título Conteúdo do Destaque:

    1. Pré-Visualização: Contém o iframe do visualizador e as opções de simulação/variáveis.

    2. Editor HTML: Contém o componente editor completo, incluindo todas as suas 5 sub-abas de origem.

  • Atualização Automática:

  • Sincronizar o CodeMirror definindo a função global window.updatedCodeMirrorHtml no arquivo publisher-highlights.js.

  • Quando houver alterações no código ou mudanças nas regras de curadoria, disparar a renderização dinâmica (via AJAX manual para widget-preview no PHP, que retorna o HTML gerado usando a lógica do publisher-highlights.widget.php) com debounce para atualizar o visualizador no iframe.

3. Correção na Substituição de Variáveis da Simulação (@[[item#...]]@)

• Problema: Variáveis estruturais como url e data não são substituídas ao ativar o botão de Simulação, aparecendo textualmente no iframe de visualização, pois os seletores .hep-simulation-url ou .hep-simulation-date não existem.

• Ajuste:

  • Em html-editor-interface.js, na função de simulação de destaques:

  • Se o tipo de campo detectado for 'url', retornar '#' ou 'javascript:void(0);' se o seletor correspondente retornar vazio.

  • Se o tipo de campo detectado for 'date', retornar uma data fictícia coerente (ex: '27/05/2026') se o seletor correspondente retornar vazio.

  • Para outros tipos, se a consulta .hep-simulation-[TIPO] .item for vazia, aplicar um fallback automático para ler dados do seletor genérico .hep-simulation-text .item.

4. Novo Componente de Simulação de Destaques e Remoção de Seletor de Estilo

• Problema: O esqueleto de simulação padrão (html-editor-publisher-simulation.html) possui layouts de página muito densos que quebram a visualização de widgets de destaque mais simples. Além disso, o botão de estilo de dados (Simples/Sofisticado) não é necessário para destaques.

• Ajuste:

  • Criação de Novo Componente:

  • Criar o componente físico html-editor-publisher-highlights-simulation.html nas pastas de idioma pt-br e en dentro de resources/components/.

  • Este arquivo deve conter marcações HTML de simulação simplificadas (apenas coleções de textos curtos, datas simples e URLs de imagens do picsum).

  • Carregamento Dinâmico:

  • Em gestor/bibliotecas/html-editor.php, no switch do $alvo, carregar o componente 'html-editor-publisher-highlights-simulation' para destaques, e o 'html-editor-publisher-simulation' apenas para publicadores normais.

  • Ocultar Seletor de Estilo:

  • Ocultar ou remover o botão/dropdown .publisher-design-mode-simulation da tela do editor quando o alvo for publisher-highlights (via JS/CSS).

  • Compilação:

  • Compilar o Core para deploy do novo componente no banco de dados e sincronizar o arquivo ComponentesData.json.