2 files changed, 18 insertions, 6 deletions

diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 1f372090e..29dfd89fb 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -91,7 +91,7 @@
 
     <div class="anchor" id="information"></div>
     <a
-      *ngIf="html.description"
+      *ngIf="descriptionContent"
       class="anchor-link"
       routerLink="/about/instance"
       fragment="information"
@@ -113,7 +113,7 @@
         <h3 i18n class="section-title">Description</h3>
       </a>
 
-      <div [innerHTML]="html.description"></div>
+      <my-custom-markup-container [content]="descriptionContent"></my-custom-markup-container>
     </div>
 
     <div class="anchor" id="moderation"></div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 7eb382a46..2e0996429 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,11 +1,12 @@
 import { ViewportScroller } from '@angular/common'
-import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { Notifier } from '@app/core'
-import { copyToClipboard } from '../../../root-helpers/utils'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { InstanceService } from '@app/shared/shared-instance'
-import { ServerConfig } from '@shared/models'
+import { About, ServerConfig } from '@shared/models'
+import { copyToClipboard } from '../../../root-helpers/utils'
 import { ResolverData } from './about-instance.resolver'
 
 @Component({
@@ -14,12 +15,13 @@ import { ResolverData } from './about-instance.resolver'
   styleUrls: [ './about-instance.component.scss' ]
 })
 export class AboutInstanceComponent implements OnInit, AfterViewChecked {
+  @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
   @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
 
   shortDescription = ''
+  descriptionContent: string
 
   html = {
-    description: '',
     terms: '',
     codeOfConduct: '',
     moderationInformation: '',
@@ -40,6 +42,7 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   private lastScrollHash: string
 
   constructor (
+    private customMarkupService: CustomMarkupService,
     private viewportScroller: ViewportScroller,
     private route: ActivatedRoute,
     private notifier: Notifier,
@@ -67,9 +70,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
     this.categories = categories
 
     this.shortDescription = about.instance.shortDescription
+    this.descriptionContent = about.instance.description
 
     this.html = await this.instanceService.buildHtml(about)
 
+    await this.injectDescription(about)
+
     this.initialized = true
   }
 
@@ -90,4 +96,10 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
     copyToClipboard(link)
     this.notifier.success(link, $localize `Link copied`)
   }
+
+  private async injectDescription (about: About) {
+    const element = await this.customMarkupService.buildElement(about.instance.description)
+
+    this.descriptionWrapper.nativeElement.appendChild(element)
+  }
 }