From ef5c53ae04d4a7cfe91532e269bc563ad36af5fb Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Tue, 13 Oct 2020 20:50:38 -0500
Subject: [PATCH] Finish WYSIWYG editor commands and keybindings

---
 src/app/app.component.ts                      |  2 +-
 .../components/nodes/norm/norm.component.html | 24 +++++++---
 .../components/nodes/norm/norm.component.ts   | 44 ++++++++++++++++++-
 src/global.scss                               |  4 ++
 4 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 153e63e..be9d1a5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,7 +11,7 @@ import {OptionPickerComponent} from './components/option-picker/option-picker.co
 import {OptionMenuComponent} from './components/option-menu/option-menu.component';
 import {SelectorComponent} from './components/sharing/selector/selector.component';
 import {SessionService} from './service/session.service';
-import {SearchComponent} from "./components/search/Search.component";
+import {SearchComponent} from './components/search/Search.component';
 
 @Component({
   selector: 'app-root',
diff --git a/src/app/components/nodes/norm/norm.component.html b/src/app/components/nodes/norm/norm.component.html
index a0e939c..facbac2 100644
--- a/src/app/components/nodes/norm/norm.component.html
+++ b/src/app/components/nodes/norm/norm.component.html
@@ -38,23 +38,33 @@
 
         <div class="toolbar-sep"></div>
 
-        <button class="toolbar-button" title="Increase Heading Level">
-            <i class="icon fa fa-heading"></i>
+        <button class="toolbar-button" title="Make text bigger" (click)="documentCommand('increaseFontSize')">
+            <i class="icon fa fa-font"></i>
             <i class="icon fa fa-long-arrow-alt-up"></i>
         </button>
-        <button class="toolbar-button" title="Decrease Heading Level">
-            <i class="icon fa fa-heading"></i>
+        <button class="toolbar-button" title="Make text smaller" (click)="documentCommand('decreaseFontSize')">
+            <i class="icon fa fa-font"></i>
             <i class="icon fa fa-long-arrow-alt-down"></i>
         </button>
-        <button class="toolbar-button" title="Format Monospace">
-            <i class="icon fa fa-code"></i>
+
+        <button class="toolbar-button" title="Make text superscript" (click)="documentCommand('superscript')">
+            <i class="icon fa fa-superscript"></i>
+        </button>
+        <button class="toolbar-button" title="Make text subscript" (click)="documentCommand('subscript')">
+            <i class="icon fa fa-subscript"></i>
         </button>
 
         <div class="toolbar-sep"></div>
 
-        <button class="toolbar-button" title="Begin Bulleted List">
+        <button class="toolbar-button" title="Insert unordered list" (click)="documentCommand('insertUnorderedList')">
             <i class="icon fa fa-list-ul"></i>
         </button>
+        <button class="toolbar-button" title="Insert ordered list" (click)="documentCommand('insertOrderedList')">
+            <i class="icon fa fa-list-ol"></i>
+        </button>
+        <button class="toolbar-button" title="Insert horizontal rule" (click)="documentCommand('insertHorizontalRule')">
+            ―
+        </button>
     </div>
     <div
         class="editable-base"
diff --git a/src/app/components/nodes/norm/norm.component.ts b/src/app/components/nodes/norm/norm.component.ts
index b6491a1..772f16a 100644
--- a/src/app/components/nodes/norm/norm.component.ts
+++ b/src/app/components/nodes/norm/norm.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, HostListener, ViewChild} from '@angular/core';
 import {EditorNodeContract} from '../EditorNode.contract';
 
 @Component({
@@ -42,4 +42,46 @@ export class NormComponent extends EditorNodeContract {
             this.contents = innerHTML;
         }
     }
+
+    @HostListener('document:keydown.tab', ['$event'])
+    onIndent(event) {
+        event.preventDefault();
+        this.documentCommand('indent');
+    }
+
+    @HostListener('document:keydown.shift.tab', ['$event'])
+    onOutdent(event) {
+        event.preventDefault();
+        this.documentCommand('outdent');
+    }
+
+    @HostListener('document:keydown.control.b', ['$event'])
+    onBold(event) {
+        event.preventDefault();
+        this.documentCommand('bold');
+    }
+
+    @HostListener('document:keydown.control.i', ['$event'])
+    onItalic(event) {
+        event.preventDefault();
+        this.documentCommand('italic');
+    }
+
+    @HostListener('document:keydown.control.u', ['$event'])
+    onUnderline(event) {
+        event.preventDefault();
+        this.documentCommand('underline');
+    }
+
+    @HostListener('document:keydown.control.z', ['$event'])
+    onUndo(event) {
+        event.preventDefault();
+        this.documentCommand('undo');
+    }
+
+    @HostListener('document:keydown.control.shift.z', ['$event'])
+    onRedo(event) {
+        event.preventDefault();
+        this.documentCommand('redo');
+    }
 }
diff --git a/src/global.scss b/src/global.scss
index cb3d4a6..eb20474 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -64,3 +64,7 @@ div.picker-wrapper {
 
   //color: #fff;
 }
+
+hr {
+  background: darkgray;
+}