Add markown compatible help icon in comment textarea

4 files changed, 11 insertions, 4 deletions

diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ffd217cc7..99efcd599 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -4,6 +4,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
 const icons = {
   // misc icons
   'npm': require('!!raw-loader?!../../../assets/images/misc/npm.svg').default,
+  'markdown': require('!!raw-loader?!../../../assets/images/misc/markdown.svg').default,
   'language': require('!!raw-loader?!../../../assets/images/misc/language.svg').default,
   'video-lang': require('!!raw-loader?!../../../assets/images/misc/video-lang.svg').default,
   'support': require('!!raw-loader?!../../../assets/images/misc/support.svg').default,
diff --git a/client/src/app/shared/shared-main/misc/help.component.html b/client/src/app/shared/shared-main/misc/help.component.html
index 9a6d3e48e..b2d58a828 100644
--- a/client/src/app/shared/shared-main/misc/help.component.html
+++ b/client/src/app/shared/shared-main/misc/help.component.html
@@ -26,8 +26,8 @@
   role="button"
   class="help-tooltip-button"
   container="body"
-  title="Get help"
-  i18n-title
+  [title]="title"
+  tabindex=0
   popoverClass="help-popover"
   [attr.aria-pressed]="isPopoverOpened"
   [ngbPopover]="tooltipTemplate"
@@ -36,5 +36,5 @@
   (onHidden)="onPopoverHidden()"
   (onShown)="onPopoverShown()"
 >
-  <my-global-icon iconName="help"></my-global-icon>
+  <my-global-icon [iconName]="iconName"></my-global-icon>
 </span>
diff --git a/client/src/app/shared/shared-main/misc/help.component.scss b/client/src/app/shared/shared-main/misc/help.component.scss
index 1e7fb4fc6..ccc91ffab 100644
--- a/client/src/app/shared/shared-main/misc/help.component.scss
+++ b/client/src/app/shared/shared-main/misc/help.component.scss
@@ -5,14 +5,17 @@
   cursor: pointer;
   border: none;
 
+  margin: 5px;
+
   my-global-icon {
     width: 17px;
     position: relative;
     top: -1px;
-    margin: 5px;
 
     @include apply-svg-color(pvar(--greyForegroundColor))
   }
+
+  @include disable-outline;
 }
 
 ::ng-deep {
diff --git a/client/src/app/shared/shared-main/misc/help.component.ts b/client/src/app/shared/shared-main/misc/help.component.ts
index ebc965a88..bcbb464f3 100644
--- a/client/src/app/shared/shared-main/misc/help.component.ts
+++ b/client/src/app/shared/shared-main/misc/help.component.ts
@@ -1,5 +1,6 @@
 import { AfterContentInit, Component, ContentChildren, Input, OnChanges, OnInit, QueryList, TemplateRef } from '@angular/core'
 import { MarkdownService } from '@app/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
 import { PeerTubeTemplateDirective } from '../angular'
 
 @Component({
@@ -11,6 +12,8 @@ import { PeerTubeTemplateDirective } from '../angular'
 export class HelpComponent implements OnInit, OnChanges, AfterContentInit {
   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
   @Input() tooltipPlacement = 'right auto'
+  @Input() iconName: GlobalIconName = 'help'
+  @Input() title = $localize`Get help`
 
   @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'preHtml' | 'customHtml' | 'postHtml'>>