req-096: Mapeamento Visual, Proteção de Eventos, Suporte Híbrido a PDF (PDF.js, Google Viewer, Object Fallback) e Modal Estruturado para Elementos Embutidos

Descrição do Problema / Contexto

Esta requisição (BATCH-096) estende a infraestrutura de manipulação visual do Editor HTML (gestor/bibliotecas/html-editor.php e gestor/assets/interface/html-editor.js) para elementos de mídia e documentos embutidos (<object>, <iframe>, <embed>, <video> e <audio>), com atenção especial para a exibição de arquivos PDF em dispositivos móveis e desktops.

1. Desafios Identificados

1. Captura de Eventos do Mouse (Event Swallowing):

   • Elementos como <iframe> e <object> capturam os eventos do ponteiro no editor visual, impedindo a seleção limpa, contornos de hover e ações do editor sem interagir com o conteúdo interno.

2. Limitação Nativa de PDFs em Navegadores Mobile:

   • O Chrome no Android e Safari no iOS não possuem leitor embutido para tags <object> ou <iframe> carregando PDFs locais/privados, ignorando a exibição inline e mostrando um espaço em branco ou prompt de download.

   • É necessário oferecer 3 estratégias distintas para renderização de PDF que o usuário pode escolher de forma totalmente visual dentro do editor.

Proposta de Alterações Detalhada

1. Blindagem Visual e Invólucro Atômico (conn2flow-embed-wrapper)

• No Frontend (html-editor.js):

  • Ao carregar ou alterar o DOM do Editor Visual, envolver automaticamente elementos <object>, <iframe>, <embed>, <video> e <audio> em um contêiner .conn2flow-embed-wrapper.

  • Adicionar uma camada transparente de proteção (.c2f-embed-shield / pointer-events: none no documento embutido) e um badge identificador no topo ("Objeto PDF", "Iframe", "Vídeo").

  • Permitir movimentação, alças de redimensionamento drag-resize nos cantos e duplo clique para abrir o modal de edição.

  • No salvamento final (reconstructOriginal / getCleanHtml), remover o wrapper protetor e a camada de escudo, persistindo apenas a tag HTML limpa correspondente.

2. Modal de Edição Visual de Embeds (#c2f-he-embed-modal)

Estruturar o modal de edição em abas e sub-seções especializadas:

Aba 1: Atributos & Parâmetros Gerais

• URL / Arquivo Fonte (src para iframe/mídia, data para object).

• Botão _html-editor-imagepick-btn integrado ao Gerenciador de Arquivos (admin-arquivos) para selecionar diretamente arquivos PDF, vídeos ou documentos do disco/servidor.

• Dimensões de Largura (width) e Altura (height), com seletores de unidade (px, %, vh).

• Atributo Título / Descrição Acessível (title).

Aba 2: Motor de Exibição / Estratégias para PDF (3 Opções)

Para elementos do tipo PDF, oferecer 3 opções configuráveis via interface visual:

1. Opção A: Objeto Nativo com Fallback Amigável (<object> + HTML Interno):

   • Utiliza a tag <object data="..." type="application/pdf">.

   • Inclui automaticamente um contêiner HTML formatado no interior do <object> (com mensagem explicativa e botão estilizado de download/visualização) que só é exibido em navegadores mobile que não suportem a renderização inline nativa.

2. Opção B: Renderizador PDF.js (Mozilla):

   • Converte/Renderiza o PDF via canvas WebGL/JS usando a biblioteca PDF.js, garantindo exibição 100% idêntica em Desktop, Android e iOS.

   • Permite configurar parâmetros do leitor (zoom, barra de ferramentas, número de página inicial e modo de rolagem).

   • Integração no Core (gestor/bibliotecas/interface.php / gestor.php) para incluir assets do PDF.js quando o recurso estiver ativo na página.

3. Opção C: Visualizador Google Docs (Iframe Embed):

   • Converte a tag em <iframe src="[REDACTED]>.

   • Ideal para PDFs públicos, sem exigir bibliotecas adicionais.

Aba 3: Opções de Exibição de Iframe e Mídia

• Atributos allowfullscreen, sandbox, controls, autoplay, loop, muted e poster.

Aba 4: Código & Parâmetros Avançados

• Gerenciador dinâmico de tags internas <param name="..." value="...">.

• Edição do HTML fallback customizado.

• Estilos inline e classes CSS avançadas.

3. Recursos Adicionais e Ideias Aprovadas

1. Redimensionamento Visual Drag-Resize:

   • Exibir alças de redimensionamento nos cantos do wrapper protetor no Editor Visual para alterar width e height em tempo real.

2. Atalho de Clique Duplo:

   • Duplo clique no escudo protetor abre o modal de edição com a aba correspondente pré-selecionada.

3. Detecção Automática do Tipo de Conteúdo:

   • Ao selecionar um arquivo .pdf no seletor de arquivos ou colar um link de PDF, ativar automaticamente as opções de renderização de PDF na Aba 2.

Validação e Testes

1. Sintaxe e Testes Estáticos:

   • php -l em gestor/bibliotecas/html-editor.php e arquivos relacionados.

   • node --check em gestor/assets/interface/html-editor.js.

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

   • Testes para o envelopamento .conn2flow-embed-wrapper, geração dos 3 formatos de PDF (Nativo+Fallback, PDF.js e Google Viewer) e a reversão limpa no save.

3. Validação Manual e Visual:

   • Testar a inserção de um PDF local e a escolha de cada um dos 3 motores de exibição.

   • Validar o funcionamento em desktop e simulação mobile (Android/iOS) para confirmar a renderização inline do PDF ou exibição do fallback amigável.