changed to ngx-quill

angular.json

@@ -23,8 +23,20 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": ["src/assets"],
-            "styles": ["src/styles.scss"],
-            "scripts": []
+            "styles": [
+              "src/styles.scss",
+              "node_modules/quill/dist/quill.snow.css"
+            ],
+            "scripts": [
+              {
+                "input": "node_modules/ngx-quill/bundles/ngx-quill.umd.js",
+                "bundleName": "ngx-quill"
+              },
+              {
+                "input": "node_modules/quill/dist/quill.js",
+                "bundleName": "quill"
+              }
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -22,7 +22,7 @@
     "@angular/platform-browser-dynamic": "^6.0.2",
     "@angular/router": "^6.0.2",
     "core-js": "^2.5.4",
-    "ngx-wig": "^1.2.7",
+    "ngx-quill": "^3.1.0",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

src/app/app.component.ts

@@ -58,7 +58,6 @@ export class AppComponent implements OnInit {
   }
 
   handleUpdateNote(note: Note) {
-    // TODO: fix work around, ngx-wig contentChange event is fired when it shouldn't
     if (note.id === "NEW") {
       if (note.content !== "") {
         note.id = this.chromeStorage.generateNoteUuid();

src/app/app.module.ts

@@ -6,16 +6,15 @@ import { SharedModule } from "./shared.module";
 import { NoteComponent } from "./component/note/note.component";
 
 import { SidebarModule } from "./component/sidebar/sidebar.module";
-
-import { NgxWigModule } from "ngx-wig";
+import { QuillModule } from "ngx-quill";
 
 import { ChromeStorageService } from "./services/chrome-storage/chrome-storage.service";
 import { StripHtmlService } from "./services/strip-html/strip-html.service";
 import { NoteManipulationService } from "./services/note-manipulation/note-manipulation.service";
 
 @NgModule({
   declarations: [AppComponent, NoteComponent],
-  imports: [SharedModule, SidebarModule, NgxWigModule],
+  imports: [SharedModule, SidebarModule, QuillModule],
   providers: [ChromeStorageService, StripHtmlService, NoteManipulationService],
   bootstrap: [AppComponent]
 })

src/app/component/note/note.component.html

@@ -1,3 +1,3 @@
 <div id="note-container">
-  <ngx-wig [(ngModel)]="activeNote.content" [placeholder]="'Enter notes here.'" (contentChange)="updateNote($event)" [buttons]="'list1,list2,bold,italic,underline,link'"></ngx-wig>
+  <quill-editor [ngModel]="activeNote.content" (onContentChanged)="updateNote($event)" [modules]="editorModules"></quill-editor>
 </div>

src/app/component/note/note.component.ts

@@ -10,11 +10,35 @@ export class NoteComponent {
   @Input() activeNote: Note;
   @Output() updateNoteEvent: EventEmitter<Note> = new EventEmitter();
 
+  editorModules = {
+    toolbar: [
+      ["bold", "italic", "underline", "strike"],
+      ["blockquote", "code-block"],
+      [{ list: "ordered" }, { list: "bullet" }],
+      [{ script: "sub" }, { script: "super" }],
+      [{ indent: "-1" }, { indent: "+1" }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      ["clean"],
+      ["link", "image", "video"]
+    ]
+  };
+
   updateNote(event) {
     // TODO: if statement avoids ExpressionChangedAfterItHasBeenCheckedError
     if (this.activeNote.id !== "LOADING") {
-      this.activeNote.content = event;
+      if (event.html === null) {
+        this.activeNote.content = "";
+      } else {
+        this.activeNote.content = event.html;
+      }
       this.updateNoteEvent.emit(this.activeNote);
     }
   }
+
+  logSelection(event) {
+    console.log(event);
+  }
 }

src/styles.scss

@@ -13,36 +13,24 @@ body {
 input[type="text"] {
   outline: none;
 }
-ngx-wig {
-  .ng-wig {
-    height: 100%;
-    .nw-toolbar {
-      border-left: none;
-      border-top: none;
-      border-right: none;
-    }
-    .nw-editor-container {
-      height: calc(100% - 31px);
-      border: none;
-      /* These are technically the same, but use both */
-      overflow-wrap: break-word;
-      word-wrap: break-word;
+quill-editor {
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 
-      -ms-word-break: break-all;
-      /* This is the dangerous one in WebKit, as it breaks things wherever */
-      word-break: break-all;
-      /* Instead use this non-standard one: */
-      word-break: break-word;
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
 
-      /* Adds a hyphen where the word breaks, if supported (No Blink) */
-      -ms-hyphens: auto;
-      -moz-hyphens: auto;
-      -webkit-hyphens: auto;
-      hyphens: auto;
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
 
-      .nw-editor {
-        height: 100%;
-      }
-    }
+  .ql-container {
+    height: 84%;
   }
 }