Editor de texto rico Quill v2 lançado

 (quilljs.com)
2 pontos por GN⁺ 2024-04-20 | 1 comentários | Compartilhar no WhatsApp
  • O Quill 2.0 é um editor WYSIWYG gratuito e open source para a web moderna, permitindo incorporar recursos de edição de texto rico diretamente ao produto
  • Com base em uma arquitetura modular e em uma API expressiva, é possível começar pelo núcleo básico e customizar o editor conforme os requisitos
  • Desenvolvedores podem acessar de forma detalhada o conteúdo, as alterações e os eventos do editor, e esperar um comportamento consistente usando JSON na entrada e na saída
  • Suporta navegadores modernos em desktops, tablets e celulares, com o objetivo de oferecer o mesmo comportamento e o mesmo HTML gerado em todas as plataformas
  • Pode escalar de pequenos projetos a empresas Fortune 500, sendo uma boa opção para adotar um editor simples e depois expandi-lo conforme o produto cresce

Quill 2.0 e como começar

  • O Quill 2.0 foi lançado, e os detalhes do release podem ser conferidos no post de anúncio separado: Quill 2.0 is released!
  • Quill é um editor WYSIWYG gratuito e open source criado para a web moderna
  • O exemplo básico carrega quill.snow.css e quill.js a partir de um CDN e então cria o editor com new Quill('#editor', ...)
    • A versão do exemplo é quill@2.0.3
    • Define #toolbar em modules.toolbar e usa snow como theme
  • É possível testar diretamente a API no console de desenvolvedor do navegador

Customização e escopo de uso

  • O Quill permite ajustar o editor às necessidades por meio de uma arquitetura modular e da API
  • Desenvolvedores podem acessar de forma detalhada o conteúdo, as alterações e os eventos do editor com uma API simples
  • Usa JSON tanto na entrada quanto na saída para oferecer um comportamento consistente e determinístico
  • Suporta navegadores modernos em desktops, tablets e celulares, oferecendo o mesmo comportamento e o mesmo HTML gerado entre plataformas
  • Pode ser usado tanto em pequenos projetos quanto em empresas Fortune 500, começando pelo Quill core e customizando ou adicionando extensões conforme necessário
  • O número de GitHub Stars exibido é 47.204

Leituras relacionadas

