fix: tiptap editor export fixes

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

@@ -1,7 +1,5 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
@@ -12,9 +10,10 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-
+import { TipTapEditor } from "components/tiptap";
+// types
 import { IIssue, IPageBlock } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -32,12 +31,6 @@ type FormData = {
   task: string;
 };
 
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
-
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -140,13 +133,14 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
-        }`}
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
+        isOpen ? "block" : "hidden"
+      }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <TiptapEditor
+          <TipTapEditor
             workspaceSlug={workspaceSlug as string}
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
@@ -160,7 +154,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <Tiptap
+          <TipTapEditor
             workspaceSlug={workspaceSlug as string}
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
@@ -180,10 +174,11 @@ export const GptAssistantModal: React.FC<Props> = ({
         type="text"
         name="task"
         register={register}
-        placeholder={`${content && content !== ""
+        placeholder={`${
+          content && content !== ""
             ? "Tell AI what action to perform on this content..."
             : "Ask AI anything..."
-          }`}
+        }`}
         autoComplete="off"
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
@@ -219,8 +214,8 @@ export const GptAssistantModal: React.FC<Props> = ({
             {isSubmitting
               ? "Generating response..."
               : response === ""
-                ? "Generate response"
-                : "Generate again"}
+              ? "Generate response"
+              : "Generate again"}
           </PrimaryButton>
         </div>
       </div>

apps/app/components/issues/comment/add-comment.tsx

@@ -1,21 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// ui
+// components
 import { SecondaryButton } from "components/ui";
+import { TipTapEditor } from "components/tiptap";
 // types
 import type { IIssueComment } from "types";
-// fetch-keys
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -59,7 +50,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
             name="comment_html"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TiptapEditor
+              <TipTapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={

apps/app/components/issues/comment/comment-card.tsx

@@ -9,17 +9,11 @@ import useUser from "hooks/use-user";
 // ui
 import { CustomMenu } from "components/ui";
 import { CommentReaction } from "components/issues";
+import { TipTapEditor } from "components/tiptap";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 type Props = {
   workspaceSlug: string;
@@ -28,7 +22,12 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => {
+export const CommentCard: React.FC<Props> = ({
+  comment,
+  workspaceSlug,
+  onSubmit,
+  handleCommentDeletion,
+}) => {
   const { user } = useUser();
 
   const editorRef = React.useRef<any>(null);
@@ -109,7 +108,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             onSubmit={handleSubmit(onEnter)}
           >
             <div>
-              <TiptapEditor
+              <TipTapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={watch("comment_html")}
@@ -139,7 +138,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <TiptapEditor
+            <TipTapEditor
               workspaceSlug={workspaceSlug as string}
               ref={showEditorRef}
               value={comment.comment_html}

apps/app/components/issues/description-form.tsx

@@ -7,7 +7,7 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { useDebouncedCallback } from "use-debounce";
 // components
 import { TextArea } from "components/ui";
-import Tiptap from "components/tiptap";
+import { TipTapEditor } from "components/tiptap";
 // types
 import { IIssue } from "types";
 
@@ -134,7 +134,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             if (!value) return <></>;
 
             return (
-              <Tiptap
+              <TipTapEditor
                 value={
                   !value ||
                   value === "" ||

apps/app/components/issues/form.tsx

@@ -31,18 +31,11 @@ import {
   SecondaryButton,
   ToggleSwitch,
 } from "components/ui";
+import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
-// rich-text-editor
-
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -369,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       if (!value && !watch("description_html")) return <></>;
 
                       return (
-                        <TiptapEditor
+                        <TipTapEditor
                           workspaceSlug={workspaceSlug as string}
                           ref={editorRef}
                           debouncedUpdatesEnabled={false}

apps/app/components/pages/create-update-block-inline.tsx

@@ -1,12 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
 import { SparklesIcon } from "@heroicons/react/24/outline";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
 import pagesService from "services/pages.service";
@@ -16,13 +11,12 @@ import aiService from "services/ai.service";
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-// ui
+import { TipTapEditor } from "components/tiptap";
 import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 type Props = {
   handleClose: () => void;
@@ -39,12 +33,6 @@ const defaultValues = {
   description_html: null,
 };
 
-const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
-  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
-);
-
-TiptapEditor.displayName = "TiptapEditor";
-
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
   data,
@@ -231,9 +219,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       description:
         !data.description || data.description === ""
           ? {
-            type: "doc",
-            content: [{ type: "paragraph" }],
-          }
+              type: "doc",
+              content: [{ type: "paragraph" }],
+            }
           : data.description,
       description_html: data.description_html ?? "<p></p>",
     });
@@ -291,7 +279,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TiptapEditor
+                    <TipTapEditor
                       workspaceSlug={workspaceSlug as string}
                       ref={editorRef}
                       value={"<p></p>"}
@@ -311,7 +299,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <TiptapEditor
+                  <TipTapEditor
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={
@@ -334,8 +322,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
-                  }`}
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${
+                  iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
+                }`}
                 onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
               >
@@ -367,8 +356,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 ? "Updating..."
                 : "Update block"
               : isSubmitting
-                ? "Adding..."
-                : "Add block"}
+              ? "Adding..."
+              : "Add block"}
           </PrimaryButton>
         </div>
       </form>