From dd5ff737d110c35270c38d6d80b315bd92340342 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Wed, 2 Aug 2023 23:00:47 +0530
Subject: [PATCH] remirror instances commented out to avoid prosemirror
 conflicts

---
 .../command-palette/command-pallette.tsx      |   5 +-
 apps/app/components/core/feeds.tsx            |  26 ++--
 .../core/modals/gpt-assistant-modal.tsx       |  48 +++----
 .../components/issues/comment/add-comment.tsx |  60 ++++-----
 .../issues/comment/comment-card.tsx           |  36 +++---
 apps/app/components/issues/main-content.tsx   |  63 +++++----
 .../pages/create-update-block-inline.tsx      | 122 +++++++++---------
 apps/app/components/pages/page-form.tsx       |  16 +--
 .../components/pages/single-page-block.tsx    |  40 +++---
 apps/app/package.json                         |  11 +-
 10 files changed, 214 insertions(+), 213 deletions(-)

diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 0b4c9577b..2a8a4aa4d 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -49,7 +49,7 @@ export const CommandPalette: React.FC = () => {
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
-          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+        issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -81,7 +81,8 @@ export const CommandPalette: React.FC = () => {
       if (
         !(e.target instanceof HTMLTextAreaElement) &&
         !(e.target instanceof HTMLInputElement) &&
-        !(e.target as Element).classList?.contains("remirror-editor")
+        // !(e.target as Element).classList?.contains("remirror-editor") &&
+        !(e.target as Element).closest(".tiptap-editor-container")
       ) {
         if ((ctrlKey || metaKey) && keyPressed === "k") {
           e.preventDefault();
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index 2924ec456..8144bfc97 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -16,7 +16,7 @@ import { Icon } from "components/ui";
 import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import RemirrorRichTextEditor from "components/rich-text-editor";
+// import RemirrorRichTextEditor from "components/rich-text-editor";
 
 const activityDetails: {
   [key: string]: {
@@ -250,18 +250,18 @@ export const Feeds: React.FC<any> = ({ activities }) => {
                         Commented {timeAgo(activity.created_at)}
                       </p>
                     </div>
-                    <div className="issue-comments-section p-0">
-                      <RemirrorRichTextEditor
-                        value={
-                          activity.new_value && activity.new_value !== ""
-                            ? activity.new_value
-                            : activity.old_value
-                        }
-                        editable={false}
-                        noBorder
-                        customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-                      />
-                    </div>
+                    {/* <div className="issue-comments-section p-0"> */}
+                    {/*   <RemirrorRichTextEditor */}
+                    {/*     value={ */}
+                    {/*       activity.new_value && activity.new_value !== "" */}
+                    {/*         ? activity.new_value */}
+                    {/*         : activity.old_value */}
+                    {/*     } */}
+                    {/*     editable={false} */}
+                    {/*     noBorder */}
+                    {/*     customClassName="text-xs border border-custom-border-200 bg-custom-background-100" */}
+                    {/*   /> */}
+                    {/* </div> */}
                   </div>
                 </div>
               </div>
diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index 7c05e036a..1d3af7a51 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -32,17 +32,17 @@ 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} />
-);
-
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+// 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} />
+// );
+//
+// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
@@ -150,19 +150,19 @@ export const GptAssistantModal: React.FC<Props> = ({
         isOpen ? "block" : "hidden"
       }`}
     >
-      {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
-        <div className="remirror-section text-sm">
-          Content:
-          <WrappedRemirrorRichTextEditor
-            value={htmlContent ?? <p>{content}</p>}
-            customClassName="-m-3"
-            noBorder
-            borderOnFocus={false}
-            editable={false}
-            ref={editorRef}
-          />
-        </div>
-      )}
+      {/* {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && ( */}
+      {/*   <div className="remirror-section text-sm"> */}
+      {/*     Content: */}
+      {/*     <WrappedRemirrorRichTextEditor */}
+      {/*       value={htmlContent ?? <p>{content}</p>} */}
+      {/*       customClassName="-m-3" */}
+      {/*       noBorder */}
+      {/*       borderOnFocus={false} */}
+      {/*       editable={false} */}
+      {/*       ref={editorRef} */}
+      {/*     /> */}
+      {/*   </div> */}
+      {/* )} */}
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index b7504d932..3b3cd21b0 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -18,23 +18,23 @@ import type { ICurrentUserResponse, IIssueComment } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
-  ssr: false,
-  loading: () => (
-    <Loader className="mb-5">
-      <Loader.Item height="12rem" width="100%" />
-    </Loader>
-  ),
-});
-import { IRemirrorRichTextEditor } from "components/rich-text-editor";
-
-const WrappedRemirrorRichTextEditor = React.forwardRef<
-  IRemirrorRichTextEditor,
-  IRemirrorRichTextEditor
->((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
-
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
-
+// const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+//   ssr: false,
+//   loading: () => (
+//     <Loader className="mb-5">
+//       <Loader.Item height="12rem" width="100%" />
+//     </Loader>
+//   ),
+// });
+// import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+//
+// const WrappedRemirrorRichTextEditor = React.forwardRef<
+//   IRemirrorRichTextEditor,
+//   IRemirrorRichTextEditor
+// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+//
+// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+//
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
   comment_html: "",
@@ -98,19 +98,19 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
     <div>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="issue-comments-section">
-          <Controller
-            name="comment_json"
-            control={control}
-            render={({ field: { value } }) => (
-              <WrappedRemirrorRichTextEditor
-                value={value}
-                onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)}
-                onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)}
-                placeholder="Enter your comment..."
-                ref={editorRef}
-              />
-            )}
-          />
+          {/* <Controller */}
+          {/*   name="comment_json" */}
+          {/*   control={control} */}
+          {/*   render={({ field: { value } }) => ( */}
+          {/*     <WrappedRemirrorRichTextEditor */}
+          {/*       value={value} */}
+          {/*       onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)} */}
+          {/*       onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)} */}
+          {/*       placeholder="Enter your comment..." */}
+          {/*       ref={editorRef} */}
+          {/*     /> */}
+          {/*   )} */}
+          {/* /> */}
 
           <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 987254f3b..008290f43 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -16,17 +16,17 @@ import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
 
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
-
-import { IRemirrorRichTextEditor } from "components/rich-text-editor";
-
-const WrappedRemirrorRichTextEditor = React.forwardRef<
-  IRemirrorRichTextEditor,
-  IRemirrorRichTextEditor
->((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
-
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
-
+// const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
+//
+// import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+//
+// const WrappedRemirrorRichTextEditor = React.forwardRef<
+//   IRemirrorRichTextEditor,
+//   IRemirrorRichTextEditor
+// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+//
+// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+//
 type Props = {
   comment: IIssueComment;
   onSubmit: (comment: IIssueComment) => void;
@@ -132,13 +132,13 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <WrappedRemirrorRichTextEditor
-              value={comment.comment_html}
-              editable={false}
-              noBorder
-              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
-              ref={showEditorRef}
-            />
+            {/* <WrappedRemirrorRichTextEditor */}
+            {/*   value={comment.comment_html} */}
+            {/*   editable={false} */}
+            {/*   noBorder */}
+            {/*   customClassName="text-xs border border-custom-border-200 bg-custom-background-100" */}
+            {/*   ref={showEditorRef} */}
+            {/* /> */}
 
             <CommentReaction projectId={comment.project} commentId={comment.id} />
           </div>
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index 316d39e8a..7c29f0810 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -50,11 +50,11 @@ export const IssueMainContent: React.FC<Props> = ({
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
       ? () =>
-          issuesService.subIssues(
-            workspaceSlug as string,
-            projectId as string,
-            issueDetails.parent ?? ""
-          )
+        issuesService.subIssues(
+          workspaceSlug as string,
+          projectId as string,
+          issueDetails.parent ?? ""
+        )
       : null
   );
   const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
@@ -97,9 +97,8 @@ export const IssueMainContent: React.FC<Props> = ({
                       <CustomMenu.MenuItem
                         key={issue.id}
                         renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
-                          issue.id
-                        }`}
+                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id
+                          }`}
                         className="flex items-center gap-2 py-2"
                       >
                         <LayerDiagonalIcon className="h-4 w-4" />
@@ -130,30 +129,30 @@ export const IssueMainContent: React.FC<Props> = ({
           isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
         />
 
-        <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
-
-        <div className="mt-2 space-y-2">
-          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
-        </div>
-      </div>
-      <div className="flex flex-col gap-3 py-3">
-        <h3 className="text-lg">Attachments</h3>
-        <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-          <IssueAttachmentUpload disabled={uneditable} />
-          <IssueAttachments />
-        </div>
-      </div>
-      <div className="space-y-5 pt-3">
-        <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
-        <IssueActivitySection
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-        />
-        <AddComment
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-          disabled={uneditable}
-        />
+        {/*   <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} /> */}
+        {/**/}
+        {/*   <div className="mt-2 space-y-2"> */}
+        {/*     <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} /> */}
+        {/*   </div> */}
+        {/* </div> */}
+        {/* <div className="flex flex-col gap-3 py-3"> */}
+        {/*   <h3 className="text-lg">Attachments</h3> */}
+        {/*   <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> */}
+        {/*     <IssueAttachmentUpload disabled={uneditable} /> */}
+        {/*     <IssueAttachments /> */}
+        {/*   </div> */}
+        {/* </div> */}
+        {/* <div className="space-y-5 pt-3"> */}
+        {/*   <h3 className="text-lg text-custom-text-100">Comments/Activity</h3> */}
+        {/*   <IssueActivitySection */}
+        {/*     issueId={(archivedIssueId as string) ?? (issueId as string)} */}
+        {/*     user={user} */}
+        {/*   /> */}
+        {/*   <AddComment */}
+        {/*     issueId={(archivedIssueId as string) ?? (issueId as string)} */}
+        {/*     user={user} */}
+        {/*     disabled={uneditable} */}
+        {/*   /> */}
       </div>
     </>
   );
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 5e2dcb43c..3b73e041b 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -39,22 +39,22 @@ const defaultValues = {
   description_html: null,
 };
 
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
-  ssr: false,
-  loading: () => (
-    <Loader className="mx-4 mt-6">
-      <Loader.Item height="100px" width="100%" />
-    </Loader>
-  ),
-});
-import { IRemirrorRichTextEditor } from "components/rich-text-editor";
-
-const WrappedRemirrorRichTextEditor = React.forwardRef<
-  IRemirrorRichTextEditor,
-  IRemirrorRichTextEditor
->((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
-
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+// const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+//   ssr: false,
+//   loading: () => (
+//     <Loader className="mx-4 mt-6">
+//       <Loader.Item height="100px" width="100%" />
+//     </Loader>
+//   ),
+// });
+// import { IRemirrorRichTextEditor } from "components/rich-text-editor";
+//
+// const WrappedRemirrorRichTextEditor = React.forwardRef<
+//   IRemirrorRichTextEditor,
+//   IRemirrorRichTextEditor
+// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+//
+// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
@@ -296,51 +296,51 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             />
           </div>
           <div className="page-block-section relative -mt-2 text-custom-text-200">
-            <Controller
-              name="description"
-              control={control}
-              render={({ field: { value } }) => {
-                if (!data)
-                  return (
-                    <WrappedRemirrorRichTextEditor
-                      value={{
-                        type: "doc",
-                        content: [{ type: "paragraph" }],
-                      }}
-                      onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                      onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                      placeholder="Write something..."
-                      customClassName="text-sm"
-                      noBorder
-                      borderOnFocus={false}
-                      ref={editorRef}
-                    />
-                  );
-                else if (!value || !watch("description_html"))
-                  return (
-                    <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
-                  );
-
-                return (
-                  <WrappedRemirrorRichTextEditor
-                    value={
-                      value && value !== "" && Object.keys(value).length > 0
-                        ? value
-                        : watch("description_html") && watch("description_html") !== ""
-                        ? watch("description_html")
-                        : { type: "doc", content: [{ type: "paragraph" }] }
-                    }
-                    onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                    onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                    placeholder="Write something..."
-                    customClassName="text-sm"
-                    noBorder
-                    borderOnFocus={false}
-                    ref={editorRef}
-                  />
-                );
-              }}
-            />
+            {/* <Controller */}
+            {/*   name="description" */}
+            {/*   control={control} */}
+            {/*   render={({ field: { value } }) => { */}
+            {/*     if (!data) */}
+            {/*       return ( */}
+            {/*         <WrappedRemirrorRichTextEditor */}
+            {/*           value={{ */}
+            {/*             type: "doc", */}
+            {/*             content: [{ type: "paragraph" }], */}
+            {/*           }} */}
+            {/*           onJSONChange={(jsonValue) => setValue("description", jsonValue)} */}
+            {/*           onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */}
+            {/*           placeholder="Write something..." */}
+            {/*           customClassName="text-sm" */}
+            {/*           noBorder */}
+            {/*           borderOnFocus={false} */}
+            {/*           ref={editorRef} */}
+            {/*         /> */}
+            {/*       ); */}
+            {/*     else if (!value || !watch("description_html")) */}
+            {/*       return ( */}
+            {/*         <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" /> */}
+            {/*       ); */}
+            {/**/}
+            {/*     return ( */}
+            {/*       <WrappedRemirrorRichTextEditor */}
+            {/*         value={ */}
+            {/*           value && value !== "" && Object.keys(value).length > 0 */}
+            {/*             ? value */}
+            {/*             : watch("description_html") && watch("description_html") !== "" */}
+            {/*             ? watch("description_html") */}
+            {/*             : { type: "doc", content: [{ type: "paragraph" }] } */}
+            {/*         } */}
+            {/*         onJSONChange={(jsonValue) => setValue("description", jsonValue)} */}
+            {/*         onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)} */}
+            {/*         placeholder="Write something..." */}
+            {/*         customClassName="text-sm" */}
+            {/*         noBorder */}
+            {/*         borderOnFocus={false} */}
+            {/*         ref={editorRef} */}
+            {/*       /> */}
+            {/*     ); */}
+            {/*   }} */}
+            {/* /> */}
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
index b23daee18..ff435d3e5 100644
--- a/apps/app/components/pages/page-form.tsx
+++ b/apps/app/components/pages/page-form.tsx
@@ -17,14 +17,14 @@ type Props = {
 };
 
 // rich-text-editor
-const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
-  ssr: false,
-  loading: () => (
-    <Loader>
-      <Loader.Item height="12rem" width="100%" />
-    </Loader>
-  ),
-});
+// const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
+//   ssr: false,
+//   loading: () => (
+//     <Loader>
+//       <Loader.Item height="12rem" width="100%" />
+//     </Loader>
+//   ),
+// });
 
 const defaultValues = {
   name: "",
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index c518e1789..e9ceb5fab 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -19,7 +19,7 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
-import RemirrorRichTextEditor, { IRemirrorRichTextEditor } from "components/rich-text-editor";
+// import RemirrorRichTextEditor, { IRemirrorRichTextEditor } from "components/rich-text-editor";
 // ui
 import { CustomMenu, TextArea } from "components/ui";
 // icons
@@ -48,12 +48,12 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-const WrappedRemirrorRichTextEditor = React.forwardRef<
-  IRemirrorRichTextEditor,
-  IRemirrorRichTextEditor
->((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
+// const WrappedRemirrorRichTextEditor = React.forwardRef<
+//   IRemirrorRichTextEditor,
+//   IRemirrorRichTextEditor
+// >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
 
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+// WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
 
 export const SinglePageBlock: React.FC<Props> = ({
   block,
@@ -456,20 +456,20 @@ export const SinglePageBlock: React.FC<Props> = ({
                     />
                   </div>
 
-                  {showBlockDetails
-                    ? block.description_html.length > 7 && (
-                        <WrappedRemirrorRichTextEditor
-                          value={block.description_html}
-                          customClassName="text-sm"
-                          noBorder
-                          borderOnFocus={false}
-                        />
-                      )
-                    : block.description_stripped.length > 0 && (
-                        <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
-                          {block.description_stripped}
-                        </p>
-                      )}
+                  {/* {showBlockDetails */}
+                  {/*   ? block.description_html.length > 7 && ( */}
+                  {/*       <WrappedRemirrorRichTextEditor */}
+                  {/*         value={block.description_html} */}
+                  {/*         customClassName="text-sm" */}
+                  {/*         noBorder */}
+                  {/*         borderOnFocus={false} */}
+                  {/*       /> */}
+                  {/*     ) */}
+                  {/*   : block.description_stripped.length > 0 && ( */}
+                  {/*       <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate"> */}
+                  {/*         {block.description_stripped} */}
+                  {/*       </p> */}
+                  {/*     )} */}
                 </div>
               </div>
               <GptAssistantModal
diff --git a/apps/app/package.json b/apps/app/package.json
index 4397696ab..8c8c0d1f7 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.3",
     "@heroicons/react": "^2.0.12",
     "@jitsu/nextjs": "^3.1.5",
@@ -23,12 +25,12 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
-    "@remirror/core": "^2.0.11",
-    "@remirror/extension-react-tables": "^2.2.11",
-    "@remirror/pm": "^2.0.3",
-    "@remirror/react": "^2.0.24",
     "@sentry/nextjs": "^7.36.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@tiptap/extension-placeholder": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
@@ -48,7 +50,6 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
-    "remirror": "^2.0.23",
     "swr": "^2.1.3",
     "tlds": "^1.238.0",
     "uuid": "^9.0.0"