1 comentários

 
GN⁺ 2024-04-20
Comentários no Hacker News

  • Em um emprego anterior, criei um sistema em que os usuários digitavam texto formatado em uma caixa de texto do Quill e isso era salvo no banco de dados no formato Delta
    Depois, outro membro da equipe importava esse conteúdo para um plugin do InDesign, lia a formatação aplicada no Quill e a reaplicava como estilos do InDesign
    O fluxo era que o pessoal da linha de frente digitava anúncios legais de jornal e a equipe de produção os passava para o InDesign para preparação de impressão, e o formato Quill Delta facilitou muito algo que teria sido bem mais difícil se, como a maioria dos editores, tivéssemos armazenado HTML
    Faz alguns anos que não ouço falar nem uso o Quill, então é bom ver que ele ainda está vivo

  • Notas de lançamento: https://github.com/quilljs/quill/releases/tag/v2.0.0
    Post de anúncio: https://slab.com/blog/announcing-quill-2-0/
    Já usei bastante o Quill; ele é fácil de integrar, o formato JSON Delta também é bem decente e a estrutura é relativamente simples
    Mas, sempre que uso, fico pensando: “será que eu não deveria simplesmente usar ProseMirror?”
    O Quill é uma boa solução temporária quando você precisa de recursos de edição rapidamente, mas, conforme os requisitos dessa funcionalidade crescem, você acaba sempre calculando mentalmente que em algum momento vai precisar de um plano de migração

    • Seria bom se o link enviado pudesse ser trocado por [1]. Na prática, o assunto é a nova versão
      Ao mesmo tempo, às vezes me pergunto por que não conseguimos padronizar editores de texto formatado
      [1] https://slab.com/blog/announcing-quill-2-0/
    • Estou olhando o ProseMirror, principalmente por meio do tiptap2, que aparentemente o encapsula bem
      Mas a ideia de realmente migrar pesa, e tenho curiosidade sobre a experiência de outras pessoas
    • Precisei implementar edição de texto formatado no trabalho, então avaliei várias opções, e o Quill foi um dos candidatos que examinei no começo, mas no fim escolhi o ProseMirror
      Escolhi por ele ser de nível bem baixo e pela documentação enorme; me lembrou um pouco o D3
      Depois disso, criei nós personalizados, comandos personalizados, barra de ferramentas personalizada e integração com Markdown e plugins personalizados de Markdown, e com só um pouco de código de cola ele também se integra de forma bem limpa ao Vue
      Até agora, estou muito satisfeito por ter escolhido o ProseMirror

  • Não sei se é estranho eu ter opiniões fortes demais sobre como a tecla Return deve ser tratada em um editor de texto
    Em texto simples, Return deve criar uma nova linha, e em texto formatado, Return deve criar um novo parágrafo
    Se você quiser uma nova linha, pode usar Shift+Return
    Nas versões anteriores isso era um problema grande, e agora não sei o quanto esse comportamento pode ser customizado
    Reconheço que me importo demais com isso, mas o TipTap funcionou bem para mim

    • A configuração deveria ser fácil, mas não acho que esse comportamento deva ser o padrão
      Porque ele é menos geral e só faz sentido quando se pressiona Return em certos tipos de bloco
      Shift+Return nem funciona no mobile, e também é irritante precisar conhecer uma combinação de teclas escondida para obter o comportamento desejado
      O editor de texto formatado do Reddit funciona assim, então vivo brigando com ele
      No fim, só quero não precisar apertar Return duas vezes
      Entendo a elegância de sempre manter o usuário dentro de um parágrafo e fazer com que ele escolha explicitamente a quebra de linha com Shift+Return, mas, em uma área tão delicada quanto a de editores de texto formatado, eu priorizaria a experiência do usuário acima da elegância
    • Concordo totalmente. Até esse suporte a Shift+ parece instável, embora eu provavelmente consiga aceitar
      O tratamento de parágrafos no exemplo do Quill parece estranho
    • Se entendi corretamente, parece semelhante ao comportamento do campo de texto do Confluence/JIRA

  • A documentação é excelente. Seria ótimo se todo projeto open source tivesse uma página como “Why Quill”[1], porque isso ajuda a entender rapidamente a filosofia do projeto e se ela combina com meus objetivos
    Melhor ainda seria ter algo como “Why Not Quill”, para descobrir rapidamente em que situações ele não se encaixa bem
    Todo projeto faz concessões, então comunicar isso de forma direta e clara proporciona uma experiência melhor para o usuário
    [1] https://quilljs.com/docs/why-quill

  • Só pelo link não fica claro, mas aparentemente isso foi postado porque o v2 foi lançado há 3 dias
    Até pouco tempo atrás eu estava trabalhando com o Quill v1, e não foi uma experiência muito boa
    Fazer tabelas funcionarem com plugin foi doloroso, e também havia uns problemas estranhos de rolagem
    Espero que o v2 tenha corrigido bastante coisa, mas vou continuar usando o TinyMCE, que é melhor em recursos

    • Também gosto do TinyMCE, então há 6 meses troquei o editor Quill pelo TinyMCE
      Mas me irritou o fato de precisar de uma chave de API mesmo usando JS estático no site, e também foi incômodo ver o “uso” de renderização do editor no plano gratuito diminuir rapidamente alguns dias atrás [0]
      Fico curioso se isso não é um problema para você
      [0] https://news.ycombinator.com/item?id=40044544

  • No começo eu não entendi por que o Quill tinha voltado a aparecer, mas agora vi que a aguardada versão 2.0 foi lançada há 3 dias
    Veja https://slab.com/blog/announcing-quill-2-0/

    • Acho que esse link e esse título seriam um ponto de entrada melhor para o tópico

  • Já tive um projeto antigo que sofreu bastante por usar Quill
    Pessoalmente, o problema foi não ter avaliado direito as limitações do editor em comparação com os requisitos do projeto, mas a forma como a documentação enfatizava a extensibilidade da biblioteca também parecia capaz de induzir a esse tipo de problema
    Se você ficar dentro dos limites, é uma biblioteca excelente. Por exemplo, é melhor evitar coisas complexas demais, como conteúdo aninhado
    Seria bem útil se o site tivesse uma seção tipo “Why You Should NOT Use Quill?”

  • Depende do caso, mas eu não pretendo nunca mais usar Quill em um projeto de produção
    Comecei a usar Quill 1.x por volta de 2016 e, no começo, gostei bastante
    Quando tuitei que estava avaliando o Quill, Jason entrou em contato primeiro e me ajudou com dúvidas de implementação
    Em 2019, eu estava enfrentando alguns bugs, o Quill 1.x estava em modo de manutenção, e o 2.0 estava praticamente sem documentação [1]
    Tentei falar com o Jason no Twitter para ter uma noção do cronograma [2], mas basicamente recebi uma resposta no tom de mandar eu me ferrar
    A empresa dele, Slab, também me bloqueou no Twitter agora, embora talvez a intenção fosse me bloquear na conta pessoal
    Todo mundo tem dias estressantes quando está montando uma startup, então pode ser que eu tenha procurado na hora errada
    Meu palpite é que ele estava focado na empresa e tinha tempo apenas para manter o Quill funcionando para uso interno, mas quase nenhum espaço para lançá-lo como open source. Nesse caso, eu teria preferido que isso fosse dito com franqueza
    Cinco anos depois, o Quill v2 finalmente saiu, e fico feliz que a Slab ainda exista
    Espero que daqui para frente exista capacidade para manter o Quill publicamente, mas, se você pretende usá-lo em produção, vale verificar qual é o nível de compromisso com o suporte e também ter um plano para o caso de as respostas simplesmente pararem
    Se Jason estiver nesta thread, não guardo ressentimentos, isso já passou. Pode ignorar ou acrescentar a sua perspectiva
    [1] https://github.com/quilljs/quill/issues/2435
    [2] https://twitter.com/nickbaum/status/1177240103925796865

    • Não tive nenhuma experiência com o Jason, mas gastei tempo demais lendo o código do Quill para criar patches e contornar comportamentos estranhos
      Isso foi ainda mais frustrante porque a razão de usar uma biblioteca de editor de texto formatado, em vez de fazer um do zero, é justamente evitar esse tipo de coisa
      Não sei como está o v2, mas o código do v1 não é muito bem estruturado
      Também havia funcionalidades básicas cuja implementação foi adiada por medo de acabar criando um milhão de pequenos bugs
      De longe, a melhor coisa do Quill é o formato Delta
      Mas, para quem quer mais do que negrito/sublinhado/itálico, eu recomendaria o ProseMirror

  • Posts relacionados. Há mais algum?
    Announcing Quill 1.0 - https://news.ycombinator.com/item?id=12437345 - setembro de 2016, 82 comentários
    Quill – A cross browser rich text editor with an API - https://news.ycombinator.com/item?id=10446865 - outubro de 2015, 47 comentários
    Quill – An Open Source Rich Text Editor with an API - https://news.ycombinator.com/item?id=7716376 - maio de 2014, 60 comentários

    • Este anúncio é sobre a versão 2, que aparentemente foi lançada há alguns dias

  • Lembro de ter usado https://github.com/facebook/lexical em um projeto há cerca de um ano, e quase tudo funcionou bem de cara
    Existe algum motivo para preferir Quill?