Voltar para Início

Publicado em 19/11/2025

Editor de Texto Completo Implementado

Implementamos o Lexical Rich Text Editor em três locais estratégicos do sistema, permitindo formatação rica de conteúdo com suporte a negrito, itálico, títulos, listas, links e muito mais!

📝 O que é o Lexical Editor?

O Lexical é um framework moderno de edição de texto desenvolvido pelo Facebook (Meta), que oferece uma experiência de edição superior com recursos avançados de formatação.

Principais Características:

  • Barra de ferramentas fixa - Sempre visível para fácil acesso
  • Formatação rica - Negrito, itálico, sublinhado, tachado
  • Títulos - H1, H2, H3, H4, H5, H6
  • Listas - Ordenadas e não ordenadas
  • Links - Inserir e editar URLs
  • Citações - Blocos de citação (blockquote)
  • Alinhamento - Texto à esquerda, centro, direita e justificado

🎯 Onde Foi Implementado?

1. Texto Destaque (destaqueTexto)

Localização: Globais > Texto Destaque

Campo destaqueTexto agora usa o Lexical Editor para formatar o texto que aparece na seção de destaque do site.

Uso ideal para:

  • Texto promocional com destaque em negrito
  • Links para páginas de produtos
  • Formatação de preços e condições especiais

2. Dados da Empresa (sobre)

Localização: Globais > Dados da Empresa

Campo sobre permite escrever o texto institucional "Sobre a Empresa" com formatação completa.

Uso ideal para:

  • História da empresa com parágrafos organizados
  • Missão, visão e valores com títulos destacados
  • Listas de diferenciais e qualidades
  • Links para certificações ou redes sociais

3. Produtos (descricaoCompleta)

Localização: Conteúdo > Produtos

Campo descricaoCompleta oferece descrição detalhada dos produtos com especificações técnicas formatadas.

Uso ideal para:

  • Especificações técnicas em listas
  • Títulos de seções (Características, Diferenciais, etc.)
  • Destaque de informações importantes em negrito
  • Links para manuais ou garantia

✨ Campo HTML Pré-Gerado

Inovação Importante: Todos os campos Lexical agora geram automaticamente uma versão HTML através do hook lexicalHTMLField.

Campos HTML Criados:

  • destaqueTexto_html (Texto Destaque)
  • sobre_html (Dados da Empresa)
  • descricaoCompleta_html (Produtos)

Vantagens:

  • ✅ Performance - HTML pré-renderizado no servidor
  • ✅ SEO Otimizado - Melhor indexação pelos buscadores
  • ✅ Compatibilidade - Funciona perfeitamente com Astro e SSG
  • ✅ Sem JavaScript - Renderização pura no servidor
  • ✅ Decodificação automática - HTML sempre renderiza corretamente

🚀 Benefícios

Para Editores de Conteúdo:

  • ✅ Interface intuitiva e moderna
  • ✅ Formatação rica sem complexidade
  • ✅ Pré-visualização em tempo real
  • ✅ Fácil de aprender e usar

Para Desenvolvedores:

  • ✅ HTML pré-gerado para performance
  • ✅ TypeScript completo
  • ✅ Compatível com SSG/SSR
  • ✅ Documentação detalhada

Para o Site:

  • ✅ Conteúdo mais rico e profissional
  • ✅ Melhor SEO com HTML semântico
  • ✅ Performance otimizada
  • ✅ Experiência de usuário superior

📖 Tutorial Completo

Criamos um tutorial passo a passo explicando como usar o Editor Lexical com exemplos práticos de cada recurso de formatação.

Acesse: Tutoriais > Como Usar o Editor de Texto Lexical