feat : Tiptap integration (#1832)

* remirror instances commented out to avoid prosemirror conflicts

* styles migrated for remirror to tiptap transition

* added bubblemenu support with extensions

* fixed css for task lists and code with syntax highlighting

* added support for slash command

* fixed bubble menu to match styles and added better seperation in UI

* saving with debounce logic added and it's stored in backend

* added migration support by updating to html

* Image uploads done

* improved file structure and delete image function implemented

* Integrated tiptap with Issue Modal

* added additional props and Tiptap Integration with Comments

* added tiptap integration with user activity feeds

* added ref control support and bubble menu support for readonly editor

* added tiptap support for plane pages

* added tiptap support to gpt assistant modal (yet to be tested)

* removed remirror instances and cleaned up code

* improved code structure for extracting props in Tiptap

* fixing ts errors for next build

* fixing node ts error for Horizontal Rule

* added ts fix for node types

* temp fix

* temp fix

* added min height for issue description in modal

* added resolutions to prosemirror-model version

* trying pnpm overrides

* explicitly added prosemirror deps

* bugfixes

* removed extra gap at the top and moved saved indicator to the bottom

* fix: slash command scroll position

* chore: update custom css variables

* matched theme colours

* fixed gpt-assistant modal

* updated yarn lock

* added debounced updates for the title and removed saved state after timeout

* added css animations for saved state

* build fixes and remove remirror instances

* minor commenting fixes

---------

Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>

apps/app/components/core/modals/gpt-assistant-modal.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useState, forwardRef, useRef } from "react";
+import React, { useEffect, useState, forwardRef, useRef } from "react";
 
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 
 // react-hook-form
 import { useForm } from "react-hook-form";
@@ -15,6 +14,7 @@ import useUserAuth from "hooks/use-user-auth";
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
 
 import { IIssue, IPageBlock } from "types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -32,17 +32,11 @@ type FormData = {
   task: string;
 };
 
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
-  ssr: false,
-});
-
-import { IRemirrorRichTextEditor } from "components/rich-text-editor";
-
-const WrappedRemirrorRichTextEditor = forwardRef<IRemirrorRichTextEditor, IRemirrorRichTextEditor>(
-  (props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
 );
 
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+TiptapEditor.displayName = "TiptapEditor";
 
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
@@ -151,10 +145,10 @@ export const GptAssistantModal: React.FC<Props> = ({
       }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
-        <div className="remirror-section text-sm">
+        <div id="tiptap-container" className="text-sm">
           Content:
-          <WrappedRemirrorRichTextEditor
-            value={htmlContent ?? <p>{content}</p>}
+          <TiptapEditor
+            value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
             noBorder
             borderOnFocus={false}
@@ -166,7 +160,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <RemirrorRichTextEditor
+          <Tiptap
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
             noBorder