Date
Jan 30, 2023
Tags
React
Noshon
The all-in-one rich-text editor 🚀
In this project, I tried to replicate some feature that is available in Notion, an amazing productivity and note-taking app. It is my experiment creating a high-interactive web app.
Features
Markup Editing
Block Editing
Image Inserting
In summary:
- ✍️ Basic markups (bold, italic, underline, strikethrough, code snippet)
- 📄 Basic blocks (heading blocks, code blocks, quote, todos, divider)
- 🖼️ Image support (insert image by pasting the source URL 🔗 or drag them to the editor)
- 🖌️ Floating toolbar (highlight a text or click the "..." button on the side)
- ⌨️ Keyboard shortcuts (hover on the buttons on floating toolbar to discover the shortcuts)
Tech stack
This project is proudly built in TypeScript using Next.js, Tailwind CSS, Zustand, and a bunch of Slate.js (it's an amazing customizable framework for building rich text editors, check it out 🙌)