kolkov/angular-editor (#62)

* kolkov/angular-editor
cmu-sei · Apr 15, 2024 · 12d1885 · 12d1885
1 parent 334f5e7
commit 12d1885
Show file tree

Hide file tree

Showing 15 changed files with 880 additions and 665 deletions.
diff --git a/angular.json b/angular.json
@@ -18,9 +18,16 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@kolkov/angular-editor/assets/",
+                "output": "./assets/fonts/"
+              }
+            ],
             "styles": ["src/styles/styles.scss"],
-            "scripts": ["./node_modules/quill/dist/quill.js"],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gallery-ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -37,17 +37,16 @@
     "@mdi/font": "^7.2.96",
     "@microsoft/signalr": "^5.0.7",
     "@ngtools/webpack": "^15.1.2",
+    "@kolkov/angular-editor": "^3.0.0-beta.0",
     "ajv": "^8.6.0",
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.14.0",
     "loader-utils": "^3.2.1",
     "luxon": "^1.28.1",
     "material-design-icons": "^3.0.1",
     "ngx-clipboard": "^15.1.0",
-    "ngx-quill": "^20.0.1",
     "node-forge": "^1.3.1",
     "oidc-client": "^1.11.5",
-    "quill": "^1.3.7",
     "rxjs": "^7.8.1",
     "rxjs-compat": "^6.6.7",
     "tslib": "^2.2.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -92,8 +92,8 @@ import { ApiModule as SwaggerCodegenApiModule } from './generated/api/api.module
 import { DisplayOrderPipe, SortByPipe } from 'src/app/utilities/sort-by-pipe';
 import { ArchiveComponent } from './components/archive/archive.component';
 import { WallComponent } from './components/wall/wall.component';
