Add markdown support to plugins (#2654)

* Add markdown renderer to plugins

* Chore: add doc for markdown plugins

* Fix typing markdown plugin helpers

* Add lines between components in template

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

2 files changed, 30 insertions, 0 deletions

diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index 95dd74d31..bf135ecbd 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -8,9 +8,27 @@
   <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
     <div class="form-group" *ngFor="let setting of registeredSettings">
       <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+
       <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+
       <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
+      <my-help *ngIf="setting.type === 'markdown-text'" helpType="markdownText"></my-help>
+
+      <my-help *ngIf="setting.type === 'markdown-enhanced'" helpType="markdownEnhanced"></my-help>
+
+      <my-markdown-textarea
+        *ngIf="setting.type === 'markdown-text'"
+        markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false"
+        [classes]="{ 'input-error': formErrors['settings.name'] }"
+      ></my-markdown-textarea>
+
+      <my-markdown-textarea
+        *ngIf="setting.type === 'markdown-enhanced'"
+        markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" [previewColumn]="false"
+        [classes]="{ 'input-error': formErrors['settings.name'] }"
+      ></my-markdown-textarea>
+
       <my-peertube-checkbox
         *ngIf="setting.type === 'input-checkbox'"
         [id]="setting.name"
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 039fd6ff1..3ed23160d 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -15,6 +15,7 @@ import { HttpClient } from '@angular/common/http'
 import { AuthService } from '@app/core/auth'
 import { Notifier } from '@app/core/notification'
 import { RestExtractor } from '@app/shared/rest'
+import { MarkdownService } from '@app/shared/renderer'
 import { PluginType } from '@shared/models/plugins/plugin.type'
 import { PublicServerSetting } from '@shared/models/plugins/public-server.setting'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
@@ -65,6 +66,7 @@ export class PluginService implements ClientHook {
     private router: Router,
     private authService: AuthService,
     private notifier: Notifier,
+    private markdownRenderer: MarkdownService,
     private server: ServerService,
     private zone: NgZone,
     private authHttp: HttpClient,
@@ -297,6 +299,16 @@ export class PluginService implements ClientHook {
         this.customModal.show(input)
       },
 
+      markdownRenderer: {
+        textMarkdownToHTML: (textMarkdown: string) => {
+          return this.markdownRenderer.textMarkdownToHTML(textMarkdown)
+        },
+
+        enhancedMarkdownToHTML: (enhancedMarkdown: string) => {
+          return this.markdownRenderer.enhancedMarkdownToHTML(enhancedMarkdown)
+        }
+      },
+
       translate: (value: string) => {
         return this.translationsObservable
             .pipe(map(allTranslations => allTranslations[npmName]))