Human Request: Correção de Sincronização, CodeMirror e Renderização do Widget (req-013)

Esta especificação detalha os ajustes necessários no dropdown customizado de curadoria manual (jquery-custom-dropdown.js), no módulo de destaques (publisher-highlights.js), e nos arquivos de backend do widget para corrigir problemas de concorrência, duplicação e renderização.

Detalhes dos Bugs e Causas Raiz

1. Sincronização e Race Conditions no Dropdown

• O Problema: Ao interagir com o dropdown de itens selecionados no modo de curadoria manual:

  1. Ao adicionar o segundo item, a pré-visualização não é atualizada e continua exibindo apenas o primeiro card.

  2. Ao remover itens (clicando no ícone "x" da tag), a pré-visualização para de funcionar e não limpa/atualiza o estado.

  3. Ao alternar o template visual com itens selecionados, a renderização exibe apenas o primeiro item.

• A Causa Raiz: Os callbacks onAdd e onRemove do Fomantic UI no array this.selectedIds entram em concorrência. Métodos programáticos como .dropdown('clear', true) e .dropdown('set exactly', ...) durante hidratações em setValues também disparam esses callbacks, causando loops que corrompem this.selectedIds. Adicionalmente, syncSelection() tenta reler a seleção crua do DOM (readSelection()) quando o array é limpo, reidratando erroneamente elementos removidos.

2. Estilização e Duplicação do CodeMirror do Widget

• O Problema: A aba "Código do Widget" possui um CodeMirror simples e que se duplica caso o usuário mude de aba no Editor HTML e volte para o Widget.

• A Causa Raiz: O CodeMirror foi instanciado sem herdar o tema escuro (tomorrow-night-bright) e a altura (800px) do Editor HTML. A duplicação ocorre porque a variável local widgetCodeMirror na inicialização do script é re-instanciada caso o script seja recarregado ou as chamadas de tab re-inicializem a aba, gerando múltiplos CodeMirrors acoplados ao mesmo textarea.

3. Falha no Preenchimento de Variáveis na Página Final (Renderizador)

• O Problema: Quando o widget é renderizado numa página de produção, as variáveis [[item#X]] não são substituídas pelos valores reais (ficam com o texto literal).

• A Causa Raiz: No lote anterior, os placeholders foram alterados de @[[item#...]]@ (com arrobas) para [[item#...]] (sem arrobas). Porém, a regex do renderizador no backend (publisher-highlights.widget.php) e da extração de variáveis (publisher-highlights.php) continuaram com a regex antiga que exige os símbolos @ nas pontas.

Correções Solicitadas

1. Prevenção de Concorrência de Callbacks em Atualizações Programáticas

• Local: gestor/assets/interface/jquery-custom-dropdown.js

• Ajuste:

  • Adicionar a propriedade/flag this.ignoreCallbacks = false no construtor da classe PublisherHighlightsCustomDropdown.

  • No método setValues, envelopar todas as chamadas de alteração do dropdown Fomantic UI (change values, clear, set exactly) definindo a flag this.ignoreCallbacks = true no início e this.ignoreCallbacks = false no final.

  • Nos callbacks onAdd e onRemove definidos em settings(), verificar a flag no início de cada execução e retornar imediatamente caso seja verdadeira, impedindo qualquer mutação ou propagação de preview para chamadas de API:

    onAdd: function (addedValue) {
    if (self.ignoreCallbacks) return;
    // ... lógica existente ...
    },
    onRemove: function (removedValue) {
    if (self.ignoreCallbacks) return;
    // ... lógica existente ...
    }

2. Proteção e Simplificação de syncSelection

• Local: gestor/assets/interface/jquery-custom-dropdown.js

• Ajuste:

  • No método syncSelection(), retornar imediatamente se this.ignoreCallbacks for verdadeiro.

  • Simplificar a lógica de syncSelection para sempre confiar e propagar o array this.selectedIds fatiado, eliminando completamente a leitura e reidratação a partir de readSelection() quando o array fica vazio. O leitor cru do DOM só deve ser utilizado na inicialização se o estado do array não existir:

    PublisherHighlightsCustomDropdown.prototype.syncSelection = function () {
    if (this.ignoreCallbacks) return;
    var selectedIds = (this.selectedIds || []).slice();
    this.options.setSelectedIds(selectedIds);
    };

3. Validação do Acoplamento de Preview

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

• Ajuste:

  • Validar que o callback setSelectedIds repassa corretamente o array ordenado de IDs para schema.selected_items e que scheduleWidgetPreview(false) é invocado com sucesso, forçando o processamento dinâmico sem restrições.

4. Estilo Consistente e Prevenção de Duplicação do CodeMirror

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

• Ajustes:

  • Ajustar as opções de inicialização do CodeMirror da aba de Widget (updateWidgetCodeTab) para utilizar as mesmas configurações visuais do Editor HTML principal:

  • Tema: 'tomorrow-night-bright'

  • Modo: 'htmlmixed' (com htmlMode: true)

  • Outras propriedades: lineNumbers: true, lineWrapping: true, styleActiveLine: true, matchBrackets: true, indentUnit: 4, readOnly: true.

  • Dimensão: Definir a altura do CodeMirror para 800px usando widgetCodeMirror.setSize('100%', 800);.

  • Evitar Duplicação: Antes de criar a instância com CodeMirror.fromTextArea, verificar se já existe um contêiner .CodeMirror vizinho à textarea no DOM (usando $textarea.next('.CodeMirror')). Se houver, recuperar a referência da instância a partir do objeto DOM correspondente ($textarea.next('.CodeMirror')[0].CodeMirror) em vez de inicializar novamente:

    var existingWrapper = $textarea.next('.CodeMirror');
    if (existingWrapper.length > 0) {
    widgetCodeMirror = existingWrapper[0].CodeMirror;
    }

5. Correção de Substituição e Extração de Placeholders no Backend (Remoção do Cerco de Arrobas)

• Locais:

  • gestor/modulos/publisher-highlights/publisher-highlights.widget.php

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

• Ajustes:

  • No arquivo publisher-highlights.widget.php (linha 127 ou correspondente), alterar a regex de substituição do loop de itens de /@\[\[item#([a-zA-Z0-9_\-]+)\]\]@/ para /\[\[item#([a-zA-Z0-9_\-]+)\]\]/.

  • No arquivo publisher-highlights.php (função publisher_highlights_extract_item_variables e rota AJAX de carregamento de template), alterar as ocorrências da regex /@\[\[item#([a-zA-Z0-9_\-]+)\]\]@/ para /\[\[item#([a-zA-Z0-9_\-]+)\]\]/.

6. Restrições Críticas de Versionamento

• ATENÇÃO: NÃO realizar commits (git commit) ou envios (git push) de forma automática ou autônoma sob nenhuma circunstância. Todas as alterações devem permanecer apenas no workspace de trabalho local para análise posterior pelo usuário, que fará a revisão e o commit manualmente.