This is a repository containing a study code for a basic clone of the "Notion" application. The goal of this project is to demonstrate the usage of the @tiptap library along with some extensions to create a similar functionality to Notion.
Notion is a popular tool for organization and collaboration, allowing users to create notes, documents, databases, and more. In this study project, we use the @tiptap library to create a basic Notion clone with essential functionalities.
@tiptap is a rich-text editor for the web. It provides a flexible and easy-to-use API for creating and customizing text editors. In this project, we explore some popular extensions of @tiptap to add functionalities such as text formatting, list creation, table creation, etc.
The basic Notion clone in this project includes the following features:
- Text editing: allows users to write and format text with styles like bold, italic, code, headings levels etc.
- List creation: users can create ordered and unordered lists.
- Floating menu: a menu bar that appears near the selected text, providing formatting options.
- Bubble menu: a menu that appears when the user selects a block element, offering block-specific options.
Before running this project, make sure you have the following dependencies installed:
- Node.js: version 12 or above.
- NPM: version 6 or above.
Follow the steps below to run the project on your local machine:
-
Clone this repository to your local directory:
git clone https://github.com/mannoeu/notion-study.git
-
Navigate to the project directory:
cd notion-study -
Install project dependencies:
yarn
-
Run the project:
yarn dev
This project was inspired by the tutorial provided by Rocketseat. We appreciate their contribution to the development community.