📄 feat: Notion-style Slash Command Block Menu

[SteelCrab]

Description

"Implementing this feature will provide significant insight into future front-end technology trends."

Context

Currently, users need to know Markdown syntax (e.g., #, -, >) to format their documents. This creates a barrier for users who are not familiar with Markdown or want a more visual editing experience. To improve user convenience and ease of use, we want to provide a "recipe" or list of available blocks that can be easily accessed.

Goal

Implement a Notion-style block feature triggered by a slash command (/).

• When a user types /, a list of available block functions (Headings, Lists, Code, etc.) should appear.
• This serves as a quick reference and insertion tool for Markdown features.
• The goal is to enhance user convenience by making Markdown features discoverable.

Checklist

• Design Slash Command Logic
  • Define list of available blocks (Heading, List, Code, etc.).
  • Plan UI for the slash menu (popup position, filtering).
  • [ ]
• Implement Block Feature
  • Detect / input in the editor.
  • Create and render the Menu component.
  • Handle selection and insertion of Markdown syntax.
  • [ ]
• Verification
  • Verify menu appears on /.
  • Verify blocks are inserted correctly.

Tech Stack: React, TypeScript

Our team strongly supports the use of AI in Gition.

With great power comes great responsibility—contributors are encouraged to use clear, easy-to-understand language and commit by hunk to help reviewers provide faster feedback.

Questions are always welcome. Lots of questions mean genuine interest in the contribution, and I'll do my best to respond within 24 hours. :)