From f45c7cc770963670b3f2f1ac11d3ee3afc84a7ec Mon Sep 17 00:00:00 2001
From: Florian CUNY <poslovitch@bentobox.world>
Date: Mon, 30 Nov 2020 15:05:57 +0100
Subject: [PATCH] Added Markdown formatting in all the fields of the "About"
 page (#3371)

* Added Markdown formatting in all the fields of the "About" page

Fixes https://github.com/Chocobozzz/PeerTube/issues/3368

* Fixed compilation error in AboutInstanceComponent

Moved creationReason, maintenanceLifetime and businessModel into the html dict

* Removed textareaHeight for all md textareas in EditCustomConfig HTML

* Fixed failing bundlewatch
---
 .../about-instance.component.html             | 14 ++++-----
 .../about-instance.component.ts               | 11 ++-----
 .../edit-custom-config.component.html         | 30 +++++++++----------
 .../shared-instance/instance.service.ts       |  3 ++
 4 files changed, 28 insertions(+), 30 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 045bb3fbc..bb337fdf3 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -21,7 +21,7 @@
 
     <div class="anchor" id="administrators-and-sustainability"></div>
     <a
-      *ngIf="html.administrator || maintenanceLifetime || businessModel"
+      *ngIf="html.administrator || html.maintenanceLifetime || html.businessModel"
       class="anchor-link"
       routerLink="/about/instance"
       fragment="administrators-and-sustainability"
@@ -47,7 +47,7 @@
       <div [innerHTML]="html.administrator"></div>
     </div>
 
-    <div class="block creation-reason" *ngIf="creationReason">
+    <div class="block creation-reason" *ngIf="html.creationReason">
       <div class="anchor" id="creation-reason"></div>
       <a
         class="anchor-link"
@@ -58,10 +58,10 @@
         <h3 i18n class="section-title">Why we created this instance</h3>
       </a>
 
-      <p>{{ creationReason }}</p>
+      <div [innerHTML]="html.creationReason"></div>
     </div>
 
-    <div class="block maintenance-lifetime" *ngIf="maintenanceLifetime">
+    <div class="block maintenance-lifetime" *ngIf="html.maintenanceLifetime">
       <div class="anchor" id="maintenance-lifetime"></div>
       <a
         class="anchor-link"
@@ -72,10 +72,10 @@
         <h3 i18n class="section-title">How long we plan to maintain this instance</h3>
       </a>
 
-      <p>{{ maintenanceLifetime }}</p>
+      <div [innerHTML]="html.maintenanceLifetime"></div>
     </div>
 
-    <div class="block business-model" *ngIf="businessModel">
+    <div class="block business-model" *ngIf="html.businessModel">
         <div class="anchor" id="business-model"></div>
         <a
           class="anchor-link"
@@ -86,7 +86,7 @@
           <h3 i18n class="section-title">How we will pay for this instance</h3>
         </a>
 
-      <p>{{ businessModel }}</p>
+      <div [innerHTML]="html.businessModel"></div>
     </div>
 
     <div class="anchor" id="information"></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 92ecd5263..7eb382a46 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -24,13 +24,12 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
     codeOfConduct: '',
     moderationInformation: '',
     administrator: '',
+    creationReason: '',
+    maintenanceLifetime: '',
+    businessModel: '',
     hardwareInformation: ''
   }
 
-  creationReason = ''
-  maintenanceLifetime = ''
-  businessModel = ''
-
   languages: string[] = []
   categories: string[] = []
 
@@ -69,10 +68,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
     this.shortDescription = about.instance.shortDescription
 
-    this.creationReason = about.instance.creationReason
-    this.maintenanceLifetime = about.instance.maintenanceLifetime
-    this.businessModel = about.instance.businessModel
-
     this.html = await this.instanceService.buildHtml(about)
 
     this.initialized = true
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 0927523f1..70533475a 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -162,11 +162,11 @@
             <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
               <div class="form-group">
-                <label i18n for="instanceAdministrator">Who is behind the instance?</label>
+                <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
                 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 
                 <my-markdown-textarea
-                  name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" textareaHeight="75px"
+                  name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
                   [classes]="{ 'input-error': formErrors['instance.administrator'] }"
                 ></my-markdown-textarea>
 
@@ -174,35 +174,35 @@
               </div>
 
               <div class="form-group">
-                <label i18n for="instanceCreationReason">Why did you create this instance?</label>
+                <label i18n for="instanceCreationReason">Why did you create this instance?</label><my-help helpType="markdownText"></my-help>
                 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
 
-                <textarea
-                  id="instanceCreationReason" formControlName="creationReason" class="small" class="form-control"
+                <my-markdown-textarea
+                  id="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
-                ></textarea>
+                ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
               </div>
 
               <div class="form-group">
-                <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label>
+                <label i18n for="instanceMaintenanceLifetime">How long do you plan to maintain this instance?</label><my-help helpType="markdownText"></my-help>
                 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
 
-                <textarea
-                  id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" class="form-control small"
+                <my-markdown-textarea
+                  id="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
-                ></textarea>
+                ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
               </div>
 
               <div class="form-group">
-                <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
+                <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label><my-help helpType="markdownText"></my-help>
                 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 
-                <textarea
-                  id="instanceBusinessModel" formControlName="businessModel" class="form-control small"
+                <my-markdown-textarea
+                  id="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
                   [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
-                ></textarea>
+                ></my-markdown-textarea>
                 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
               </div>
 
@@ -221,7 +221,7 @@
                 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
 
                 <my-markdown-textarea
-                  name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" textareaHeight="75px"
+                  name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px"
                   [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
                 ></my-markdown-textarea>
 
diff --git a/client/src/app/shared/shared-instance/instance.service.ts b/client/src/app/shared/shared-instance/instance.service.ts
index fcfa59f28..0a30446df 100644
--- a/client/src/app/shared/shared-instance/instance.service.ts
+++ b/client/src/app/shared/shared-instance/instance.service.ts
@@ -45,6 +45,9 @@ export class InstanceService {
       codeOfConduct: '',
       moderationInformation: '',
       administrator: '',
+      creationReason: '',
+      maintenanceLifetime: '',
+      businessModel: '',
       hardwareInformation: ''
     }