Add keyboard shortcuts

src/app/shared/comment-editor/comment-editor.component.html

@@ -13,6 +13,7 @@
           <mat-label></mat-label>
           <textarea
             (paste)="onPaste($event)"
+            (keydown)="onKeyPress($event)"
             #commentTextArea
             (dragover)="disableCaretMovement($event)"
             id="{{ this.id }}"

src/app/shared/comment-editor/comment-editor.component.ts

@@ -47,7 +47,6 @@ export class CommentEditorComponent implements OnInit {
   @ViewChild('dropArea', { static: true }) dropArea;
   @ViewChild('commentTextArea', { static: true }) commentTextArea;
   @ViewChild('markdownArea', { static: false }) markdownArea;
-
   dragActiveCounter = 0;
   uploadErrorMessage: string;
   maxLength = ISSUE_BODY_SIZE_LIMIT;
@@ -69,6 +68,23 @@ export class CommentEditorComponent implements OnInit {
     this.commentField.setValidators([Validators.maxLength(this.maxLength)]);
   }
 
+  onKeyPress(event) {
+    if (this.isControlKeyPressed(event)) {
+      switch (event.key) {
+        case 'b':
+          event.preventDefault();
+          this.insertOrRemoveCharsFromHighlightedText('**');
+          break;
+        case 'i':
+          event.preventDefault();
+          this.insertOrRemoveCharsFromHighlightedText('_');
+          break;
+        default:
+          return;
+      }
+    }
+  }
+
   onDragEnter(event) {
     event.preventDefault();
     event.stopPropagation();
@@ -233,7 +249,6 @@ export class CommentEditorComponent implements OnInit {
     } else {
       toInsert = `[Uploading ${filename}...]\n`;
     }
-
     const cursorPosition = this.commentTextArea.nativeElement.selectionEnd;
     const endOfLineIndex = originalDescription.indexOf('\n', cursorPosition);
     const nextCursorPosition = cursorPosition + toInsert.length;
@@ -280,4 +295,81 @@ export class CommentEditorComponent implements OnInit {
       this.dropArea.nativeElement.classList.remove('highlight-drag-box-disabled');
     }
   }
+
+  private isControlKeyPressed(event) {
+    return event.ctrlKey || event.metaKey;
+  }
+
+  private insertOrRemoveCharsFromHighlightedText(char) {
+    const selectionStart = this.commentTextArea.nativeElement.selectionStart;
+    const selectionEnd = this.commentTextArea.nativeElement.selectionEnd;
+    const currentText = this.commentField.value;
+    const highlightedText = currentText.slice(selectionStart, selectionEnd);
+
+    if (this.hasCharsBeforeAndAfterHighlight(selectionStart, selectionEnd, currentText, char)) {
+      this.removeCharsBeforeAndAfterHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char);
+    } else if (this.hasCharsInTrimmedHighlight(highlightedText, char)) {
+      this.removeCharsFromHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char);
+    } else {
+      this.addCharsToHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char);
+    }
+  }
+
+  private hasCharsBeforeAndAfterHighlight(selectionStart, selectionEnd, currentText, char) {
+    const hasInsertedCharBefore = currentText.slice(selectionStart - char.length, selectionStart) === char;
+    const hasInsertedCharAfter = currentText.slice(selectionEnd, selectionEnd + char.length) === char;
+    return hasInsertedCharBefore && hasInsertedCharAfter;
+  }
+
+  private hasCharsInTrimmedHighlight(highlightedText, char) {
+    const highlightedTextTrimmed = highlightedText.trim();
+    const hasCharAtFront = highlightedTextTrimmed.slice(0, char.length) === char;
+    const hasCharAtEnd = highlightedTextTrimmed.slice(-char.length) === char;
+    return hasCharAtFront && hasCharAtEnd;
+  }
+
+  private removeCharsBeforeAndAfterHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char) {
+    this.commentField.setValue(
+      currentText.slice(0, selectionStart - char.length) + highlightedText + currentText.slice(selectionEnd + char.length)
+    );
+    this.commentTextArea.nativeElement.setSelectionRange(selectionStart - char.length, selectionEnd - char.length);
+  }
+
+  private removeCharsFromHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char) {
+    const highlightedTextTrimmed = highlightedText.trim();
+    const spacesRemovedLeft = highlightedText.trimRight().length - highlightedTextTrimmed.length;
+    const spacesRemovedRight = highlightedText.trimLeft().length - highlightedTextTrimmed.length;
+    const SPACE = ' ';
+    this.commentField.setValue(
+      currentText.slice(0, selectionStart) +
+        SPACE.repeat(spacesRemovedLeft) +
+        highlightedTextTrimmed.slice(char.length, -char.length) +
+        SPACE.repeat(spacesRemovedRight) +
+        currentText.slice(selectionEnd)
+    );
+    this.commentTextArea.nativeElement.setSelectionRange(
+      selectionStart + spacesRemovedLeft,
+      selectionEnd - 2 * char.length - spacesRemovedRight
+    );
+  }
+
+  private addCharsToHighlightedText(selectionStart, selectionEnd, currentText, highlightedText, char) {
+    const highlightedTextTrimmed = highlightedText.trim();
+    const spacesRemovedLeft = highlightedText.trimRight().length - highlightedTextTrimmed.length;
+    const spacesRemovedRight = highlightedText.trimLeft().length - highlightedTextTrimmed.length;
+    const SPACE = ' ';
+    this.commentField.setValue(
+      currentText.slice(0, selectionStart) +
+        SPACE.repeat(spacesRemovedLeft) +
+        char +
+        highlightedTextTrimmed +
+        char +
+        SPACE.repeat(spacesRemovedRight) +
+        currentText.slice(selectionEnd)
+    );
+    this.commentTextArea.nativeElement.setSelectionRange(
+      selectionStart + char.length + spacesRemovedLeft,
+      selectionEnd + char.length - spacesRemovedRight
+    );
+  }
 }