Add ability to delete and re-draft a comment with no replies + markdown infos + unicode emojis

client/src/app/+videos/+video-watch/comment/video-comment-add.component.html

@@ -10,6 +10,30 @@
  (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
 
  </textarea>
+ <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
+ <ng-template ptTemplate="customHtml">
+ <span i18n>Markdown compatible that supports:</span>
+
+ <ul>
+ <li><span i18n>Auto generated links</span></li>
+ <li><span i18n>Break lines</span></li>
+ <li><span i18n>Lists</span></li>
+ <li>
+ <span i18n>Emphasis</span>
+ <code>**<strong i18n>bold</strong>** _<i i18n>italic</i>_</code>
+ </li>
+ <li>
+ <span i18n>Emoji shortcuts</span>
+ <code>:) &lt;3</code>
+ </li>
+ <li>
+ <span i18n>Emoji markup</span>
+ <code>:smile:</code>
+ <div><a href="" (click)="openEmojiModal($event)" i18n>See complete list</a></div>
+ </li>
+ </ul>
+ </ng-template>
+ </my-help>
  <div *ngIf="formErrors.text" class="form-error">
  {{ formErrors.text }}
  </div>
@@ -20,16 +44,16 @@
  <button *ngIf="isAddButtonDisplayed()" class="cancel-button" (click)="cancelCommentReply()" type="button" i18n>
  Cancel
  </button>
- <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }" i18n>
- Reply
+ <button *ngIf="isAddButtonDisplayed()" [ngClass]="{ disabled: !form.valid || addingComment }">
+ {{ addingCommentButtonValue }}
  </button>
  </div>
 </form>
 
 <ng-template #visitorModal let-modal>
  <div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from commenting</h4>
- <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideVisitorModal()"></my-global-icon>
+ <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
  </div>
  <div class="modal-body">
  <span i18n>
@@ -45,7 +69,7 @@ <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from c
  <div class="modal-footer inputs">
  <input
  type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
- (click)="hideVisitorModal()" (key.enter)="hideVisitorModal()"
+ (click)="hideModals()" (key.enter)="hideModals()"
  >
 
  <input
@@ -54,3 +78,22 @@ <h4 class="modal-title" id="modal-basic-title" i18n>You are one step away from c
  >
  </div>
 </ng-template>
+
+<ng-template #emojiModal>
+ <div class="modal-header">
+ <h4 class="modal-title" id="modal-basic-title" i18n>Markdown Emoji List</h4>
+ <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideModals()"></my-global-icon>
+ </div>
+ <div class="modal-body">
+ <table class="table-emoji" *ngFor="let emojiMarkup of emojiMarkupList | keyvalue">
+ <tr>
+ <td>
+ <span>{{ emojiMarkup.value }}</span>
+ </td>
+ <td>
+ <code>:{{ emojiMarkup.key }}:</code>
+ </td>
+ </tr>
+ </table>
+ </div>
+</ng-template>

client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

