From 920c333210e4bbf3961651b5bbf9e2982dd7ab4f Mon Sep 17 00:00:00 2001
From: Caitlin Lee <lee.c18@northeastern.edu>
Date: Tue, 14 Apr 2026 03:06:33 -0400
Subject: [PATCH] WEB-45 Added a link, unlink button to RichTextComponent

---
 src/components/puck/blocks/rich-text.tsx | 31 +++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/puck/blocks/rich-text.tsx b/src/components/puck/blocks/rich-text.tsx
index 0685409..9549179 100644
--- a/src/components/puck/blocks/rich-text.tsx
+++ b/src/components/puck/blocks/rich-text.tsx
@@ -1,4 +1,6 @@
+"use client";
 import type { ComponentConfig, RichText } from "@puckeditor/core";
+import { RichTextMenu } from "@puckeditor/core";
 import { cn } from "@/lib/utils";
 import { defineProps, field, responsive } from "@/lib/puck/define-props";
 import { resolveResponsive } from "@/lib/puck/responsive-tailwind";
@@ -27,7 +29,33 @@ type RichTextProps = {
 
 const props = defineProps({
   content: field.raw(
-    { type: "richtext", contentEditable: true },
+    { type: "richtext",
+      contentEditable: true,
+      tiptap: {
+        selector: ({ editor }: { editor?: any }) => ({
+          isLink: editor?.isActive("link"),
+        }),
+      },
+      renderMenu: ({ children, editor, editorState }: { children?: any; editor?: any; editorState?: any }) => (
+        <RichTextMenu>
+          {children}
+          <RichTextMenu.Group>
+            <button
+              onClick={() => {
+                if (editorState?.isLink) {
+                  editor?.chain().focus().unsetLink().run();
+                } else {
+                  const url = window.prompt("Enter URL");
+                  if (url) editor?.chain().focus().setLink({ href: url }).run();
+                }
+              }}
+            >
+              {editorState?.isLink ? "Unlink" : "Link"}
+            </button>
+          </RichTextMenu.Group>
+        </RichTextMenu>
+      ),
+    },
     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
   ),
   textColor: field.select(textColor, { label: "Text color", default: "foreground" }),
@@ -44,6 +72,7 @@ export const RichTextComponent: ComponentConfig<RichTextProps> = {
     return (
       <div className={cn(
         "prose max-w-none",
+        "[&_a]:text-sga-red [&_a]:underline",
         textColor.classes[tc],
         textAlign.classes[align],
         lineSpacing.classes[ls],