* Format the path by wrapping placeholders in tags.
(path: string)
| 55 | * Format the path by wrapping placeholders in <span> tags. |
| 56 | */ |
| 57 | function formatPath(path: string) { |
| 58 | // Matches placeholders like {id}, {userId}, etc. |
| 59 | const regex = /\{\s*(\w+)\s*\}|:\w+/g; |
| 60 | |
| 61 | const parts: (string | React.JSX.Element)[] = []; |
| 62 | let lastIndex = 0; |
| 63 | |
| 64 | //Wrap the variables in <span> tags and maintain either {variable} or :variable |
| 65 | path.replace(regex, (match, _, offset) => { |
| 66 | if (offset > lastIndex) { |
| 67 | parts.push(path.slice(lastIndex, offset)); |
| 68 | } |
| 69 | parts.push( |
| 70 | <span key={`offset-${offset}`} className="openapi-path-variable"> |
| 71 | {match} |
| 72 | </span> |
| 73 | ); |
| 74 | lastIndex = offset + match.length; |
| 75 | return match; |
| 76 | }); |
| 77 | |
| 78 | if (lastIndex < path.length) { |
| 79 | parts.push(path.slice(lastIndex)); |
| 80 | } |
| 81 | |
| 82 | const formattedPath = parts.map((part, index) => { |
| 83 | if (typeof part === 'string') { |
| 84 | return <span key={`part-${index}`}>{part}</span>; |
| 85 | } |
| 86 | return part; |
| 87 | }); |
| 88 | |
| 89 | return formattedPath; |
| 90 | } |