diff --git a/packages/typescriptlang-org/src/templates/play.tsx b/packages/typescriptlang-org/src/templates/play.tsx index a771c49c6fb2..d22b956618ad 100644 --- a/packages/typescriptlang-org/src/templates/play.tsx +++ b/packages/typescriptlang-org/src/templates/play.tsx @@ -111,7 +111,30 @@ const Play: React.FC = (props) => { div.style.webkitAnimation = "" }) - document.getElementById("loading-message")!.innerHTML = `This version of TypeScript (${tsVersion?.replace(/
has not been prepared for the Playground

Try ${latestRelease} or Nightly` + const loadingMessage = document.getElementById("loading-message")! + loadingMessage.textContent = "" + + const em = document.createElement("em") + em.textContent = `(${tsVersion})` + + const latestReleaseLink = document.createElement('a'); + latestReleaseLink.href = `/play?ts=${latestRelease}${document.location.hash}`; + latestReleaseLink.textContent = latestRelease; + + const nightlyLink = document.createElement('a'); + nightlyLink.href = `/play?ts=next${document.location.hash}`; + nightlyLink.textContent = 'Nightly'; + + loadingMessage.appendChild(document.createTextNode("This version of TypeScript ")) + loadingMessage.appendChild(em) + loadingMessage.appendChild(document.createElement("br")) + loadingMessage.appendChild(document.createTextNode("has not been prepared for the Playground")) + loadingMessage.appendChild(document.createElement("br")) + loadingMessage.appendChild(document.createElement("br")) + loadingMessage.appendChild(document.createTextNode("Try ")) + loadingMessage.appendChild(latestReleaseLink) + loadingMessage.appendChild(document.createTextNode(" or ")) + loadingMessage.appendChild(nightlyLink) return }