O Tiptap no Backblog: Mais que um Editor

Quando decidi implementar o Tiptap no Backblog, minha intenção não era apenas adicionar um editor rico para marcar checklists de features concluídas. Eu buscava algo muito mais significativo: a capacidade de escrever dentro do produto sem transformar a escrita em uma caixa preta. Esse era o ponto crucial.

O editor precisava fazer parte do fluxo real do Backblog, não ser apenas um elemento decorativo na tela. Com o componente RichTextEditor, ele recebe o conteúdo, respeita as configurações do projeto e devolve HTML atualizado sempre que o texto muda. Essa integração é fundamental para uma experiência fluida e eficaz.

Implementação do Editor

Foi esse tipo de implementação que me interessou:

const editor = useEditor({
  editable: !readOnly,
  content: value || "",
  immediatelyRender: false,
  extensions: [
    StarterKit.configure({
      heading: {
        levels: headingLevels,
      },
    }),
    Placeholder.configure({
      placeholder: placeholder ?? "Comece a escrever seu post...",
    }),
    Image.configure({
      allowBase64: false,
      HTMLAttributes: {
        class: "rounded-xl my-4 shadow border border-slate-800 max-w-full",
      },
    }),
    ...(tablesEnabled
      ? [
          Table.configure({
            resizable: true,
          }),
          TableRow,
          TableHeader,
          TableCell,
        ]
      : []),
  ],
  onUpdate({ editor: instance }) {
    onChange?.(instance.getHTML());
  },
});

O que realmente aprecio aqui não é apenas o Tiptap em si, mas o que essa decisão representa. O Backblog não depende de um editor isolado na interface, com comportamento genérico. Ele passa a ter um ponto claro onde escrita, configuração e produto se encontram. Decisões sobre headings permitidos, placeholders, imagens e tabelas não são efeitos colaterais de uma biblioteca, mas escolhas intencionais do projeto.

A Toolbar e a Interface

A toolbar seguiu a mesma filosofia. Eu não queria uma camada visual que parecesse poderosa, mas que escondesse o que realmente estava acontecendo. Optei por vincular cada ação aos comandos do próprio editor: negrito, itálico, blockquote, bloco de código, headings e listas. Tudo passa por editor.chain().focus(), o que torna a interface mais honesta e o código mais fácil de manter.

const chain = editor.chain().focus();

chain.toggleBold().run();
chain.toggleItalic().run();
chain.toggleBlockquote().run();
chain.toggleCodeBlock().run();
chain.toggleHeading({ level: 2 }).run();

Imagens no Fluxo do Editor

Outra parte que me agradou foi o tratamento das imagens. No Backblog, as imagens não são meros detalhes decorativos; elas fazem parte do fluxo do editor como conteúdo real. O usuário seleciona o arquivo, o projeto faz o upload, recebe a URL pública e injeta isso diretamente no Tiptap. Essa abordagem torna a experiência simples para o usuário e deixa claro para quem constrói onde a imagem entra e quem é responsável por isso.

const uploaded = await onUploadImage(file);
editor.chain().focus().setImage({ src: uploaded }).run();

A Relação entre Editor e IA

Talvez o aspecto que mais reflete a essência do Backblog esteja na relação entre o editor e a IA. Eu não queria que a IA se tornasse a protagonista da escrita. Ela deve ajudar, reorganizar e sugerir caminhos, mas a decisão final continua sendo do editor. O conteúdo retorna a um espaço humano de revisão. Escrever bem, especialmente na perspectiva do Gaier On Board, não se resume a apertar um botão e aceitar o resultado. É sobre usar boas ferramentas sem abrir mão da decisão editorial. No fluxo do Backblog, a tela de edição recebe o conteúdo, interage com a IA e, em seguida, persiste isso no post, ao invés de deixar a resposta da IA flutuando fora do produto.

Conclusão

No final das contas, o Tiptap no Backblog não é apenas um editor; é uma parte essencial da experiência de escrita que busquei criar. Ele simboliza um compromisso com a clareza, a autonomia e a integração da tecnologia na produção de conteúdo. Essa abordagem não só melhora a experiência do usuário, mas também solidifica o Backblog como uma plataforma onde a escrita é valorizada e respeitada.