Recriando o Notion com React (editor funcionando!)

O Notion é um aplicativo de produtividade e anotações que oferece ferramentas organizacionais, incluindo gerenciamento de tarefas, rastreamento de projetos, listas de tarefas, favoritos e muito mais.

Aqui na Rocketseat ele é utilizado por todas as áreas e equipes, e o Diego não fica de fora!

Hoje você vai poder ver na prática como criar um projeto clone do Notion utilizando React. E o melhor: vamos deixar a funcionalidade de edição funcionando.

Então bora codar ao vivo com a gente!

[luancampos]

Cara amei a aula, conteúdo da rocketseat são excelentes, cara o Diego é simplesmente um Walter O'Brian 😂

[hayttlesds]

Rapaz, esse Diego é cabeçudo viu. O cara saca muito. Não sei como ele arruma tempo pra aprender essas coisas todas.

[nikeldev]

Muito bom Diegão, iniciei no Ignite e to aprendendo muito contigo e o rodrigão la, ja tinha um conhecimento prévio mas tinha algumas lacunas no conhecimento e esta sendo sensacional o aprendizado la. Ficou mt legal esse clone do Notion, vi o vídeo que nem uma netflix e vou tentar implementar por conta hehe

[claudiotorcato]

Excelente conteúdo. Estou fazendo esse exemplo em meu aprendizado de Angular por questão de pré-requisito do PDPJ-Br.

[toggz]

muito obrigado pelo tutorial, de verdade, desejo todo sucesso do mundo pra ti ❤❤

[canalbomon]

entrei no video só pra estudar uma funcionalidade que to construindo e sao mais que feliz. Acho que nunca pensei de usar data- pra dps usar no className, ou pelo menos tive preguiça. obg

[Luccas_Alves]

Man, sei que blog tá ficando defasado. Mas uma parada dessa pra um blogzão ksksks. TOP!!!

[jgUser]

Muito foda Diego obrigadão pelo conteúdo, vem palestrar em cwb !

[TheMatthewizee]

A Rocketseat sabe mexer com nosso coraçãozinho, vcs são tops!!! 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀

[orion-research]

Adorei essa aplicação que executa requests para a API do GPT-4. Como se chama esse app? Eu adoro essas aplicações que você pode executar em qualquer tela do OS com um comando estilo Spotlight.

[MisouSup]

o que eu não gosto do tiptap é que eles não tem uma solução própria e simples para upload de imagens

eu consegui fazer uma gambiarra pra funcionar on drop e on paste de imagens, mas é bastante código. Podia ser uma extensão deles msm

[AntonioLopes-yrku]

Saudações Diego, adorei o conteúdo.

Entretanto, qual é o nome do browser que usas? Estou encantado 😂

[GHSB]

comand k - paco
tip tap - editor
radix - popup
react icons - icons

[chabetiico]

Esses snippets do Diego de criar as jsx function por exemplo, é extensao ou ele criou um snippet por conta?

[MariaFernanda-fysz]

Alguém sabe qual é a fonte q o Diego usa?

[jrmartinss]

como faria para deixar editavel apenas para o criador do conteudo?

[franklysg]

Altamente contra o uso das propriedades do tailwind desse tipo que Diego usa w-[0000], tailwind tem várias opções para não usar isso 😅

[fabinhodesigns]

Como eu faria para adicionar aquele placeholder SEM TITULO, quando não houvesse texto dentro do Editor?

Tentei fazer aqui, e ele até é renderizado pelo HTML, mas por algum motivo ele não está aparecendo da forma que deveria ser.

[joserodrigues]

a qualidade do video no void ficou muito ruim, 360p

[andresdosantosbrito]

Eu tentando criar meu Notion com o contentEditable