Add a markdown preview to session settings

angular.json

@@ -23,7 +23,9 @@
             ],
             "styles": [
               "src/styles.scss",
-              "./node_modules/material-design-icons/iconfont/material-icons.css"
+              "./node_modules/material-design-icons/iconfont/material-icons.css",
+              "node_modules/prismjs/themes/prism-okaidia.css",
+              "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
             ],
             "scripts": [
               "node_modules/marked/lib/marked.js"
@@ -138,4 +140,4 @@
       "prefix": "app"
     }
   }
-}
+}
\ No newline at end of file

src/app/app.module.ts

@@ -25,7 +25,7 @@ import { CreatorModule } from './components/creator/creator.module';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LanguageService } from './services/util/language.service';
-import { MarkdownService, MarkedOptions } from 'ngx-markdown';
+import { MarkdownModule, MarkdownService, MarkedOptions } from 'ngx-markdown';
 import { NewLandingComponent } from './components/home/new-landing/new-landing.component';
 import { HomePageComponent } from './components/home/home-page/home-page.component';
 import { UserHomeComponent } from './components/home/user-home/user-home.component';
@@ -59,6 +59,9 @@ import { OverlayComponent } from './components/home/_dialogs/overlay/overlay.com
 import { DemoDeComponent } from '../assets/i18n/demo/demo-de';
 import { DemoEnComponent } from '../assets/i18n/demo/demo-en';
 
+import 'prismjs/prism';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+
 export function dialogClose(dialogResult: any) {
 }
 
@@ -113,6 +116,7 @@ export function initializeApp(appConfig: AppConfig) {
     ThemeModule,
     CreatorModule,
     ModeratorModule,
+    MarkdownModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     TranslateModule.forChild({
       loader: {

src/app/components/creator/_dialogs/room-edit/room-edit.component.html

@@ -9,7 +9,9 @@
       <mat-placeholder class="placeholder">{{ 'session.session-name' | translate }}</mat-placeholder>
       <mat-hint align="end"><span aria-hidden="true">{{ editRoom.name.length }} / 20</span></mat-hint>
     </mat-form-field>
-    <mat-form-field class="input-block">
+    <mat-tab-group>
+      <mat-tab label="{{'room-page.description' | translate}}">
+        <mat-form-field class="input-block">
       <textarea
         (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
         [(ngModel)]="editRoom.description"
@@ -21,9 +23,17 @@
         name="description"
         aria-labelledby="description"
       ></textarea>
-      <mat-placeholder class="placeholder">{{ 'session.description' | translate }}</mat-placeholder>
-      <mat-hint align="end"><span aria-hidden="true">{{ editRoom.description ? editRoom.description.length : 0 }} / 255</span></mat-hint>
-    </mat-form-field>
+          <mat-hint align="end">
+            <span aria-hidden="true">
+              {{ editRoom.description ? editRoom.description.length : 0 }} / 255
+            </span>
+          </mat-hint>
+        </mat-form-field>
+      </mat-tab>
+      <mat-tab label="{{'session.preview' | translate}}" [disabled]="!editRoom.description">
+        <markdown [data]="editRoom.description"></markdown>
+      </mat-tab>
+    </mat-tab-group>
     <div fxLayoutAlign="center center">
       <button mat-raised-button class="delete" (click)="openDeleteRoomDialog()" aria-labelledby="delete-room">
         <mat-icon>delete</mat-icon>

src/app/components/creator/_dialogs/room-edit/room-edit.component.scss

@@ -4,7 +4,7 @@
 
 .delete {
   margin: 20px 0 20px 0;
-  min-width: 220px;
+  min-width: 160px;
   background-color: var(--red);
   color: var(--on-secondary);
 }
@@ -51,3 +51,17 @@ mat-hint {
   color: var(--on-surface)!important;
 }
 
+::ng-deep .mat-tab-label-active,
+::ng-deep .mat-tab-label {
+  color: var(--on-surface);
+  opacity: 1!important;
+}
+
+::ng-deep .mat-ink-bar {
+  background-color: var(--primary) !important;
+}
+
+markdown {
+  color: var(--on-surface);
+}
+

src/app/components/creator/creator.module.ts

@@ -29,6 +29,7 @@ import { ModeratorDeleteComponent } from './_dialogs/moderator-delete/moderator-
 import { DeleteCommentComponent } from './_dialogs/delete-comment/delete-comment.component';
 import { DeleteCommentsComponent } from './_dialogs/delete-comments/delete-comments.component';
 import { BonusDeleteComponent } from './_dialogs/bonus-delete/bonus-delete.component';
+import { MarkdownModule } from 'ngx-markdown';
 
 @NgModule({
   imports: [
@@ -44,7 +45,8 @@ import { BonusDeleteComponent } from './_dialogs/bonus-delete/bonus-delete.compo
         deps: [HttpClient]
       },
       isolate: true
-    })
+    }),
+    MarkdownModule
   ],
   declarations: [
     ContentChoiceCreatorComponent,

src/assets/i18n/creator/de.json

@@ -175,10 +175,10 @@
     "create-content": "Frage erstellen",
     "default-content-group": "Standard",
     "delete-all-comments": "Alle Fragen löschen",
-    "delete-room": "Löschen",
+    "delete-room": "Sitzung Löschen",
     "delete-room-description": "Sitzung löschen",
     "deleted": " gelöscht.",
-    "description": "Beschreibung der Sitzung",
+    "description": "Beschreibung",
     "email-error": "E-Mail Adresse ist ungültig.",
     "export-comments": "Fragen exportieren",
     "general": "Sitzung",
@@ -226,9 +226,10 @@
   "session": {
     "a11y-description": "Gib eine Beschreibung für die Sitzung ein.",
     "create-session": "Speichern",
-    "description": "Beschreibung der Sitzung",
+    "description": "Beschreibung",
     "max-ls": "Maximale Anzahl Zeichen:",
-    "session-name": "Name der Sitzung"
+    "session-name": "Name der Sitzung",
+    "preview": "Vorschau"
   },
   "statistic": {
     "abstentions": "Enthaltungen",

src/assets/i18n/creator/en.json

@@ -179,7 +179,7 @@
     "delete-room": "Delete session",
     "delete-room-description": "Delete session",
     "deleted": " deleted.",
-    "description": "Description of session",
+    "description": "Description",
     "email-error": "E-Mail is invalid.",
     "export-comments": "Export questions",
     "general": "Session",
@@ -227,9 +227,10 @@
   "session": {
     "a11y-description": "Enter a description for the session",
     "create-session": "Create session",
-    "description": "Session description",
+    "description": "Description",
     "max-ls": "Max. characters:",
-    "session-name": "Session name"
+    "session-name": "Session name",
+    "preview": "Preview"
   },
   "statistic": {
     "abstentions": "Abstentions",