Add markown compatible help icon in comment textarea

6 files changed, 64 insertions, 5 deletions

diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index c9b0a9c63..ec8da02e2 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -3,6 +3,20 @@
     <img [src]="getAvatarUrl()" alt="Avatar" />
 
     <div class="form-group">
+      <my-help class="markdown-guide" helpType="custom" iconName="markdown" i18n-title title="Markdown compatible">
+        <ng-template ptTemplate="customHtml">
+          <div i18n>
+            Markdown compatible that supports:
+
+            <ul>
+              <li>Emphasis: <strong>**bold**</strong>, <i>_italic_</i></li>
+              <li>Links</li>
+              <li>Break lines</li>
+              <li>Lists</li>
+            </ul>
+          </div>
+        </ng-template>
+      </my-help>
       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
                 [readonly]="(user === null) ? true : false"
                 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index d8f851baf..814417f04 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -19,11 +19,49 @@ form {
   .form-group {
     flex-grow: 1;
     margin: 0;
+    position: relative;
+
+    $peertube-textarea-height: 60px;
+    $markdown-icon-height: 18px;
+    $markdown-icon-width: 30px;
+
+    .markdown-guide {
+      position: absolute;
+      top: 5px;
+      left: 4px;
+
+      @media screen and (max-width: 600px) {
+        left: 0;
+      }
+
+      ::ng-deep .help-tooltip-button {
+        my-global-icon {
+          height: $markdown-icon-height;
+          width: $markdown-icon-width;
+
+          svg {
+            opacity: 0.5;
+          }
+        }
+
+        &:focus, &:active, &:hover {
+          my-global-icon svg {
+            opacity: 1;
+          }
+        }
+      }
+    }
 
     textarea {
-      @include peertube-textarea(100%, 60px);
+      @include peertube-textarea(100%, $peertube-textarea-height);
       @include button-focus(pvar(--mainColorLightest));
 
+      text-indent: $markdown-icon-width;
+
+      @media screen and (max-width: 600px) {
+        text-indent: $markdown-icon-width + 5px;
+      }
+
       &:focus::placeholder {
         opacity: 0;
       }
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'>>