Add TypeScript Playground link support

[Copilot]

Enables rendering TypeScript Playground URLs as syntax-highlighted code blocks, matching existing GitHub permalink functionality. Addresses issue #104.

Implementation

Core Components:

• parseTypeScriptPlaygroundUrl() - Extracts LZ-compressed code and line metadata from playground URLs
• defaultGetTypeScriptPlaygroundFn() - Decompresses playground code using lz-string library
• TypeScriptPlayground / TypeScriptPlaygroundBase / TypeScriptPlaygroundRsc - Client, base, and RSC component variants following existing permalink patterns

Security:

• Exact hostname validation (typescriptlang.org only) to prevent domain spoofing
• No vulnerabilities in [email protected] dependency

Usage

import { TypeScriptPlayground } from 'react-github-permalink';
import "react-github-permalink/dist/github-permalink.css";

<TypeScriptPlayground playgroundUrl="https://www.typescriptlang.org/play/?ssl=44&ssc=1#code/C4TwDgpgBA..." />

RSC variant:

import { TypeScriptPlaygroundRsc } from 'react-github-permalink/dist/rsc';

Screenshots

Component rendering with TypeScript errors visible in comments:

Shows TypeScript logo, line numbers from specified start line, copy button, and link to original playground.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: next-server (v15.3.4) (dns block)
• storybook.js.org
  • Triggering command: node /home/REDACTED/work/react-github-permalink/react-github-permalink/node_modules/.bin/storybook build (dns block)
  • Triggering command: node /home/REDACTED/work/react-github-permalink/react-github-permalink/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>TypeScript playground link.</issue_title>
<issue_description>I should be able to post a link to a TypeScript playground like

https://www.typescriptlang.org/play/?ssl=44&ssc=1&pln=8&pc=1#code/C4TwDgpgBASg9gdwCIENgqgXlhAxnAJwBMAeAZ2AIEsA7AcwBooBXGgaxsRoD4oAyKAG8oVIgC4oFavSgBfANwAoRaEhQAwnAA2zALY1U6EgBV4yNBggAPYBBpEysRIZRNjAaQggo12-cdsXnAAZlCmzha82IKKUHFQgSASHl6x8QR2RBAELhIAFABuKDoQyWYuANopIAC6AJRYvFK0dEqyysGsuMBUcDRQYARwuBBkZMYoAEZaECblFj42mY7z6G6e3r7LCUGh4ebo3HlDCBIAggQEKCBzEYdM+Dr655fXJJpPBha3B65hG9xuA0Yop2spBsNRuMpjM8mk4hUYvFkSJxFAAEQARgATABmdEMeEolASTGElHxSYSJEUlFWUnk2nIpJQbFE5HtDk1JiI9nxRISdEoAl8uIZezZXJQQrFZgQBqYXg0plxAD0qulYBQV10EFsBAaRRKEhoekm2SgAB8hKKUeq6SazdklCr4vbmY7dOaCC7XVB7Zy-RlgMwCP0AAYAEkERrlsnDvopgbiskZcWVKIFGMmIqZ4qyOQs+Vj8saNttyPteS1Or12UNstKUFNXot1ozTPd8XpzadPorbo1Ht7rf7fv9GuTKvVAAUhpACKAoAByKzLqBEOCjZtwYCLKgUKB9KCqaDLlveq1CKA9i-OqAsu8+uTLgB0A7FetDEejJdfVlTX9G1fEB40TFEp1TRR6iUZRlCAA

And it display the codeblock, and ideally also display the errors!

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes TypeScript playground link. #83

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: ccba53a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for react-github-permalink ready!

Name	Link
🔨 Latest commit	ccba53a
🔍 Latest deploy log	https://app.netlify.com/projects/react-github-permalink/deploys/690415d9d8ee460008244906
😎 Deploy Preview	https://deploy-preview-84--react-github-permalink.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.