-import { QuillModule } from 'ngx-quill';
-import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
+import { AngularEditorModule } from '@kolkov/angular-editor';
+import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { TeamSelectorComponent } from './components/team-selector/team-selector.component';
 
 const settings: ComnSettingsConfig = {
@@ -196,59 +196,7 @@ export function getBasePath(settingsSvc: ComnSettingsService) {
     ClipboardModule,
     ComnAuthModule.forRoot(),
     ComnSettingsModule.forRoot(),
-    QuillModule.forRoot({
-      bounds: '.left',
-      modules: {
-        toolbar: [
-          ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-          ['blockquote', 'code-block'],
-          [{ 'header': 1 }, { 'header': 2 }],               // custom button values
-          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-          [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-          [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-          [{ 'direction': 'rtl' }],                         // text direction
-          [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
-          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-          [{ 'color': [
-            '#b5b5b5',
-            'rgb(163, 235, 163)',
-            'rgb(250, 235, 100)',
-            'rgb(250, 163, 2)',
-            '#ff3333',
-            '#ff3838',
-            '#ebb3b3',
-            '#e00',
-            '#d00',
-            '#c00',
-            '#b00',
-            '#a00',
-            '#900',
-            '#800',
-            '#700',
-            '#a60',
-            '#067',
-            '#247',
-            '#085',
-            '#2d69b4',
-            '#336fba',
-            '#2d69b4',
-            '#242526',
-            '#373739',
-            '#306cb7',
-            '#4e8ad5'
-          ] },
-          { 'background': [] }],      // dropdown with defaults from theme
-          [{ 'font': [] }],
-          [{ 'align': [] }],
-          ['clean'],                  // remove formatting button
-          ['link', 'image', 'video']  // link and image, video
-        ],
-        history: {
-          delay: 2000,
-          maxStack: 200
-        }
-      }
-    }),
+    AngularEditorModule
   ],
   exports: [MatSortModule],
   providers: [

diff --git a/src/app/components/admin/admin-article-edit-dialog/admin-article-edit-dialog.component.html b/src/app/components/admin/admin-article-edit-dialog/admin-article-edit-dialog.component.html
@@ -56,15 +56,17 @@
       <p style="font-size: 13px; font-weight: 400; line-height: 1.125; font-family: Open Sans, sans-serif; letter-spacing: normal;">
         Description
       </p>
-        <div id="quill">
-          <quill-editor [styles]="editorStyle"
-             placeholder="Description" [formControl]="descriptionFormControl"
-             (blur)="saveArticle('description')">
-          </quill-editor>
-          <mat-error *ngIf="descriptionFormControl.hasError('required')">
-            Description is <strong>required</strong>
-          </mat-error>
-        </div>
+      <div>
+        <angular-editor
+          [placeholder]="'Description'"
+          [formControl]="descriptionFormControl"
+          [config]="editorConfig"
+          (blur)="saveArticle('description')"
+        ></angular-editor>
+        <mat-error *ngIf="descriptionFormControl.hasError('required')">
+          Description is <strong>required</strong>
+        </mat-error>
+      </div>
     </div>
   </div>
 

diff --git a/src/app/components/admin/admin-article-edit-dialog/admin-article-edit-dialog.component.ts b/src/app/components/admin/admin-article-edit-dialog/admin-article-edit-dialog.component.ts
@@ -13,6 +13,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ItemStatus, SourceType } from 'src/app/generated/api';
 import { DialogService } from 'src/app/services/dialog/dialog.service';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
 
 /** Error when invalid control is dirty, touched, or submitted. */
 export class UserErrorStateMatcher implements ErrorStateMatcher {
@@ -36,7 +37,35 @@ const MAX_SUMMARY_LENGTH = 300;
 
 export class AdminArticleEditDialogComponent {
   @Output() editComplete = new EventEmitter<any>();
-
+  editorConfig: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    height: 'auto',
+    minHeight: '0',
+    maxHeight: 'auto',
+    width: 'auto',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: true,
+    showToolbar: true,
+    placeholder: 'Enter text here...',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    fonts: [
+      {class: 'arial', name: 'Arial'},
+      {class: 'times-new-roman', name: 'Times New Roman'},
+      {class: 'calibri', name: 'Calibri'},
+      {class: 'comic-sans-ms', name: 'Comic Sans MS'}
+    ],
+    uploadUrl: '',
+    uploadWithCredentials: false,
+    sanitize: true,
+    toolbarPosition: 'top',
+    toolbarHiddenButtons: [
+      ['backgroundColor']
+    ]
+  };
   public articleNameFormControl = new UntypedFormControl(
     this.data.article.name,
     [

diff --git a/src/app/components/article-edit-dialog/article-edit-dialog.component.html b/src/app/components/article-edit-dialog/article-edit-dialog.component.html
@@ -57,11 +57,12 @@
       <p style="font-size: 13px; font-weight: 400; line-height: 1.125; font-family: Open Sans, sans-serif; letter-spacing: normal;">
         Description
       </p>
-        <div id="quill" style="width: 21.5cm">
-          <quill-editor [styles]="editorStyle"
-             placeholder="Description" [formControl]="descriptionFormControl"
-             (blur)="saveArticle('description')">
-          </quill-editor>
+        <div style="width: 21.5cm">
+          <angular-editor
+            [placeholder]="'Description'"
+            [(ngModel)]="data.article.description"
+            [config]="editorConfig"
+          ></angular-editor>
           <mat-error *ngIf="descriptionFormControl.hasError('required')">
             Description is <strong>required</strong>
           </mat-error>

diff --git a/src/app/components/article-edit-dialog/article-edit-dialog.component.ts b/src/app/components/article-edit-dialog/article-edit-dialog.component.ts
@@ -13,6 +13,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { ItemStatus, SourceType } from 'src/app/generated/api';
 import { DialogService } from 'src/app/services/dialog/dialog.service';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
 
 /** Error when invalid control is dirty, touched, or submitted. */
 export class UserErrorStateMatcher implements ErrorStateMatcher {
@@ -36,7 +37,35 @@ const MAX_SUMMARY_LENGTH = 300;
 
 export class ArticleEditDialogComponent {
   @Output() editComplete = new EventEmitter<any>();
-
+  editorConfig: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    height: 'auto',
+    minHeight: '0',
+    maxHeight: 'auto',
+    width: 'auto',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: true,
+    showToolbar: true,
+    placeholder: 'Enter text here...',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    fonts: [
+      {class: 'arial', name: 'Arial'},
+      {class: 'times-new-roman', name: 'Times New Roman'},
+      {class: 'calibri', name: 'Calibri'},
+      {class: 'comic-sans-ms', name: 'Comic Sans MS'}
+    ],
+    uploadUrl: '',
+    uploadWithCredentials: false,
+    sanitize: true,
+    toolbarPosition: 'top',
+    toolbarHiddenButtons: [
+      ['backgroundColor']
+    ]
+  };
   public articleNameFormControl = new UntypedFormControl(
     this.data.article.name,
     [

diff --git a/src/app/components/article-more-dialog/article-more-dialog.component.html b/src/app/components/article-more-dialog/article-more-dialog.component.html
@@ -37,5 +37,5 @@
   class="page"
   *ngIf="!data.useUrl && data.article && data.article.description"
 >
-  <quill-view-html [content]="data.article.description" theme="snow"></quill-view-html>
+  <angular-editor class="angular-editor" [ngModel]="data.article.description" [config]="editorConfig"></angular-editor>
 </div>
diff --git a/src/app/components/article-more-dialog/article-more-dialog.component.ts b/src/app/components/article-more-dialog/article-more-dialog.component.ts
@@ -5,6 +5,7 @@ import { Component, EventEmitter, Inject, Output } from '@angular/core';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DialogService } from 'src/app/services/dialog/dialog.service';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
 
 @Component({
   selector: 'app-article-more-dialog',
@@ -16,6 +17,21 @@ export class ArticleMoreDialogComponent {
   @Output() editComplete = new EventEmitter<any>();
   safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.data.article.url);
   safeContent: SafeHtml = '';
+  editorConfig: AngularEditorConfig = {
+    editable: false,
+    height: 'auto',
+    minHeight: '1200px',
+    width: '100%',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: false,
+    showToolbar: false,
+    placeholder: '',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    sanitize: true,
+  };
 
   constructor(
     public dialogService: DialogService,

diff --git a/src/app/components/article-share-dialog/article-share-dialog.component.html b/src/app/components/article-share-dialog/article-share-dialog.component.html
@@ -31,15 +31,14 @@
   <div class="add-margin left">
     <div>
       <h4>Email Message</h4>
-        <div id="quill">
-          <quill-editor [styles]="editorStyle" placeholder="Enter Text"
-             placeholder="Description" [formControl]="messageFormControl"
-          >
-          </quill-editor>
-          <mat-error *ngIf="messageFormControl.hasError('required')">
-            Message is <strong>required</strong>
-          </mat-error>
-        </div>
+      <angular-editor
+        [placeholder]="'Description'"
+        [formControl]="messageFormControl"
+        [config]="editorConfig"
+      ></angular-editor>
+      <mat-error *ngIf="messageFormControl.hasError('required')">
+        Message is <strong>required</strong>
+      </mat-error>
     </div>
   </div>
   <div class="cssLayoutRowStartCenter bottom-button">

diff --git a/src/app/components/article-share-dialog/article-share-dialog.component.ts b/src/app/components/article-share-dialog/article-share-dialog.component.ts
@@ -5,6 +5,7 @@ import { Component, EventEmitter, Inject, Input, Output } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';
 import { DialogService } from 'src/app/services/dialog/dialog.service';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
 
 @Component({
   selector: 'app-article-share-dialog',
@@ -21,9 +22,34 @@ export class ArticleShareDialogComponent {
     this.data.article.name + '</p>&nbsp;<p>' + this.data.article.summary + '</p>&nbsp;<p>' +
     '<a href="' + location.origin + '/article/' + this.data.article.id
           + '" rel="noopener noreferrer" target="_blank">Article Text</a></p>');
-
-  editorStyle = {
-    height: '200px'
+  editorConfig: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    height: 'auto',
+    minHeight: '0',
+    maxHeight: 'auto',
+    width: 'auto',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: true,
+    showToolbar: true,
+    placeholder: 'Enter text here...',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    fonts: [
+      {class: 'arial', name: 'Arial'},
+      {class: 'times-new-roman', name: 'Times New Roman'},
+      {class: 'calibri', name: 'Calibri'},
+      {class: 'comic-sans-ms', name: 'Comic Sans MS'}
+    ],
+    uploadUrl: '',
+    uploadWithCredentials: false,
+    sanitize: true,
+    toolbarPosition: 'top',
+    toolbarHiddenButtons: [
+      ['backgroundColor']
+    ]
   };
 
   constructor(

diff --git a/src/app/components/article/article.component.html b/src/app/components/article/article.component.html
@@ -4,6 +4,6 @@
 -->
 <div class="article-container background">
   <div class="page" *ngIf="article && article.description">
-    <quill-view-html [content]="article.description" theme="snow"></quill-view-html>
+    <angular-editor class="angular-editor" [ngModel]="article.description" [config]="editorConfig"></angular-editor>
   </div>
 </div>
diff --git a/src/app/components/article/article.component.ts b/src/app/components/article/article.component.ts
@@ -11,6 +11,7 @@ import { ArticleQuery } from 'src/app/data/article/article.query';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ComnSettingsService } from '@cmusei/crucible-common';
 import { XApiService } from 'src/app/generated/api';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
 
 @Component({
   selector: 'app-article-app',
@@ -21,6 +22,21 @@ export class ArticleComponent implements OnDestroy {
   safeContent: SafeHtml = '';
   article: Article = {} as Article;
   private unsubscribe$ = new Subject();
+  editorConfig: AngularEditorConfig = {
+    editable: false,
+    height: 'auto',
+    minHeight: '1200px',
+    width: '100%',
+    minWidth: '0',
+    translate: 'yes',
+    enableToolbar: false,
+    showToolbar: false,
+    placeholder: '',
+    defaultParagraphSeparator: '',
+    defaultFontName: '',
+    defaultFontSize: '',
+    sanitize: true,
+  };
 
   constructor(
     private activatedRoute: ActivatedRoute,