feat : Tiptap integration

[sriramveeraghanta]

Summary

This PR focuses on transitioning from Remirror to Tiptap, implementing new features, and fixing bugs. It includes the addition of bubble menu support, slash command support, improved file structure with prosemirror plugins, image upload functionality, and integration of Tiptap with all Remirror instances.

Tiptap.basic.demo.mov

Changes in Detail

Remirror to Tiptap Transition

The transition from Remirror to Tiptap involved

• Migrating styles and Ref behaviours to play well with react-hook-form
• Fixing underlying prosemirror state to avoid conflicts
• Migration wasn't painful for existing data as we now use html instead of Prosemirror JSON!

Bubble Menu Support

Allowing users to access various formatting options easily with:

1. Changing list behaviour between todos(tasklists) /numbered/bullet lists

2. Toggle code blocks with syntax highlighting
3. Add hyper links

4. Basic marks bold, italic, underline, strikethrough

Slash Command Support

Enabling users to quickly insert nodes like:

1. Creating Headings and text (h1,h2,h3,p)
2. Different types of lists (todo, bullet, ordered, unordered)
3. Divider
4. Add code snippets with syntax highlighting
5. Upload Images from their File system

Saving with Debounce Logic

Debounce logic was added to save user input after a 500ms delay when the user stops typing. This change improved the saving process, which previously relied on the editor's blur state that could be very unreliable.

tiptap.debounce.logic.mov

Image Uploads and File Structure Improvements

1. Image upload functionality was implemented, allowing users to upload and reorder images within the editor.
2. Code structure was improved by using native Prosemirror Plugin to implement image uploads.
3. Delete Image function was implemented to clear clutter in backend S3 file storage like so:
   • keep track of “previous state” of the editor and the “current state”
   • Traverse through both states and compare changes
   • Assign unique ids to all necessary nodes to compare changes while traversing in successive edits
   • Check the node type being undefined and being an image so that I can trigger a function to delete it on the backend as well

Screen.Recording.2023-08-08.at.6.23.01.PM.mov

Tiptap Integration with Various Components

• Issue Description
• Comments
• User Activity Feeds
• GPT Assistant Modals
• Plane Pages

Additional Context

The PR also includes various improvements and bug fixes, such as resolving conflicting keyboard shortcuts supporting markdown shortcuts, and implementing a "Saved" state for image uploads with placeholder while uploading..

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plane	❌ Failed (Inspect)			Aug 15, 2023 9:36am
plane-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 15, 2023 9:36am
plane-space-dev	❌ Failed (Inspect)			Aug 15, 2023 9:36am
plane-space-stage	🛑 Canceled (Inspect)			Aug 15, 2023 9:36am
plane-staging	🛑 Canceled (Inspect)			Aug 15, 2023 9:36am