chore: adjust texteditor for precode

Author: mpsalunggg

package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-query": "^5.85.5",
     "@tanstack/react-table": "^8.21.3",
+    "@tiptap/extension-code-block-lowlight": "^3.4.1",
     "@tiptap/extension-horizontal-rule": "^3.4.1",
     "@tiptap/extension-image": "^3.2.0",
     "@tiptap/extension-link": "^3.2.0",
@@ -53,8 +54,10 @@
     "dompurify": "^3.2.6",
     "embla-carousel-autoplay": "^8.2.0",
     "embla-carousel-react": "^8.2.0",
+    "highlight.js": "^11.11.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.536.0",
     "marked": "^16.2.1",
     "motion": "^12.7.4",

pnpm-lock.yaml

@@ -8,14 +8,34 @@ import Typography from "@tiptap/extension-typography";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { createLowlight } from "lowlight";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import css from "highlight.js/lib/languages/css";
+import html from "highlight.js/lib/languages/xml";
+import python from "highlight.js/lib/languages/python";
 import { useState, useCallback, useMemo, useEffect } from "react";
 import { markdownToHtml, htmlToMarkdown } from "./utils";
+import "highlight.js/styles/github-dark.css";
 
 import { Button } from "@/components/ui/Button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Toolbar } from "@/components/common/TextEditor";
 import Loader from "../Loader";
 
+const lowlight = createLowlight();
+
+lowlight.register("js", js);
+lowlight.register("javascript", js);
+lowlight.register("ts", ts);
+lowlight.register("typescript", ts);
+lowlight.register("css", css);
+lowlight.register("html", html);
+lowlight.register("xml", html);
+lowlight.register("python", python);
+lowlight.register("py", python);
+
 interface TextEditorProps {
   markdownOutput?: boolean;
   value?: string;
@@ -29,7 +49,12 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
 
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      StarterKit.configure({
+        codeBlock: false,
+      }),
+      CodeBlockLowlight.configure({
+        lowlight,
+      }),
       Underline,
       Typography,
       HorizontalRule,
@@ -57,14 +82,12 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
       const html = editor.getHTML();
       const markdown = htmlToMarkdown(html);
       setMarkdownContent(markdown);
-      onChange?.(html);
-      console.log("markdown: ", markdown);
-      console.log("html: ", html);
+      onChange?.(htmlToMarkdown(html));
     },
     editorProps: {
       attributes: {
         class:
-          "prose prose-md 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 prose-p:my-1 prose-h1:my-2 prose-h2:my-2 prose-h3:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-hr:my-3",
+          "prose prose-md 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:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:border prose-pre:p-3 prose-p:my-1 prose-h1:my-2 prose-h2:my-2 prose-h3:my-1 prose-ul:my-1 prose-ol:my-1 prose-li:my-0 prose-hr:my-3",
       },
     },
   });
@@ -98,18 +121,6 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
     input.click();
   }, [editor]);
 
