O que é pergaminho e como funciona na prática
Vou falar sobre pergaminho porque muita gente chega perguntando isso e depois se perde na hora de implementar. Pergaminho, no contexto técnico, geralmente se refere a bibliotecas ou frameworks voltados para manipulação de documentos tipo scroll/rolo, ou então a formatos de apresentação de conteúdo linear. A coisa mais comum hoje em dia é a biblioteca Parchment (usada pelo Delta e por editores rich-text), mas também pode ser que você esteja falando de algum projeto brasileiro chamado "pergaminho" para geração de documentos ou até algo voltado para CMS. Sem saber exatamente qual deles você quer dizer, vou cobrir os dois cenários mais prováveis. Se não for nenhum dos dois, me avisa que eu ajusto.
o que pergaminho realmente significa em código
Se for a biblioteca Parchment do ecossistema Quill/Slate: ela é o layer de abstração entre o DOM e o formato Delta de operações. Em vez de você lidar com HTML puro (que é um inferno para operações colaborativas), Parchment converte o conteúdo em nodes tipados — inline, block, leaf — e cada mudança é uma operaçãoDelta que você pode aplicar, reverter, transformar. Isso permite que múltiplos usuários editem o mesmo documento sem corromper o estado. A parte que ninguém conta: Parchment não é perfeito. O mapeamento entre HTML e nodes Parchment às vezes gera nodes vazios que quebram o cursor. Eu perdi umas três horas num projeto porque o Quill inseria um <span> vazio toda vez que o usuário dava Enter num bloco de código personalizado, e o cursor pulava pra outra linha sem aviso. A solução foi sobreescrever o matcher do format personalizado e adicionar um guard que remove folhas vazias no callback de transformação antes de aplicar a operação.
Como começar com Parchment do zero
O fluxo básico é esse aqui: Instale o pacote. No npm, roda npm install quill parchment. Se estiver usando TypeScript, instale também as tipagens com @types/quill. Depois crie uma instância do editor apontando para um container no DOM e defina os modules que você vai usar — toolbar, history, e qualquer custom blot que você precisar.
Blots personalizados são onde a coisa fica interessante. Um blot é basicamente um componente Parchment que mapeia um tag HTML para um node tipado. Você cria estendendo BlockBlot ou InlineBlot, define o tagName, o defaultValue, e os métodos de transform se precisar. Por exemplo, se você quer um bloco de citação que renderiza como <blockquote class="highlight">, você cria um blot que associa essa tag e já resolve o problema de serialização automática. O ponto que os tutoriais não mostram: a API de transform do Delta. Se você só usa editor.insertText() e editor.deleteText(), tá OK para coisas simples. Mas se precisa fazer edição colaborativa ou replay de operações, precisa dominar Delta.transform() e Delta.compose(). Transform une duas sequências de operações considerando conflitos de índice. Compose aplica uma sequência sobre outra mantendo a ordem. Errar a ordem aí é o jeito mais rápido de ter documentos que ficam com texto duplicado ou caracteres sumindo sem motivo aparente.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problemas comuns e como resolver
O primeiro problema que todo mundo encontra é performance quando o documento cresce. Parchment reconstrói o DOM inteiro a cada grande operação. Se você estiver lidando com documentos de mais de 50 mil caracteres, o editor começa a travar. A workaround que funcionou pra mim foi limitar o renderizado ao viewport usando virtualização — só manter os blotes visíveis na tela e descarregar o resto. Não é nativo do Quill, então você precisa implementar um scroll listener que adiciona e remove blotes conforme o usuário navega. O segundo problema é exportação. Parchment não exporta HTML limpo por padrão — ele exporta JSON Delta. Se você precisa de HTML para enviar pra algum sistema externo ou gerar PDF, precisa converter. A forma mais direta é usar editor.root.innerHTML, mas isso traz toda a bagunça de classes e spans que o Quill injeta. Uma alternativa melhor é usar uma biblioteca como quill-delta-to-html ou construir um serializer customizado que itera sobre os nodes do Delta e gera HTML semântico. No meu caso, eu fiz um serializer simples que itera sobre cada op do Delta e monta tags <p>, <strong>, <code> conforme o tipo, e eliminei cerca de 60% do peso do HTML exportado.
Também tem o problema de compatibilidade entre versões. Parchment evolui separado do Quill em alguns releases. Atualizar o Quill sem atualizar o Parchment (ou vice-versa) quebra tipos e blots personalizados. Sempre travar as versões com ^ no package.json e rodar testes de snapshot após atualizar. Isso evita surpresas.
Alternativas se Parchment não servir
Se o seu caso é simplesmente gerar documentos em formato scroll/rolo para leitura, não precisa de um editor rich-text. Frameworks como Novel, Slate, ou até TipTap (que é headless e muito mais flexível) podem ser melhores. TipTap usa ProseMirror por baixo e não te obriga a seguir o modelo de blots do Parchment. Se você precisa de colaboração em tempo real, o TipTap tem integração nativa com Y.js e CRDTs, o que resolve boa parte dos problemas de conflito que o Delta sozinho não lida bem. Se o que você quer é mesmo só um visual de pergaminho/rolo para apresentação de conteúdo (tipo aquele efeito de página que desce infinitamente), aí o assunto é outro completamente — CSS com overflow-y: scroll, scroll-snap-type, e talvez alguma library de animação de transição entre seções. Não tem segredo técnico, só cuidado com performance em mobile.
Download e recursos
O pacote oficial do Parchment fica no npm: npm install parchment. O repositório source code é no GitHub da editor-quill. Para o Quill completo, npm install quill. Se for usar TypeScript, não esqueça das tipagens. Para o TipTap, npm install @tiptap/vue-3 (ou a versão React/HTML equivalente) junto com @tiptap/extension-mention e extensões que você precisar. Documentação oficial do Parchment: docs.quilljs.com. Documentação do TipTap: tiptap.dev/docs. Ambas são razoavelmente boas, mas a documentação do Parchment em si é mais rasa — o bom mesmo tá nos source code e issues do GitHub, onde as soluções pra problemas reais costumam ser discutidas.
Se você especificar qual exatamente de pergaminho está procurando, eu consigo dar um tutorial mais direcionado. Os passos acima cobrem o cenário mais comum, mas cada um desses projetos tem suas próprias armadilhas que valem a pena conhecer antes de começar.
