[UXP-241] migrate to new markdown library

Author: FrancescoMolinaro

angular.json

@@ -69,7 +69,10 @@
                 "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",
             ],
             "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,9 @@
     "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",
     "react-copy-to-clipboard": "^5.1.0",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.0",

src/app/app.module.ts

@@ -57,7 +57,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.ts

@@ -1,47 +1,45 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ContentChange, QuillModules } from 'ngx-quill';
 
 @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 = {
     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'
+      ['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'],
     ],
+    syntax: false
   };
 
-  ngOnInit(): void {
-    this.controlId = `MarkdownEditor-${Math.floor(100000 * Math.random())}`;
+  /**
+   * Emit content update after editing
+   * @param content
+   */
+  updateContent(content: ContentChange) {
+    this.editValueChange.emit(content.html);
   }
-
 }

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.forRoot()
   ],
   exports: [ MarkdownEditorComponent ],
   declarations: [ MarkdownEditorComponent ],