From 732d91f838330fb9979d45f370ff032adfd46367 Mon Sep 17 00:00:00 2001
From: Dinesh Kumar Sutihar <110833165+dineshsutihar@users.noreply.github.com>
Date: Thu, 24 Oct 2024 12:31:48 +0530
Subject: [PATCH 1/3] feat: Ensure the article appears exactly as it will when
 published #1102 (#1153)

* feat: Ensure the article appears exactly as it will when published

* Update package-lock.json to fix dependency issues

* Refactor JSON parsing to optimize performance by parsing 'post.body' only once

* fix: add DOMPurify for sanitizing HTML to prevent XSS attacks

* fix: align pre-publish editor design to match post-publish article appearance

* refactor: remove unnecessary divs and clean up code without affecting layout
---
 .../alpha/new/[[...postIdArr]]/_client.tsx    | 111 ++--
 app/(app)/articles/[slug]/page.tsx            |  52 +-
 components/editor/editor/RenderPost.tsx       |   3 +-
 components/editor/editor/extensions/index.tsx |   1 -
 package-lock.json                             | 491 +++++++++++++++++-
 package.json                                  |   2 +
 6 files changed, 588 insertions(+), 72 deletions(-)

diff --git a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
index 3dc3bbaf..69074792 100644
--- a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
+++ b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
@@ -10,7 +10,6 @@ import {
 } from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import Editor from "@/components/editor/editor";
-import RenderPost from "@/components/editor/editor/RenderPost";
 import useCreatePage from "@/hooks/useCreatePage";
 import { usePrompt } from "@/components/PromptService";
 
@@ -214,69 +213,57 @@ const Create = () => {
             <div className="z-60 absolute bottom-0 left-0 right-0 top-0 bg-black opacity-25" />
           </div>
         )}
-        <div className="bg-black">
-          <div className="mx-auto w-full max-w-7xl flex-grow text-black lg:flex xl:px-8">
-            {/* Left sidebar & main wrapper */}
-            <div className="min-w-0 flex-1 xl:flex">
-              <div className="lg:min-w-0 lg:flex-1">
-                <div className="h-full min-h-[40rem] px-4 py-0 sm:px-6 lg:px-4 lg:py-6">
-                  {/* Start main area*/}
-                  <div className="relative h-full">
-                    <div className="bg-neutral-900 text-white shadow-xl">
-                      <div className="bg-neutral-900 px-4 py-6 sm:p-6 lg:pb-8">
-                        {!body && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={"{}"} />
-                            )}
-                          />
-                        )}
-                        {body && body.length > 0 && (
-                          <Controller
-                            name="body"
-                            control={control}
-                            render={({ field }) => (
-                              <Editor {...field} initialValue={body} />
-                            )}
-                          />
-                        )}
+        <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
+          <div className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
+            {!body && (
+              <Controller
+                name="body"
+                control={control}
+                render={({ field }) => (
+                  <Editor {...field} initialValue={"{}"} />
+                )}
+              />
+            )}
+            {body && body.length > 0 && (
+              <Controller
+                name="body"
+                control={control}
+                render={({ field }) => (
+                  <Editor {...field} initialValue={body} />
+                )}
+              />
+            )}
 
