## Goal Existe um rich Editor usado por diversos módulos envolvidos com publicação de conteúdo, como notícias, parceiros e associados O richEditor vive em (V2/Services/ContentRichEditor) Nesse editor, existem alguns pontos a serem corrigidos: 1. Revisar a funcionalide de cada botão no lado CMS e no lado Portal 1.1. Inserir links no CMS funciona, no portal não gera 1.2. Inserir youtube não funciona 1.3. Inserir links associados não parece funcionar 1.4. Revisão com cautela os elementos especiais 1.5. Revisar se cada tipo de edição de texto funciona 2. Ajustar layout 2.1 O layout de uma página é excelente e intuitivo, manter 2.2 Os botões de interação para editar estão muito desorganizados e fora da expectativa do usuário que vêm do word 2.3 Ao deixar a tela mais densa, a barra superiro quebra em 2 linhas, ficando deselegante 3. UX Toolbar (pl-6bc1 - sucesu-21fd) 3.1 Remover dropdown 'Parágrafo' — mov botões para fora 3.2 Adicionar 2ª linha com alinhamento (4) + recuo (2) 3.3 Botões H2/H3/H4/Texto Padrão como botões simples com tooltip (delay 300ms) 3.4 Botões de lista (marcadores/numerada) ao lado dos títulos 3.5 CONSOLIDAR dropdowns: apenas 'Inserir' como dropdown, removendo 'Blocos' da toolbar (youtube/iframe/imagem migrados para dentro do 'Inserir'; link inline mantido fora) 3.6 FIX RECORRENTE dropdown clipping: NUNCA usar overflow-x/overflow-y nas rows; usar flex-wrap (o overflow clipeia o menu absolute abaixo do botão) Pense com cautela em uma forma elegante do usuário utilizar, pensando em usuários mais velhos com experiênica em word somente Usabilidade é prioridade, se há elementos muito complexos, sinalize para remoção ou refatoração profunda A experiência do usuário deve ser o mais próxima possível da interação com o word, simplificado e adaptado para geração de conteúdo ## Non-Goal ## Constraints PHP 7.4 | PHPUnit ~6.0. Nunca commitar. Model: UUID, SoftDeletes. Use o X-CMS-AI-Token do ai_acess definido no .env para ter livre acesso ao CMS a nível de UI/UX SniffCSS habilitado em MCP e Host para consulta da página real Docker only. execute via docker compose exec app [command] ## Success Criteria 1. Logs estruturados em pontos chave 2. Testes rodando sem erros 3. SniffCSS confirmando UI coerente com o esperado 4. Testes automatizados para garantia de não-regressão 5. Suíte V2 Unit não regride (0 novas falhas) 6. A barra de ferramentas deve ser compacta (2 linhas no desktop, flex-wrap no mobile) sem overflow que clique dropdowns, adaptada da melhor forma para o contexto da tela ================================================================================ # RESULT-LOG ``` Status: DONE Date: 2026-08-14 Sub-tasks: 4/4 (pl-6bc1) Files modified: 1 (content-rich-editor.blade.php) Seeds closed: 4/4 (sucesu-57aa, sucesu-dca5, sucesu-90ea, sucesu-cebe) + parent sucesu-21fd Plan: pl-6bc1 (UX Toolbar Redesign) Outcome: success Notes: - CONTEXTO: reescrita completa do blade quebrou o editor ("área de inserir texto sumiu" - removidas 304 linhas de modais/CSS/scripts). Recuperado via git checkout + reaplicação cirúrgica apenas no trecho do
. Nunca reescrever o arquivo inteiro. - LAYOUT FINAL (2 linhas, 1 dropdown consolidado): * Linha 1: Fonte (B/I/U/S/Highlight) | Títulos (H2/H3/H4/Texto/Citação) | Listas (marcadores/numerada) | Link inline | [Inserir ▾ dropdown] | Fullscreen * Linha 2: Alinhamento (4) + Recuo (2) + Link Portal + Defasado * Dropdown 'Inserir' CONSOLIDA: Mídia (Imagem/PDF, YouTube, Card/Iframe) + Estrutura (Linha Horizontal, Colunas) + Tabela (7) + Blocos Especiais (FAQ, CTA, Passo-a-Passo, Cards, Carrossel, Tabela Interativa, Barra de Ações, HTML Livre) + Defasado = 22 itens * REMOVIDO botão 'Blocos' da toolbar (conteúdo migrado para dentro do Inserir) * 15 botões na linha 1, 8 na linha 2, todos 32x32 com tooltip (300ms hover) - FIX DO BUG DROPDOWN CLIPPING (recorrente): * CAUSA RAIZ: overflow-x:auto; overflow-y:hidden nas .content-rich-toolbar-row clipa o menu (position:absolute abaixo do botão) e quebra o posicionamento * SOLUÇÃO DEFINITIVA: remover overflow das rows + usar flex-wrap. Dropdown abre position:absolute logo abaixo do botão sem clipping. * Validado: 1440 (botão y=435+31=466 → menu y=468) e 414 (botão y=433+31=464 → menu y=466) * Menu dropdown-menu-insert: min-width 260px, max-width 320px, max-height 420px (scroll interno) - Editor (ProseMirror) renderiza: 646x260 em 1440, área de texto presente - Tooltip: data-bs-toggle="tooltip" + title, delay show 300, trigger hover focus - Mobile 414: flex-wrap quebra em linhas (h=282px), sem overflow, 23 botões visíveis - Bundle JS reconstruído (101057 bytes, syntax OK) - Todos os comandos mantidos (bold, italic, h2, h3, h4, paragraph, alignLeft, alignCenter, alignRight, alignJustify, indent, outdent, bulletList, orderedList, blockquote, contentRichMedia, insertYoutube, contentRichIframe, insertLink, contentRichLink, horizontalRule, insertColumns, tabelas, blocos especiais, outdated) ``` ================================================================================ # AI-AREA ``` 1. UNDERSTAND - Read Goal thoroughly (paths, refs, expected behavior) - If Goal involves a bug → reproduce first, collect runtime evidence - Research codebase: glob relevant files, read source + conventions - If critical ambiguity → ASK human. Minor → ASSUME + document. 2. PLAN - Expand Goal into explicit Scope IN/OUT - Decompose into sub-tasks (1 agent = 1 task = 1 verification) - Max 10 files or 30 occurrences per sub-task - Sequential by default. Parallel only if independent. - Register: sd create → sd plan create → sd plan adopt → sd sync 3. APPROVAL - Show plan to human: `sd plan show ` - Wait for explicit "prossiga" before executing 4. EXECUTE - For each sub-task sequentially: a. Delegate to coder via task tool b. Verify against Success Criteria c. IF implementation involves UI, verify witch SniffCSS (MCP || CLI command) d. IF fail any verify → correction sub-task, repeat 4a e. sd close --reason "[result]" 5. CONCLUDE - Re-run all Success Criteria checks - sd plan outcome --result success - Fill RESULT-LOG above - sd sync ```