Conn2Flow
Navegação das docs

SDD

req-067: Correção de Erros de CodeMirror Indefinido e Abas Travadas no Módulo de Formulários

Ao selecionar um template e tentar navegar no painel do Editor HTML, as sub-abas como "Código", "Variáveis" e "Widget" ficam completamente travadas (não clicáveis). Esse…

Descrição do Problema / Contexto

Durante os testes de conversão do módulo de Formulários (forms) para suporte a widgets, foram detectados erros de execução de JavaScript graves nas telas de adição e edição do formulário (forms/editar/ e forms/adicionar/).

Ao selecionar um template e tentar navegar no painel do Editor HTML, as sub-abas como "Código", "Variáveis" e "Widget" ficam completamente travadas (não clicáveis). Esse travamento visual é consequência direta de exceções não capturadas no console do navegador que interrompem o fluxo de troca de abas do Fomantic-UI (Semantic UI).

Logs de Erro no Console:

html-editor-interface.js?v=1.3.25:1754 Uncaught TypeError: Cannot read properties of undefined (reading 'getDoc')
    at previewHtml (html-editor-interface.js?v=1.3.25:1754:44)
    at HTMLDivElement.onLoad (html-editor-interface.js?v=1.3.25:2781:21)
    ...
html-editor-interface.js?v=1.3.25:2090 Uncaught TypeError: Cannot read properties of undefined (reading 'getDoc')
    at totalDeSessoes (html-editor-interface.js?v=1.3.25:2090:37)
    at html-editor-interface.js?v=1.3.25:2236:37
    at pageModificationContainerMove (html-editor-interface.js?v=1.3.25:2235)
    ...

Contraste com outros Módulos:

Outros módulos que utilizam o Editor HTML e a mesma estrutura de widgets — como Menus (gestor/modulos/menus) e Publicador Highlights (gestor/modulos/publisher-highlights) — estão funcionando normalmente, sem apresentar qualquer erro de CodeMirrorHtml indefinido nas suas respectivas telas de edição.

O engenheiro de implementação deve investigar por que a variável CodeMirrorHtml (e potencialmente outras instâncias do CodeMirror) não estão sendo inicializadas corretamente no módulo de Formulários, ou se há alguma biblioteca/dependência ausente, ordem de carregamento de scripts incorreta ou conflito no escopo das abas exclusivo desse módulo.


Mudanças Necessárias e Investigação

O engenheiro de implementação deve realizar as seguintes etapas:

1. Investigação Comparativa

  • Analisar a inicialização do Editor HTML no módulo forms e comparar minuciosamente com os módulos funcionais (menus e publisher-highlights).

  • Identificar por que codemirror_html.length avalia como 0 (ou a inicialização do CodeMirror é ignorada/falha) no momento em que html-editor-interface.js é executado na página de edição de formulários.

  • Verificar a ordem de carregamento das bibliotecas declaradas nos respectivos arquivos .json e o fluxo de inclusão do componente via PHP.

2. Correção de Instanciação e Segurança

  • Garantir que todas as instâncias de CodeMirror (CodeMirrorHtml, CodeMirrorCss, CodeMirrorCssCompiled, etc.) sejam corretamente inicializadas e disponibilizadas no escopo do editor de formulários.

  • Blindar rotinas que dependem dessas instâncias contra valores nulos/indefinidos. Métodos como previewHtml(), totalDeSessoes(), getUpdatedHtmlWithValues(), modificarPaginaConteudo() e outros que chamam .getDoc() não devem quebrar o script se as instâncias temporariamente não existirem ou estiverem em processo de transição.

  • Certificar-se de que a troca de abas volte a funcionar fluentemente após a eliminação das exceções JS.


3. Validação e Testes

  1. Verificação de Sintaxe:

    • Rodar php -l nos arquivos PHP alterados.

  2. Testes Automatizados:

    • Rodar composer test para garantir que o núcleo do sistema permanece estável.

  3. Validação Manual (Crucial):

    • Entrar na tela de edição de um formulário (forms/editar/).

    • Mudar de templates no dropdown.

    • Navegar livremente entre as abas do editor ("Código", "Variáveis", "Widget") e confirmar que todas abrem corretamente e a prévia é atualizada sem lançar erros no console do desenvolvedor.

O Futuro é Híbrido: Humano + IA.

O Conn2Flow é a ferramenta. Se você precisa do Arquiteto para desenhar a estratégia da sua empresa usando essa tecnologia...

Contrate Consultoria Especializada