feat: link option in remirror (#240)

* feat: link option in remirror * fix: removed link import from remirror toolbar
makeplane · Feb 7, 2023 · 859fef2 · 859fef2
1 parent f308fe2
commit 859fef2
Show file tree

Hide file tree

Showing 10 changed files with 282 additions and 282 deletions.
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -16,7 +16,7 @@ import issuesServices from "services/issues.service";
 // ui
 import { Button } from "components/ui";
 // icons
-import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
 // types
 import { IIssue, UserAuth } from "types";

diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -113,29 +113,35 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       });
   };
 
-  const handleCycleChange = (cycleDetail: ICycle) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
+  const handleCycleChange = useCallback(
+    (cycleDetail: ICycle) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
 
-    issuesServices
-      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
-        issues: [issueDetail.id],
-      })
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueId as string));
-      });
-  };
+      issuesServices
+        .addIssueToCycle(workspaceSlug as string, projectId as string, cycleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
 
-  const handleModuleChange = (moduleDetail: IModule) => {
-    if (!workspaceSlug || !projectId || !issueDetail) return;
+  const handleModuleChange = useCallback(
+    (moduleDetail: IModule) => {
+      if (!workspaceSlug || !projectId || !issueDetail) return;
 
-    modulesService
-      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
-        issues: [issueDetail.id],
-      })
-      .then((res) => {
-        mutate(ISSUE_DETAILS(issueId as string));
-      });
-  };
+      modulesService
+        .addIssuesToModule(workspaceSlug as string, projectId as string, moduleDetail.id, {
+          issues: [issueDetail.id],
+        })
+        .then((res) => {
+          mutate(ISSUE_DETAILS(issueId as string));
+        });
+    },
+    [workspaceSlug, projectId, issueId, issueDetail]
+  );
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 

diff --git a/apps/app/components/issues/sub-issues-list-modal.tsx b/apps/app/components/issues/sub-issues-list-modal.tsx
@@ -10,6 +10,8 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue, IssueResponse } from "types";
 // constants
@@ -47,11 +49,24 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
     setQuery("");
   };
 
-  const addAsSubIssue = (issueId: string) => {
+  const addAsSubIssue = (issue: IIssue) => {
     if (!workspaceSlug || !projectId) return;
 
+    mutate<IIssue[]>(
+      SUB_ISSUES(parent?.id ?? ""),
+      (prevData) => {
+        let newSubIssues = [...(prevData as IIssue[])];
+        newSubIssues.push(issue);
+
+        newSubIssues = orderArrayBy(newSubIssues, "created_at", "descending");
+
+        return newSubIssues;
+      },
+      false
+    );
+
     issuesServices
-      .patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
+      .patchIssue(workspaceSlug as string, projectId as string, issue.id, { parent: parent?.id })
       .then((res) => {
         mutate(SUB_ISSUES(parent?.id ?? ""));
         mutate<IssueResponse>(
@@ -146,7 +161,7 @@ export const SubIssuesListModal: React.FC<Props> = ({ isOpen, handleClose, paren
                                     }`
                                   }
                                   onClick={() => {
-                                    addAsSubIssue(issue.id);
+                                    addAsSubIssue(issue);
                                     handleClose();
                                   }}
                                 >

diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
@@ -36,6 +36,7 @@ import { Spinner } from "components/ui";
 // components
 import { RichTextToolbar } from "./toolbar";
 import { MentionAutoComplete } from "./mention-autocomplete";
+import { FloatingLinkToolbar } from "./toolbar/link";
 
 export interface IRemirrorRichTextEditor {
   placeholder?: string;
@@ -125,7 +126,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
       new CalloutExtension({ defaultType: "warn" }),
       new CodeBlockExtension(),
       new CodeExtension(),
-      new PlaceholderExtension({ placeholder: placeholder || `Enter text...` }),
+      new PlaceholderExtension({ placeholder: placeholder || "Enter text..." }),
       new HistoryExtension(),
       new LinkExtension({ autoLink: true }),
       new ImageExtension({
@@ -165,6 +166,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
     setJsonValue(json);
     onJSONChange(json);
   };
+
   const handleHTMLChange = (value: string) => {
     setHtmlValue(value);
     onHTMLChange(value);
@@ -194,6 +196,7 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
             </div>
           )}
           {/* <TableComponents /> */}
+          <FloatingLinkToolbar />
           <MentionAutoComplete mentions={mentions} tags={tags} />
           {<OnChangeJSON onChange={handleJSONChange} />}
           {<OnChangeHTML onChange={handleHTMLChange} />}

diff --git a/apps/app/components/rich-text-editor/toolbar/index.tsx b/apps/app/components/rich-text-editor/toolbar/index.tsx
@@ -6,7 +6,6 @@ import { BoldButton } from "./bold";
 import { ItalicButton } from "./italic";
 import { UnderlineButton } from "./underline";
 import { StrikeButton } from "./strike";
-import { LinkButton } from "./link";
 // headings
 import HeadingControls from "./heading-controls";
 // list