diff --git a/.changeset/hot-lobsters-yell.md b/.changeset/hot-lobsters-yell.md new file mode 100644 index 0000000000..1fdc923a82 --- /dev/null +++ b/.changeset/hot-lobsters-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Adds support for opening internal Techdocs links in a new tab with CTRL+Click or CMD+Click diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 264da9531a..b00a60d3d7 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -338,17 +338,23 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => { scrollIntoAnchor(), addLinkClickListener({ baseUrl: window.location.origin, - onClick: (_: MouseEvent, url: string) => { + onClick: (event: MouseEvent, url: string) => { + // use `window.open` to open links in a new tab when CTRL or META keys are pressed + const navigateFn = + event.ctrlKey || event.metaKey + ? (u: string) => window.open(u, '_blank') + : navigate; + const parsedUrl = new URL(url); // hash exists when anchor is clicked on secondary sidebar if (parsedUrl.hash) { - navigate(`${parsedUrl.pathname}${parsedUrl.hash}`); + navigateFn(`${parsedUrl.pathname}${parsedUrl.hash}`); // Scroll to hash if it's on the current page transformedElement ?.querySelector(`#${parsedUrl.hash.slice(1)}`) ?.scrollIntoView(); } else { - navigate(parsedUrl.pathname); + navigateFn(parsedUrl.pathname); // Scroll to top of reader if primary sidebar link is clicked transformedElement ?.querySelector('.md-content__inner')