Saya Membangun Kembali Slash Menu Notion dalam 70 Baris JavaScript
Notion terasa seperti sihir. Anda mengetik garis miring (slash) dan sebuah menu muncul. Anda memilih sebuah opsi dan teks Anda berubah.
Saya membangun kembali fitur ini menggunakan 70 baris vanilla JavaScript. Sihirnya terletak pada logika yang sederhana.
Hari ke-9 dari seri DesignFromZero saya berfokus pada UI yang terkenal. Saya membangun kembali alat-alat ini dari nol untuk memahaminya.
Logikanya bergantung pada tiga bagian:
- Model data: Sebuah dokumen adalah daftar blok. Setiap blok menyimpan satu bagian data. Inilah tipenya.
- Pemicu (trigger): Setiap kali Anda mengetik, kode akan memeriksa teks tersebut. Jika teks dimulai dengan garis miring, menu akan terbuka.
- Filter: Menu tersebut menggunakan kata kunci untuk menemukan perintah. Perintah seperti Heading 1 mungkin memiliki kata kunci seperti h1 atau title. Hal ini membuat pencarian terasa cerdas.
Kode ini menggunakan trik sederhana untuk navigasi. Menggunakan operator modulo memungkinkan Anda menggunakan tombol panah untuk berpindah melalui daftar. Ini akan memutar pilihan dari bagian bawah kembali ke atas.
Saat Anda menekan Enter, kode melakukan dua tugas:
- Ia memperbarui tipe blok dalam data. CSS kemudian menangani perubahan visualnya.
- Ia menghapus garis miring dan teks perintah tersebut.
Fitur yang kompleks sering kali memiliki fondasi yang sederhana. Slash menu hanyalah data ditambah pemeriksaan awalan (prefix) dan pertukaran tipe.
Coba demo langsung di sini: https://dev48v.infy.uk/design/day9-notion-slash.html
Baca penjelasan lengkapnya di sini: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i