feat: update comments to use tiptap editor

apps/web/src/components/Editor.tsx

@@ -387,46 +387,54 @@ export interface SlashNodeAttrs {
   label?: string | null;
 }
 
-const CommandItems: SlashCommandItem[] = [
+const getCommandItems = (disableHeadings: boolean): SlashCommandItem[] => {
-  {
+  const headingCommands: SlashCommandItem[] = disableHeadings
-    title: "Heading 1",
+    ? []
-    icon: <HiH1 />,
+    : [
-    command: ({ editor }) =>
+        {
-      editor.chain().focus().setHeading({ level: 1 }).run(),
+          title: "Heading 1",
-  },
+          icon: <HiH1 />,
-  {
+          command: ({ editor }) =>
-    title: "Heading 2",
+            editor.chain().focus().setHeading({ level: 1 }).run(),
-    icon: <HiH2 />,
+        },
-    command: ({ editor }) =>
+        {
-      editor.chain().focus().setHeading({ level: 2 }).run(),
+          title: "Heading 2",
-  },
+          icon: <HiH2 />,
-  {
+          command: ({ editor }) =>
-    title: "Heading 3",
+            editor.chain().focus().setHeading({ level: 2 }).run(),
-    icon: <HiH3 />,
+        },
-    command: ({ editor }) =>
+        {
-      editor.chain().focus().setHeading({ level: 3 }).run(),
+          title: "Heading 3",
-  },
+          icon: <HiH3 />,
-  {
+          command: ({ editor }) =>
-    title: "Bullet List",
+            editor.chain().focus().setHeading({ level: 3 }).run(),
-    icon: <HiOutlineListBullet />,
+        },
-    command: ({ editor }) => editor.chain().focus().toggleBulletList().run(),
+      ];
-  },
+
-  {
+  return [
-    title: "Ordered List",
+    ...headingCommands,
-    icon: <HiOutlineNumberedList />,
+    {
-    command: ({ editor }) => editor.chain().focus().toggleOrderedList().run(),
+      title: "Bullet List",
-  },
+      icon: <HiOutlineListBullet />,
-  {
+      command: ({ editor }) => editor.chain().focus().toggleBulletList().run(),
-    title: "Blockquote",
+    },
-    icon: <HiOutlineChatBubbleLeftEllipsis />,
+    {
-    command: ({ editor }) => editor.chain().focus().toggleBlockquote().run(),
+      title: "Ordered List",
-  },
+      icon: <HiOutlineNumberedList />,
-  {
+      command: ({ editor }) => editor.chain().focus().toggleOrderedList().run(),
-    title: "Code Block",
+    },
-    icon: <HiOutlineCodeBracketSquare />,
+    {
-    command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
+      title: "Blockquote",
-  },
+      icon: <HiOutlineChatBubbleLeftEllipsis />,
-];
+      command: ({ editor }) => editor.chain().focus().toggleBlockquote().run(),
+    },
+    {
+      title: "Code Block",
+      icon: <HiOutlineCodeBracketSquare />,
+      command: ({ editor }) => editor.chain().focus().toggleCodeBlock().run(),
+    },
+  ];
+};
 
 export default function Editor({
   content,
@@ -435,6 +443,8 @@ export default function Editor({
   readOnly = false,
   workspaceMembers,
   enableYouTubeEmbed = true,
+  placeholder,
+  disableHeadings = false,
 }: {
   content: string | null;
   onChange?: (value: string) => void;
@@ -442,18 +452,23 @@ export default function Editor({
   readOnly?: boolean;
   workspaceMembers: WorkspaceMember[];
   enableYouTubeEmbed?: boolean;
+  placeholder?: string;
+  disableHeadings?: boolean;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const editor = useEditor(
     {
       extensions: [
-        StarterKit,
+        StarterKit.configure({
+          heading: disableHeadings ? false : undefined,
+        }),
         Markdown,
         Placeholder.configure({
           placeholder: readOnly
             ? ""
-            : t`Add description... (type '/' to open commands or '@' to mention)`,
+            : placeholder ??
+              t`Add description... (type '/' to open commands or '@' to mention)`,
         }),
         Link.configure({
           openOnClick: true,
@@ -466,10 +481,10 @@ export default function Editor({
           autolink: true,
         }),
         SlashCommands.configure({
-          commandItems: CommandItems,
+          commandItems: getCommandItems(disableHeadings),
           suggestion: {
             items: ({ query }: { query: string }) =>
-              filterSlashCommandItems(CommandItems, query),
+              filterSlashCommandItems(getCommandItems(disableHeadings), query),
             startOfLine: true,
             char: "/",
           },

apps/web/src/views/card/components/Comment.tsx

@@ -1,12 +1,13 @@
 import { t } from "@lingui/core/macro";
 import { formatDistanceToNow } from "date-fns";
 import { useState } from "react";
-import ContentEditable from "react-contenteditable";
 import { useForm } from "react-hook-form";
 import { HiEllipsisHorizontal, HiPencil, HiTrash } from "react-icons/hi2";
 
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
+import Editor from "~/components/Editor";
+import type { WorkspaceMember } from "~/components/Editor";
 import Dropdown from "~/components/Dropdown";
 import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
@@ -29,7 +30,6 @@ const Comment = ({
   createdAt,
   comment,
   isAuthor,
-  isAdmin,
   isEdited = false,
   isViewOnly = false,
 }: {
@@ -42,7 +42,6 @@ const Comment = ({
   createdAt: string;
   comment: string | undefined;
   isAuthor: boolean;
-  isAdmin: boolean;
   isEdited: boolean;
   isViewOnly: boolean;
 }) => {
@@ -57,6 +56,30 @@ const Comment = ({
     },
   });
 
+  const { data: cardData } = api.card.byId.useQuery(
+    {
+      cardPublicId,
+    },
+    {
+      enabled: !!cardPublicId && cardPublicId.length >= 12,
+    },
+  );
+
+  const workspaceMembers: WorkspaceMember[] =
+    cardData?.list.board.workspace.members
+      .filter((member) => member.email)
+      .map((member) => ({
+        publicId: member.publicId,
+        email: member.email,
+        user: member.user
+          ? {
+              id: member.user.id,
+              name: member.user.name ?? null,
+              image: member.user.image ?? null,
+            }
+          : null,
+      })) ?? [];
+
   if (!publicId) return null;
 
   const updateCommentMutation = api.card.updateComment.useMutation({
@@ -142,21 +165,28 @@ const Comment = ({
         )}
       </div>
       {!isEditing ? (
-        <ContentEditable
+        <div className="mt-2">
-          html={comment ?? ""}
+          <Editor
-          disabled={true}
+            content={comment ?? null}
-          className="break-anywhere mt-2 text-sm"
+            readOnly={true}
-        />
+            workspaceMembers={workspaceMembers}
+            enableYouTubeEmbed={false}
+            disableHeadings={true}
+          />
+        </div>
       ) : (
         <form onSubmit={handleSubmit(onSubmit)}>
-          <ContentEditable
+          <div className="mt-2">
-            placeholder={t`Add a comment...`}
+            <Editor
-            html={watch("comment")}
+              content={watch("comment")}
-            disabled={false}
+              onChange={(value) => setValue("comment", value)}
-            onChange={(e) => setValue("comment", e.target.value)}
+              workspaceMembers={workspaceMembers}
-            className="block w-full max-w-[800px] border-0 bg-transparent py-1.5 text-sm text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+              enableYouTubeEmbed={false}
-          />
+              placeholder={t`Add comment... (type '/' to open commands or '@' to mention)`}
-          <div className="flex justify-end space-x-2">
+              disableHeadings={true}
+            />
+          </div>
+          <div className="flex justify-end space-x-2 mt-2">
             <Button
               size="sm"
               variant="ghost"

apps/web/src/views/card/components/NewCommentForm.tsx

@@ -1,8 +1,9 @@
 import { t } from "@lingui/core/macro";
-import ContentEditable from "react-contenteditable";
 import { useForm } from "react-hook-form";
 import { HiOutlineArrowUp } from "react-icons/hi2";
 
+import Editor from "~/components/Editor";
+import type { WorkspaceMember } from "~/components/Editor";
 import LoadingSpinner from "~/components/LoadingSpinner";
 import { usePermissions } from "~/hooks/usePermissions";
 import { usePopup } from "~/providers/popup";
@@ -13,7 +14,13 @@ interface FormValues {
   comment: string;
 }
 
-const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
+const NewCommentForm = ({
+  cardPublicId,
+  workspaceMembers,
+}: {
+  cardPublicId: string;
+  workspaceMembers: WorkspaceMember[];
+}) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { canCreateComment } = usePermissions();
@@ -23,10 +30,6 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
     },
   });
 
-  const queryParams = {
-    cardPublicId,
-  };
-
   const addCommentMutation = api.card.addComment.useMutation({
     onError: (_error, _newList) => {
       showPopup({
@@ -57,18 +60,13 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
       onSubmit={handleSubmit(onSubmit)}
       className="flex w-full max-w-[800px] flex-col rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
     >
-      <ContentEditable
+      <Editor
-        placeholder={t`Add a comment...`}
+        content={watch("comment")}
-        html={watch("comment")}
+        onChange={(value) => setValue("comment", value)}
-        disabled={false}
+        workspaceMembers={workspaceMembers}
-        onChange={(e) => setValue("comment", e.target.value)}
+        enableYouTubeEmbed={false}
-        className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+        placeholder={t`Add comment... (type '/' to open commands or '@' to mention)`}
-        onKeyDown={async (e) => {
+        disableHeadings={true}
-          if (e.key === "Enter" && e.shiftKey) {
-            e.preventDefault();
-            await handleSubmit(onSubmit)();
-          }
-        }}
       />
       <div className="flex justify-end">
         <button

apps/web/src/views/card/index.tsx

@@ -200,6 +200,21 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
   const workspaceMembers = board?.workspace.members;
   const boardId = board?.publicId;
 
+  const editorWorkspaceMembers =
+    workspaceMembers
+      ?.filter((member) => member.email)
+      .map((member) => ({
+        publicId: member.publicId,
+        email: member.email,
+        user: member.user
+          ? {
+              id: member.user.id,
+              name: member.user.name ?? null,
+              image: member.user.image ?? null,
+            }
+          : null,
+      })) ?? [];
+
   const updateCard = api.card.update.useMutation({
     onError: () => {
       showPopup({
@@ -432,7 +447,10 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
                     </div>
                     {!isTemplate && (
                       <div className="mt-6">
-                        <NewCommentForm cardPublicId={cardId} />
+                        <NewCommentForm
+                          cardPublicId={cardId}
+                          workspaceMembers={editorWorkspaceMembers}
+                        />
                       </div>
                     )}
                   </div>