req-078: Correções no Live Editor: Trava de Widgets, Submenu do Painel "+" e Isolamento de Estilos

Descrição do Problema / Contexto

Durante os testes visuais e homologação do Live Editor (BATCH-075 e BATCH-077), foram encontrados três problemas operacionais e de estilo que precisam de correção:

1. Edição e Seleção Indevida Dentro de Widgets:

   • Problema: No modo de edição da página, os widgets são renderizados, mas seus elementos internos (texto, imagens, links internos do widget) continuam editáveis e selecionáveis. O usuário consegue alterar o conteúdo de dentro do widget, o que corrompe seu dinamismo.

   • Comportamento Esperado: Os widgets devem permanecer visíveis (renderizados), mas seus elementos internos devem ser completamente protegidos contra edição e seleção. O usuário só deve interagir com a caixa externa (wrapper/caixa de destaque do widget), de forma idêntica ao que ocorre no editor HTML clássico do painel de controle administrativo.

2. Navegação do Painel "+" (Categorias de Widgets):

   • Problema: No painel de inserção de elementos ("+"), ao clicar em uma categoria/grupo de widget (ex: Menus, Destaques), o painel fecha imediatamente ou se comporta como se um item de inserção tivesse sido selecionado.

   • Comportamento Esperado: Clicar no grupo/cabeçalho deve apenas expandir ou recolher a lista interna contendo os registros daquele widget para inserção, idêntico ao funcionamento no editor visual clássico.

3. Estilos de Controles Sobrescritos pelo CSS do Site:

   • Problema: As barras de ferramentas flutuantes do editor (html-editor-floating-toolbar), o estilador de colunas (he-styler-cols) e o modal de edição (html-editor-modal) aparecem desconfigurados. Por exemplo, os ícones aparecem apagados ou sem cores nos menus flutuantes, e a área de texto (textarea) dentro do modal de edição de elementos fica com cor de texto cinza muito claro (ilegível) porque o CSS do template do site hospedeiro está sobrescrevendo as propriedades do editor.

   • Comportamento Esperado: O CSS de todos os controles visuais e componentes do editor (toolbars, estilador e modais) injetados na página hospedeira deve ser blindado. Deve-se forçar a estilização correta (cor de ícone, cor de texto nas caixas de texto/textarea, fonte, fundo, bordas) usando especificidade máxima ou estilos estritos para evitar herança indesejada do site.

Proposta de Alterações Detalhada

1. Travamento de Elementos Internos de Widgets

• Investigação: Analisar em html-editor.js e nos arquivos de assets como o editor clássico administrativo (admin-paginas) protege os elementos internos dos widgets.

• Solução: Aplicar a mesma lógica no live-editor. Garantir que, ao ativar a edição, os elementos dentro de wrappers de widgets (ex: .c2f-widget-box ou .conn2flow-widget-wrapper) recebam restrições adequadas (como contenteditable="false" recursivo, CSS user-select: none, ou bloqueio de cursor e cliques para que o editor visual clássico não permita selecionar nós filhos do widget).

2. Correção de Eventos no Menu "+" (Dropdown de Widgets)

• Investigação: Revisar os handlers de eventos no arquivo dashboard.iframe-toolbar.js (ou no script que controla o painel #c2f-add-panel e .c2f-add-widget-groups).

• Solução:

  • O clique em .c2f-add-widget-head (cabeçalho da categoria) deve apenas acionar o toggle de exibição da lista .c2f-add-widget-list e disparar a busca AJAX (se não estiver no cache), sem fechar o painel.

  • Apenas o clique em .c2f-add-el (elementos HTML) ou .c2f-add-widget-item (registro de widget específico) deve fechar o painel e disparar a inserção no editor.

3. Blindagem de Estilo dos Overlays (html-editor-floating-toolbar, he-styler-cols e html-editor-modal)

• Solução:

  • Adicionar/ajustar as regras de CSS em interface.css (ou no arquivo de estilo injetado do editor) com seletores de altíssima especificidade (ex: prefixados com #html-editor-floating-toolbar, div#he-styler-cols, #html-editor-modal e seus sub-elementos como textarea) ou utilizar o sufixo !important para redefinir explicitamente cores de fonte, cor de texto interno, cor de ícones (SVG fill/stroke), backgrounds e bordas.

  • Resetar propriedades de herança indesejadas do site (ex: color: inherit, background: inherit) para valores absolutos definidos pelo tema escuro/padrão do editor.

Validação e Testes

1. Validação Estática:

   • Garantir que composer test continue passando 76/76 e que arquivos JS e PHP não possuam erros de sintaxe (node --check / php -l).

2. Validação Visual/Operacional:

   • Entrar em modo de edição e atestar que elementos dentro de widgets renderizados (como links de menu ou textos de destaques) não podem ser focados, digitados ou selecionados pelo cursor.

   • Clicar no botão "+" da toolbar, clicar no grupo "Menus" e garantir que ele abre o submenu sem fechar o painel.

   • Verificar se as cores de fonte e ícones no floating toolbar do editor visual aparecem com a estilização correta (branco/cinza legível sobre fundo escuro do editor), independente do template do site.

   • Abrir o modal de edição de elementos (html-editor-modal) e certificar-se de que a caixa de texto (textarea) exibe o texto com cor de fonte perfeitamente legível e contrastante, sem ser afetada pelo CSS global do site.