-  const downloadMarkdown = useCallback(() => {
-    const blob = new Blob([markdownContent], { type: "text/markdown" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "document.md";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  }, [markdownContent]);
-
   const addLink = useCallback(() => {
     if (!editor) return;
 
@@ -129,8 +140,13 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
   }, [editor]);
 
   useEffect(() => {
-    if (editor && htmlContent !== undefined && editor.getHTML() !== htmlContent) {
-      editor.commands.setContent(htmlContent);
+    if (editor && htmlContent !== undefined) {
+      const currentMarkdown = htmlToMarkdown(editor.getHTML());
+      const incomingMarkdown = htmlToMarkdown(htmlContent);
+
+      if (currentMarkdown !== incomingMarkdown && !editor.isFocused) {
+        editor.commands.setContent(htmlContent);
+      }
     }
   }, [editor, htmlContent]);
 
@@ -147,7 +163,7 @@ const TextEditor = ({ markdownOutput = false, value, onChange }: TextEditorProps
             onAddImage={addImage}
             onAddImageFromFile={addImageFromFile}
             onAddLink={addLink}
-            onDownloadMarkdown={downloadMarkdown}
+            // onDownloadMarkdown={downloadMarkdown}
             isDownloadDisabled={!markdownContent}
           />
         </CardHeader>

src/components/common/TextEditor/TextEditor.tsx

@@ -15,7 +15,6 @@ import {
   Code2,
   Undo,
   Redo,
-  Download,
   ExternalLink,
   Minus,
 } from "lucide-react";
@@ -27,7 +26,7 @@ interface ToolbarProps {
   onAddImage: () => void;
   onAddImageFromFile: () => void;
   onAddLink: () => void;
-  onDownloadMarkdown: () => void;
+  // onDownloadMarkdown: () => void;
   isDownloadDisabled: boolean;
 }
 
@@ -36,8 +35,8 @@ const Toolbar = ({
   onAddImage,
   onAddImageFromFile,
   onAddLink,
-  onDownloadMarkdown,
-  isDownloadDisabled,
+  // onDownloadMarkdown,
+  // isDownloadDisabled,
 }: ToolbarProps) => {
   return (
     <div className="flex flex-wrap items-center gap-1 rounded-lg p-1">
@@ -191,12 +190,11 @@ const Toolbar = ({
 
       <Separator orientation="vertical" className="h-6" />
 
-      {/* Export */}
-      <div className="flex items-center gap-1">
+      {/* <div className="flex items-center gap-1">
         <ToolbarButton onClick={onDownloadMarkdown} title="Download as Markdown" disabled={isDownloadDisabled}>
           <Download className="h-4 w-4" />
         </ToolbarButton>
-      </div>
+      </div> */}
     </div>
   );
 };

src/components/common/TextEditor/Toolbar.tsx

@@ -2,10 +2,15 @@ import { marked } from "marked";
 import TurndownService from "turndown";
 import DOMPurify from "dompurify";
 
-// Configure Turndown for consistent markdown output
-const turndownService = new TurndownService();
+const turndownService = new TurndownService({
+  codeBlockStyle: "fenced",
+  headingStyle: "atx",
+  hr: "---",
+  bulletListMarker: "-",
+  emDelimiter: "*",
+  strongDelimiter: "**",
+});
 
-// Custom rule for underline tags
 turndownService.addRule("underline", {
   filter: "u",
   replacement: (content) => `<u>${content}</u>`,
@@ -19,18 +24,11 @@ turndownService.addRule("underline", {
 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) as string;
+    const html = marked(markdown) 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);
@@ -47,30 +45,11 @@ export const htmlToMarkdown = (html: string): string => {
   if (!html) return "";
 
   try {
-    // Sanitize HTML before converting to markdown
-    // const sanitizedHtml = DOMPurify.sanitize(html as string);
+    const sanitizedHtml = DOMPurify.sanitize(html as string);
 
-    return turndownService.turndown(html);
+    return turndownService.turndown(sanitizedHtml);
   } 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

@@ -16,7 +16,7 @@ import { Switch } from "@/components/ui/Switch";
 import TextEditor from "@/components/common/TextEditor/TextEditor";
 import { cn, generateSlug } from "@/lib/utils";
 import { createEventFormSchema, EventFormType } from "@/domains/Events";
-import { eventTypes } from "../constants";
+import { eventTypes, eventStatuses } from "../constants";
 import { useState, useEffect } from "react";
 import Badge from "@/components/ui/Badge";
 
@@ -198,10 +198,11 @@ const EventForm = ({ onSubmit, isLoading = false, initialData, mode = "create" }
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="coming soon">{t("options.status.coming-soon")}</SelectItem>
-                        <SelectItem value="open">{t("options.status.open")}</SelectItem>
-                        <SelectItem value="closed">{t("options.status.closed")}</SelectItem>
-                        <SelectItem value="cancelled">{t("options.status.cancelled")}</SelectItem>
+                        {eventStatuses.map((status) => (
+                          <SelectItem key={status.value} value={status.value}>
+                            {status.label}
+                          </SelectItem>
+                        ))}
                       </SelectContent>
                     </Select>
                     <FormMessage />

src/features/events/components/EventForm.tsx

@@ -120,6 +120,13 @@ export const eventTypes = [
   { value: "Bootcamp", label: "Bootcamp" },
 ];
 
+export const eventStatuses = [
+  { value: "coming soon", label: "Coming Soon" },
+  { value: "open", label: "Open" },
+  { value: "closed", label: "Closed" },
+  { value: "cancelled", label: "Cancelled" },
+];
+
 export const eventsInfo: EventInfoType[] = [
   {
     id: 1,