Tôi đã tái xây dựng Slash Menu của Notion chỉ với 70 dòng JavaScript
Notion mang lại cảm giác như có phép thuật vậy. Bạn gõ một dấu gạch chéo và một menu hiện ra. Bạn chọn một tùy chọn và văn bản của bạn sẽ thay đổi.
Tôi đã tái xây dựng tính năng này chỉ với 70 dòng vanilla JavaScript. Phép màu thực chất nằm ở logic đơn giản.
Ngày thứ 9 trong chuỗi series DesignFromZero của tôi tập trung vào các UI nổi tiếng. Tôi tái xây dựng các công cụ này từ con số 0 để hiểu rõ cách chúng hoạt động.
Logic này dựa trên ba phần:
- Mô hình dữ liệu (Data models): Một tài liệu là một danh sách các khối (blocks). Mỗi khối chứa một mẩu dữ liệu. Đây chính là kiểu (type) của nó.
- Trình kích hoạt (The trigger): Mỗi khi bạn gõ, mã sẽ kiểm tra văn bản. Nếu văn bản bắt đầu bằng một dấu gạch chéo, menu sẽ mở ra.
- Bộ lọc (The filter): Menu sử dụng các từ khóa để tìm lệnh. Một lệnh như Heading 1 có thể có các từ khóa như h1 hoặc title. Điều này giúp việc tìm kiếm trở nên thông minh hơn.
Mã nguồn sử dụng một mẹo đơn giản để điều hướng. Việc sử dụng toán tử modulo cho phép bạn dùng các phím mũi tên để di chuyển qua danh sách. Nó sẽ cuộn lựa chọn từ dưới cùng quay trở lại đầu danh sách.
Khi bạn nhấn Enter, mã sẽ thực hiện hai tác vụ:
- Nó cập nhật kiểu khối (block type) trong dữ liệu. Sau đó, CSS sẽ xử lý thay đổi về mặt hiển thị.
- Nó xóa dấu gạch chéo và văn bản lệnh.
Những tính năng phức tạp thường có nền tảng rất đơn giản. Một slash menu chỉ là dữ liệu cộng với việc kiểm tra tiền tố và hoán đổi kiểu dữ liệu.
Thử bản demo trực tiếp tại đây: https://dev48v.infy.uk/design/day9-notion-slash.html
Đọc bài phân tích chi tiết tại đây: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i