req-036: Copiar/Colar e Embrulhar Elementos no Editor Visual

Este documento detalha novas operações estruturais na barra de ferramentas flutuante (#html-editor-floating-toolbar) do Editor HTML Visual.

1. Requisitos do Lote

1.1 Funcionalidade de Copiar e Colar (Copy/Paste)

Adicionar suporte à duplicação de elementos entre diferentes partes do documento por meio de uma área de transferência (clipboard) interna do editor visual.

• Interface Visual:

  • Botão Copiar: Adicionado à barra flutuante. Fica ativo quando há um elemento selecionado.

  • Botão Colar: Adicionado à barra flutuante. Fica visível/habilitado apenas quando há um elemento válido na área de transferência (clipboard).

• Atalhos de Teclado:

  • Ctrl + C (ou Cmd + C no macOS) com foco no iframe ou modal copia o elemento selecionado.

  • Ctrl + V (ou Cmd + V no macOS) cola o elemento copiado relativo ao elemento selecionado.

• Comportamento do Colar:

  • Ao copiar, o editor armazena uma cópia profunda (cloneNode(true)) do elemento selecionado em uma variável global/instância clipboardElement.

  • Ao selecionar um elemento alvo e acionar o Colar (via botão ou atalho Ctrl+V):

  • O editor clona o elemento contido no clipboard e o insere no DOM como irmão adjacente inferior (logo abaixo) do elemento alvo (mesmo comportamento do duplicar).

  • Permite colar o mesmo objeto copiado múltiplas vezes em diferentes alvos, sem limites.

1.2 Funcionalidade de Embrulhar Elemento (Wrap Element)

Adicionar um botão na barra flutuante para envolver (embrulhar/fazer o wrap de) um elemento existente com uma nova tag conteinerizadora.

• Interface Visual:

  • Botão Embrulhar (Wrap): Adicionado à barra flutuante.

  • O clique abre um menu/popup contendo as tags básicas de contêiner/estrutura para embrulho: div, section, a (link), p (parágrafo), article, aside.

• Comportamento do Embrulho:

  • Ao escolher uma tag:

    1. Cria um novo elemento HTML correspondente à tag selecionada.

    2. Insere o novo elemento no DOM exatamente na posição do elemento selecionado.

    3. Transfere o elemento selecionado para dentro do novo elemento (como seu filho único).

    4. Mantém a seleção persistente focada no elemento original que foi embrulhado (o filho), atualizando a UI dos overlays de suporte para recalcular o breadcrumb (que agora exibirá o novo contêiner pai na árvore de ancestrais).