diff --git a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
index e78321c4fdc54551de2d0eb7ac7dab54ea62f9c2..65f591bdd68adefbfa578b4a41b8e5ebc9df8771 100644
--- a/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
+++ b/src/app/components/creator/content-choice-creator/content-choice-creator.component.html
@@ -1,5 +1,4 @@
<form (ngSubmit)="submitContent()" fxLayout="column" fxLayoutGap="20px">
- <markdown [data]="content.body"></markdown>
<mat-divider></mat-divider>
<mat-radio-group [(ngModel)]="singleChoice" [ngModelOptions]="{standalone: true}" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
diff --git a/src/app/components/creator/content-create-page/content-create-page.component.html b/src/app/components/creator/content-create-page/content-create-page.component.html
index c4e7185fb21d293608a5dcb0a20674f0c72d8a1a..c09a49856856980c2d252b2be23fe129858f0113 100644
--- a/src/app/components/creator/content-create-page/content-create-page.component.html
+++ b/src/app/components/creator/content-create-page/content-create-page.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="5%" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
<mat-tab-group>
<mat-tab label="Single / Multiple Choice">
diff --git a/src/app/components/creator/content-create-page/content-create-page.component.scss b/src/app/components/creator/content-create-page/content-create-page.component.scss
index ea9c3d93f767262d835e953d031a031e64ad6f42..c40d37584524f6f914cd0e3e7e4b6265f8943abb 100644
--- a/src/app/components/creator/content-create-page/content-create-page.component.scss
+++ b/src/app/components/creator/content-create-page/content-create-page.component.scss
@@ -4,5 +4,5 @@ mat-tab-group {
}
.tab-container {
- padding: 20px;
+ padding: 5px;
}
diff --git a/src/app/components/creator/content-creator/content-creator.component.html b/src/app/components/creator/content-creator/content-creator.component.html
index 4f51d904f761cfe0d47418ee4c689fec74c6379e..407b840e6c9cf2cf3acbf0c07b2795914fa95fbd 100644
--- a/src/app/components/creator/content-creator/content-creator.component.html
+++ b/src/app/components/creator/content-creator/content-creator.component.html
@@ -3,12 +3,10 @@
<input matInput #subject [(ngModel)]="content.subject" placeholder="{{'content.subject' | translate}}" name="subject"
maxlength="20">
</mat-form-field>
-<app-markdown-toolbar textareaId="content-text-body"></app-markdown-toolbar>
<mat-form-field class="input-block">
<textarea matInput #body [(ngModel)]="content.body" placeholder="{{'content.body' | translate}}" name="body"
matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8" maxlength="100"></textarea>
</mat-form-field>
-<markdown [data]="content.body"></markdown>
<mat-form-field>
<input matInput #group [formControl]="myControl" [matAutocomplete]="auto"
placeholder="{{'content.collection' | translate}}" [(ngModel)]="lastCollection" />
diff --git a/src/app/components/creator/creator.module.ts b/src/app/components/creator/creator.module.ts
index 58a6112858dfe2c18a34e20bd85c09e1232e7904..dafab2dc5774102d634182533f6dd58b3d629796 100644
--- a/src/app/components/creator/creator.module.ts
+++ b/src/app/components/creator/creator.module.ts
@@ -7,7 +7,6 @@ import { ContentLikertCreatorComponent } from './content-likert-creator/content-
import { ContentTextCreatorComponent } from './content-text-creator/content-text-creator.component';
import { ContentYesNoCreatorComponent } from './content-yes-no-creator/content-yes-no-creator.component';
import { HomeCreatorPageComponent } from './home-creator-page/home-creator-page.component';
-import { MarkdownToolbarComponent } from './markdown-toolbar/markdown-toolbar.component';
import { RoomCreatorPageComponent } from './room-creator-page/room-creator-page.component';
import { EssentialsModule } from '../essentials/essentials.module';
import { RoomCreateComponent } from './_dialogs/room-create/room-create.component';
@@ -45,7 +44,6 @@ import { ContentEditComponent } from './_dialogs/content-edit/content-edit.compo
ContentTextCreatorComponent,
ContentYesNoCreatorComponent,
HomeCreatorPageComponent,
- MarkdownToolbarComponent,
RoomCreatorPageComponent,
RoomCreateComponent,
RoomDeleteComponent,
diff --git a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.html b/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.html
deleted file mode 100644
index 4877ff50c41f25fba96a51747d68a38627513dd2..0000000000000000000000000000000000000000
--- a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="markdown-toolbar">
- <button mat-icon-button *ngFor="let button of buttons" (click)="onClick($event, button);"
- matTooltip="{{button.label}}">
- <mat-icon attr.aria-label="{{button.label}}">{{button.icon}}</mat-icon>
- </button>
-</div>
diff --git a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.scss b/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.spec.ts b/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.spec.ts
deleted file mode 100644
index 34d8a38f8d2c5a2bc87de211188773c2a1aed3af..0000000000000000000000000000000000000000
--- a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MarkdownToolbarComponent } from './markdown-toolbar.component';
-
-describe('MarkdownToolbarComponent', () => {
- let component: MarkdownToolbarComponent;
- let fixture: ComponentFixture<MarkdownToolbarComponent>;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ MarkdownToolbarComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(MarkdownToolbarComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.ts b/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.ts
deleted file mode 100644
index f82958fa55be9865287ddcb27edcec09f12783a0..0000000000000000000000000000000000000000
--- a/src/app/components/creator/markdown-toolbar/markdown-toolbar.component.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { MatDialog } from '@angular/material';
-import { Data, GenericDataDialogComponent } from '../../shared/_dialogs/generic-data-dialog/generic-data-dialog.component';
-
-@Component({
- selector: 'app-markdown-toolbar',
- templateUrl: './markdown-toolbar.component.html',
- styleUrls: ['./markdown-toolbar.component.scss']
-})
-/**
- * Component offering markdown action buttons for a textarea.
- * Associated via input attribute containing the textarea's HTML id.
- */
-export class MarkdownToolbarComponent {
- /**
- * HTML id associated to the marked up textarea
- */
- @Input() textareaId: string;
- /**
- * Associated textarea
- */
- textarea: HTMLTextAreaElement;
-
- /**
- * Button configuration array used for template generation. See {@link Button} for further information.
- * @type {Button[]}
- */
- buttons: Button[] = [
- new Button('bold', 'Bold', 'format_bold', '**{{TEXT}}**'),
- new Button('italic', 'Italic', 'format_italic', '*{{TEXT}}*'),
- new Button('title', 'Title', 'title', '## {{TEXT}}'),
- new Button('link', 'Link', 'insert_link', '[{{TEXT}}]({{URL}})'),
- new Button('ul', 'Unordered list', 'format_list_bulleted', '* {{TEXT}}'),
- new Button('ol', 'Ordered list', 'format_list_numbered', '1. {{TEXT}}'),
- new Button('code', 'Code', 'code', '`{{TEXT}}`'),
- new Button('quote', 'Quote', 'format_quote', '> {{TEXT}}'),
- new Button('image', 'Image', 'insert_photo', ''),
- ];
-
- constructor(public dialog: MatDialog) { }
-
- /**
- * Gets called in template, run action when a button gets pressed
- * @param $event
- * @param button
- */
- onClick($event, button) {
- // Get the associated textarea element. See function documentation for further information
- this.updateTextarea();
-
- // Prevent all default actions (form submission, ..)
- $event.preventDefault();
- if (!this.textarea) {
- // Cancel the action click in case there is no associated textarea
- console.log(`MarkdownToolbar: textarea with id '${this.textareaId}' not found.`);
- return;
- }
-
- // Init formatted string with button's format string, placeholders will be replaced later on
- let formattedString = button.format;
- // Get offset for cursor position (set the cursor to the beginning of the surrounded text)
- const cursorPosition = formattedString.indexOf('{{TEXT}}');
-
- // Handle different buttons here
- switch (button.id) {
- case 'link':
- case 'image':
- // Open a configuration dialog
- const dialogRef = this.dialog.open(GenericDataDialogComponent, {
- data: [
- new Data('TEXT', 'Text', this.getSelectedText()),
- new Data('URL', 'URL')
- ]
- });
- // Wait for dialog to get closed..
- dialogRef.afterClosed().subscribe(result => {
- // Cancel if there is no data (dialog got closed without submitting)
- if (result === undefined) {
- return;
- }
- // Loop data entries..
- result.forEach(data => {
- // Replace placeholder with data provided by the user
- formattedString = formattedString.replace(`{{${data.id}}}`, data.value);
- });
- // Insert the formatted string and update the cursor position
- this.insertTextAtSelection(formattedString, cursorPosition);
- });
- break;
- default:
- // Replace text placeholder with the selected text (keep surrounding tags empty if there was no selection)
- formattedString = formattedString.replace('{{TEXT}}', this.getSelectedText());
- // Insert the text associated to the button and update the cursor position
- this.insertTextAtSelection(formattedString, cursorPosition);
- }
- }
-
- /**
- * Get the selected text of the textarea
- * @returns {string}
- */
- private getSelectedText() {
- return this.textarea.value.slice(this.textarea.selectionStart, this.textarea.selectionEnd);
- }
-
- /**
- * Insert the passed string at the cursor position (replaces selected text if there is any) and update the cursor's position to start
- * of the inserted text respecting the passed selection offset
- * @param {string} formattedString
- * @param {number} selectionOffset
- */
- private insertTextAtSelection(text: string, selectionOffset: number) {
- // Get the textarea's text selection positions (no selection when selectionStart == selectionEnd)
- const selectionStart = this.textarea.selectionStart;
- const selectionEnd = this.textarea.selectionEnd;
- // Get textarea's value
- const value = this.textarea.value;
-
- // Insert the action's text at the cursor's position
- this.textarea.value = [value.slice(0, selectionStart), text, value.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 + selectionOffset;
- // Set the cursor to the calculated position
- this.textarea.setSelectionRange(cursorPosition, cursorPosition);
- }
-
- /**
- * Get the textarea by its id in case it isn't already initialized.
- * The angular material tab element uses portal hosts to keep the DOM free of inactive tabs which makes it impossible to retrieve the
- * element once in the `AfterViewInit`. As this component gets used in the tab element we retrieve the textarea on button clicks as this
- * makes sure the associated area is in the DOM too.
- * See https://github.com/angular/material2/issues/731 for reference.
- */
- private updateTextarea() {
- if (!this.textarea) {
- this.textarea = document.getElementById(this.textareaId) as HTMLTextAreaElement;
- }
- }
-}
-
-/**
- * Data class for markdown toolbar action buttons
- */
-class Button {
- /**
- * Id used to identify the action for special behaviour
- */
- id: string;
- /**
- * Label shown to the user
- */
- label: string;
- /**
- * Icon key (material icon font) shown to the user
- */
- icon: string;
- /**
- * Format string
- */
- format: string;
-
- /**
- * Constructor for creating an instance of {@link Button}
- *
- * @param {string} id
- * @param {string} label
- * @param {string} icon
- * @param {string} format
- */
- constructor(id: string, label: string, icon: string, format: string) {
- this.id = id;
- this.label = label;
- this.icon = icon;
- this.format = format;
- }
-}
diff --git a/src/app/components/essentials/essentials.module.ts b/src/app/components/essentials/essentials.module.ts
index e02a0733dbfea7da68502a38a8997829edb8fa0c..58e4e28f3780cbaa9976106aa0e017a59ca6cf24 100644
--- a/src/app/components/essentials/essentials.module.ts
+++ b/src/app/components/essentials/essentials.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { MarkdownModule } from 'ngx-markdown';
import {
MatAutocompleteModule,
MatBadgeModule,
@@ -86,7 +85,6 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
FlexLayoutModule,
FormsModule,
HttpClientModule,
- MarkdownModule,
ReactiveFormsModule
],
declarations: []
diff --git a/src/app/components/participant/content-text-participant/content-text-participant.component.html b/src/app/components/participant/content-text-participant/content-text-participant.component.html
index 6818fc065bb92bbe1118abb8d743f7755aed6923..33f79b4cd3df91813ee2dac0b5b3f3b1290d8930 100644
--- a/src/app/components/participant/content-text-participant/content-text-participant.component.html
+++ b/src/app/components/participant/content-text-participant/content-text-participant.component.html
@@ -1,6 +1,5 @@
<form (ngSubmit)="submitAnswer()">
<h1 class="mat-headline">{{ content.subject }}</h1>
- <markdown [data]="content.body"></markdown>
<mat-divider></mat-divider>
<mat-form-field class="input-block">
<textarea matInput [(ngModel)]="textAnswer" name="answer" #answer placeholder="{{ 'answer.your-answer' | translate }}"></textarea>