Let's say that I make a GET request in the deployed Swagger Docs. The response contains URLs (for example, the URLs of certain images). I want to make those URLs clickable in the Swagger API. How can you do that?
I have tried to edit the DOM in the response interceptor:
requestInterceptor: (response) => {
setTimeout( /* function that converts URLs to <a> tags */, 50);
return response;
}
But, oddly enough, it only works for the first time I send the GET request. I cannot believe that this is so complicated or that I am the first one who wants this feature. How are you guys doing it? Thanks!
EDIT: For the sake of completeness, here is how I am manipulating the DOM in the setTimeout callback:
const urlRegex = /* regex matching specific URLs from my domain */
const removeQuotes = (str: string) => str.replaceAll('"', "");
const urls = Array.from(document.querySelectorAll("span"))
.filter((span) => span.innerText.match(urlRegex))
.forEach((span) => {
const innerTextWithoutQuotes = removeQuotes(span.innerText);
span.innerHTML = `"<a style="color: rgb(162,252,162)"
target="_blank"
href="${innerTextWithoutQuotes}"
>${innerTextWithoutQuotes}</a>"`;
});