@@ -19,9 +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;
+ right: 9px;
+
+ ::ng-deep .help-tooltip-button {
+ my-global-icon {
+ height: $markdown-icon-height;
+ width: $markdown-icon-width;
+
+ svg {
+ color: #C6C6C6;
+ fill: #C6C6C6;
+ border-radius: 3px;
+ }
+ }
+
+ &:focus, &:active, &:hover {
+ my-global-icon svg {
+ background-color: #C6C6C6;
+ color: pvar(--mainBackgroundColor);
+ fill: pvar(--mainBackgroundColor);
+ }
+ }
+ }
+ }
 
  textarea {
- @include peertube-textarea(100%, 60px);
+ @include peertube-textarea(100%, $peertube-textarea-height);
+ @include button-focus(pvar(--mainColorLightest));
+
+ min-height: calc(#{$peertube-textarea-height} - 15px * 2);
+ padding-right: $markdown-icon-width + 15px !important;
+
+ @media screen and (max-width: 600px) {
+ padding-right: $markdown-icon-width + 19px !important;
+ }
 
  &:focus::placeholder {
  opacity: 0;
@@ -59,6 +99,16 @@ form {
  }
 }
 
+.table-emoji {
+ td {
+ &:first-child {
+ width: 20px;
+ }
+
+ vertical-align: top;
+ }
+}
+
 @media screen and (max-width: 600px) {
  textarea, .comment-buttons button {
  font-size: 14px !important;

client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs'
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
 import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
@@ -13,52 +13,60 @@ import { VideoCommentCreate } from '@shared/models'
  templateUrl: './video-comment-add.component.html',
  styleUrls: ['./video-comment-add.component.scss']
 })
-export class VideoCommentAddComponent extends FormReactive implements OnInit {
+export class VideoCommentAddComponent extends FormReactive implements OnChanges, OnInit {
  @Input() user: User
  @Input() video: Video
- @Input() parentComment: VideoComment
- @Input() parentComments: VideoComment[]
+ @Input() parentComment?: VideoComment
+ @Input() parentComments?: VideoComment[]
  @Input() focusOnInit = false
+ @Input() textValue?: string
 
  @Output() commentCreated = new EventEmitter<VideoComment>()
  @Output() cancel = new EventEmitter()
 
  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
+ @ViewChild('emojiModal', { static: true }) emojiModal: NgbModal
  @ViewChild('textarea', { static: true }) textareaElement: ElementRef
 
  addingComment = false
+ addingCommentButtonValue: string
 
  constructor (
  protected formValidatorService: FormValidatorService,
  private videoCommentValidatorsService: VideoCommentValidatorsService,
  private notifier: Notifier,
  private videoCommentService: VideoCommentService,
  private modalService: NgbModal,
- private router: Router
+ private router: Router,
  ) {
  super()
  }
 
+ get emojiMarkupList () {
+ const emojiMarkup = require('markdown-it-emoji/lib/data/light.json')
+
+ return emojiMarkup
+ }
+
  ngOnInit () {
  this.buildForm({
  text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
  })
 
  if (this.user) {
- if (this.focusOnInit === true) {
- this.textareaElement.nativeElement.focus()
+ if (!this.parentComment) {
+ this.addingCommentButtonValue = $localize`Comment`
+ } else {
+ this.addingCommentButtonValue = $localize`Reply`
  }
 
- if (this.parentComment) {
- const mentions = this.parentComments
- .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
- .map(c => '@' + c.by)
-
- const mentionsSet = new Set(mentions)
- const mentionsText = Array.from(mentionsSet).join(' ') + ' '
+ this.initTextValue()
+ }
+ }
 
- this.form.patchValue({ text: mentionsText })
- }
+ ngOnChanges (changes: SimpleChanges) {
+ if (changes.textValue && changes.textValue.currentValue && changes.textValue.currentValue !== changes.textValue.previousValue) {
+ this.patchTextValue(changes.textValue.currentValue, true)
  }
  }
 
@@ -79,7 +87,12 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
  }
  }
 
- hideVisitorModal () {
+ openEmojiModal (event: any) {
+ event.preventDefault()
+ this.modalService.open(this.emojiModal, { backdrop: true })
+ }
+
+ hideModals () {
  this.modalService.dismissAll()
  }
 
@@ -127,7 +140,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
  }
 
  gotoLogin () {
- this.hideVisitorModal()
+ this.hideModals()
  this.router.navigate([ '/login' ])
  }
 
@@ -145,4 +158,34 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
  return this.videoCommentService
  .addCommentThread(this.video.id, commentCreate)
  }
+
+ private initTextValue () {
+ if (this.textValue) {
+ this.patchTextValue(this.textValue, this.focusOnInit)
+ return
+ }
+
+ if (this.parentComment) {
+ const mentions = this.parentComments
+ .filter(c => c.account && c.account.id !== this.user.account.id) // Don't add mention of ourselves
+ .map(c => '@' + c.by)
+
+ const mentionsSet = new Set(mentions)
+ const mentionsText = Array.from(mentionsSet).join(' ') + ' '
+
+ this.patchTextValue(mentionsText, this.focusOnInit)
+ }
+ }
+
+ private patchTextValue (text: string, focus: boolean) {
+ setTimeout(() => {
+ if (focus) {
+ this.textareaElement.nativeElement.focus()
+ }
+
+ this.textareaElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
+ })
+
+ this.form.patchValue({ text })
+ }
 }

client/src/app/+videos/+video-watch/comment/video-comment.component.html

@@ -1,4 +1,4 @@
-<div class="root-comment">
+<div *ngIf="isNotDeletedOrDeletedWithReplies()" class="root-comment">
  <div class="left">
  <a *ngIf="!comment.isDeleted" [href]="comment.account.url" target="_blank" rel="noopener noreferrer">
  <img
@@ -41,11 +41,10 @@
  ></div>
 
  <div class="comment-actions">
- <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
- <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
+ <div *ngIf="isUserLoggedIn()" tabindex=0 (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
 
  <my-user-moderation-dropdown
- [prependActions]="prependModerationActions"
+ [prependActions]="prependModerationActions" tabindex=0
  buttonSize="small" [account]="commentAccount" [user]="commentUser" i18n-label label="Options" placement="bottom-left auto"
  ></my-user-moderation-dropdown>
  </div>
@@ -58,7 +57,7 @@
  class="comment-date">{{ comment.createdAt | myFromNow }}</a>
  </div>
 
- <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
+ <div class="comment-html comment-html-deleted">
  <i i18n>This comment has been deleted</i>
  </div>
  </ng-container>
@@ -72,6 +71,7 @@
  [focusOnInit]="true"
  (commentCreated)="onCommentReplyCreated($event)"
  (cancel)="onResetReply()"
+ [textValue]="redraftValue"
  ></my-video-comment-add>
 
  <div *ngIf="commentTree" class="children">
@@ -84,8 +84,10 @@
  [parentComments]="newParentComments"
  (wantedToReply)="onWantToReply($event)"
  (wantedToDelete)="onWantToDelete($event)"
+ (wantedToRedraft)="onWantToRedraft($event)"
  (resetReply)="onResetReply()"
  (timestampClicked)="handleTimestampClicked($event)"
+ [redraftValue]="redraftValue"
  ></my-video-comment>
  </div>
  </div>

client/src/app/+videos/+video-watch/comment/video-comment.component.scss

@@ -118,13 +118,12 @@
  display: flex;
 
  ::ng-deep .dropdown-toggle,
- .comment-action-reply,
- .comment-action-delete {
+ .comment-action-reply {
  color: pvar(--greyForegroundColor);
  cursor: pointer;
  margin-right: 10px;
 
- &:hover {
+ &:hover, &:active, &:focus, &:focus-visible {
  color: pvar(--mainForegroundColor);
  }
  }