Reconstruí o Slash Menu do Notion em 70 linhas de JavaScript
O Notion parece mágica. Você digita uma barra e um menu aparece. Você seleciona uma opção e seu texto se transforma.
Eu reconstruí esse recurso usando 70 linhas de JavaScript puro. A mágica é uma lógica simples.
O Dia 9 da minha série DesignFromZero foca em UIs famosas. Eu reconstruo essas ferramentas do zero para entendê-las.
A lógica baseia-se em três partes:
- Modelos de dados: Um documento é uma lista de blocos. Cada bloco contém um dado. Este é o seu tipo.
- O gatilho: Toda vez que você digita, o código verifica o texto. Se o texto começar com uma barra, o menu abre.
- O filtro: O menu usa palavras-chave para encontrar comandos. Um comando como Heading 1 pode ter palavras-chave como h1 ou title. Isso faz com que a busca pareça inteligente.
O código usa um truque simples para navegação. O uso do operador de módulo permite usar as teclas de seta para navegar pela lista. Ele faz a seleção voltar do final para o topo.
Quando você pressiona Enter, o código realiza duas tarefas:
- Ele atualiza o tipo do bloco nos dados. O CSS então cuida da mudança visual.
- Ele limpa a barra e o texto do comando.
Recursos complexos geralmente têm fundamentos simples. Um menu de barra é apenas dados mais uma verificação de prefixo e uma troca de tipo.
Experimente a demonstração ao vivo aqui: https://dev48v.infy.uk/design/day9-notion-slash.html
Leia a análise completa aqui: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i