diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 12cec30c80..935def0dd4 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/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(); + }, }), ]); } diff --git a/plugins/techdocs/src/reader/transformers/addEventListener.test.ts b/plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts similarity index 89% rename from plugins/techdocs/src/reader/transformers/addEventListener.test.ts rename to plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts index e87ab81ab5..0554ff85e9 100644 --- a/plugins/techdocs/src/reader/transformers/addEventListener.test.ts +++ b/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, }), ], diff --git a/plugins/techdocs/src/reader/transformers/addEventListener.ts b/plugins/techdocs/src/reader/transformers/addLinkClickListener.ts similarity index 81% rename from plugins/techdocs/src/reader/transformers/addEventListener.ts rename to plugins/techdocs/src/reader/transformers/addLinkClickListener.ts index 32b9d6b0b9..fe0a11d9ae 100644 --- a/plugins/techdocs/src/reader/transformers/addEventListener.ts +++ b/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')!); } }); }); diff --git a/plugins/techdocs/src/reader/transformers/rewriteDocLinks.test.ts b/plugins/techdocs/src/reader/transformers/rewriteDocLinks.test.ts index 83ca846142..a064511fd0 100644 --- a/plugins/techdocs/src/reader/transformers/rewriteDocLinks.test.ts +++ b/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( ` Test