Я переписал Slash-меню Notion всего за 70 строк на JavaScript
Notion кажется магией. Вы вводите слэш, и появляется меню. Вы выбираете вариант, и ваш текст преображается.
Я воссоздал эту функцию, используя всего 70 строк чистого JavaScript. Вся магия заключается в простой логике.
Девятый день моей серии DesignFromZero посвящен известным UI-решениям. Я воссоздаю эти инструменты с нуля, чтобы понять, как они работают.
Логика опирается на три составляющие:
- Модели данных: документ — это список блоков. Каждый блок содержит одну единицу данных. Это и есть его тип.
- Триггер: каждый раз, когда вы печатаете, код проверяет текст. Если текст начинается со слэша, открывается меню.
- Фильтр: меню использует ключевые слова для поиска команд. У команды вроде «Заголовок 1» могут быть ключевые слова, такие как h1 или title. Благодаря этому поиск кажется «умным».
В коде используется простой трюк для навигации. Использование оператора modulo позволяет перемещаться по списку с помощью стрелок. Это обеспечивает переход выделения с конца списка обратно в начало.
При нажатии Enter код выполняет две задачи:
- Обновляет тип блока в данных. Затем CSS отвечает за визуальное изменение.
- Удаляет слэш и текст команды.
Сложные функции часто имеют простые основы. Slash-меню — это всего лишь данные плюс проверка префикса и смена типа.
Попробовать демо в реальном времени можно здесь: https://dev48v.infy.uk/design/day9-notion-slash.html
Полный разбор читайте здесь: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i