feat: Replace Markdown-related libraries with TipTap (#229)

.changeset/cyan-spoons-count.md

@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Improve rich text editing experience

package.json

@@ -34,12 +34,14 @@
     "@auth/core": "0.36.0",
     "@convex-dev/auth": "^0.0.74",
     "@faker-js/faker": "^9.2.0",
-    "@mdxeditor/editor": "^3.19.3",
     "@pdfme/common": "^5.2.6",
     "@pdfme/generator": "^5.2.6",
     "@pdfme/schemas": "^5.2.6",
     "@pdfme/ui": "^5.2.6",
     "@tanstack/react-router": "^1.82.8",
+    "@tiptap/pm": "^2.10.3",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/starter-kit": "^2.10.3",
     "convex": "^1.17.2",
     "convex-helpers": "^0.1.65",
     "framer-motion": "^11.11.17",
@@ -53,7 +55,6 @@
     "react-aria-components": "^1.5.0",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-markdown": "^9.0.1",
     "resend": "4.0.1",
     "sonner": "^1.7.0",
     "storybook": "^8.4.5",

src/components/RichTextEditor/RichTextEditor.stories.tsx → src/components/RichText/RichText.stories.tsx

@@ -1,20 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { RichTextEditor } from "./RichTextEditor";
+import { RichText } from "./RichText";
 
 const meta = {
-  component: RichTextEditor,
+  component: RichText,
   parameters: {
     layout: "padded",
   },
-} satisfies Meta<typeof RichTextEditor>;
+} satisfies Meta<typeof RichText>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    markdown: "hello",
+    initialContent: "hello",
   },
 };

src/components/RichText/RichText.tsx

@@ -0,0 +1,95 @@
+import { BubbleMenu, EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { Bold, Italic } from "lucide-react";
+import { useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+import { ReadingScore } from "../ReadingScore";
+import { ToggleButton } from "../ToggleButton";
+
+export interface RichTextProps {
+  className?: string;
+  showReadingScore?: boolean;
+  initialContent?: string;
+  onChange?: (content: string) => void;
+  editable?: boolean;
+}
+
+export function RichText({
+  className,
+  showReadingScore = false,
+  initialContent,
+  onChange,
+  editable = true,
+}: RichTextProps) {
+  const extensions = [StarterKit];
+
+  const editor = useEditor({
+    extensions,
+    content: initialContent,
+    editable,
+    onUpdate: ({ editor }) => {
+      if (onChange) {
+        onChange(editor.getHTML());
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent ?? "");
+    }
+  }, [editor, initialContent]);
+
+  if (!editor) {
+    return null;
+  }
+
+  const styles = tv({
+    base: "w-full",
+    variants: {
+      editable: {
+        true: "border border-gray-dim flex flex-col rounded-xl [&_.tiptap]:p-4 [&_.tiptap]:outline-none",
+      },
+    },
+  });
+
+  return (
+    <div className={styles({ editable })}>
+      <EditorContent
+        editor={editor}
+        className={twMerge("w-full prose dark:prose-invert", className)}
+      />
+      {editable && (
+        <>
+          <BubbleMenu
+            editor={editor}
+            className="bg-gray-1 dark:bg-graydark-2 p-1.5 rounded-xl shadow-md flex gap-1 items-center"
+          >
+            <ToggleButton
+              onPress={() => editor.chain().focus().toggleBold().run()}
+              isDisabled={!editor.can().chain().focus().toggleBold().run()}
+              isSelected={editor.isActive("bold")}
+              icon={Bold}
+              aria-label="Toggle bold text"
+              size="small"
+            />
+            <ToggleButton
+              onPress={() => editor.chain().focus().toggleItalic().run()}
+              isDisabled={!editor.can().chain().focus().toggleItalic().run()}
+              isSelected={editor.isActive("italic")}
+              icon={Italic}
+              aria-label="Toggle italic text"
+              size="small"
+            />
+          </BubbleMenu>
+          {showReadingScore && (
+            <div className="border-t border-gray-dim">
+              <ReadingScore text={editor.state.doc.textContent} />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

src/components/RichText/index.ts

@@ -0,0 +1 @@
+export * from "./RichText";

src/components/index.ts

@@ -36,7 +36,7 @@ export * from "./ProgressBar";
 export * from "./RadioGroup";
 export * from "./RangeCalendar";
 export * from "./ReadingScore";
-export * from "./RichTextEditor";
+export * from "./RichText";
 export * from "./SearchField";
 export * from "./Select";
 export * from "./Separator";

src/routes/_authenticated/_home/quests.$questId.tsx

@@ -11,6 +11,7 @@ import {
   MenuTrigger,
   PageHeader,
   Popover,
+  RichText,
   StatusSelect,
   Tooltip,
   TooltipTrigger,
@@ -26,7 +27,6 @@ import {
   Link as LinkIcon,
   Milestone,
 } from "lucide-react";
-import Markdown from "react-markdown";
 import { Fragment } from "react/jsx-runtime";
 import { toast } from "sonner";
 
@@ -239,9 +239,7 @@ function QuestDetailRoute() {
       <QuestUrls urls={quest.urls} />
       <QuestForms questId={quest._id} />
       {quest.content ? (
-        <Markdown className="prose lg:prose-lg dark:prose-invert max-w-full">
-          {quest.content}
-        </Markdown>
+        <RichText initialContent={quest.content} editable={false} />
       ) : (
         "No content"
       )}

src/routes/_authenticated/admin/quests/$questId.tsx

@@ -5,7 +5,7 @@ import {
   Form,
   NumberField,
   PageHeader,
-  RichTextEditor,
+  RichText,
   Select,
   SelectItem,
   TextField,
@@ -335,11 +335,7 @@ function AdminQuestDetailRoute() {
             Add URL
           </Button>
         </div>
-        <RichTextEditor
-          markdown={content}
-          onChange={setContent}
-          showReadingScore
-        />
+        <RichText initialContent={content} onChange={setContent} />
         <div className="flex gap-2 justify-end">
           <Button type="submit" variant="primary">
             Save