Merge branch '612-implement-deepl-api' into 'staging'

Resolve "Implement DeepL API"

Closes #612

See merge request arsnova/frag.jetzt!567

angular.json

@@ -76,7 +76,7 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
             "browserTarget": "arsnova-angular-frontend:build",
-            "proxyConfig": "proxy.conf.json"
+            "proxyConfig": "proxy.conf.js"
           },
           "configurations": {
             "production": {

proxy.conf.json → proxy.conf.js

-{
-  "/languagetool": {
-    "target": "https://lt.frag.jetzt/v2/check",
-    "secure": true,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/languagetool": ""
-    },
-    "logLevel": "debug"
-  },
-  "/spacy": {
-    "target": "https://spacy.frag.jetzt/spacy",
-    "secure": true,
-    "changeOrigin": true,
-    "pathRewrite": {
-      "^/spacy": ""
-    },
-    "logLevel": "debug"
-  },
-  "/api/ws/websocket": {
-    "target": "ws://localhost:8080",
-    "secure": false,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "ws": true,
-    "logLevel": "debug"
-  },
-  "/api/roomsubscription": {
-    "target": "http://localhost:8080",
-    "secure": false,
-    "pathRewrite": {
-      "^/api": ""
-    },
-    "logLevel": "debug"
-  },
-  "/api": {
-    "target": "http://localhost:8888",
-    "secure": false,
-    "pathRewrite": {
-      "^/api": ""
-    },
-		"logLevel": "debug"
-  }
-}
+const PROXY_CONFIG = {
+  "/deepl": {
+    "target": "https://api-free.deepl.com/v2",
+    "secure": true,
+    "changeOrigin": true,
+    "logLevel": "debug",
+    "router": function (req) {
+      const DEEPL_API_KEY = 'DEEPL_API_KEY';
+      req.url = req.url.substr(6) + '&auth_key=' + DEEPL_API_KEY;
+      return 'https://api-free.deepl.com/v2';
+    }
+  },
+  "/languagetool": {
+    "target": "https://lt.frag.jetzt/v2/check",
+    "secure": true,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/languagetool": ""
+    },
+    "logLevel": "debug"
+  },
+  "/spacy": {
+    "target": "https://spacy.frag.jetzt/spacy",
+    "secure": true,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/spacy": ""
+    },
+    "logLevel": "debug"
+  },
+  "/api/ws/websocket": {
+    "target": "ws://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "ws": true,
+    "logLevel": "debug"
+  },
+  "/api/roomsubscription": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "logLevel": "debug"
+  },
+  "/api": {
+    "target": "http://localhost:8888",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "logLevel": "debug"
+  }
+};
+
+module.exports = PROXY_CONFIG;

src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.html

 <div mat-dialog-content
      *ngIf="editRoom">
   <h2 class="oldtypo-h2">{{ 'room-page.description' | translate }}</h2>
-  <mat-tab-group>
-    <mat-tab label="{{'room-page.tab1' | translate}}">
-      <mat-form-field class="input-block" style="width:100%;min-width:100%;">
-      <textarea
-        (focus)="eventService.makeFocusOnInputTrue()"
-        (blur)="eventService.makeFocusOnInputFalse()"
-        [(ngModel)]="editRoom.description"
-        matInput
-        matTextareaAutosize
-        matAutosizeMinRows="2"
-        matAutosizeMaxRows="5"
-        maxlength="500"
-        name="description"
-        aria-labelledby="description"
-      ></textarea>
-        <mat-hint align="end">
-            <span aria-hidden="true">
-              {{ editRoom.description?editRoom.description.length:0 }} / 500
-            </span>
-        </mat-hint>
-      </mat-form-field>
-    </mat-tab>
-    <mat-tab label="{{'session.preview' | translate}}"
-             [disabled]="!editRoom.description">
-      <app-custom-markdown class="images" [data]="editRoom.description"></app-custom-markdown>
-    </mat-tab>
-  </mat-tab-group>
+  <app-write-comment [isModerator]="true"
+                     [placeholder]="''"
+                     [onClose]="buildCloseDialogActionCallback()"
+                     [onSubmit]="buildSaveActionCallback()"
+                     [i18nSection]="'room-page'"
+                     [confirmLabel]="'update'">
+  </app-write-comment>
 </div>
