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>

5 files changed, 51 insertions, 1 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]))
diff --git a/client/src/types/register-client-option.model.ts b/client/src/types/register-client-option.model.ts
index 1c235107a..dff00e9dd 100644
--- a/client/src/types/register-client-option.model.ts
+++ b/client/src/types/register-client-option.model.ts
@@ -27,5 +27,10 @@ export type RegisterClientHelpers = {
     confirm?: { value: string, action?: () => void }
   }) => void
 
+  markdownRenderer: {
+    textMarkdownToHTML: (textMarkdown: string) => Promise<string>
+    enhancedMarkdownToHTML: (enhancedMarkdown: string) => Promise<string>
+  }
+
   translate: (toTranslate: string) => Promise<string>
 }
diff --git a/shared/models/plugins/register-server-setting.model.ts b/shared/models/plugins/register-server-setting.model.ts
index 45d79228d..ec175e9ef 100644
--- a/shared/models/plugins/register-server-setting.model.ts
+++ b/shared/models/plugins/register-server-setting.model.ts
@@ -1,7 +1,7 @@
 export interface RegisterServerSettingOptions {
   name: string
   label: string
-  type: 'input' | 'input-checkbox' | 'input-textarea'
+  type: 'input' | 'input-checkbox' | 'input-textarea' | 'markdown-text' | 'markdown-enhanced'
 
   // If the setting is not private, anyone can view its value (client code included)
   // If the setting is private, only server-side hooks can access it
diff --git a/support/doc/plugins/guide.md b/support/doc/plugins/guide.md
index e6870ce17..1bee1f611 100644
--- a/support/doc/plugins/guide.md
+++ b/support/doc/plugins/guide.md
@@ -149,6 +149,7 @@ registerSetting({
   name: 'admin-name',
   label: 'Admin name',
   type: 'input',
+  // type: input | input-checkbox | input-textarea | markdown-text | markdown-enhanced
   default: 'my super name'
 })
 
@@ -216,6 +217,20 @@ notifier.success('Success message content.')
 notifier.error('Error message content.')
 ```
 
+#### Markdown Renderer
+
+To render a formatted markdown text to HTML:
+
+```js
+const { markdownRenderer } = peertubeHelpers
+
+await markdownRenderer.textMarkdownToHTML('**My Bold Text**')
+// return <strong>My Bold Text</strong>
+
+await markdownRenderer.enhancedMarkdownToHTML('![alt-img](http://.../my-image.jpg)')
+// return <img alt=alt-img src=http://.../my-image.jpg />
+```
+
 #### Custom Modal
 
 To show a custom modal: