Human Request: Nova Aba de Código do Widget no Editor de Destaques (req-012)

Esta especificação detalha os requisitos para adicionar uma nova aba chamada "Código do Widget" (ou "Widget Code") na interface de conteúdo do módulo publisher-highlights. O objetivo é exibir o bloco HTML envelopado completo com as assinaturas de início e fim do widget e o HTML interno atualizado em tempo real, facilitando que o usuário copie e cole o código de injeção em qualquer página do site.

Detalhes das Alterações Solicitadas

1. Inclusão da Aba "Código do Widget" no Menu de Conteúdo (HTML)

• Objetivo: Adicionar a aba física e o contêiner de exibição do CodeMirror em todas as páginas do módulo (Adicionar, Editar e Clonar) em ambos os idiomas suportados (pt-br e en).

• Locais:

  • gestor/modulos/publisher-highlights/resources/pt-br/pages/publisher-highlights-adicionar/publisher-highlights-adicionar.html

  • gestor/modulos/publisher-highlights/resources/pt-br/pages/publisher-highlights-editar/publisher-highlights-editar.html

  • gestor/modulos/publisher-highlights/resources/pt-br/pages/publisher-highlights-clonar/publisher-highlights-clonar.html

  • gestor/modulos/publisher-highlights/resources/en/pages/publisher-highlights-adicionar/publisher-highlights-adicionar.html

  • gestor/modulos/publisher-highlights/resources/en/pages/publisher-highlights-editar/publisher-highlights-editar.html

  • gestor/modulos/publisher-highlights/resources/en/pages/publisher-highlights-clonar/publisher-highlights-clonar.html

• Especificações do Layout:

  • No menu de abas .ui.tabular.menu.menuConteudoDestaque, adicionar um link após o Editor HTML:

  • Português: <a class="item" data-tab="hep-widget"><i class="cubes icon"></i> Código do Widget</a>

  • Inglês: <a class="item" data-tab="hep-widget"><i class="cubes icon"></i> Widget Code</a>

  • Logo abaixo dos outros tab segments, adicionar o contêiner da aba:

  • <div class="ui bottom attached tab segment" data-tab="hep-widget">

  • Adicionar um aviso explicativo .ui.icon.message.info instruindo o usuário sobre como copiar e utilizar o código envelopado em páginas físicas do site.

  • Adicionar uma div com borda contendo a <textarea id="hep-widget-code" name="hep-widget-code"></textarea> que servirá como base para o editor CodeMirror.

2. Inicialização e Atualização Dinâmica do CodeMirror (Javascript)

• Objetivo: Inicializar o editor CodeMirror configurado em modo somente-leitura na primeira vez que a aba for aberta, e atualizar dinamicamente seu conteúdo com o código envelopado completo do widget a partir do estado atualizado do editor de HTML.

• Local:

  • gestor/modulos/publisher-highlights/publisher-highlights.js

• Especificações do Fluxo:

  • No manipulador de abas contentHighlightsTabHandler(tabID), interceptar quando a aba for 'hep-widget' e invocar a função de renderização updateWidgetCodeTab().

  • A função updateWidgetCodeTab() deve:

    1. Garantir resiliência contra ordem de carregamento verificando se a biblioteca CodeMirror está disponível no escopo global. Caso não esteja, reagendar a chamada via setTimeout de 100ms.

    2. Instanciar o editor CodeMirror na primeira abertura usando o ID hep-widget-code com as configurações: mode: 'text/html', readOnly: true, lineNumbers: true e lineWrapping: true.

    3. Construir a string de injeção envelopada com base no slug do destaque:

       • Identificar o slug a partir da variável global gestor.moduloRegistroId.

       • Se gestor.moduloRegistroId estiver ausente (por exemplo, na tela de inserção de novo registro antes de salvar), utilizar o placeholder [slug-do-destaque] (ou [highlight-slug] em inglês).

       • Obter o código HTML do editor chamando a função global do CodeMirror HTML do gestor: window.html_editor_get_html().

       • Formatar o conteúdo final exibido no editor do widget no formato:

         <!-- widgets#publisher-highlights->render({"grupo_slug": "SLUG"}) < -->
         HTML_DO_EDITOR
         <!-- widgets#publisher-highlights->render({"grupo_slug": "SLUG"}) > -->

    4. Aplicar o valor ao documento do CodeMirror e disparar .refresh() para ajustar o layout visual.