Finish WYSIWYG editor commands and keybindings

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',

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"

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');
+    }
 }

src/global.scss

@@ -64,3 +64,7 @@ div.picker-wrapper {
 
   //color: #fff;
 }
+
+hr {
+  background: darkgray;
+}