๏ปฟ
![image](https://noshon.vercel.app/api/og.png)
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
๏ปฟ
![image](https://res.cloudinary.com/practicaldev/image/fetch/s--JHCnUuat--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/adcvmgs9lja0i6f1u1p3.jpg)
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 ๐ซถ")
๏ปฟ