-                        <div className="flex items-center justify-between">
-                          <>
-                            {saveStatus === "loading" && <p>Auto-saving...</p>}
-                            {saveStatus === "error" && savedTime && (
-                              <p className="text-xs text-red-600 lg:text-sm">
-                                {`Error saving, last saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                            {saveStatus === "success" && savedTime && (
-                              <p className="text-xs text-neutral-400 lg:text-sm">
-                                {`Saved: ${savedTime.toString()}`}
-                              </p>
-                            )}
-                          </>
-                          <div />
-
-                          <div className="flex">
-                            <button
-                              type="button"
-                              disabled={isDisabled}
-                              className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
-                              onClick={() => setOpen(true)}
-                            >
-                              {!data?.published && "Publish"}
-                              {data?.published && "Save Changes"}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  {/* End main area */}
-                </div>
+            <div className="flex items-center justify-between">
+              <div>
+                {saveStatus === "loading" && (
+                  <p className="text-xs lg:text-sm">Auto-saving...</p>
+                )}
+                {saveStatus === "error" && savedTime && (
+                  <p className="text-xs text-red-600 lg:text-sm">
+                    Error saving, last saved: {savedTime.toString()}
+                  </p>
+                )}
+                {saveStatus === "success" && savedTime && (
+                  <p className="text-xs text-neutral-400 lg:text-sm">
+                    Saved: {savedTime.toString()}
+                  </p>
+                )}
               </div>
+
+              <button
+                type="button"
+                disabled={isDisabled}
+                className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:from-orange-300 hover:to-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 disabled:opacity-50"
+                onClick={() => setOpen(true)}
+                aria-label={
+                  data?.published
+                    ? "Save changes to document"
+                    : "Publish document"
+                }
+              >
+                {data?.published ? "Save Changes" : "Publish"}
+              </button>
             </div>
           </div>
         </div>
diff --git a/app/(app)/articles/[slug]/page.tsx b/app/(app)/articles/[slug]/page.tsx
index 3905f723..88a8f58d 100644
--- a/app/(app)/articles/[slug]/page.tsx
+++ b/app/(app)/articles/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import type { RenderableTreeNode } from "@markdoc/markdoc";
 import Markdoc from "@markdoc/markdoc";
 import Link from "next/link";
 import BioBar from "@/components/BioBar/BioBar";
@@ -13,6 +14,10 @@ import ArticleAdminPanel from "@/components/ArticleAdminPanel/ArticleAdminPanel"
 import { type Metadata } from "next";
 import { getPost } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
+import { generateHTML } from "@tiptap/html";
+import { TiptapExtensions } from "@/components/editor/editor/extensions";
+import DOMPurify from "isomorphic-dompurify";
+import type { JSONContent } from "@tiptap/core";
 
 type Props = { params: { slug: string } };
 
@@ -57,6 +62,20 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+const parseJSON = (str: string): JSONContent | null => {
+  try {
+    return JSON.parse(str);
+  } catch (e) {
+    return null;
+  }
+};
+
+const renderSanitizedTiptapContent = (jsonContent: JSONContent) => {
+  const rawHtml = generateHTML(jsonContent, [...TiptapExtensions]);
+  // Sanitize the HTML
+  return DOMPurify.sanitize(rawHtml);
+};
+
 const ArticlePage = async ({ params }: Props) => {
   const session = await getServerAuthSession();
   const { slug } = params;
@@ -66,11 +85,24 @@ const ArticlePage = async ({ params }: Props) => {
   const post = await getPost({ slug });
 
   if (!post) {
-    notFound();
+    return notFound();
   }
 
-  const ast = Markdoc.parse(post.body);
-  const content = Markdoc.transform(ast, config);
+  const parsedBody = parseJSON(post.body);
+  const isTiptapContent = parsedBody?.type === "doc";
+
+  let renderedContent: string | RenderableTreeNode;
+
+  if (isTiptapContent && parsedBody) {
+    const jsonContent = parsedBody;
+    renderedContent = renderSanitizedTiptapContent(jsonContent);
+  } else {
+    const ast = Markdoc.parse(post.body);
+    const transformedContent = Markdoc.transform(ast, config);
+    renderedContent = Markdoc.renderers.react(transformedContent, React, {
+      components: markdocComponents,
+    }) as unknown as string;
+  }
 
   return (
     <>
@@ -83,10 +115,16 @@ const ArticlePage = async ({ params }: Props) => {
       />
       <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
         <article className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
-          <h1>{post.title}</h1>
-          {Markdoc.renderers.react(content, React, {
-            components: markdocComponents,
-          })}
+          {!isTiptapContent && <h1>{post.title}</h1>}
+
+          {isTiptapContent ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: renderedContent }}
+              className="tiptap-content"
+            />
+          ) : (
+            <div>{renderedContent}</div>
+          )}
         </article>
         {post.tags.length > 0 && (
           <section className="flex flex-wrap gap-3">
diff --git a/components/editor/editor/RenderPost.tsx b/components/editor/editor/RenderPost.tsx
index 3bd1e912..c184e660 100644
--- a/components/editor/editor/RenderPost.tsx
+++ b/components/editor/editor/RenderPost.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { TiptapExtensions } from "./extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
+import SlashCommand from "./extensions/slash-command";
 
 interface RenderPostProps {
   json: string;
@@ -11,7 +12,7 @@ const RenderPost = ({ json }: RenderPostProps) => {
 
   const editor = useEditor({
     editable: false,
-    extensions: [...TiptapExtensions],
+    extensions: [...TiptapExtensions, SlashCommand],
     content,
   });
 
diff --git a/components/editor/editor/extensions/index.tsx b/components/editor/editor/extensions/index.tsx
index 5965c3d2..220a650d 100644
--- a/components/editor/editor/extensions/index.tsx
+++ b/components/editor/editor/extensions/index.tsx
@@ -138,7 +138,6 @@ export const TiptapExtensions = [
       return "type / to see a list of formatting features";
     },
   }),
-  SlashCommand,
   TextStyle,
   Link.configure({
     HTMLAttributes: {
diff --git a/package-lock.json b/package-lock.json
index 358ab319..fa5fb01c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "@tiptap/extension-typography": "^2.8.0",
         "@tiptap/extension-underline": "^2.6.6",
         "@tiptap/extension-youtube": "^2.6.6",
+        "@tiptap/html": "^2.8.0",
         "@tiptap/pm": "^2.5.1",
         "@tiptap/react": "^2.6.6",
         "@tiptap/starter-kit": "^2.6.6",
@@ -62,6 +63,7 @@
         "framer-motion": "^11.11.4",
         "highlight.js": "^11.10.0",
         "holy-loader": "^2.3.1",
+        "isomorphic-dompurify": "^2.16.0",
         "lowlight": "^3.1.0",
         "lucide-react": "^0.451.0",
         "nanoid": "^5.0.7",
@@ -8421,6 +8423,23 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.8.0.tgz",
+      "integrity": "sha512-eOmceeQmJoYk0T6TvmaoPhVLV3yseyb8O/MewoviP1lImcdrYNw/HOifYLG1Ni/g1TzeOvbVyzF1hTJTRzyXYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zeed-dom": "^0.15.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/pm": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.8.0.tgz",
@@ -8611,6 +8630,15 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -8779,6 +8807,12 @@
       "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
       "integrity": "sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg=="
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -9491,6 +9525,12 @@
         "astring": "bin/astring"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -10410,6 +10450,18 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -10590,7 +10642,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       },
@@ -10642,6 +10693,18 @@
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "dev": true
     },
+    "node_modules/cssstyle": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
+      "integrity": "sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==",
+      "license": "MIT",
+      "dependencies": {
+        "rrweb-cssom": "^0.7.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -10653,6 +10716,53 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -10725,6 +10835,12 @@
         }
       }
     },
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
+      "license": "MIT"
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -10818,6 +10934,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -10926,6 +11051,12 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.7.tgz",
+      "integrity": "sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)"
+    },
     "node_modules/domutils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
@@ -12308,6 +12439,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -12817,11 +12962,48 @@
         "react": ">= 16.0.0"
       }
     },
+    "node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/https-proxy-agent": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
@@ -12843,6 +13025,18 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -13262,6 +13456,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "license": "MIT"
+    },
     "node_modules/is-reference": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@@ -13432,6 +13632,20 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isomorphic-dompurify": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/isomorphic-dompurify/-/isomorphic-dompurify-2.16.0.tgz",
+      "integrity": "sha512-cXhX2owp8rPxafCr0ywqy2CGI/4ceLNgWkWBEvUz64KTbtg3oRL2ZRqq/zW0pzt4YtDjkHLbwcp/lozpKzAQjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/dompurify": "^3.0.5",
+        "dompurify": "^3.1.7",
+        "jsdom": "^25.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
@@ -13529,6 +13743,126 @@
       "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.0.tgz",
       "integrity": "sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g=="
     },
+    "node_modules/jsdom": {
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-25.0.1.tgz",
+      "integrity": "sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==",
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.1.0",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.4.3",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.5",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.12",
+        "parse5": "^7.1.2",
+        "rrweb-cssom": "^0.7.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.0.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^2.11.2"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/agent-base": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
+      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/jsdom/node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
+      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
+      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jsdom/node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -15299,6 +15633,12 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nwsapi": {
+      "version": "2.2.13",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
+      "integrity": "sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==",
+      "license": "MIT"
+    },
     "node_modules/oauth": {
       "version": "0.9.15",
       "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
@@ -15646,6 +15986,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
+      "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -17129,6 +17481,12 @@
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
+      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
+      "license": "MIT"
+    },
     "node_modules/rss": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/rss/-/rss-1.2.2.tgz",
@@ -17215,6 +17573,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -17953,6 +18329,12 @@
         "node": ">= 10"
       }
     },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "license": "MIT"
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -18166,6 +18548,24 @@
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
       "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA=="
     },
+    "node_modules/tldts": {
+      "version": "6.1.52",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.52.tgz",
+      "integrity": "sha512-fgrDJXDjbAverY6XnIt0lNfv8A0cf7maTEaZxNykLGsLG7XP+5xhjBTrt/ieAsFjAlZ+G5nmXomLcZDkxXnDzw==",
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.52"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.52",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.52.tgz",
+      "integrity": "sha512-j4OxQI5rc1Ve/4m/9o2WhWSC4jGc4uVbCINdOEJRAraCi0YqTqgMcxUx7DbmuP0G3PCixoof/RZB0Q5Kh9tagw==",
+      "license": "MIT"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -18198,6 +18598,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.0.0.tgz",
+      "integrity": "sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -18713,6 +19125,18 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
@@ -18872,6 +19296,27 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -19109,6 +19554,21 @@
       "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
       "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
     },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "license": "MIT"
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -19144,6 +19604,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zeed-dom": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.15.1.tgz",
+      "integrity": "sha512-dtZ0aQSFyZmoJS0m06/xBN1SazUBPL5HpzlAcs/KcRW0rzadYw12deQBjeMhGKMMeGEp7bA9vmikMLaO4exBcg==",
+      "license": "MIT",
+      "dependencies": {
+        "css-what": "^6.1.0",
+        "entities": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=14.13.1"
+      },
+      "funding": {
+        "type": "GitHub Sponsors ❤",
+        "url": "https://github.com/sponsors/holtwick"
+      }
+    },
+    "node_modules/zeed-dom/node_modules/entities": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-5.0.0.tgz",
+      "integrity": "sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index db35068f..b687eea3 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@tiptap/extension-typography": "^2.8.0",
     "@tiptap/extension-underline": "^2.6.6",
     "@tiptap/extension-youtube": "^2.6.6",
+    "@tiptap/html": "^2.8.0",
     "@tiptap/pm": "^2.5.1",
     "@tiptap/react": "^2.6.6",
     "@tiptap/starter-kit": "^2.6.6",
@@ -80,6 +81,7 @@
     "framer-motion": "^11.11.4",
     "highlight.js": "^11.10.0",
     "holy-loader": "^2.3.1",
+    "isomorphic-dompurify": "^2.16.0",
     "lowlight": "^3.1.0",
     "lucide-react": "^0.451.0",
     "nanoid": "^5.0.7",

From 051f633ec87e4f06c12a212ae82c469eaeb3f0af Mon Sep 17 00:00:00 2001
From: Ayush Gupta <72538480+wolfofdalalst@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:02:55 +0530
Subject: [PATCH 2/3] Remove & replace .fancy-link and .fancy-link:hover
 classes (#1170)

* Remove & replace .fancy-link and .fancy-link:hover classes
---
 app/(app)/get-started/_client.tsx                |  5 ++++-
 app/(editor)/create/[[...paramsArr]]/_client.tsx |  4 ++--
 components/ArticlePreview/ArticlePreview.tsx     |  2 +-
 components/Comments/CommentsArea.tsx             | 10 ++++++++--
 components/EditorHints/EditorHints.tsx           |  4 ++--
 styles/globals.css                               |  8 --------
 6 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/(app)/get-started/_client.tsx b/app/(app)/get-started/_client.tsx
index 0ceb9b56..630c53a6 100644
--- a/app/(app)/get-started/_client.tsx
+++ b/app/(app)/get-started/_client.tsx
@@ -39,7 +39,10 @@ const GetStarted: NextPage = () => {
           </h2>
           <p className="mt-2 text-center text-base text-neutral-500">
             Or{" "}
-            <Link className="fancy-link font-medium" href="/">
+            <Link
+              className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text font-medium tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              href="/"
+            >
               return home
             </Link>
           </p>
diff --git a/app/(editor)/create/[[...paramsArr]]/_client.tsx b/app/(editor)/create/[[...paramsArr]]/_client.tsx
index 40118161..5b1852f9 100644
--- a/app/(editor)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(editor)/create/[[...paramsArr]]/_client.tsx
@@ -794,7 +794,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       this
                     </a>{" "}
@@ -803,7 +803,7 @@ const Create = ({ session }: { session: Session | null }) => {
                       href="https://www.markdownguide.org/"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="fancy-link"
+                      className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
                     >
                       markdownguide
                     </a>
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 930a49f3..6b4a8635 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -158,7 +158,7 @@ const ArticlePreview: NextPage<Props> = ({
       <div className="flex w-full content-center justify-between">
         <div className="flex w-full items-center justify-between">
           <Link
-            className="fancy-link semibold text-lg"
+            className="semibold cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-lg tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
             href={`/articles/${slug}`}
           >
             Read full article
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index b21fa286..6e9e621e 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -505,11 +505,17 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
             <p className="mb-2">Hey! 👋</p>
             <p className="mb-2">Got something to say?</p>
             <p>
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 Sign in
               </button>{" "}
               or{" "}
-              <button onClick={() => signIn()} className="fancy-link">
+              <button
+                onClick={() => signIn()}
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
+              >
                 sign up
               </button>{" "}
               to leave a comment.
diff --git a/components/EditorHints/EditorHints.tsx b/components/EditorHints/EditorHints.tsx
index 12eeb952..3452f92a 100644
--- a/components/EditorHints/EditorHints.tsx
+++ b/components/EditorHints/EditorHints.tsx
@@ -29,7 +29,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 this
               </a>{" "}
@@ -38,7 +38,7 @@ const EditorHints = () => {
                 href="https://www.markdownguide.org/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="fancy-link"
+                className="cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent hover:from-orange-300 hover:to-pink-500"
               >
                 markdownguide
               </a>
diff --git a/styles/globals.css b/styles/globals.css
index 9369387b..ac5849a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,14 +81,6 @@ body {
   @apply bg-white bg-gradient-to-r text-neutral-800 dark:bg-neutral-900 dark:text-white;
 }
 
-.fancy-link {
-  @apply cursor-pointer bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text tracking-wide text-transparent;
-}
-
-.fancy-link:hover {
-  @apply from-orange-300 to-pink-500;
-}
-
 .prose {
   @apply prose-neutral dark:prose-invert lg:prose-lg;
 

From 871253f2f73106429f40e28fac42f24ba3a04c97 Mon Sep 17 00:00:00 2001
From: Carolina Cobo <58437550+CarolinaCobo@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:52:18 +0100
Subject: [PATCH 3/3] Fix class to show bookmarks colors (#1177)

---
 components/ArticleMenu/ArticleMenu.tsx       | 4 ++--
 components/ArticlePreview/ArticlePreview.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/ArticleMenu/ArticleMenu.tsx b/components/ArticleMenu/ArticleMenu.tsx
index faa034fb..b61db888 100644
--- a/components/ArticleMenu/ArticleMenu.tsx
+++ b/components/ArticleMenu/ArticleMenu.tsx
@@ -139,7 +139,7 @@ const ArticleMenu = ({
               }}
             >
               <HeartIcon
-                className={`w-6 h-6${
+                className={`h-6 w-6 ${
                   data?.currentUserLiked
                     ? "fill-red-400"
                     : "fill-neutral-400 dark:fill-neutral-600"
@@ -162,7 +162,7 @@ const ArticleMenu = ({
             }}
           >
             <BookmarkIcon
-              className={`w-6 h-6${
+              className={`h-6 w-6 ${
                 data?.currentUserBookmarked
                   ? "fill-blue-400"
                   : "fill-neutral-400 dark:fill-neutral-600"
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 6b4a8635..fe33136b 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -181,7 +181,7 @@ const ArticlePreview: NextPage<Props> = ({
                 }
               >
                 <BookmarkIcon
-                  className={`w-6 h-6${
+                  className={`h-6 w-6 ${
                     bookmarked
                       ? "fill-blue-400"
                       : "fill-neutral-400 dark:fill-neutral-600"