fix: correct links in doc-viewer markdown files to have the proper base value

Author: josephperrott

src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -44,6 +44,20 @@ describe('DocViewer', () => {
     expect(docViewer.componentInstance.textContent).toBe('my docs page');
   });
 
+
+  it('should correct hash based links', () => {
+    let fixture = TestBed.createComponent(DocViewerTestComponent);
+    fixture.componentRef.instance.documentUrl = `http://material.angular.io/doc-with-links.html`;
+    fixture.detectChanges();
+
+    const url = fixture.componentInstance.documentUrl;
+    http.expectOne(url).flush(FAKE_DOCS[url]);
+
+    let docViewer = fixture.debugElement.query(By.directive(DocViewer));
+    // Our test runner runs at the page /context.html, so it will be the prepended value.
+    expect(docViewer.nativeElement.innerHTML).toContain(`href="/context.html#test"`);
+  });
+
   it('should show error message when doc not found', () => {
     spyOn(console, 'log');
 
@@ -84,4 +98,5 @@ const FAKE_DOCS = {
   'http://material.angular.io/doc-with-example.html': `
       <div>Check out this example:</div>
       <div material-docs-example="some-example"></div>`,
+  'http://material.angular.io/doc-with-links.html': `<a href="#test">Test link</a>`,
 };

src/app/shared/doc-viewer/doc-viewer.ts

@@ -60,11 +60,14 @@ export class DocViewer implements OnDestroy {
   }
 
   /**
-   * Updates the displayed document
-   * @param document The raw document content to show.
+   * Updates the displayed document.
+   * @param rawDocument The raw document content to show.
    */
-  private updateDocument(document: string) {
-    this._elementRef.nativeElement.innerHTML = document;
+  private updateDocument(rawDocument: string) {
+    // Replaces all hash base links with the current path
+    const correctedDocument = rawDocument.replace(
+      /(<a href="#)+/g, `<a href="${window.location.pathname}#`);
+    this._elementRef.nativeElement.innerHTML = correctedDocument;
     this.textContent = this._elementRef.nativeElement.textContent;
     this._loadComponents('material-docs-example', ExampleViewer);
     this._loadComponents('header-link', HeaderLink);