Scroll to anchor link

plugins/techdocs/src/reader/components/Reader.tsx

@@ -25,7 +25,7 @@ import { Header, Content, ItemCard } from '@backstage/core';
 import transformer, {
   addBaseUrl,
   rewriteDocLinks,
-  addEventListener,
+  addLinkClickListener,
   removeMkdocsHeader,
   modifyCss,
 } from '../transformers';
@@ -92,8 +92,15 @@ export const Reader = () => {
       if (transformedElement) {
         divElement.shadowRoot.appendChild(transformedElement);
         transformer(divElement.shadowRoot.children[0], [
-          addEventListener({
-            onClick: navigate,
+          addLinkClickListener({
+            onClick: url => {
+              const parsedUrl = new URL(url);
+              navigate(parsedUrl.pathname);
+
+              divElement.shadowRoot
+                ?.querySelector(parsedUrl.hash)
+                ?.scrollIntoView();
+            },
           }),
         ]);
       }

plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts

@@ -15,14 +15,14 @@
  */
 
 import { createTestShadowDom, FIXTURES } from '../../test-utils';
-import { addEventListener } from '../transformers';
+import { addLinkClickListener } from '.';
 
-describe('addEventListener', () => {
+describe('addLinkClickListener', () => {
   it('calls onClick when a link has been clicked', () => {
     const fn = jest.fn();
     const shadowDom = createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
       transformers: [
-        addEventListener({
+        addLinkClickListener({
           onClick: fn,
         }),
       ],

plugins/techdocs/src/reader/transformers/addLinkClickListener.ts

@@ -16,22 +16,20 @@
 
 import type { Transformer } from './index';
 
-type AddEventListenerOptions = {
+type addLinkClickListenerOptions = {
   onClick: (newUrl: string) => void;
 };
 
-export const addEventListener = ({
+export const addLinkClickListener = ({
   onClick,
-}: AddEventListenerOptions): Transformer => {
+}: addLinkClickListenerOptions): Transformer => {
   return dom => {
     Array.from(dom.getElementsByTagName('a')).forEach(elem => {
       elem.addEventListener('click', (e: MouseEvent) => {
         e.preventDefault();
         const target = e.target as HTMLAnchorElement;
         if (target?.getAttribute('href')) {
-          onClick(
-            target.getAttribute('href')!.replace(window.location.origin, ''),
-          );
+          onClick(target.getAttribute('href')!);
         }
       });
     });

plugins/techdocs/src/reader/transformers/rewriteDocLinks.test.ts

@@ -34,7 +34,7 @@ describe('rewriteDocLinks', () => {
     ]);
   });
 
-  it('should transform a href with licalhost as baseUrl', () => {
+  it('should transform a href with localhost as baseUrl', () => {
     const shadowDom = createTestShadowDom(
       `
         <a href="http://example.org/">Test</a>