From 86080103c42552055266a59b5d17ebf16bfcf3e5 Mon Sep 17 00:00:00 2001
From: Bakhtiyor Ganijon <b.yusupoff001@gmail.com>
Date: Sun, 5 Nov 2023 03:20:59 +0900
Subject: [PATCH] Add syntax highlighting to code blocks in post editor form.

---
 app/editor/[posturl]/page.tsx          |  7 +++++++
 components/editor/post-editor-form.tsx | 26 +++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/editor/[posturl]/page.tsx b/app/editor/[posturl]/page.tsx
index 4ff37ef1..bf743be9 100644
--- a/app/editor/[posturl]/page.tsx
+++ b/app/editor/[posturl]/page.tsx
@@ -11,6 +11,13 @@ async function getPostForUser(postUrl: Post['url'], userId: User["id"]) {
       url: postUrl,
       authorId: userId,
     },
+    include: {
+      tags: {
+        include: {
+          tag: true,
+        },
+      }
+      },
   })
 }
 
diff --git a/components/editor/post-editor-form.tsx b/components/editor/post-editor-form.tsx
index 88adc333..4d37ccb8 100644
--- a/components/editor/post-editor-form.tsx
+++ b/components/editor/post-editor-form.tsx
@@ -36,6 +36,23 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Icons } from "../icon"
 import { useRouter } from "next/navigation"
 import Markdown from "markdown-to-jsx";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus, vs, prism, oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+const components = {
+  code({className, children,}: { className: string, children: any }) {
+      let lang = 'text'; // default monospaced text
+if (className && className.startsWith('lang-')) {
+lang = className.replace('lang-', '');
+}
+      console.log(lang);
+return (
+ <SyntaxHighlighter style={oneDark} language={lang} >
+      {children}
+ </SyntaxHighlighter>
+)
+}
+}
 
 export function PostEditorForm(props: {  post: any, user: any }) {
   const router = useRouter();
@@ -68,6 +85,7 @@ export function PostEditorForm(props: {  post: any, user: any }) {
 
   
   type PostFormValues = z.infer<typeof postFormSchema>
+  console.log(props.post)
   // This can come from your database or API.
 const defaultValues: Partial<PostFormValues> = {
   title: props.post?.title,
@@ -261,7 +279,13 @@ const defaultValues: Partial<PostFormValues> = {
           /></TabsContent>
           <TabsContent value="preview" className="px-5 pb-5 bg-popover py-4 text-sm rounded-md">
           <article className="article__content markdown-body">
-                              <Markdown>{markdownContent}</Markdown>
+                              <Markdown options={{
+                                   overrides: {
+                                        code: {
+                                             component: components.code,
+                                        },
+                                   },
+                              }}>{markdownContent}</Markdown>
                               {/* <div dangerouslySetInnerHTML={{ __html: post?.content }} className="markdown-body" /> */}
                          </article>
           </TabsContent>