He reconstruido el menú de barra de Notion en 70 líneas de JavaScript
Notion parece magia. Escribes una barra (slash) y aparece un menú. Seleccionas una opción y tu texto se transforma.
He reconstruido esta funcionalidad usando 70 líneas de JavaScript puro. La magia es lógica simple.
El día 9 de mi serie DesignFromZero se centra en interfaces de usuario (UI) famosas. Reconstruyo estas herramientas desde cero para entenderlas.
La lógica se basa en tres partes:
- Modelos de datos: Un documento es una lista de bloques. Cada bloque contiene un fragmento de datos. Este es su tipo.
- El activador (trigger): Cada vez que escribes, el código comprueba el texto. Si el texto comienza con una barra, el menú se abre.
- El filtro: El menú utiliza palabras clave para encontrar comandos. Un comando como Heading 1 podría tener palabras clave como h1 o title. Esto hace que la búsqueda parezca inteligente.
El código utiliza un truco sencillo para la navegación. El uso del operador módulo permite usar las teclas de flecha para desplazarse por la lista. Hace que la selección vuelva al principio cuando llega al final.
Cuando presionas Enter, el código realiza dos tareas:
- Actualiza el tipo de bloque en los datos. Luego, CSS se encarga del cambio visual.
- Borra la barra y el texto del comando.
Las funcionalidades complejas suelen tener bases sencillas. Un menú de barra es solo datos más una comprobación de prefijo y un cambio de tipo.
Prueba la demo en vivo aquí: https://dev48v.infy.uk/design/day9-notion-slash.html
Lee el desglose completo aquí: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i