feat : Tiptap integration

.gitignore

@@ -70,4 +70,6 @@ package-lock.json
 # lock files
 package-lock.json
 pnpm-lock.yaml
-pnpm-workspace.yaml
+pnpm-workspace.yaml
+
+.npmrc

apps/app/components/command-palette/change-interface-theme.tsx

@@ -28,13 +28,13 @@ export const ChangeInterfaceTheme: React.FC<Props> = ({ setIsPaletteOpen }) => {
 
     setTheme(newTheme);
 
-    mutateUser((prevData) => {
+    mutateUser((prevData: any) => {
       if (!prevData) return prevData;
 
       return {
         ...prevData,
         theme: {
-          ...prevData.theme,
+          ...prevData?.theme,
           theme: newTheme,
         },
       };

apps/app/components/command-palette/command-pallette.tsx

@@ -1,11 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // hooks
-import useTheme from "hooks/use-theme";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // components
@@ -26,8 +23,10 @@ import inboxService from "services/inbox.service";
 import { INBOX_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { observable } from "mobx";
+import { observer } from "mobx-react-lite";
 
-export const CommandPalette: React.FC = () => {
+export const CommandPalette: React.FC = observer(() => {
   const store: any = useMobxStore();
 
   const [isPaletteOpen, setIsPaletteOpen] = useState(false);
@@ -47,13 +46,12 @@ export const CommandPalette: React.FC = () => {
   const { user } = useUser();
 
   const { setToastAlert } = useToast();
-  const { toggleCollapsed } = useTheme();
 
   const { data: issueDetails } = useSWR(
     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
   );
 
@@ -78,55 +76,52 @@ export const CommandPalette: React.FC = () => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
+      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
+      if (!key) return;
+
+      const keyPressed = key.toLowerCase();
+      const cmdClicked = ctrlKey || metaKey;
       // if on input, textarea or editor, don't do anything
       if (
         e.target instanceof HTMLTextAreaElement ||
         e.target instanceof HTMLInputElement ||
-        (e.target as Element).classList?.contains("remirror-editor")
+        (e.target as Element).classList?.contains("ProseMirror")
       )
         return;
 
-      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
-
-      if (!key) return;
-
-      const keyPressed = key.toLowerCase();
-
-      const cmdClicked = ctrlKey || metaKey;
-
-      if (cmdClicked) {
-        if (keyPressed === "k") {
-          e.preventDefault();
-          setIsPaletteOpen(true);
-        } else if (keyPressed === "c" && altKey) {
-          e.preventDefault();
-          copyIssueUrlToClipboard();
-        } else if (keyPressed === "b") {
-          e.preventDefault();
-          toggleCollapsed();
-        }
-      } else {
-        if (keyPressed === "c") {
-          setIsIssueModalOpen(true);
-        } else if (keyPressed === "p") {
-          setIsProjectModalOpen(true);
-        } else if (keyPressed === "v") {
-          setIsCreateViewModalOpen(true);
-        } else if (keyPressed === "d") {
-          setIsCreateUpdatePageModalOpen(true);
-        } else if (keyPressed === "h") {
-          setIsShortcutsModalOpen(true);
-        } else if (keyPressed === "q") {
-          setIsCreateCycleModalOpen(true);
-        } else if (keyPressed === "m") {
-          setIsCreateModuleModalOpen(true);
-        } else if (keyPressed === "backspace" || keyPressed === "delete") {
-          e.preventDefault();
-          setIsBulkDeleteIssuesModalOpen(true);
+        if (cmdClicked) {
+          if (keyPressed === "k") {
+            e.preventDefault();
+            setIsPaletteOpen(true);
+          } else if (keyPressed === "c" && altKey) {
+            e.preventDefault();
+            copyIssueUrlToClipboard();
+          } else if (keyPressed === "b") {
+            e.preventDefault();
+            store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed);
+          }
+        } else {
+          if (keyPressed === "c") {
+            setIsIssueModalOpen(true);
+          } else if (keyPressed === "p") {
+            setIsProjectModalOpen(true);
+          } else if (keyPressed === "v") {
+            setIsCreateViewModalOpen(true);
+          } else if (keyPressed === "d") {
+            setIsCreateUpdatePageModalOpen(true);
+          } else if (keyPressed === "h") {
+            setIsShortcutsModalOpen(true);
+          } else if (keyPressed === "q") {
+            setIsCreateCycleModalOpen(true);
+          } else if (keyPressed === "m") {
+            setIsCreateModuleModalOpen(true);
+          } else if (keyPressed === "backspace" || keyPressed === "delete") {
+            e.preventDefault();
+            setIsBulkDeleteIssuesModalOpen(true);
+          }
         }
-      }
     },
-    [copyIssueUrlToClipboard, toggleCollapsed]
+    [copyIssueUrlToClipboard]
   );
 
   useEffect(() => {
@@ -201,4 +196,4 @@ export const CommandPalette: React.FC = () => {
       />
     </>
   );
-};
+})

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

apps/app/components/core/views/board-view/single-issue.tsx

@@ -125,7 +125,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
         );
       } else {
         mutateIssues(
-          (prevData) =>
+          (prevData: any) =>
             handleIssuesMutation(
               formData,
               groupTitle ?? "",

apps/app/components/core/views/list-view/single-issue.tsx

@@ -108,7 +108,7 @@ export const SingleListIssue: React.FC<Props> = ({
         );
       } else {
         mutateIssues(
-          (prevData) =>
+          (prevData: any) =>
             handleIssuesMutation(
               formData,
               groupTitle ?? "",

apps/app/components/cycles/cycles-list-gantt-chart.tsx

@@ -38,10 +38,10 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
 
-    mutateCycles((prevData) => {
+    mutateCycles((prevData: any) => {
       if (!prevData) return prevData;
 
-      const newList = prevData.map((p) => ({
+      const newList = prevData.map((p: any) => ({
         ...p,
         ...(p.id === cycle.id
           ? {

apps/app/components/estimates/single-estimate.tsx

@@ -47,7 +47,7 @@ export const SingleEstimate: React.FC<Props> = ({
       estimate: estimate.id,
     };
 
-    mutateProjectDetails((prevData) => {
+    mutateProjectDetails((prevData: any) => {
       if (!prevData) return prevData;
 
       return { ...prevData, estimate: estimate.id };

apps/app/components/gantt-chart/hooks/block-update.tsx

@@ -15,10 +15,10 @@ export const updateGanttIssue = (
 ) => {
   if (!issue || !workspaceSlug || !user) return;
 
-  mutate((prevData: IIssue[]) => {
+  mutate((prevData: any) => {
     if (!prevData) return prevData;
 
-    const newList = prevData.map((p) => ({
+    const newList = prevData.map((p: any) => ({
       ...p,
       ...(p.id === issue.id ? payload : {}),
     }));

apps/app/components/inbox/inbox-action-headers.tsx

@@ -72,8 +72,8 @@ export const InboxActionHeader = () => {
       false
     );
     mutateInboxIssues(
-      (prevData) =>
-        (prevData ?? []).map((i) =>
+      (prevData: any) =>
+        (prevData ?? []).map((i: any) =>
           i.bridge_id === inboxIssueId
             ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
             : i

apps/app/components/issues/activity.tsx

@@ -54,7 +54,10 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
   const handleCommentDelete = async (commentId: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
-    mutateIssueActivities((prevData) => prevData?.filter((p) => p.id !== commentId), false);
+    mutateIssueActivities(
+      (prevData: any) => prevData?.filter((p: any) => p.id !== commentId),
+      false
+    );
 
     await issuesService
       .deleteIssueComment(

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

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 
 import { mutate } from "swr";
 
@@ -12,28 +11,18 @@ import issuesServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader, SecondaryButton } from "components/ui";
+import { SecondaryButton } from "components/ui";
 // types
 import type { ICurrentUserResponse, IIssueComment } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
-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 TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
 
-const WrappedRemirrorRichTextEditor = React.forwardRef<
-  IRemirrorRichTextEditor,
-  IRemirrorRichTextEditor
->((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
-
-WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
+TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -51,6 +40,7 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
     handleSubmit,
     control,
     setValue,
+    watch,
     formState: { isSubmitting },
     reset,
   } = useForm<IIssueComment>({ defaultValues });
@@ -97,17 +87,26 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
   return (
     <div>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="issue-comments-section">
+        <div id="tiptap-container" className="issue-comments-section">
           <Controller
-            name="comment_json"
+            name="comment_html"
             control={control}
-            render={({ field: { value } }) => (
-              <WrappedRemirrorRichTextEditor
-                value={value}
-                onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)}
-                onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)}
-                placeholder="Enter your comment..."
+            render={({ field: { value, onChange } }) => (
+              <TiptapEditor
                 ref={editorRef}
+                value={
+                  !value ||
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("comment_html")
+                    : value
+                }
+                customClassName="p-3 min-h-[50px]"
+                debouncedUpdatesEnabled={false}
+                onChange={(comment_json: Object, comment_html: string) => {
+                  onChange(comment_html);
+                  setValue("comment_json", comment_json);
+                }}
               />
             )}
           />