Add markown compatible help icon in comment textarea

2 files changed, 53 insertions, 1 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;
       }