Make "#{a number}" clickable while rendering an existing issue's description

[DonnieBLT]

[srinitha709]

/assign

[razzasid]

@coderabbitai how do we add this feature according to the current implementation of the issue suggestion in issue.js?

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

Let's look at the content of the issue.js file to understand how issue descriptions are currently rendered:

---

🏁 Script executed:

#!/bin/bash
# Find all files named issue.js in the repository
fd issue.js

Length of output: 40

---

🏁 Script executed:

#!/bin/bash
# Display the content of issue.js
fd issue.js -x cat {}

Length of output: 22361

---

🏁 Script executed:

#!/bin/bash
# Look for HTML templates or view files that might handle issue rendering
# First, find files that might be related to issue display/rendering
fd -t f "issue|description" -e html -e py -e js

Length of output: 2817

---

🏁 Script executed:

#!/bin/bash
# Check how issue descriptions are rendered in HTML templates
cat website/templates/issue.html

Length of output: 21295

---

@razzasid Looking at the code, I can see that there's already functionality for issue suggestions when typing in the textarea, but the issue descriptions display doesn't automatically convert #{number} references to clickable links.

To implement this feature, we need to modify the markdown rendering process in issue.html. Currently, the system uses markdown-it to render issue descriptions:

if (window.markdownit) {
    const md = new window.markdownit();
    const markdownContent = `{{ object.markdown_description|escapejs }}`;
    const renderedHtml = md.render(markdownContent);
    $("#bug_report").html(renderedHtml);
}

Here's how we can add the feature to make #{number} clickable:

if (window.markdownit) {
    const md = new window.markdownit();
    const markdownContent = `{{ object.markdown_description|escapejs }}`;
    let renderedHtml = md.render(markdownContent);
    
    // Post-process the rendered HTML to make issue references clickable
    renderedHtml = renderedHtml.replace(
        /#(\d+)/g,
        '<a href="/issue/$1" class="text-[#e74c3c] hover:text-[#e74c3c]/80 font-medium">#$1</a>'
    );
    
    $("#bug_report").html(renderedHtml);
} else {
    console.error('MarkdownIt library failed to load.');
}

This implementation uses a regex to find all instances of #{number} in the rendered HTML and replaces them with clickable links that match the styling of other links in the application. The links will direct users to the corresponding issue page.