Como ele é
Parece uma folha de papel limpa no centro da tela, sob uma barra que mostra o título do documento, a contagem de blocos e de palavras, desfazer, refazer e o botão Markdown. Ao passar o mouse por uma linha, surgem à esquerda um sinal de mais e uma alça de seis pontinhos; arrastar a alça mostra uma linha colorida onde o bloco vai cair, e ao soltar os blocos deslizam para a nova ordem. Selecionar um trecho abre uma pequena barra escura com negrito, itálico, código e link. Digitar barra abre a lista de blocos com busca. As cores vêm de props: fundo quase branco, texto azul-marinho e destaque anil.
Você pode estar procurando isto se pediu algo assim
- editor de texto em blocos tipo Notion dentro do meu sistema
- campo de texto rico em que digito barra e aparece um menu de opções
- editor que vira título quando começo a linha com cerquilha
- quero arrastar parágrafos para mudar a ordem do texto
- um lugar para escrever atas de reunião com checklist dentro do app
- editor de texto que exporta o conteúdo em Markdown
- trocar o textarea simples por um editor com cara de app moderno
Também chamado de
- editor de blocos
- block-based editor
- editor estilo Notion
- editor de texto rico
- rich text editor
- slash command menu
- editor markdown
Quando usar
- Atas de reunião, relatórios e descrições de chamados dentro de um ERP
- Prontuários e evoluções em sistemas de saúde que precisam de listas e destaques
- Bases de conhecimento e wikis internas com títulos, checklists e blocos de código
- Qualquer campo de texto rico que hoje é um textarea sem formatação
Quando evitar
- Documentos editados por várias pessoas ao mesmo tempo, que exigem sincronização em tempo real
- Textos que precisam de tabelas, imagens embutidas ou layout de página para impressão
- Campos curtos, como nome ou assunto, em que um input simples resolve
Como pedir para a sua IA
Crie um editor de texto em blocos no estilo Notion para a tela de atas do meu sistema: menu ao digitar barra, atalhos markdown, alça para arrastar blocos, exportação em Markdown, navegação completa pelo teclado, anúncios para leitor de tela e as cores da minha marca.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Block Editor
O Block Editor salva o conteúdo em HTML?
Não. O Block Editor guarda o texto como uma lista de blocos com trechos marcados, nunca como HTML solto, por isso o conteúdo já sai sanitizado. Você lê e grava pelo v-model ou pelos métodos toJSON, toMarkdown e fromMarkdown, e links com javascript: ou data: são recusados.
Dá para usar o Block Editor só pelo teclado?
Sim. No Block Editor, Ctrl+B, Ctrl+I, Ctrl+E e Ctrl+K formatam a seleção, Ctrl+Shift com as setas move o bloco, Tab recua itens de lista, Alt+F10 leva à barra de formatação e Esc leva à alça do bloco. Conversões, formatação, movimentos e exclusões de blocos são anunciados aos leitores de tela, em português.
O Block Editor funciona no celular?
Funciona. Em telas estreitas, o Block Editor reduz as margens, esconde o botão de mais e coloca o painel de Markdown abaixo do texto. A alça de arrastar aparece no bloco em foco e aceita toque, e o prompt do THM Componentes pede para testar em mobile e comparar LCP e INP.
