feat: create reusable ui for update and create events

Author: mpsalunggg

package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.85.5",
@@ -48,11 +49,13 @@
     "clsx": "^2.1.1",
     "cookie": "^1.0.2",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.2.6",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lucide-react": "^0.536.0",
+    "marked": "^16.2.1",
     "motion": "^12.7.4",
     "next": "15.3.2",
     "next-intl": "^4.1.0",

pnpm-lock.yaml

@@ -7,34 +7,23 @@ import Underline from "@tiptap/extension-underline";
 import Typography from "@tiptap/extension-typography";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
-import { useState, useCallback, useMemo } from "react";
-import TurndownService from "turndown";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { markdownToHtml, htmlToMarkdown } from "./utils";
 
 import { Button } from "@/components/ui/Button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Toolbar } from "@/components/common/TextEditor";
 
 interface TextEditorProps {
   markdownOutput?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
-const TextEditor = ({ markdownOutput = false }: TextEditorProps) => {
+const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps) => {
   const [markdownContent, setMarkdownContent] = useState("");
 
-  const turndownService = useMemo(() => {
-    const service = new TurndownService({
-      headingStyle: "atx",
-      codeBlockStyle: "fenced",
-    });
-
-    // Custom rule for underline tags
-    service.addRule("underline", {
-      filter: "u",
-      replacement: (content) => `<u>${content}</u>`,
-    });
-
-    return service;
-  }, []);
+  const htmlContent = useMemo(() => markdownToHtml(value || ""), [value]);
 
   const editor = useEditor({
     extensions: [
@@ -55,20 +44,24 @@ const TextEditor = ({ markdownOutput = false }: TextEditorProps) => {
         allowBase64: true,
       }),
     ],
-    content: "",
+    content: htmlContent,
     immediatelyRender: false,
     onCreate: ({ editor }) => {
       const html = editor.getHTML();
-      setMarkdownContent(turndownService.turndown(html));
+      setMarkdownContent(htmlToMarkdown(html));
     },
     onUpdate: ({ editor }) => {
       const html = editor.getHTML();
-      setMarkdownContent(turndownService.turndown(html));
+      const markdown = htmlToMarkdown(html);
+      setMarkdownContent(markdown);
+      onChange?.(html);
+      console.log("markdown: ", markdown);
+      console.log("html: ", html);
     },
     editorProps: {
       attributes: {
         class:
-          "prose dark:prose-invert max-w-none mx-auto focus:outline-none min-h-[300px] p-3 prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:border prose-pre:text-foreground",
+          "prose dark:prose-invert max-w-none mx-auto focus:outline-none max-h-[300px] p-3 prose-blockquote:border-primary prose-blockquote:bg-muted/50 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:before:content-none prose-blockquote:not-italic prose-code:bg-muted prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-muted prose-pre:border prose-pre:text-foreground prose-pre:p-3",
       },
     },
   });
@@ -132,6 +125,12 @@ const TextEditor = ({ markdownOutput = false }: TextEditorProps) => {
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   }, [editor]);
 
+  useEffect(() => {
+    if (editor && htmlContent !== undefined && editor.getHTML() !== htmlContent) {
+      editor.commands.setContent(htmlContent);
+    }
+  }, [editor, htmlContent]);
+
   if (!editor) {
     return (
       <div className="flex h-64 items-center justify-center">

src/components/common/TextEditor/TextEditor.tsx

@@ -11,6 +11,7 @@ interface ToolbarButtonProps {
 
 const ToolbarButton = ({ onClick, isActive, disabled, children, title, variant = "outline" }: ToolbarButtonProps) => (
   <Button
+    type="button"
     onClick={onClick}
     disabled={disabled}
     title={title}

src/components/common/TextEditor/ToolbarButton.tsx

@@ -0,0 +1,84 @@
+import { marked } from "marked";
+import TurndownService from "turndown";
+import DOMPurify from "dompurify";
+
+// Configure marked for clean HTML output compatible with Tiptap
+const markedOptions = {
+  breaks: true,
+  gfm: true,
+  headerIds: false,
+  mangle: false,
+};
+
+// Configure Turndown for consistent markdown output
+const turndownService = new TurndownService();
+
+// Custom rule for underline tags
+turndownService.addRule("underline", {
+  filter: "u",
+  replacement: (content) => `<u>${content}</u>`,
+});
+
+/**
+ * Convert markdown to clean HTML compatible with Tiptap
+ * @param markdown - The markdown string to convert
+ * @returns Clean HTML string
+ */
+export const markdownToHtml = (markdown: string): string => {
+  if (!markdown) return "";
+
+  // If it's already HTML, sanitize and return
+  if (markdown.includes("<") && markdown.includes(">")) {
+    return DOMPurify.sanitize(markdown as string);
+  }
+
+  try {
+    const html = marked.parse(markdown, markedOptions) as string;
+
+    // Sanitize HTML with DOMPurify
+    const sanitizedHtml = DOMPurify.sanitize(html as string);
+
+    // Clean up HTML to be more compatible with Tiptap
+    return sanitizedHtml;
+  } catch (error) {
+    console.error("Error parsing markdown:", error);
+    return markdown;
+  }
+};
+
+/**
+ * Convert HTML to clean markdown
+ * @param html - The HTML string to convert
+ * @returns Clean markdown string
+ */
+export const htmlToMarkdown = (html: string): string => {
+  if (!html) return "";
+
+  try {
+    // Sanitize HTML before converting to markdown
+    // const sanitizedHtml = DOMPurify.sanitize(html as string);
+
+    return turndownService.turndown(html);
+  } catch (error) {
+    console.error("Error converting HTML to markdown:", error);
+    return html;
+  }
+};
+
+/**
+ * Initialize Tiptap content from markdown
+ * @param markdown - The markdown content
+ * @returns HTML content ready for Tiptap editor
+ */
+export const initTiptapContent = (markdown: string): string => {
+  return markdownToHtml(markdown);
+};
+
+/**
+ * Process Tiptap content to markdown for storage
+ * @param html - The HTML content from Tiptap editor
+ * @returns Clean markdown for storage
+ */
+export const processTiptapContent = (html: string): string => {
+  return htmlToMarkdown(html);
+};

src/components/common/TextEditor/utils.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

src/components/ui/Switch/index.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };