# Lauda Editor de texto em blocos: digite barra para inserir títulos, listas e tarefas, e arraste cada bloco para reordenar. > Lauda é um componente exclusivo do THM Componentes que coloca um editor de texto em blocos, no estilo do Notion, dentro do seu app: cada linha vira parágrafo, título, lista, checklist, citação, código ou destaque, pelo menu barra ou por atalhos markdown. Não usa bibliotecas, exporta JSON e Markdown e serve para atas, prontuários e bases de conhecimento. - Categoria: Aplicações e produtividade - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/lauda/ ## 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 ```text 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 Lauda ### Lauda salva o conteúdo em HTML? Não. Lauda 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 Lauda só pelo teclado? Sim. Em Lauda, 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. ### Lauda funciona no celular? Funciona. Em telas estreitas, Lauda 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. ## Componentes relacionados - [Ateliê](https://vibecode.thmtecnologia.com/componentes/atelie/): Editor de código com cores por linguagem, números de linha, busca e blocos que recolhem, direto na sua página. - [Comitiva](https://vibecode.thmtecnologia.com/componentes/comitiva/): Setinhas coloridas com o nome de cada colega andando pelo documento, com trechos selecionados e recados no cursor. - [Alfinete](https://vibecode.thmtecnologia.com/componentes/alfinete/): Pins numerados que você solta sobre uma imagem ou tela para comentar, responder e marcar como resolvido. - [Palimpsesto](https://vibecode.thmtecnologia.com/componentes/palimpsesto/): Linha do tempo das versões de um documento, com régua para voltar no tempo, comparação lado a lado e botão de restaurar. - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.