From 9bc3622320dc43474ce4b60c222ec25e6e657b97 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 20 Jun 2022 15:56:16 +0200
Subject: [PATCH] Handle input error in markdown textarea

---
 .../edit-basic-configuration.component.html   |  4 +-
 .../edit-custom-config.component.scss         | 13 ++++-
 .../edit-homepage.component.html              |  6 +--
 .../edit-instance-information.component.html  | 54 +++++++------------
 .../video-channel-edit.component.html         |  2 +-
 .../video-channel-edit.component.scss         |  5 ++
 .../my-video-playlist-edit.component.html     |  8 +--
 .../shared/video-edit.component.html          | 15 +++---
 .../dynamic-form-field.component.html         | 10 ++--
 .../dynamic-form-field.component.scss         |  5 ++
 .../markdown-textarea.component.html          |  3 +-
 .../markdown-textarea.component.ts            |  4 --
 client/src/sass/class-helpers.scss            | 14 +++--
 13 files changed, 69 insertions(+), 74 deletions(-)

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 68126281f..315cd1749 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -132,8 +132,8 @@
           <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px"
-            [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }"
+            name="broadcastMessageMessage" formControlName="message"
+            [formError]="formErrors['broadcastMessage.message']"
           ></my-markdown-textarea>
 
           <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index f3bce8ee0..df523cedc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -7,12 +7,21 @@ form {
   padding-bottom: 1.5rem;
 }
 
-input[type=text] {
-  @include peertube-input-text($form-base-input-width);
+my-markdown-textarea {
+  display: block;
+  max-width: 500px;
+}
 
+.homepage my-markdown-textarea {
   display: block;
+  max-width: 90%;
+
+  ::ng-deep textarea {
+    height: 300px !important;
+  }
 }
 
+input[type=text],
 input[type=number] {
   @include peertube-input-text($form-base-input-width);
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 701c3c0c1..5339240bb 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,7 +2,7 @@
 
   <ng-container formGroupName="instanceCustomHomepage">
 
-    <div class="row mt-5"> <!-- homepage grid -->
+    <div class="homepage row mt-5"> <!-- homepage grid -->
       <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
       </div>
@@ -16,9 +16,9 @@
           </div>
 
           <my-markdown-textarea
-            name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
+            name="instanceCustomHomepageContent" formControlName="content"
             [customMarkdownRenderer]="getCustomMarkdownRenderer()"
-            [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }"
+            [formError]="formErrors['instanceCustomHomepage.content']"
           ></my-markdown-textarea>
 
           <div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 5931cb459..b54733327 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -37,12 +37,10 @@
           </div>
 
           <my-markdown-textarea
-            name="instanceDescription" formControlName="description" textareaMaxWidth="500px"
+            name="instanceDescription" formControlName="description"
             [customMarkdownRenderer]="getCustomMarkdownRenderer()"
-            [classes]="{ 'input-error': formErrors['instance.description'] }"
+            [formError]="formErrors['instance.description']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
         </div>
 
         <div class="form-group">
@@ -127,22 +125,18 @@
           <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="instanceTerms" formControlName="terms" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.terms'] }"
+            name="instanceTerms" formControlName="terms"
+            [formError]="formErrors['instance.terms']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
         </div>
 
         <div class="form-group">
           <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
 
           <my-markdown-textarea
-            name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }"
+            name="instanceCodeOfConduct" formControlName="codeOfConduct"
+            [formError]="formErrors['instance.codeOfConduct']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
         </div>
 
         <div class="form-group">
@@ -150,11 +144,9 @@
           <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
 
           <my-markdown-textarea
-            name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }"
+            name="instanceModerationInformation" formControlName="moderationInformation"
+            [formError]="formErrors['instance.moderationInformation']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
         </div>
 
       </div>
@@ -172,11 +164,9 @@
           <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
 
           <my-markdown-textarea
-            name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px"
-            [classes]="{ 'input-error': formErrors['instance.administrator'] }"
+            name="instanceAdministrator" formControlName="administrator"
+            [formError]="formErrors['instance.administrator']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
         </div>
 
         <div class="form-group">
@@ -184,11 +174,9 @@
           <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
 
           <my-markdown-textarea
-            name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }"
+            name="instanceCreationReason" formControlName="creationReason"
+            [formError]="formErrors['instance.creationReason']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
         </div>
 
         <div class="form-group">
@@ -196,11 +184,9 @@
           <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
 
           <my-markdown-textarea
-            name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }"
+            name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
+            [formError]="formErrors['instance.maintenanceLifetime']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
         </div>
 
         <div class="form-group">
@@ -208,11 +194,9 @@
           <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 
           <my-markdown-textarea
-            name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px"
-            [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }"
+            name="instanceBusinessModel" formControlName="businessModel"
+            [formError]="formErrors['instance.businessModel']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
         </div>
 
       </div>
@@ -230,11 +214,9 @@
           <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"