-<app-dialog-action-buttons
-  buttonsLabelSection="room-page"
-  confirmButtonLabel="update"
-
-  [cancelButtonClickAction]="buildCloseDialogActionCallback()"
-  [confirmButtonClickAction]="buildSaveActionCallback()"
-></app-dialog-action-buttons>

src/app/components/creator/_dialogs/room-description-settings/room-description-settings.component.ts

-import {Component,Inject,OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA,MatDialog,MatDialogRef} from '@angular/material/dialog';
-import {RoomCreatorPageComponent} from '../../room-creator-page/room-creator-page.component';
-import {NotificationService} from '../../../../services/util/notification.service';
-import {TranslateService} from '@ngx-translate/core';
-import {RoomService} from '../../../../services/http/room.service';
-import {Router} from '@angular/router';
-import {EventService} from '../../../../services/util/event.service';
-import {ProfanityFilter,Room} from '../../../../models/room';
-import {FormControl,Validators} from '@angular/forms';
+import { AfterViewInit, Component, Inject, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { RoomCreatorPageComponent } from '../../room-creator-page/room-creator-page.component';
+import { NotificationService } from '../../../../services/util/notification.service';
+import { TranslateService } from '@ngx-translate/core';
+import { RoomService } from '../../../../services/http/room.service';
+import { Router } from '@angular/router';
+import { EventService } from '../../../../services/util/event.service';
+import { Room } from '../../../../models/room';
+import { FormControl, Validators } from '@angular/forms';
+import { WriteCommentComponent } from '../../../shared/write-comment/write-comment.component';
 
 @Component({
-  selector:'app-room-description-settings',
-  templateUrl:'./room-description-settings.component.html',
-  styleUrls:['./room-description-settings.component.scss']
+  selector: 'app-room-description-settings',
+  templateUrl: './room-description-settings.component.html',
+  styleUrls: ['./room-description-settings.component.scss']
 })
-export class RoomDescriptionSettingsComponent implements OnInit{
+export class RoomDescriptionSettingsComponent implements AfterViewInit {
+
+  @ViewChild(WriteCommentComponent) writeComment: WriteCommentComponent;
   editRoom: Room;
-  roomNameFormControl=new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(30)]);
+  roomNameFormControl = new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]);
 
   constructor(public dialogRef: MatDialogRef<RoomCreatorPageComponent>,
               public dialog: MatDialog,
@@ -25,30 +28,34 @@ export class RoomDescriptionSettingsComponent implements OnInit{
               protected roomService: RoomService,
               public router: Router,
               public eventService: EventService,
-              @Inject(MAT_DIALOG_DATA) public data: any){
+              @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
 
-  ngOnInit(){
+  ngAfterViewInit() {
+    if (this.editRoom) {
+      this.writeComment.commentData.currentData = this.editRoom.description;
+    }
   }
 
-  buildCloseDialogActionCallback(): () => void{
-    return ()=>this.closeDialog('abort');
+  buildCloseDialogActionCallback(): () => void {
+    return () => this.closeDialog('abort');
   }
 
-  buildSaveActionCallback(): () => void{
-    return ()=>this.save();
+  buildSaveActionCallback(): () => void {
+    return () => this.save();
   }
 
-  closeDialog(type: string): void{
+  closeDialog(type: string): void {
     this.dialogRef.close(type);
   }
 
-  save(): void{
-    this.roomService.updateRoom(this.editRoom).subscribe(r=>this.editRoom=r);
-    if(!this.roomNameFormControl.hasError('required')
+  save(): void {
+    this.editRoom.description = this.writeComment.commentData.currentData;
+    this.roomService.updateRoom(this.editRoom).subscribe(r => this.editRoom = r);
+    if (!this.roomNameFormControl.hasError('required')
       && !this.roomNameFormControl.hasError('minlength')
-      && !this.roomNameFormControl.hasError('maxlength')){
+      && !this.roomNameFormControl.hasError('maxlength')) {
       this.closeDialog('update');
     }
     this.closeDialog('update');

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

@@ -46,7 +46,7 @@
       </mat-tab>
       <mat-tab label="{{'session.preview' | translate}}"
                [disabled]="!editRoom.description">
-        <app-custom-markdown class="images" [data]="editRoom.description"></app-custom-markdown>
+        <app-view-comment-data class="images" [currentData]="editRoom.description"></app-view-comment-data>
       </mat-tab>
     </mat-tab-group>
     <div fxLayout="column">

src/app/components/creator/room-creator-page/room-creator-page.component.html

@@ -65,7 +65,7 @@
       </div>
       <mat-card-content *ngIf="room.description"
                         fxLayoutAlign="center">
-        <app-custom-markdown class="images" [data]="room.description.trim()"></app-custom-markdown>
+        <app-view-comment-data class="images" [currentData]="room.description"></app-view-comment-data>
       </mat-card-content>
       <div fxLayout="column"
            fxLayoutAlign="center"

src/app/components/creator/room-creator-page/room-creator-page.component.ts

 import { Component, OnInit, Renderer2, OnDestroy, AfterContentInit } from '@angular/core';
 import { RoomService } from '../../../services/http/room.service';
-import {ActivatedRoute,Router} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { RoomPageComponent } from '../../shared/room-page/room-page.component';
-import {ProfanityFilter,Room} from '../../../models/room';
+import { Room } from '../../../models/room';
 import { CommentSettingsDialog } from '../../../models/comment-settings-dialog';
 import { Location } from '@angular/common';
 import { NotificationService } from '../../../services/util/notification.service';
@@ -10,7 +10,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { RoomEditComponent } from '../_dialogs/room-edit/room-edit.component';
 import { TranslateService } from '@ngx-translate/core';
 import { LanguageService } from '../../../services/util/language.service';
-import { TSMap } from 'typescript-map';
 import { WsCommentService } from '../../../services/websockets/ws-comment.service';
 import { CommentService } from '../../../services/http/comment.service';
 import { ModeratorsComponent } from '../_dialogs/moderators/moderators.component';
@@ -26,14 +25,10 @@ import { DeleteCommentsComponent } from '../_dialogs/delete-comments/delete-comm
 import { Export } from '../../../models/export';
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
 import { TopicCloudFilterComponent } from '../../shared/_dialogs/topic-cloud-filter/topic-cloud-filter.component';
-import {HeaderService} from '../../../services/util/header.service';
-import {RoomDeleteComponent} from '../_dialogs/room-delete/room-delete.component';
-import {RoomDeleted} from '../../../models/events/room-deleted';
-import {ProfanitySettingsComponent} from '../_dialogs/profanity-settings/profanity-settings.component';
-import {RoomDescriptionSettingsComponent} from '../_dialogs/room-description-settings/room-description-settings.component';
-import {ModeratorDeleteComponent} from '../_dialogs/moderator-delete/moderator-delete.component';
-import {ModeratorCommentPageComponent} from '../../moderator/moderator-comment-page/moderator-comment-page.component';
-import {ModeratorCommentListComponent} from '../../moderator/moderator-comment-list/moderator-comment-list.component';
+import { RoomDeleteComponent } from '../_dialogs/room-delete/room-delete.component';
+import { RoomDeleted } from '../../../models/events/room-deleted';
+import { ProfanitySettingsComponent } from '../_dialogs/profanity-settings/profanity-settings.component';
+import { RoomDescriptionSettingsComponent } from '../_dialogs/room-description-settings/room-description-settings.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -110,9 +105,12 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
 
   editSessionDescription(){
     const dialogRef = this.dialog.open(RoomDescriptionSettingsComponent, {
-      width: '400px'
+      width: '900px',
+      maxWidth: 'calc( 100% - 50px )',
+      maxHeight: 'calc( 100vh - 50px )',
+      autoFocus: false
     });
-    dialogRef.componentInstance.editRoom=this.room;
+    dialogRef.componentInstance.editRoom = this.room;
   }
 
   exportQuestions(){

src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts

@@ -19,7 +19,6 @@ import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderator
 import { TagsComponent } from '../../creator/_dialogs/tags/tags.component';
 import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component';
 import { Export } from '../../../models/export';
-import { CreateCommentComponent } from '../../shared/_dialogs/create-comment/create-comment.component';
 import { NotificationService } from '../../../services/util/notification.service';
 import { BonusTokenService } from '../../../services/http/bonus-token.service';
 import { CommentFilter, Period } from '../../../utils/filter-options';

src/app/components/moderator/room-moderator-page/room-moderator-page.component.html

@@ -34,7 +34,7 @@
 
       <mat-card-content *ngIf="room.description"
                         fxLayoutAlign="center">
-        <app-custom-markdown class="images" [data]="room.description.trim()"></app-custom-markdown>
+        <app-view-comment-data class="images" [currentData]="room.description"></app-view-comment-data>
       </mat-card-content>
       <div fxLayout="column"
            fxLayoutAlign="center"

src/app/components/participant/room-participant-page/room-participant-page.component.html

@@ -21,7 +21,7 @@
       </div>
 
       <mat-card-content *ngIf="room.description" fxLayoutAlign="center">
-        <app-custom-markdown class="images" [data]="room.description.trim()"></app-custom-markdown>
+        <app-view-comment-data class="images" [currentData]="room.description"></app-view-comment-data>
       </mat-card-content>
       <mat-grid-list cols="1" rowHeight="2:1">
         <mat-grid-tile>

src/app/components/shared/_dialogs/create-comment/create-comment.component.html

@@ -4,6 +4,6 @@
                      [onClose]="this.onNoClick.bind(this)"
                      [isSpinning]="isSendingToSpacy"
                      [tags]="tags"
-                     [user]="user">
+                     [isModerator]="user && user.role > 0">
   </app-write-comment>
 </ars-row>

src/app/components/shared/_dialogs/create-comment/create-comment.component.ts

@@ -4,12 +4,13 @@ import { NotificationService } from '../../../../services/util/notification.serv
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { User } from '../../../../models/user';
-import { CommentListComponent } from '../../comment-list/comment-list.component';
 import { EventService } from '../../../../services/util/event.service';
 import { SpacyDialogComponent } from '../spacy-dialog/spacy-dialog.component';
 import { LanguagetoolService, Language } from '../../../../services/http/languagetool.service';
 import { CreateCommentKeywords } from '../../../../utils/create-comment-keywords';
 import { WriteCommentComponent } from '../../write-comment/write-comment.component';
+import { DeepLDialogComponent } from '../deep-ldialog/deep-ldialog.component';
+import { DeepLService } from '../../../../services/http/deep-l.service';
 
 @Component({
   selector: 'app-submit-comment',
@@ -19,7 +20,6 @@ import { WriteCommentComponent } from '../../write-comment/write-comment.compone
 export class CreateCommentComponent implements OnInit {
 
   @ViewChild(WriteCommentComponent) commentComponent: WriteCommentComponent;
-  comment: Comment;
   user: User;
   roomId: string;
   tags: string[];
@@ -27,11 +27,12 @@ export class CreateCommentComponent implements OnInit {
 
   constructor(
     private notification: NotificationService,
-    public dialogRef: MatDialogRef<CommentListComponent>,
+    public dialogRef: MatDialogRef<CreateCommentComponent>,
     private translateService: TranslateService,
     public dialog: MatDialog,
     public languagetoolService: LanguagetoolService,
     public eventService: EventService,
+    private deeplService: DeepLService,
     @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
@@ -51,7 +52,32 @@ export class CreateCommentComponent implements OnInit {
     comment.createdFromLecturer = this.user.role > 0;
     comment.tag = tag;
     this.isSendingToSpacy = true;
-    this.openSpacyDialog(comment, text);
+    this.openDeeplDialog(body, text, (newBody: string, newText: string) => {
+      comment.body = newBody;
+      this.openSpacyDialog(comment, newText);
+    });
+  }
+
+  openDeeplDialog(body: string, text: string, onClose: (data: string, text: string) => void) {
+    this.deeplService.improveTextStyle(text).subscribe(improvedText => {
+      this.isSendingToSpacy = false;
+      this.dialog.open(DeepLDialogComponent, {
+        width: '900px',
+        maxWidth: '100%',
+        data: {
+          body,
+          text,
+          improvedText
+        }
+      }).afterClosed().subscribe((res) => {
+        if (res) {
+          onClose(res.body, res.text);
+        }
+      });
+    }, (_) => {
+      this.isSendingToSpacy = false;
+      onClose(body, text);
+    });
   }
 
   openSpacyDialog(comment: Comment, rawText: string): void {

src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.html

+<h2>{{'deepl.header' | translate}}</h2>
+<div mat-dialog-content>
+  <label id="deepl-radio-group-label">{{'deepl.label' | translate}}</label>
+  <br>
+  <mat-radio-group
+    aria-labelledby="deepl-radio-group-label"
+    [(ngModel)]="radioButtonValue">
+    <mat-radio-button [value]="normalValue">
+      <strong>{{'deepl.option-normal' | translate}}</strong>
+      <app-view-comment-data [currentData]="normalValue.body"></app-view-comment-data>
+    </mat-radio-button>
+    <br>
+    <mat-radio-button [value]="improvedValue">
+      <strong>{{'deepl.option-improved' | translate}}</strong>
+      <app-view-comment-data [currentData]="improvedValue.body"></app-view-comment-data>
+    </mat-radio-button>
+  </mat-radio-group>
+</div>
+
+<app-dialog-action-buttons
+  [buttonsLabelSection]="'comment-page'"
+  [confirmButtonLabel]="'continue'"
+  [cancelButtonClickAction]="buildCloseDialogActionCallback()"
+  [confirmButtonClickAction]="buildSubmitBodyActionCallback()">
+</app-dialog-action-buttons>

src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.scss

+::ng-deep {
+
+  mat-radio-button {
+    width: 100%;
+  }
+
+  .mat-radio-label {
+    width: calc(100% - 16px) !important;
+  }
+
+  .mat-radio-label-content {
+    width: 100%;
+  }
+
+  app-view-comment-data > div {
+    background: var(--surface);
+    border-radius: 10px;
+    padding: 7px;
+  }
+}

src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.spec.ts

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

src/app/components/shared/_dialogs/deep-ldialog/deep-ldialog.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ViewCommentDataComponent } from '../../view-comment-data/view-comment-data.component';
+
+interface ResultValue {
+  body: string;
+  text: string;
+}
+
+@Component({
+  selector: 'app-deep-ldialog',
+  templateUrl: './deep-ldialog.component.html',
+  styleUrls: ['./deep-ldialog.component.scss']
+})
+export class DeepLDialogComponent implements OnInit {
+
+  radioButtonValue: ResultValue;
+  normalValue: ResultValue;
+  improvedValue: ResultValue;
+
+  constructor(
+    private dialogRef: MatDialogRef<DeepLDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  ngOnInit(): void {
+    this.normalValue = {
+      body: this.data.body,
+      text: this.data.text
+    };
+    const sentences = this.data.improvedText.split('\n').filter(sent => sent.length > 0);
+    const delta = ViewCommentDataComponent.getDeltaFromData(this.data.body);
+    if (delta === null) {
+      setTimeout(() => this.dialogRef.close(this.normalValue));
+      return;
+    }
+    const ops = delta.ops;
+    let i = 0;
+    let sentenceIndex = 0;
+    let lastFoundIndex = -1;
+    for (; i < ops.length && sentenceIndex < sentences.length; i++) {
+      const data = ops[i]['insert'];
+      if (typeof data !== 'string') {
+        continue;
+      }
+      if (data === '\n') {
+        continue;
+      }
+      const endsNewline = data.endsWith('\n');
+      const mod = (endsNewline ? -1 : 0) + (data.startsWith('\n') ? -1 : 0);
+      const occurrence = data.split('\n').length + mod;
+      ops[i]['insert'] = sentences.slice(sentenceIndex, sentenceIndex + occurrence).join('\n') +
+        (endsNewline ? '\n' : '');
+      sentenceIndex += occurrence;
+      lastFoundIndex = i;
+    }
+    for (let j = ops.length - 1; j >= i; j--) {
+      const data = ops[i]['insert'];
+      if (data === 'string' && data.trim().length) {
+        ops.splice(j, 1);
+      }
+    }
+    if (sentenceIndex < sentences.length) {
+      if (lastFoundIndex < 0) {
+        setTimeout(() => this.dialogRef.close(this.normalValue));
+        return;
+      }
+      let data = ops[i]['insert'];
+      const endsNewline = data.endsWith('\n');
+      if (endsNewline) {
+        data = data.substring(0, data.length - 1);
+      }
+      ops[i]['insert'] = data + sentences.slice(sentenceIndex).join('\n') + (endsNewline ? '\n' : '');
+    }
+    this.improvedValue = {
+      body: ViewCommentDataComponent.getDataFromDelta(delta),
+      text: this.data.improvedText
+    };
+    this.radioButtonValue = this.normalValue;
+  }
+
+  buildCloseDialogActionCallback(): () => void {
+    return () => this.dialogRef.close();
+  }
+
+  buildSubmitBodyActionCallback(): () => void {
+    return () => this.dialogRef.close(this.radioButtonValue);
+  }
+
+}

src/app/components/shared/_dialogs/present-comment/present-comment.component.html

@@ -12,7 +12,7 @@
   <mat-icon >close</mat-icon>
 </button>
 <div id="comment">
-  <app-custom-markdown [data]="body"></app-custom-markdown>
+  <app-view-comment-data [currentData]="body"></app-view-comment-data>
 </div>
 
 <div class="visually-hidden">

src/app/components/shared/_dialogs/spacy-dialog/spacy-dialog.component.ts

 import { AfterContentInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-import { CreateCommentComponent } from '../create-comment/create-comment.component';
 import { SpacyService, SpacyKeyword } from '../../../../services/http/spacy.service';
 import { LanguagetoolService } from '../../../../services/http/languagetool.service';
 import { Comment } from '../../../../models/comment';
@@ -39,7 +37,7 @@ export class SpacyDialogComponent implements OnInit, AfterContentInit {
   constructor(
     protected langService: LanguagetoolService,
     private spacyService: SpacyService,
-    public dialogRef: MatDialogRef<CreateCommentComponent>,
+    public dialogRef: MatDialogRef<SpacyDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data) {
   }
 

src/app/components/shared/comment-answer/comment-answer.component.html

@@ -10,8 +10,9 @@
        fxLayoutAlign="center">
     <mat-card class="answer border-answer"
               *ngIf="!isStudent || answer">
-      <app-write-comment [user]="user"
+      <app-write-comment [isModerator]="user && user.role > 0"
                          [isCommentAnswer]="true"
+                         [placeholder]="'comment-page.your-answer'"
                          [onClose]="openDeleteAnswerDialog()"
                          [onSubmit]="saveAnswer()"
                          [disableCancelButton]="!answer && commentComponent && commentComponent.commentData.currentText.length > 0"

src/app/components/shared/questionwall/question-wall/question-wall.component.html

@@ -132,9 +132,9 @@
             </ars-row>
             <ars-row>
               <ars-row class="bound" style="padding:16px 32px 16px 32px;box-sizing:border-box;max-width:100%;">
-                <app-custom-markdown [ngStyle]="{'font-size':fontSize+'%'}"
+                <app-view-comment-data [ngStyle]="{'font-size':fontSize+'%'}"
                                      class="questionwall-present-markdown images"
-                                     [data]="commentFocus.comment.body"></app-custom-markdown>
+                                     [currentData]="commentFocus.comment.body"></app-view-comment-data>
               </ars-row>
             </ars-row>
             <ars-row [height]="50">
@@ -251,7 +251,7 @@
                   (click)="focusComment(comment)"
                   style="box-sizing:border-box;padding:0 16px;cursor:pointer">
                   <p class="questionwall-comment-body">
-                    <app-custom-markdown class="images" [data]="comment.comment.body"></app-custom-markdown>
+                    <app-view-comment-data class="images" [currentData]="comment.comment.body"></app-view-comment-data>
                   </p>
                 </ars-row>
                 <ars-row [height]="50">