Add ability to set custom markdown in description

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>

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)
+  }
 }

client/src/app/+about/about.module.ts

@@ -5,6 +5,7 @@ import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
+import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedInstanceModule } from '@app/shared/shared-instance'
@@ -19,7 +20,8 @@ import { AboutComponent } from './about.component'
     SharedMainModule,
     SharedFormModule,
     SharedInstanceModule,
-    SharedGlobalIconModule
+    SharedGlobalIconModule,
+    SharedCustomMarkupModule
   ],
 
   declarations: [

client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html

@@ -17,7 +17,7 @@
 
           <my-markdown-textarea
             name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
-            [customMarkdownRenderer]="customMarkdownRenderer"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
             [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
           ></my-markdown-textarea>
 

client/src/app/+admin/config/edit-custom-config/edit-homepage.component.ts

@@ -7,7 +7,7 @@ import { CustomMarkupService } from '@app/shared/shared-custom-markup'
   templateUrl: './edit-homepage.component.html',
   styleUrls: [ './edit-custom-config.component.scss' ]
 })
-export class EditHomepageComponent implements OnInit {
+export class EditHomepageComponent {
   @Input() form: FormGroup
   @Input() formErrors: any
 
@@ -17,9 +17,7 @@ export class EditHomepageComponent implements OnInit {
 
   }
 
-  ngOnInit () {
+  getCustomMarkdownRenderer () {
-    this.customMarkdownRenderer = async (text: string) => {
+    return this.customMarkup.getCustomMarkdownRenderer()
-      return this.customMarkup.buildElement(text)
-    }
   }
 }

client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html

@@ -32,10 +32,14 @@
         </div>
 
         <div class="form-group">
-          <label i18n for="instanceDescription">Description</label><my-help helpType="markdownText"></my-help>
+          <label i18n for="instanceDescription">Description</label>
+          <div class="label-small-info">
+            <my-custom-markup-help></my-custom-markup-help>
+          </div>
 
           <my-markdown-textarea
             name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+            [customMarkdownRenderer]="getCustomMarkdownRenderer()"
             [classes]="{ 'input-error': formErrors['instance.description'] }"
           ></my-markdown-textarea>
 

client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.ts

@@ -1,6 +1,7 @@
 import { SelectOptionsItem } from 'src/types/select-options-item.model'
 import { Component, Input } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 
 @Component({
   selector: 'my-edit-instance-information',
@@ -13,4 +14,12 @@ export class EditInstanceInformationComponent {
 
   @Input() languageItems: SelectOptionsItem[] = []
   @Input() categoryItems: SelectOptionsItem[] = []
+
+  constructor (private customMarkup: CustomMarkupService) {
+
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkup.getCustomMarkdownRenderer()
+  }
 }

client/src/app/+home/home.component.html

@@ -1,4 +1,4 @@
 <div class="root margin-content">
-  <div #contentWrapper></div>
+  <my-custom-markup-container [content]="homepageContent"></my-custom-markup-container>
 </div>
 

client/src/app/+home/home.component.ts

@@ -1,6 +1,4 @@
-
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { CustomPageService } from '@app/shared/shared-main/custom-page'
 
 @Component({
@@ -11,16 +9,14 @@ import { CustomPageService } from '@app/shared/shared-main/custom-page'
 export class HomeComponent implements OnInit {
   @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
 
+  homepageContent: string
+
   constructor (
-    private customMarkupService: CustomMarkupService,
     private customPageService: CustomPageService
   ) { }
 
   async ngOnInit () {
     this.customPageService.getInstanceHomepage()
-      .subscribe(async ({ content }) => {
+      .subscribe(({ content }) => this.homepageContent = content)
-        const element = await this.customMarkupService.buildElement(content)
-        this.contentWrapper.nativeElement.appendChild(element)
-      })
   }
 }

client/src/app/shared/shared-custom-markup/custom-markup-container.component.html

@@ -0,0 +1 @@
+<div #contentWrapper></div>

client/src/app/shared/shared-custom-markup/custom-markup-container.component.ts

@@ -0,0 +1,26 @@
+import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { CustomMarkupService } from './custom-markup.service'
+
+@Component({
+  selector: 'my-custom-markup-container',
+  templateUrl: './custom-markup-container.component.html'
+})
+export class CustomMarkupContainerComponent implements OnChanges {
+  @ViewChild('contentWrapper') contentWrapper: ElementRef<HTMLInputElement>
+
+  @Input() content: string
+
+  constructor (
+    private customMarkupService: CustomMarkupService
+  ) { }
+
+  async ngOnChanges () {
+    await this.buildElement()
+  }
+
+  private async buildElement () {
+    const element = await this.customMarkupService.buildElement(this.content)
+    this.contentWrapper.nativeElement.appendChild(element)
+  }
+
+}

client/src/app/shared/shared-custom-markup/custom-markup.service.ts

@@ -8,13 +8,15 @@ import {
   VideoMiniatureMarkupData,
   VideosListMarkupData
 } from '@shared/models'
-import { ButtonMarkupComponent } from './button-markup.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
+import {
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+  ButtonMarkupComponent,
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+  ChannelMiniatureMarkupComponent,
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 type BuilderFunction = (el: HTMLElement) => ComponentRef<any>
 
@@ -30,10 +32,18 @@ export class CustomMarkupService {
     'peertube-videos-list': el => this.videosListBuilder(el)
   }
 
+  private customMarkdownRenderer: (text: string) => Promise<HTMLElement>
+
   constructor (
     private dynamicElementService: DynamicElementService,
     private markdown: MarkdownService
-  ) { }
+  ) {
+    this.customMarkdownRenderer = async (text: string) => this.buildElement(text)
+  }
+
+  getCustomMarkdownRenderer () {
+    return this.customMarkdownRenderer
+  }
 
   async buildElement (text: string) {
     const html = await this.markdown.customPageMarkdownToHTML(text, this.getSupportedTags())

client/src/app/shared/shared-custom-markup/index.ts

@@ -1,4 +1,5 @@
 export * from './custom-markup.service'
+export * from './custom-markup-container.component'
 export * from './dynamic-element.service'
 export * from './custom-markup-help.component'
 export * from './shared-custom-markup.module'

client/src/app/shared/shared-custom-markup/peertube-custom-tags/button-markup.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { VideoChannel } from '../shared-main'
+import { VideoChannel } from '../../shared-main'
 
 /*
  * Markup component that creates a button

client/src/app/shared/shared-custom-markup/peertube-custom-tags/channel-miniature-markup.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { VideoChannel, VideoChannelService } from '../shared-main'
+import { VideoChannel, VideoChannelService } from '../../shared-main'
 
 /*
  * Markup component that creates a channel miniature only

client/src/app/shared/shared-custom-markup/peertube-custom-tags/index.ts

@@ -0,0 +1,6 @@
+export * from './button-markup.component'
+export * from './channel-miniature-markup.component'
+export * from './embed-markup.component'
+export * from './playlist-miniature-markup.component'
+export * from './video-miniature-markup.component'
+export * from './videos-list-markup.component'

client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
-import { VideoPlaylist, VideoPlaylistService } from '../shared-video-playlist'
+import { VideoPlaylist, VideoPlaylistService } from '../../shared-video-playlist'
 
 /*
  * Markup component that creates a playlist miniature only

client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService } from '@app/core'
-import { Video, VideoService } from '../shared-main'
+import { Video, VideoService } from '../../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 
 /*
  * Markup component that creates a video miniature only

client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { AuthService } from '@app/core'
 import { VideoSortField } from '@shared/models'
-import { Video, VideoService } from '../shared-main'
+import { Video, VideoService } from '../../shared-main'
-import { MiniatureDisplayOptions } from '../shared-video-miniature'
+import { MiniatureDisplayOptions } from '../../shared-video-miniature'
 
 /*
  * Markup component list videos depending on criterias

client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts

@@ -5,15 +5,18 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main'
 import { SharedVideoMiniatureModule } from '../shared-video-miniature'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist'
-import { ButtonMarkupComponent } from './button-markup.component'
+import { CustomMarkupContainerComponent } from './custom-markup-container.component'
-import { ChannelMiniatureMarkupComponent } from './channel-miniature-markup.component'
 import { CustomMarkupHelpComponent } from './custom-markup-help.component'
 import { CustomMarkupService } from './custom-markup.service'
 import { DynamicElementService } from './dynamic-element.service'
-import { EmbedMarkupComponent } from './embed-markup.component'
+import {
-import { PlaylistMiniatureMarkupComponent } from './playlist-miniature-markup.component'
+  ButtonMarkupComponent,
-import { VideoMiniatureMarkupComponent } from './video-miniature-markup.component'
+  ChannelMiniatureMarkupComponent,
-import { VideosListMarkupComponent } from './videos-list-markup.component'
+  EmbedMarkupComponent,
+  PlaylistMiniatureMarkupComponent,
+  VideoMiniatureMarkupComponent,
+  VideosListMarkupComponent
+} from './peertube-custom-tags'
 
 @NgModule({
   imports: [
@@ -33,7 +36,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     EmbedMarkupComponent,
     VideosListMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   exports: [
@@ -43,7 +47,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     VideosListMarkupComponent,
     EmbedMarkupComponent,
     ButtonMarkupComponent,
-    CustomMarkupHelpComponent
+    CustomMarkupHelpComponent,
+    CustomMarkupContainerComponent
   ],
 
   providers: [

client/src/app/shared/shared-instance/instance-about-accordion.component.ts

@@ -23,7 +23,6 @@ export class InstanceAboutAccordionComponent implements OnInit {
 
   about: About
   aboutHtml = {
-    description: '',
     terms: '',
     codeOfConduct: '',
     moderationInformation: '',

client/src/app/shared/shared-instance/instance.service.ts

@@ -40,7 +40,6 @@ export class InstanceService {
 
   async buildHtml (about: About) {
     const html = {
-      description: '',
       terms: '',
       codeOfConduct: '',
       moderationInformation: '',

client/src/app/shared/shared-instance/shared-instance.module.ts

@@ -1,6 +1,7 @@
 
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
+import { SharedCustomMarkupModule } from '../shared-custom-markup'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
@@ -12,7 +13,8 @@ import { InstanceService } from './instance.service'
 @NgModule({
   imports: [
     SharedMainModule,
-    NgbAccordionModule
+    NgbAccordionModule,
+    SharedCustomMarkupModule
   ],
 
   declarations: [