Skip to content

Commit

Permalink
added tag-question-ref in answer create
Browse files Browse the repository at this point in the history
  • Loading branch information
asligook committed Dec 6, 2024
1 parent 06bf7b1 commit 72a49b1
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 1 deletion.
15 changes: 14 additions & 1 deletion frontend/src/components/CreateAnswerForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import { queryKeyFn } from "@/services/api/programmingForumContext";
import { useQueryClient } from "@tanstack/react-query";
import { Info, Pen } from "lucide-react";
import { useState } from "react";
import ReactMarkdown from "react-markdown";
import SyntaxHighlighter from "react-syntax-highlighter";
import { ContentWithSnippets } from "./ContentWithSnippets";
import CustomAnchor from "./CustomAnchor";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";

interface CreateAnswerFormProps {
Expand Down Expand Up @@ -112,7 +114,18 @@ export function CreateAnswerForm({ questionId }: CreateAnswerFormProps) {

{isPreviewMode ? (
<div className="min-h-[200px] rounded-lg border border-gray-300 bg-white p-4">
<ContentWithSnippets content={content} />
<div>
{" "}
<ContentWithSnippets content={content} />
</div>
{/* Render ReactMarkdown for the rest of the content */}
<ReactMarkdown
components={{
a: CustomAnchor,
}}
>
{content}
</ReactMarkdown>
</div>
) : (
<Textarea
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/components/CustomAnchor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from "react";
import { useNavigate } from "react-router-dom";

interface CustomAnchorProps {
href?: string;
children: React.ReactNode;
}

const CustomAnchor: React.FC<CustomAnchorProps> = ({ href, children }) => {
const navigate = useNavigate();

// Return a plain span if href is not provided
if (!href) return <span>{children}</span>;

// Extract tag or question ID from the href
const tagMatch = href.match(/^#tag-(\d+)$/);
const questionMatch = href.match(/^#q-(\d+)$/);

// Handle click event for navigation
const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
e.preventDefault();
if (tagMatch) {
const tagId = tagMatch[1];
navigate(`/tag/${tagId}`); // Navigate to the tag page
} else if (questionMatch) {
const questionId = questionMatch[1];
navigate(`/question/${questionId}`); // Navigate to the question page
}
};

// Display tooltip as title directly on the anchor for now, without async fetching
return (
<a
href={href}
onClick={handleClick}
className="text-blue-500 underline"
title={tagMatch ? `Tag: ${tagMatch[1]}` : questionMatch ? `Question: ${questionMatch[1]}` : "Loading..."}
>
{children}
</a>
);
};

export default CustomAnchor;

0 comments on commit 72a49b1

Please sign in to comment.