-            [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }"
+            name="instanceHardwareInformation" formControlName="hardwareInformation"
+            [formError]="formErrors['instance.hardwareInformation']"
           ></my-markdown-textarea>
-
-          <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
         </div>
 
       </div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 420881f5a..b557fb011 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -68,7 +68,7 @@
           ></my-help>
 
           <my-markdown-textarea
-            id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced"
+            id="support" formControlName="support" markdownType="enhanced"
             [formError]="formErrors['support']"
           ></my-markdown-textarea>
         </div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index 008397a7a..cde848da6 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -42,6 +42,11 @@ textarea {
   display: block;
 }
 
+my-markdown-textarea {
+  display: block;
+  max-width: 500px;
+}
+
 .peertube-select-container {
   @include peertube-select-container(340px);
 }
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index 35682cf81..e867f63b8 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -42,13 +42,7 @@
 
         <div class="form-group">
           <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
-          <my-markdown-textarea
-            id="description" formControlName="description"
-            [ngClass]="{ 'input-error': formErrors['description'] }"
-          ></my-markdown-textarea>
-          <div *ngIf="formErrors.description" class="form-error">
-            {{ formErrors.description }}
-          </div>
+          <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
         </div>
       </div>
 
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index b99e430dd..595200c3b 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -51,11 +51,10 @@
                 </ng-template>
               </my-help>
 
-              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea>
-
-              <div *ngIf="formErrors.description" class="form-error">
-                {{ formErrors.description }}
-              </div>
+              <my-markdown-textarea
+                formControlName="description" [markdownVideo]="videoToUpdate"
+                [formError]="formErrors.description" [truncate]="250"
+              ></my-markdown-textarea>
             </div>
           </div>
 
@@ -332,13 +331,11 @@
                   </ng-container>
                 </ng-template>
               </my-help>
+
               <my-markdown-textarea
                 id="support" formControlName="support" markdownType="enhanced"
-                [classes]="{ 'input-error': formErrors['support'] }"
+                [formError]="formErrors['support']"
               ></my-markdown-textarea>
-              <div *ngIf="formErrors.support" class="form-error">
-                {{ formErrors.support }}
-              </div>
             </div>
           </div>
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 2ec436ac6..61f9ae8ff 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -28,19 +28,19 @@
 
   <my-markdown-textarea
     *ngIf="setting.type === 'markdown-text'"
-    markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
-    [classes]="{ 'input-error': formErrors['settings.name'] }"
+    markdownType="text" [id]="setting.name" [formControlName]="setting.name"
+    [formError]="formErrors['settings.name']"
   ></my-markdown-textarea>
 
   <my-markdown-textarea
     *ngIf="setting.type === 'markdown-enhanced'"
-    markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
-    [classes]="{ 'input-error': formErrors['settings.name'] }"
+    markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name"
+    [formError]="formErrors['settings.name']"
   ></my-markdown-textarea>
 
   <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
 
-  <div *ngIf="formErrors[setting.name]" class="form-error">
+  <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
     {{ formErrors[setting.name] }}
   </div>
 
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
index 31bf59edb..0737f372a 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -26,3 +26,8 @@ textarea {
 my-peertube-checkbox + .label-small-info {
   margin-top: 5px;
 }
+
+my-markdown-textarea {
+  display: block;
+  max-width: 500px;
+}
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index afb046c7f..5a9ff1a15 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -1,10 +1,9 @@
-<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }">
+<div class="root" [ngClass]="{ 'maximized': isMaximized }">
 
   <textarea #textarea
     [(ngModel)]="content" (ngModelChange)="onModelChange()"
     class="form-control" [ngClass]="{ 'input-error': formError }"
     [attr.disabled]="disabled || null"
-    [ngStyle]="{ height: textareaHeight }"
     [id]="name" [name]="name">
   </textarea>
 
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 5a603c157..089991884 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -25,10 +25,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
   @Input() content = ''
 
   @Input() formError: string
-  @Input() classes: string[] | { [klass: string]: any[] | any } = []
-
-  @Input() textareaMaxWidth = '100%'
-  @Input() textareaHeight = '150px'
 
   @Input() truncate: number
 
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index 87ad6a45d..f09d84882 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -70,7 +70,11 @@
 }
 
 .input-error:not(:focus) {
-  border-color: $red !important;
+  &,
+  & + .nav-preview, // Markdown textarea
+  & + * + .tab-content {
+    border-color: $red !important;
+  }
 }
 
 .form-error,
@@ -83,8 +87,12 @@
   color: $red;
 }
 
-.input-error:focus + .form-error {
-  color: pvar(--mainForegroundColor);
+.input-error:focus {
+  & + .form-error,
+  & + * + .form-error, // Markdown textarea
+  & + * + * + .form-error {
+    color: pvar(--mainForegroundColor);
+  }
 }
 
 .form-group-description {
-- 
2.41.0