feat: add tiptap markdown support, add checklist support from trello (#245)

* feat: add tiptap markdown support, add checklist support from trello

* feat(api): implement bulk creation of checklists and items

apps/web/src/components/Editor.tsx

@@ -7,6 +7,7 @@ import type { Instance as TippyInstance } from "tippy.js";
 import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
 import Link from "@tiptap/extension-link";
+import Mention from "@tiptap/extension-mention";
 import Placeholder from "@tiptap/extension-placeholder";
 import {
   BubbleMenu,
@@ -39,9 +40,10 @@ import {
 } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 import tippy from "tippy.js";
-import Mention from "@tiptap/extension-mention";
-import Avatar from "./Avatar";
+import { Markdown } from "tiptap-markdown";
+
 import { getAvatarUrl } from "~/utils/helpers";
+import Avatar from "./Avatar";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -77,7 +79,7 @@ export interface RenderSuggestionsProps {
   command: (item: SlashCommandItem) => void;
 }
 
-export type WorkspaceMember = {
+export interface WorkspaceMember {
   publicId: string;
   user: {
     id: string;
@@ -85,7 +87,7 @@ export type WorkspaceMember = {
     image: string | null;
   } | null;
   email: string;
-};
+}
 
 const CommandsList = forwardRef<
   { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
@@ -200,7 +202,11 @@ const RenderSuggestions = () => {
   };
 };
 
-type MentionItem = { id: string; label: string; image: string | null };
+interface MentionItem {
+  id: string;
+  label: string;
+  image: string | null;
+}
 
 const MentionList = forwardRef<
   { onKeyDown: (props: SuggestionKeyDownProps) => boolean },
@@ -238,30 +244,32 @@ const MentionList = forwardRef<
   return (
     <div className="w-56 rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
       <div className="max-h-[350px] overflow-y-auto p-1 scrollbar-thin scrollbar-thumb-light-200 dark:scrollbar-thumb-dark-300">
-        {items.length > 0 ? items.map((item, index) => (
-          <button
-            key={item.id}
-            onClick={() => command(item)}
-            className={twMerge(
-              "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
-              index === selectedIndex && "bg-light-200 dark:bg-dark-300",
-            )}
-          >
-            <Avatar
-              size="xs"
-              name={item.label}
-              imageUrl={
-                item.image ? getAvatarUrl(item.image) : undefined
-              }
-              email={item.label}
-            />
-            <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
-              {item.label}
-            </span>
-          </button>
-        )) : (
+        {items.length > 0 ? (
+          items.map((item, index) => (
+            <button
+              key={item.id}
+              onClick={() => command(item)}
+              className={twMerge(
+                "group flex w-full items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300",
+                index === selectedIndex && "bg-light-200 dark:bg-dark-300",
+              )}
+            >
+              <Avatar
+                size="xs"
+                name={item.label}
+                imageUrl={item.image ? getAvatarUrl(item.image) : undefined}
+                email={item.label}
+              />
+              <span className="ml-3 text-[12px] font-medium text-dark-900 dark:text-dark-1000">
+                {item.label}
+              </span>
+            </button>
+          ))
+        ) : (
           <div className="flex items-center justify-start p-2">
-            <span className="text-dark-900 text-[12px] dark:text-dark-1000">No results</span>
+            <span className="text-[12px] text-dark-900 dark:text-dark-1000">
+              No results
+            </span>
           </div>
         )}
       </div>
@@ -436,6 +444,7 @@ export default function Editor({
     {
       extensions: [
         StarterKit,
+        Markdown,
         Placeholder.configure({
           placeholder: readOnly
             ? ""
@@ -462,35 +471,37 @@ export default function Editor({
         }),
         Mention.configure({
           HTMLAttributes: {
-            class: 'mention',
+            class: "mention",
           },
           suggestion: {
             char: "@",
             items: ({ query }: { query: string }) => {
-              const all: MentionItem[] = workspaceMembers.map((member: WorkspaceMember) => ({
-                id: member.publicId,
-                label: member?.user?.name ?? member.email,
-                image: member?.user?.image ?? null,
-              }));
+              const all: MentionItem[] = workspaceMembers.map(
+                (member: WorkspaceMember) => ({
+                  id: member.publicId,
+                  label: member?.user?.name ?? member.email,
+                  image: member?.user?.image ?? null,
+                }),
+              );
               const q = query.toLowerCase();
               return all.filter((u) => u.label.toLowerCase().includes(q));
             },
             command: ({ editor, range, props }: any) => {
-               const mentionHTML = `<span data-type="mention" data-id="${props.id}" data-label="${props.label}">@${props.label}</span>&nbsp;`;
-               
-               editor
-               .chain()
-               .focus()
-               .deleteRange(range)
-               .insertContent(mentionHTML)
-               .focus()
-               .run();
-              },
-              render: renderMentionSuggestions,
-            },
-            renderText({ options, node }) {
-              return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+              const mentionHTML = `<span data-type="mention" data-id="${props.id}" data-label="${props.label}">@${props.label}</span>&nbsp;`;
+
+              editor
+                .chain()
+                .focus()
+                .deleteRange(range)
+                .insertContent(mentionHTML)
+                .focus()
+                .run();
             },
+            render: renderMentionSuggestions,
+          },
+          renderText({ options, node }) {
+            return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+          },
         }),
       ],
       content,