Earn 18,000 ($180.00)

This project includes developing an editor based on TipTap and its open source extensions. The resulting product will be used as a proof of concept in another project. All the features mentioned below are in fact open source components, and need to be stylized.

Due to the nature of the project, we expect developers to have previous experience (to some extend is OK) with an open source editor. Please mention this in your response.

Requirements

• The editor will use TipTap's or other projects' open source components only (MPL or BSD licenses)
• Editor will only be based on React components (e.g no Laravel, Vue or other frameworks)
• Editor, when run, will open a popup and include the features written below.
• Editor will autosave every 30 seconds
• The editor shouldn't throw any errors to the console
• Developer will write a document about which components are used and where together with the installation guide
• There shouldn't be any modifications to the original TipTap source code
• Font will be Inter, 16px, 400 weight, 22px line height with #2e3e3e color

Features

• Notion like, block style rich text editor
• Blocks can be dragged and dropped with an interface and intuitiveness similar to that of Notion's
• Customizable slash (/) menu with the following elements (the items can be used as element names as well).

Category: Headings ( Heading 1, Heading 2, Heading 3, Normal text, Small text)
Category: Basic blocks (Insert table, Bullet list, Numbered list, Insert callout, Insert image)

• Bubble menu with the following elements (from left to right):
• Paragraph type drop down (Heading 1, Heading 2, Heading 3, Normal text, small text, code snippet)
• Bold, italic, underline, strikethrough, align left, align center, align right, create link
• Dark <> light mode switcher, with comes readily with TipTap (you can use the example in Novel.sh - link below)

Real-time collaboration

Tiptap editor has real-time collaboration where more than two parties can edit the same document at the same time. This will also be implemented with the open source components provided.

Open source components

Below you can see some of the projects that can help you develop this in a shorter amount of time.

• Blocknote project (https://github.com/TypeCellOS/BlockNote) where you can check examples of some of the features above.
• Tiptap (https://tiptap.dev) and TipTap extensions (https://tiptap.dev/extensions) which the editor will be built on, including collaborations
• You can use TipTap's starter kit as a starting point (https://tiptap.dev/api/extensions/starter-kit)
• Novel project (https://github.com/steven-tey/novel) has a great Notion styling you can borrow from.