Add markdown help dialog

src/app/app.module.ts

@@ -89,6 +89,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { MarkdownModule } from 'ngx-markdown';
 import { MarkdownToolbarComponent } from './components/fragments/markdown-toolbar/markdown-toolbar.component';
+import { MarkdownHelpDialogComponent } from './components/dialogs/markdown-help-dialog/markdown-help-dialog.component';
 
 @NgModule({
   declarations: [
@@ -127,7 +128,8 @@ import { MarkdownToolbarComponent } from './components/fragments/markdown-toolba
     AnswerEditComponent,
     ContentDeleteComponent,
     FeedbackBarometerPageComponent,
-    MarkdownToolbarComponent
+    MarkdownToolbarComponent,
+    MarkdownHelpDialogComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -140,7 +142,8 @@ import { MarkdownToolbarComponent } from './components/fragments/markdown-toolba
     ContentLikertCreatorComponent,
     ContentTextCreatorComponent,
     ContentYesNoCreatorComponent,
-    ContentDeleteComponent
+    ContentDeleteComponent,
+    MarkdownHelpDialogComponent
   ],
   imports: [
     AppRoutingModule,

src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.html

+<p>
+  You can use <a href="https://guides.github.com/features/mastering-markdown/" title="Markdown GitHub" target="_blank">
+  Markdown</a> to style your texts. The shown buttons offer shortcuts to insert commonly used tags.
+</p>
+<button mat-raised-button (click)="onNoClick();">Okay!</button>

src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MarkdownHelpDialogComponent } from './markdown-help-dialog.component';
+
+describe('MarkdownHelpDialogComponent', () => {
+  let component: MarkdownHelpDialogComponent;
+  let fixture: ComponentFixture<MarkdownHelpDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MarkdownHelpDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MarkdownHelpDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dialogs/markdown-help-dialog/markdown-help-dialog.component.ts

+import { Component } from '@angular/core';
+import { GenericDataDialogComponent } from '../generic-data-dialog/generic-data-dialog.component';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-markdown-help-dialog',
+  templateUrl: './markdown-help-dialog.component.html',
+  styleUrls: ['./markdown-help-dialog.component.scss']
+})
+export class MarkdownHelpDialogComponent {
+
+  constructor(public dialogRef: MatDialogRef<GenericDataDialogComponent>) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/components/fragments/markdown-toolbar/markdown-toolbar.component.ts

 import { Component, Input } from '@angular/core';
+import { MarkdownHelpDialogComponent } from '../../dialogs/markdown-help-dialog/markdown-help-dialog.component';
+import { MatDialog } from '@angular/material';
 
 @Component({
   selector: 'app-markdown-toolbar',
@@ -33,8 +35,11 @@ export class MarkdownToolbarComponent {
     new Button('code', 'Code', 'code', '`'),
     new Button('quote', 'Quote', 'format_quote', '> ', ''),
     new Button('image', 'Image', 'insert_photo', '![', '](https://...)'),
+    new Button('help', 'Help', 'help', '')
   ];
 
+  constructor(public dialog: MatDialog) { }
+
   /**
    * Gets called in template, run action when a button gets pressed
    * @param $event
@@ -52,6 +57,19 @@ export class MarkdownToolbarComponent {
       return;
     }
 
+    // Handle different buttons here
+    switch (button.id) {
+      case 'help':
+        // Open help dialog and prevent default action
+        this.dialog.open(MarkdownHelpDialogComponent);
+        break;
+      default:
+        // Insert the text associated to the button
+        this.insertTag(button.textBefore, button.textAfter);
+    }
+  }
+
+  private insertTag(before: string, after: string) {
     // Get the textarea's text selection positions (no selection when selectionStart == selectionEnd)
     const selectionStart = this.textarea.selectionStart;
     const selectionEnd = this.textarea.selectionEnd;
@@ -59,12 +77,12 @@ export class MarkdownToolbarComponent {
     const text = this.textarea.value;
 
     // Insert the action's text at the cursor's position
-    this.textarea.value = [text.slice(0, selectionStart), button.textBefore, text.slice(selectionStart, selectionEnd),
-      button.textAfter, text.slice(selectionEnd)].join('');
+    this.textarea.value = [text.slice(0, selectionStart), before, text.slice(selectionStart, selectionEnd),
+      after, text.slice(selectionEnd)].join('');
     // Focus the textarea
     this.textarea.focus();
     // Calculate the new cursor position (based on the action's text length and the previous cursor position)
-    const cursorPosition = selectionStart + button.textBefore.length;
+    const cursorPosition = selectionStart + before.length;
     // Set the cursor to the calculated position
     this.textarea.setSelectionRange(cursorPosition, cursorPosition);
   }