Add help to custom markdown textarea

5 files changed, 20 insertions, 3 deletions

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 c48fa5bf8..baaac5fb7 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
@@ -11,6 +11,9 @@
 
         <div class="form-group">
           <label i18n for="instanceCustomHomepageContent">Homepage</label>
+          <div class="label-small-info">
+            <my-custom-markup-help></my-custom-markup-help>
+          </div>
 
           <my-markdown-textarea
             name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px"
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html
new file mode 100644
index 000000000..dd7a56d7d
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.html
@@ -0,0 +1,3 @@
+<ng-container i18n>
+  <a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noreferer noopener">Markdown compatible</a> that also supports <a href="https://docs.joinpeertube.org/api-custom-client-markup" target="_blank" rel="noreferer noopener">custom PeerTube HTML tags</a>
+</ng-container>
diff --git a/client/src/app/shared/shared-custom-markup/custom-markup-help.component.ts b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.ts
new file mode 100644
index 000000000..0a5a67794
--- /dev/null
+++ b/client/src/app/shared/shared-custom-markup/custom-markup-help.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'my-custom-markup-help',
+  templateUrl: './custom-markup-help.component.html'
+})
+export class CustomMarkupHelpComponent {
+}
diff --git a/client/src/app/shared/shared-custom-markup/index.ts b/client/src/app/shared/shared-custom-markup/index.ts
index 14bde3ea9..a9ac2516c 100644
--- a/client/src/app/shared/shared-custom-markup/index.ts
+++ b/client/src/app/shared/shared-custom-markup/index.ts
@@ -1,3 +1,4 @@
 export * from './custom-markup.service'
 export * from './dynamic-element.service'
+export * from './custom-markup-help.component'
 export * from './shared-custom-markup.module'
diff --git a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
index d03aa856f..66f6b98f6 100644
--- a/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
+++ b/client/src/app/shared/shared-custom-markup/shared-custom-markup.module.ts
@@ -1,4 +1,3 @@
-
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
@@ -8,6 +7,7 @@ import { SharedVideoMiniatureModule } from '../shared-video-miniature'
 import { SharedVideoPlaylistModule } from '../shared-video-playlist'
 import { ButtonMarkupComponent } from './button-markup.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'
@@ -32,7 +32,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     ChannelMiniatureMarkupComponent,
     EmbedMarkupComponent,
     VideosListMarkupComponent,
-    ButtonMarkupComponent
+    ButtonMarkupComponent,
+    CustomMarkupHelpComponent
   ],
 
   exports: [
@@ -41,7 +42,8 @@ import { VideosListMarkupComponent } from './videos-list-markup.component'
     ChannelMiniatureMarkupComponent,
     VideosListMarkupComponent,
     EmbedMarkupComponent,
-    ButtonMarkupComponent
+    ButtonMarkupComponent,
+    CustomMarkupHelpComponent
   ],
 
   providers: [