Conn2Flow
Navegação das docs

SDD

req-097: Opções Separadas de Edição Avançada na Toolbar, Inserção de Embeds no Painel "+" e Correções do Leitor/Modal de Embed

Fix 1: Prevenção de Duplicação/Vazamento de Embeds no Save/Reload e na Editbar: * Arquivo de Referência de Evidência: O HTML de saída gerado contendo a reprodução do erro está…

Descrição do Problema / Contexto

Esta requisição (BATCH-097) contempla correções prioritárias de defeitos identificados durante a homologação do BATCH-096, combinadas com melhorias de usabilidade na barra do Live Editor (Editbar) e no painel de inserção de elementos.


Proposta de Alterações Detalhada

PARTE I: Correção de Defeitos de BATCH-096 (Prioridade Alta)

  1. Fix 1: Prevenção de Duplicação/Vazamento de Embeds no Save/Reload e na Editbar:

    • Arquivo de Referência de Evidência: O HTML de saída gerado contendo a reprodução do erro está salvo para consulta do executor em html-output.html.

    • Problema: Ao adicionar um <object> (ex.: PDF) via código customizado ou no editor visual, após salvar e recarregar a página, o elemento aparece triplicado/duplicado no HTML final da página (conforme evidenciado em html-output.html). Além disso, o elemento vazou/duplicou dentro da própria barra do Live Editor (Editbar / iframe da toolbar).

    • Causa-raiz / Solução:

      • No gestor/assets/interface/html-editor.js (wrapEmbeds, extractUserHtml, reconstructOriginal e resolveEditable), blindar a varredura de elementos para ignorar estritamente qualquer iframe/object do sistema (ex.: #c2f-toolbar-iframe, #c2f-editbar-container, .c2f-toolbar-*, painéis de modal #c2f-he-embed-modal).

      • Garantir que a extração do HTML limpo no salvamento seja estritamente idempotente e preserve a posição DOM original do elemento dentro de sua seção pai, sem reinserir ou duplicar o elemento na raiz do documento.

  2. Fix 2: Desbloqueio da Interatividade do Embed no Site Publicado (Modo Live):

    • Problema: Na página publicada pública (fora do modo de edição do Live Editor), o elemento PDF <object> inicial não permite interação do usuário (comporta-se como uma imagem estática travada).

    • Causa-raiz / Solução: Garantir que as regras de CSS (pointer-events: none) e a camada de escudo (.c2f-embed-shield) sejam estritamente exclusivas do modo de edição (.conn2flow-editbar-active / editor visual ativo) e NUNCA fiquem ativas ou sejam persistidas na página publicada.

  3. Fix 3: Correção de Z-Index no Seletor de Arquivos (_html-editor-imagepick-btn):

    • Problema: No modal de edição de embed (#c2f-he-embed-modal), ao clicar no botão de selecionar arquivo do servidor (_html-editor-imagepick-btn), o iframe do gerenciador de arquivos (admin-arquivos) abre atrás da caixa do modal, impedindo a seleção.

    • Solução: Ajustar a camada de z-index do modal #c2f-he-embed-modal (ex.: z-index: 1000000) para ser estritamente inferior à camada do seletor de arquivos (z-index: 1000050+).

  4. Fix 4: Preview em Tempo Real do Motor B (PDF.js) no Editor Visual:

    • Problema: Ao selecionar a Opção B — Renderizador PDF.js no modal de edição, a caixa no editor altera o aspecto visual mas exibia um bloco cinza estático sem renderizar o canvas PDF.js ao vivo.

    • Solução: Garantir que a troca para o Motor B no modal invoque o renderizador do PDF.js (pdfViewerRender() / pdf-viewer.js) imediatamente no preview em tempo real do editor visual.


PARTE II: Novas Funcionalidades e Usabilidade (Prioridade Normal)

  1. Separação de Links de Edição no Dropdown "Página" (c2f-page-dropdown):

    • Local: gestor/modulos/dashboard/dashboard.php e templates da Editbar (dashboard-site-toolbar.html em pt-br e en).

    • Alteração:

      • O botão atual "Editar Avançado" deve passar a direcionar SEMPRE para o módulo de páginas cruas /admin-paginas/ (admin-paginas/editar/?id=...).

      • Criar o novo botão "Editar Publicação Avançado", que SÓ deve ser exibido quando a página tiver origem de uma publicação ($ehPublisher verdadeiro, com page_id e publisher_id), direcionando para o módulo /publisher-pages/ (publisher-pages/editar/?id=...&publisher_id=...).

  2. Inserção dos 5 Tipos de Embed no Painel "+" (html-editor-add-btn -> c2f-add-col-el):

    • Local: gestor/assets/interface/html-editor.js (painel c2f-add-panel).

    • Alteração:

      • Adicionar os 5 novos tipos de embed ('object', 'iframe', 'embed', 'video', 'audio') na coluna de elementos do painel "+".

      • Ao clicar em um destes elementos, inserir a estrutura limpa com invólucro no canvas e abrir automaticamente o modal #c2f-he-embed-modal para configuração rápida do usuário.


Validação e Testes

  1. Validação de Sintaxe:

    • Executar php -l em dashboard.php e html-editor.php.

    • Executar node --check em html-editor.js, dashboard.toolbar.js e pdf-viewer.js.

  2. Suíte de Testes JS (Vitest):

    • Atualizar tests/Unit/JS/html-editor-embed.test.js para cobrir a inserção dos 5 novos elementos do painel "+", o isolamento contra elementos da Editbar/toolbar e a idempotência da reversão de salvamento.

  3. Validação Manual:

    • Abrir uma página de publicação e testar o dropdown "Página": confirmar que "Editar Avançado" abre o /admin-paginas/ e "Editar Publicação Avançado" aparece e abre o /publisher-pages/.

    • Inserir um <object> via painel "+" e via código customizado: salvar e recarregar a página para confirmar que o elemento não se duplica nem vaza para dentro da Editbar.

    • Abrir a página no modo live público (fora da editbar) e testar a interatividade do objeto PDF.

    • Abrir o modal de embed, clicar no Image Picker para confirmar que o seletor de arquivos fica na frente do modal.

    • Selecionar o Motor B (PDF.js) e confirmar que o canvas renderiza ao vivo no editor visual.

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