fix(app): navigation links in code examples do not work when using ba…

…seHref Closes #34
ng-doc · Mar 22, 2023 · 12280d0 · 12280d0
1 parent 50c5af8
commit 12280d0
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 6 deletions.
diff --git a/libs/app/components/code/code.component.html b/libs/app/components/code/code.component.html
@@ -1,4 +1,4 @@
-<div class="code-wrapper" [innerHTML]="html" *ngIf="html"></div>
+<div class="code-wrapper" [innerHTML]="html" ngDocLinkProcessor *ngIf="html"></div>
 <div class="code-wrapper" *ngIf="!html">
 	<ng-content></ng-content>
 </div>

diff --git a/libs/app/components/code/code.module.ts b/libs/app/components/code/code.module.ts
@@ -2,6 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {NgDocCodeHighlighterModule} from '@ng-doc/app/directives/code-highlighter';
 import {NgDocSanitizeHtmlModule} from '@ng-doc/app/pipes/sanitize-html';
+import {NgDocLinkProcessorModule} from '@ng-doc/app/processors/link-processor';
 import {NgDocButtonIconModule, NgDocIconModule, NgDocTooltipModule} from '@ng-doc/ui-kit';
 
 import {NgDocCodeComponent} from './code.component';
@@ -15,6 +16,7 @@ import {NgDocCodeComponent} from './code.component';
 		NgDocIconModule,
 		NgDocTooltipModule,
 		NgDocSanitizeHtmlModule,
+		NgDocLinkProcessorModule,
 	],
 	exports: [NgDocCodeComponent],
 })

diff --git a/libs/app/components/page/page.component.html b/libs/app/components/page/page.component.html
@@ -23,12 +23,12 @@
 	<div
 		[innerHTML]="rootPage.pageContent | ngDocSanitizeHtml"
 		ngDocBlockquoteProcessor
-		ngDocDemoProcessor
+		ngDocLinkProcessor
 		ngDocCodeProcessor
 		ngDocIconProcessor
 		ngDocTooltipProcessor
+		ngDocDemoProcessor
 		ngDocPlaygroundProcessor
-		ngDocLinkProcessor
 		#pageContainer
 	></div>
 

diff --git a/libs/app/components/page/page.module.ts b/libs/app/components/page/page.module.ts
@@ -40,6 +40,7 @@ import {NgDocPageComponent} from './page.component';
 
 		CommonModule,
 		NgDocDemoProcessorModule,
+		NgDocLinkProcessorModule,
 		NgDocCodeProcessorModule,
 		NgDocBlockquoteProcessorModule,
 		NgDocSanitizeHtmlModule,
@@ -54,7 +55,6 @@ import {NgDocPageComponent} from './page.component';
 		RouterLink,
 		NgDocButtonModule,
 		NgDocTextModule,
-		NgDocLinkProcessorModule,
 	],
 	exports: [NgDocPageComponent],
 })

diff --git a/libs/app/processors/code-processor/code-processor.directive.ts b/libs/app/processors/code-processor/code-processor.directive.ts
@@ -23,7 +23,7 @@ export class NgDocCodeProcessorDirective extends NgDocHtmlProcessor<NgDocCodeCom
 			inputs: {
 				copyButton: element.getAttribute('copyButton') !== 'false',
 			},
-			content: [[(element.closest('pre') ?? element).cloneNode(true)]],
+			content: [[element.closest('pre') ?? element]],
 		};
 	}
 }
diff --git a/libs/app/processors/html-processor/html-processor.directive.ts b/libs/app/processors/html-processor/html-processor.directive.ts
@@ -7,7 +7,7 @@ import {NgDocProcessorOptions} from '@ng-doc/app/interfaces';
  */
 @Directive()
 export abstract class NgDocHtmlProcessor<T> implements OnInit {
-	constructor(
+	protected constructor(
 		protected readonly elementRef: ElementRef<HTMLElement>,
 		protected readonly viewContainerRef: ViewContainerRef,
 		protected readonly selector: string,