أعدتُ بناء قائمة Notion Slash باستخدام 70 سطرًا من JavaScript
يبدو Notion وكأنه سحر. تكتب شرطة مائلة (slash) فتظهر قائمة، تختار خيارًا فيتحول نصك.
لقد أعدتُ بناء هذه الميزة باستخدام 70 سطرًا من vanilla JavaScript. السحر يكمن في المنطق البسيط.
يركز اليوم التاسع من سلسلة DesignFromZero الخاصة بي على واجهات المستخدم (UI) الشهيرة. أنا أعيد بناء هذه الأدوات من الصفر لفهمها.
يعتمد المنطق على ثلاثة أجزاء:
- نماذج البيانات (Data models): المستند عبارة عن قائمة من الكتل (blocks). كل كتلة تحتوي على قطعة واحدة من البيانات، وهذا هو نوعها.
- المُحفز (The trigger): في كل مرة تكتب فيها، يتحقق الكود من النص. إذا بدأ النص بشرطة مائلة، تفتح القائمة.
- الفلتر (The filter): تستخدم القائمة كلمات مفتاحية للعثور على الأوامر. أمر مثل Heading 1 قد يحتوي على كلمات مفتاحية مثل h1 أو title، مما يجعل البحث يبدو ذكيًا.
يستخدم الكود حيلة بسيطة للتنقل. استخدام عامل المتبقي (modulo operator) يتيح لك استخدام مفاتيح الأسهم للتنقل عبر القائمة، حيث يعيد التحديد من الأسفل إلى الأعلى.
عند الضغط على Enter، يقوم الكود بمهمتين:
- تحديث نوع الكتلة في البيانات، ثم يتولى CSS معالجة التغيير المرئي.
- مسح الشرطة المائلة ونص الأمر.
غالبًا ما تمتلك الميزات المعقدة أسسًا بسيطة. قائمة الـ slash ليست سوى بيانات مضاف إليها فحص للبادئة (prefix check) وتبديل للنوع.
جرب العرض المباشر هنا: https://dev48v.infy.uk/design/day9-notion-slash.html
اقرأ التحليل الكامل هنا: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i