๏ปฟ
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. This page will give you a showcase of how you can use this rich text editor.
Features
โ๏ธ 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 ๐)
About
Created by Nourman Hajar (masnormen)
https://nourman.id/
https://github.com/masnormen
d
Enough talking, let's see it in action!
Try highlighting this text, click the "H1" button or press the key combination Ctrl + 1. For keyboard shortcuts, hover the buttons above! Also, try highlighting some text and press Ctrl + B.
Pressing Enter will create a new block.
Try Shift + Enter to add a new line in the same block!
You can also add console.log("a code here!"). Wow.
A sample code block:
console.log("Noshon ๐ซถ")๏ปฟ