Merged in task/ux-plus-2023_02_x/UXP-241-rework (pull request #46)

Task/ux plus 2023 02 x/UXP-241 rework

Approved-by: Andrea Barbasso
Approved-by: Giuseppe Digilio

Author: FrancescoMolinaro

angular.json

@@ -69,7 +69,11 @@
                 "inject": false,
                 "bundleName": "dspace-theme"
               },
-              "./node_modules/leaflet/dist/leaflet.css"
+              "./node_modules/leaflet/dist/leaflet.css",
+              "./node_modules/quill/dist/quill.core.css",
+              "./node_modules/quill/dist/quill.snow.css",
+              "./node_modules/quill/dist/quill.bubble.css",
+              "./node_modules/quill-emoji/dist/quill-emoji.css"
             ],
             "scripts": [],
             "baseHref": "/"

package.json

@@ -91,7 +91,6 @@
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "@ng-dynamic-forms/core": "^15.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^15.0.0",
-    "@ng-util/markdown": "^12.1.2",
     "@ngrx/effects": "^15.4.0",
     "@ngrx/router-store": "^15.4.0",
     "@ngrx/store": "^15.4.0",
@@ -150,7 +149,10 @@
     "ngx-skeleton-loader": "^7.0.0",
     "nouislider": "^15.8.1",
     "pem": "1.14.8",
+    "ngx-quill": "21.0.2",
     "prop-types": "^15.8.1",
+    "quill": "1.3.7",
+    "quill-emoji": "^0.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",

src/app/app.module.ts

@@ -31,7 +31,6 @@ import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
 import { StoreDevModules } from '../config/store/devtools';
 import { RootModule } from './root.module';
 import { DspaceRestInterceptor } from './core/dspace-rest/dspace-rest.interceptor';
-import { NuMarkdownModule } from '@ng-util/markdown';
 import { FooterModule } from './footer/footer.module';
 import { SocialModule } from './social/social.module';
 import { DirectivesModule } from './directives/directives.module';
@@ -57,7 +56,6 @@ const IMPORTS = [
   FooterModule,
   HttpClientModule,
   AppRoutingModule,
-  NuMarkdownModule.forRoot({}),
   CoreModule.forRoot(),
   ScrollToModule.forRoot(),
   NgbModule,

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

@@ -1,3 +1 @@
-<nu-markdown [id]="controlId" [(ngModel)]="editValue" class="markdown-editor"
-             (ngModelChange)="editValueChange.emit($event)" [options]="options">
-</nu-markdown>
+<quill-editor class="markdown-editor" [ngModel]="editValue" [modules]="modules" (onContentChanged)="updateContent($event)"></quill-editor>

src/app/shared/markdown-editor/markdown-editor.component.scss

@@ -0,0 +1,3 @@
+quill-editor {
+  width: 100%;
+}

src/app/shared/markdown-editor/markdown-editor.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { By } from '@angular/platform-browser';
+import { By, DomSanitizer } from '@angular/platform-browser';
 
 import { MarkdownEditorComponent } from './markdown-editor.component';
 
@@ -16,7 +16,7 @@ describe('MarkdownEditorComponent', () => {
       imports: [
         RouterTestingModule.withRoutes([]),
       ],
-      providers: [],
+      providers: [DomSanitizer],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));

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

@@ -1,47 +1,55 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import 'quill-emoji/dist/quill-emoji.js';
+import { Component, EventEmitter, Input, Output, SecurityContext } from '@angular/core';
+import { ContentChange, QuillModules } from 'ngx-quill';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'ds-markdown-editor',
   templateUrl: './markdown-editor.component.html',
   styleUrls: ['./markdown-editor.component.scss']
 })
-export class MarkdownEditorComponent implements OnInit {
-  // to allow multiple textarea on the same screen, need to set an uniqueId for the textarea
-  controlId: string;
+export class MarkdownEditorComponent  {
   /**
    * Markdown Editor String value
    */
-  @Input() editValue: string;
+  @Input() editValue = '';
   /**
    * Markdown Editor String value Emitter
    */
   @Output() editValueChange = new EventEmitter();
+
   /**
-   * Nu markdown library options (default is chinese)
+   * Quill modules config
    */
-  options = {
-    minHeight: 200,
-    lang: 'en_US',
-    mode: 'ir',
-    preview: {
-      markdown: {
-        codeBlockPreview: false,
-      },
-      actions: [
-        'desktop', 'tablet', 'mobile'
-      ]
+  modules: QuillModules = {
+    'emoji-toolbar': true,
+    toolbar: {
+      container:  [
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ 'header': 1 }, { 'header': 2 }],
+        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+        [{ 'indent': '-1'}, { 'indent': '+1' }],
+        [{ 'direction': 'rtl' }],
+        [{ 'size': ['small', false, 'large', 'huge'] }],
+        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+        [{ 'font': [] }],
+        [{ 'align': [] }],
+        ['clean'],
+        ['emoji'],
+      ],
     },
-    toolbar: [
-      'emoji', 'headings', 'bold', 'italic', 'strike', 'link', '|',
-      'list', 'ordered-list', 'check', 'outdent', 'indent', 'table', '|',
-      'quote', 'line', 'code', 'inline-code', 'insert-before', 'insert-after', '|',
-      'undo', 'redo', '|',
-      'fullscreen', 'preview'
-    ],
+    syntax: false
   };
 
-  ngOnInit(): void {
-    this.controlId = `MarkdownEditor-${Math.floor(100000 * Math.random())}`;
-  }
+  constructor(private sanitizer: DomSanitizer) {}
+
 
+  /**
+   * Emit content update after editing
+   * @param content
+   */
+  updateContent(content: ContentChange) {
+    const sanitizedContent = this.sanitizer.sanitize(SecurityContext.HTML, content.html);
+    this.editValueChange.emit(sanitizedContent);
+}
 }

src/app/shared/markdown-editor/markdown-editor.module.ts

@@ -2,14 +2,14 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MarkdownEditorComponent } from './markdown-editor.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { NuMarkdownModule } from '@ng-util/markdown';
+import { QuillModule } from 'ngx-quill';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    NuMarkdownModule
+    QuillModule
   ],
   exports: [ MarkdownEditorComponent ],
   declarations: [ MarkdownEditorComponent ],