migrated all components to use the common package

space/components/issues/peek-overview/comment/add-comment.tsx

@@ -11,7 +11,9 @@ import { SecondaryButton } from "components/ui";
 // types
 import { Comment } from "types/issue";
 // components
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditorWithRef } from "@plane/editor";
+// service
+import fileService from "@/services/file.service";
 
 const defaultValues: Partial<Comment> = {
   comment_html: "",
@@ -69,7 +71,9 @@ export const AddComment: React.FC<Props> = observer((props) => {
           name="comment_html"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <TipTapEditor
+            <TiptapEditorWithRef
+              uploadFile={fileService.uploadFile}
+              deleteFile={fileService.deleteImage}
               workspaceSlug={workspace_slug as string}
               ref={editorRef}
               value={

space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -9,7 +9,8 @@ import { Menu, Transition } from "@headlessui/react";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditorWithRef } from "@plane/editor";
+
 import { CommentReactions } from "components/issues/peek-overview";
 // icons
 import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
@@ -17,6 +18,8 @@ import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import { Comment } from "types/issue";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   workspaceSlug: string;
@@ -100,7 +103,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 control={control}
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
-                  <TipTapEditor
+                  <TiptapEditorWithRef
+                    uploadFile={fileService.uploadFile}
+                    deleteFile={fileService.deleteImage}
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={value}
@@ -131,7 +136,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <TipTapEditor
+            <TiptapEditorWithRef
+              uploadFile={fileService.uploadFile}
+              deleteFile={fileService.deleteImage}
               workspaceSlug={workspaceSlug as string}
               ref={showEditorRef}
               value={comment.comment_html}

space/components/issues/peek-overview/issue-details.tsx

@@ -1,8 +1,10 @@
 import { IssueReactions } from "components/issues/peek-overview";
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditor } from "@plane/editor";
 import { useRouter } from "next/router";
 // types
 import { IIssue } from "types/issue";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   issueDetails: IIssue;
@@ -19,7 +21,9 @@ export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
       </h6>
       <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
       {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
-        <TipTapEditor
+        <TiptapEditor
+          uploadFile={fileService.uploadFile}
+          deleteFile={fileService.deleteImage}
           workspaceSlug={workspace_slug as string}
           value={
             !issueDetails.description_html ||

space/package.json

@@ -57,7 +57,8 @@
     "tiptap-markdown": "^0.8.2",
     "typescript": "4.9.5",
     "use-debounce": "^9.0.4",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "@plane/editor": "*"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.3",

space/services/file.service.ts

@@ -25,9 +25,11 @@ interface UnSplashImageUrls {
   small_s3: string;
 }
 
-class FileServices extends APIService {
+class FileService extends APIService {
   constructor() {
     super(API_BASE_URL);
+    this.uploadFile = this.uploadFile.bind(this);
+    this.deleteImage = this.deleteImage.bind(this);
   }
 
   async uploadFile(workspaceSlug: string, file: FormData): Promise<any> {
@@ -94,6 +96,6 @@ class FileServices extends APIService {
   }
 }
 
-const fileServices = new FileServices();
+const fileService = new FileService();
 
-export default fileServices;
+export default fileService;

web/components/core/modals/gpt-assistant-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 // react-hook-form
 import { useForm } from "react-hook-form";
@@ -10,9 +10,12 @@ 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";
+// components
+import { TiptapEditor, TiptapEditorWithRef } from "@plane/editor";
 // types
 import { IIssue, IPageBlock } from "types";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   isOpen: boolean;
@@ -140,7 +143,9 @@ export const GptAssistantModal: React.FC<Props> = ({
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <TipTapEditor
+          <TiptapEditorWithRef
+            uploadFile={fileService.uploadFile}
+            deleteFile={fileService.deleteImage}
             workspaceSlug={workspaceSlug as string}
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
@@ -154,7 +159,9 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <TipTapEditor
+          <TiptapEditor
+            uploadFile={fileService.uploadFile}
+            deleteFile={fileService.deleteImage}
             workspaceSlug={workspaceSlug as string}
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"

web/components/core/modals/image-upload-modal.tsx

@@ -7,7 +7,7 @@ import { useDropzone } from "react-dropzone";
 // headless ui
 import { Transition, Dialog } from "@headlessui/react";
 // services
-import fileServices from "services/file.service";
+import fileService from "services/file.service";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 // ui
@@ -64,7 +64,7 @@ export const ImageUploadModal: React.FC<Props> = ({
     formData.append("attributes", JSON.stringify({}));
 
     if (userImage) {
-      fileServices
+      fileService
         .uploadUserFile(formData)
         .then((res) => {
           const imageUrl = res.asset;
@@ -73,13 +73,13 @@ export const ImageUploadModal: React.FC<Props> = ({
           setIsImageUploading(false);
           setImage(null);
 
-          if (value) fileServices.deleteUserFile(value);
+          if (value) fileService.deleteUserFile(value);
         })
         .catch((err) => {
           console.error(err);
         });
     } else
-      fileServices
+      fileService
         .uploadFile(workspaceSlug as string, formData)
         .then((res) => {
           const imageUrl = res.asset;
@@ -87,7 +87,7 @@ export const ImageUploadModal: React.FC<Props> = ({
           setIsImageUploading(false);
           setImage(null);
 
-          if (value && workspaceDetails) fileServices.deleteFile(workspaceDetails.id, value);
+          if (value && workspaceDetails) fileService.deleteFile(workspaceDetails.id, value);
         })
         .catch((err) => {
           console.error(err);

web/components/issues/comment/add-comment.tsx

@@ -3,11 +3,13 @@ import { useRouter } from "next/router";
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
 // components
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditorWithRef } from "@plane/editor";
 // ui
 import { Icon, SecondaryButton, Tooltip } from "components/ui";
 // types
 import type { IIssueComment } from "types";
+// services
+import fileService from "@/services/file.service";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -100,7 +102,9 @@ export const AddComment: React.FC<Props> = ({
               name="comment_html"
               control={control}
               render={({ field: { value, onChange } }) => (
-                <TipTapEditor
+                <TiptapEditorWithRef
+                  uploadFile={fileService.uploadFile}
+                  deleteFile={fileService.deleteImage}
                   workspaceSlug={workspaceSlug as string}
                   ref={editorRef}
                   value={!value || value === "" ? "<p></p>" : value}

web/components/issues/comment/comment-card.tsx

@@ -9,11 +9,13 @@ import useUser from "hooks/use-user";
 // ui
 import { CustomMenu, Icon } from "components/ui";
 import { CommentReaction } from "components/issues";
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditorWithRef } from "@plane/editor";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   comment: IIssueComment;
@@ -110,7 +112,9 @@ export const CommentCard: React.FC<Props> = ({
             onSubmit={handleSubmit(onEnter)}
           >
             <div>
-              <TipTapEditor
+              <TiptapEditorWithRef
+                uploadFile={fileService.uploadFile}
+                deleteFile={fileService.deleteImage}
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={watch("comment_html")}
@@ -148,7 +152,9 @@ export const CommentCard: React.FC<Props> = ({
                 />
               </div>
             )}
-            <TipTapEditor
+            <TiptapEditorWithRef
+              uploadFile={fileService.uploadFile}
+              deleteFile={fileService.deleteImage}
               workspaceSlug={workspaceSlug as string}
               ref={showEditorRef}
               value={comment.comment_html}

web/components/issues/draft-issue-form.tsx

@@ -24,11 +24,14 @@ import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
 import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
+// components
+import { TiptapEditorWithRef } from "@plane/editor";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+// services
+import fileService from "@/services/file.service";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -381,7 +384,9 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                       if (!value && !watch("description_html")) return <></>;
 
                       return (
-                        <TipTapEditor
+                        <TiptapEditorWithRef
+                          uploadFile={fileService.uploadFile}
+                          deleteFile={fileService.deleteImage}
                           workspaceSlug={workspaceSlug as string}
                           ref={editorRef}
                           debouncedUpdatesEnabled={false}

web/components/issues/form.tsx

@@ -24,11 +24,15 @@ import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
 import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
+// components
+import { TiptapEditorWithRef } from "@plane/editor";
+
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+// services
+import fileService from "@/services/file.service";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -380,7 +384,9 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                       if (!value && !watch("description_html")) return <></>;
 
                       return (
-                        <TipTapEditor
+                        <TiptapEditorWithRef
+                          uploadFile={fileService.uploadFile}
+                          deleteFile={fileService.deleteImage}
                           workspaceSlug={workspaceSlug as string}
                           ref={editorRef}
                           debouncedUpdatesEnabled={false}

web/components/pages/create-update-block-inline.tsx

@@ -11,12 +11,14 @@ import aiService from "services/ai.service";
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditorWithRef } from "@plane/editor";
 import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   handleClose: () => void;
@@ -279,7 +281,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TipTapEditor
+                    <TiptapEditorWithRef
+                      uploadFile={fileService.uploadFile}
+                      deleteFile={fileService.deleteImage}
                       workspaceSlug={workspaceSlug as string}
                       ref={editorRef}
                       value={"<p></p>"}
@@ -299,7 +303,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <TipTapEditor
+                  <TiptapEditorWithRef
+                    uploadFile={fileService.uploadFile}
+                    deleteFile={fileService.deleteImage}
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={

web/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 { TipTapEditor } from "components/tiptap";
+import { TiptapEditor } from "@plane/editor";
 // ui
 import { CustomMenu, TextArea } from "components/ui";
 // icons
@@ -39,6 +39,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import fileService from "@/services/file.service";
 
 type Props = {
   block: IPageBlock;
@@ -451,7 +452,9 @@ export const SinglePageBlock: React.FC<Props> = ({
 
                   {showBlockDetails
                     ? block.description_html.length > 7 && (
-                        <TipTapEditor
+                        <TiptapEditor
+                          uploadFile={fileService.uploadFile}
+                          deleteFile={fileService.deleteImage}
                           workspaceSlug={workspaceSlug as string}
                           value={block.description_html}
                           customClassName="text-sm min-h-[150px]"

web/components/tiptap/index.tsx

@@ -1,4 +1,4 @@
-import { useImperativeHandle, useRef, forwardRef, useEffect } from "react";
+import { useImperativeHandle, useRef, forwardRef } from "react";
 import { useEditor, EditorContent, Editor } from "@tiptap/react";
 import { useDebouncedCallback } from "use-debounce";
 // components

web/components/web-view/issue-web-view-form.tsx

@@ -16,11 +16,13 @@ import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { TextArea } from "components/ui";
 
 // components
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditor } from "@plane/editor";
 import { Label } from "components/web-view";
 
 // types
 import type { IIssue } from "types";
+// services
+import fileService from "@/services/file.service";
 
 type Props = {
   isAllowed: boolean;
@@ -121,7 +123,9 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
               if (!value) return <></>;
 
               return (
-                <TipTapEditor
+                <TiptapEditor
+                  uploadFile={fileService.uploadFile}
+                  deleteFile={fileService.deleteImage}
                   value={
                     !value ||
                     value === "" ||

web/pages/[workspaceSlug]/editor.tsx

@@ -1,4 +1,4 @@
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditor } from "@plane/editor";
 import type { NextPage } from "next";
 import { useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -11,6 +11,7 @@ import DefaultLayout from "layouts/default-layout";
 import Image from "next/image";
 import userService from "services/user.service";
 import { useRouter } from "next/router";
+import fileService from "@/services/file.service";
 
 const Editor: NextPage = () => {
   const [user, setUser] = useState<ICurrentUserResponse | undefined>();
@@ -134,7 +135,9 @@ const Editor: NextPage = () => {
         name="description_html"
         control={control}
         render={({ field: { value, onChange } }) => (
-          <TipTapEditor
+          <TiptapEditor
+            uploadFile={fileService.uploadFile}
+            deleteFile={fileService.deleteImage}
             borderOnFocus={false}
             value={
               !value ||

web/pages/[workspaceSlug]/me/profile/activity.tsx

@@ -10,7 +10,6 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { TiptapEditor } from "@plane/editor";
-// import { TipTapEditor } from "components/tiptap";
 // icons
 import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
@@ -21,6 +20,7 @@ import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
 import { timeAgo } from "helpers/date-time.helper";
 import { SettingsSidebar } from "components/project";
+// services
 import fileService from "@/services/file.service";
 
 const ProfileActivity = () => {

web/pages/m/[workspaceSlug]/editor.tsx

@@ -14,8 +14,10 @@ import { Controller, useForm } from "react-hook-form";
 import WebViewLayout from "layouts/web-view-layout";
 
 // components
-import { TipTapEditor } from "components/tiptap";
+import { TiptapEditor } from "@plane/editor";
 import { PrimaryButton, Spinner } from "components/ui";
+// services
+import fileService from "@/services/file.service";
 
 const Editor: NextPage = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -52,7 +54,9 @@ const Editor: NextPage = () => {
             name="data_html"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TipTapEditor
+              <TiptapEditor
+                uploadFile={fileService.uploadFile}
+                deleteFile={fileService.deleteImage}
                 borderOnFocus={false}
                 value={
                   !value ||

web/services/file.service.ts

@@ -26,7 +26,7 @@ interface UnSplashImageUrls {
   small_s3: string;
 }
 
-class FileServices extends APIService {
+class FileService extends APIService {
   constructor() {
     super(API_BASE_URL);
     this.uploadFile = this.uploadFile.bind(this);
@@ -97,4 +97,6 @@ class FileServices extends APIService {
   }
 }
 
-export default new FileServices();
+const fileService = new FileService();
+
+export default fileService;