Скачать или смотреть React Você NÃO precisa mais dessa lib - Construa o editor do NOTION usando Javascript PURO

Descubra como construir um editor tipo do Notion com JavaScript puro, sem frameworks

CURSO BASICO DE GOLANG [PUBLICO]:    • Golang Curso Básico  
CURSO COMPLETO DE GOLANG [EXCLUSIVO MEMBROS]:    • GOLANG 2025 | CURSO INTENSIVO  

Junte-se ao clube dev pinguin, para ter acesso antecipado, videos exclusivos e mentoria exclusiva.
   / @lucas_badico  

Neste vídeo, demonstro passo a passo como criar um editor complexo similar ao Notion usando apenas JavaScript vanilla, sem bibliotecas como React. Você aprenderá a manipular o DOM diretamente, gerenciar estados, implementar arrastar/soltar, adicionar/deletar blocos e sincronizar dados entre a interface e o modelo. Também comparo essa abordagem com o uso de templates (como mostrei em vídeo anterior) e discuto vantagens de cada método. O projeto é open source, e convido a comunidade a contribuir.

00:00 Por que você não precisa de React
Explico que React não é obrigatório para componentes complexos e mostro um editor Notion-like funcional feito apenas com JavaScript. Argumento que, dominando a plataforma web, você pode criar soluções robustas sem frameworks. Convido você a ver o passo a passo e comparar abordagens.

00:33 Criando componentes com JavaScript puro
Ensino a criar componentes diretamente via JavaScript, sem templates. Você aprenderá a estruturar elementos DOM manualmente (como divs e botões) e vincular eventos. Uso a função `create_block` como núcleo para gerar blocos editáveis, similar aos do Notion.

02:15 Estrutura de dados
Detalho como os blocos são representados em dados (ID, tipo, valor, posição) e como `create_block` converte isso em elementos visuais. Por exemplo: listas armazenam itens separados por tabs, e imagens usam URLs. A função também gerencia recursividade para composição.

03:19 Comunicação do editor com estado externo
Mostro como o editor notifica alterações (ex: remoção ou movimento de nós) para o "mundo externo" via callbacks como `removeNode` ou `moveNode`. Destaco que a sincronização não é automática – você precisa atualizar manualmente o modelo de dados.

05:33 Montando o editor
Explico a função mount_editor, que usa create_block para renderizar todos os nós iniciais. Ela itera sobre um array de blocos, cria cada elemento e os anexa ao DOM. Também passa funções de callback para operações futuras.

06:06 Remoção e movimentação de nós
Descrevo a lógica para deletar e mover blocos. Ao mover um nó, calculamos posições relativas (antes/depois) e atualizamos o array externo. Enfatizo a complexidade de sincronizar a UI com os dados, especialmente em listas.

09:31 Criação de elementos DOM
Demonstro como criar elementos programaticamente com document.createElement, definir classes (ex: block) e atributos. Códigos como `getBlock` geram a estrutura base de cada bloco, enquanto getControls cria botões laterais.

10:37 Construção do menu de contexto
Detalho a criação do menu para adicionar/deletar blocos. Cada botão (título, lista, imagem) é gerado dinamicamente e associa um tipo de nó à função newBlock. O menu é acionado ao clicar no ícone de contexto.

16:00 Controles e eventos de interação
Abordo os botões de ação (como o "alça" para arrastar) e seus eventos: mouseenter para exibi-los, click para abrir menus, e dragstart para iniciar movimentos. Também comento a gestão temporária de "salvar" ao clicar nesses controles.

17:02 Renderização de conteúdo por tipo
Explico como o conteúdo é renderizado conforme o tipo de bloco. Títulos usam contentEditable, listas transformam valores em ul ou ol, e checklists convertem "-" e "X" em inputs. Funções como `renderContent` aplicam estilos e comportamentos específicos.

21:33 Implementação de drag-and-drop
Mostro eventos dragstart, dragover, drop, que permitem mover blocos. Ao soltar um nó, calculamos se ele deve ficar antes/depois do alvo com base na posição do mouse e atualizamos a UI e os dados externos.

23:55 Atualização de valores do editor
Mostro a função `updateValuesFrom`, que extrai valores do DOM para o modelo de dados. Cada tipo de bloco requer uma abordagem diferente (ex: listas juntam itens com tabs), o que pode ser frágil. Sugiro melhorias futuras para tornar isso mais robusto.

24:21 Comparação com abordagem baseada em templates
Concluo comparando esta abordagem (JavaScript puro) com templates HTML (do vídeo anterior). Templates simplificam a estrutura visual e reduzem complexidade no JS, facilitando manutenção. Convido contribuições para refatorar o projeto usando essa ideia.