Initial editor functionality and data bindings

src/app/components/components.module.ts

@@ -6,7 +6,8 @@ import {IonicModule} from '@ionic/angular';
 import {DatabaseComponent} from './editor/database/database.component';
 import {AgGridModule} from 'ag-grid-angular';
 import {ColumnsComponent} from './editor/database/columns/columns.component';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ContenteditableModule} from '@ng-stack/contenteditable';
 import {CodeComponent} from './editor/code/code.component';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
 import {FilesComponent} from './editor/files/files.component';
@@ -27,6 +28,7 @@ import {BooleanRendererComponent} from './editor/database/renderers/boolean-rend
 import {SearchComponent} from './search/Search.component';
 
 import {NormComponent} from './nodes/norm/norm.component';
+import {DirectivesModule} from '../directives/directives.module';
 
 @NgModule({
   declarations: [
@@ -59,7 +61,10 @@ import {NormComponent} from './nodes/norm/norm.component';
     IonicModule,
     AgGridModule,
     FormsModule,
-    MonacoEditorModule
+    ReactiveFormsModule,
+    ContenteditableModule,
+    MonacoEditorModule,
+    DirectivesModule,
   ],
   entryComponents: [
     HostComponent,

src/app/components/nodes/EditorNode.contract.ts

@@ -3,6 +3,7 @@ import PageRecord from '../../structures/PageRecord';
 export abstract class EditorNodeContract {
     protected pageRec!: PageRecord;
     protected nodeRec!: any; // TODO
+    protected initialValue: any;
 
     get page() {
         return this.pageRec;

src/app/components/nodes/norm/norm.component.html

@@ -1,66 +1,68 @@
 <div class="container"
      (focusin)="onFocusIn($event)"
-     (focusout)="onFocusOut($event)">
+     (focusout)="onFocusIn($event)">
     <div class="toolbar-base" *ngIf="isFocused">
-        <div class="toolbar-button" title="Bold">
+        <button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
             <i class="icon fa fa-bold"></i>
-        </div>
-        <div class="toolbar-button" title="Italic">
+        </button>
+        <button class="toolbar-button" title="Italic" (click)="documentCommand('italic')">
             <i class="icon fa fa-italic"></i>
-        </div>
-        <div class="toolbar-button" title="Underline">
+        </button>
+        <button class="toolbar-button" title="Underline" (click)="documentCommand('underline')">
             <i class="icon fa fa-underline"></i>
-        </div>
-        <div class="toolbar-button" title="Strikethrough">
+        </button>
+        <button class="toolbar-button" title="Strikethrough" (click)="documentCommand('strikeThrough')">
             <i class="icon fa fa-strikethrough"></i>
-        </div>
+        </button>
 
         <div class="toolbar-sep"></div>
 
-        <div class="toolbar-button" title="Align Right">
-            <i class="icon fa fa-align-right"></i>
-        </div>
-        <div class="toolbar-button" title="Align Center">
-            <i class="icon fa fa-align-center"></i>
-        </div>
-        <div class="toolbar-button" title="Align Left">
+        <button class="toolbar-button" title="Align Left" (click)="documentCommand('justifyLeft')">
             <i class="icon fa fa-align-left"></i>
-        </div>
+        </button>
+        <button class="toolbar-button" title="Align Center" (click)="documentCommand('justifyCenter')">
+            <i class="icon fa fa-align-center"></i>
+        </button>
+        <button class="toolbar-button" title="Align Right" (click)="documentCommand('justifyRight')">
+            <i class="icon fa fa-align-right"></i>
+        </button>
 
         <div class="toolbar-sep"></div>
 
-        <div class="toolbar-button" title="Undo">
+        <button class="toolbar-button" title="Undo" (click)="documentCommand('undo')">
             <i class="icon fa fa-undo"></i>
-        </div>
-        <div class="toolbar-button" title="Redo">
+        </button>
+        <button class="toolbar-button" title="Redo" (click)="documentCommand('redo')">
             <i class="icon fa fa-redo"></i>
-        </div>
+        </button>
 
         <div class="toolbar-sep"></div>
 
-        <div class="toolbar-button" title="Increase Heading Level">
+        <button class="toolbar-button" title="Increase Heading Level">
             <i class="icon fa fa-heading"></i>
             <i class="icon fa fa-long-arrow-alt-up"></i>
-        </div>
-        <div class="toolbar-button" title="Decrease Heading Level">
+        </button>
+        <button class="toolbar-button" title="Decrease Heading Level">
             <i class="icon fa fa-heading"></i>
             <i class="icon fa fa-long-arrow-alt-down"></i>
-        </div>
-        <div class="toolbar-button" title="Format Monospace">
+        </button>
+        <button class="toolbar-button" title="Format Monospace">
             <i class="icon fa fa-code"></i>
-        </div>
+        </button>
 
         <div class="toolbar-sep"></div>
 
-        <div class="toolbar-button" title="Begin Bulleted List">
+        <button class="toolbar-button" title="Begin Bulleted List">
             <i class="icon fa fa-list-ul"></i>
-        </div>
+        </button>
     </div>
     <div
         class="editable-base"
         [ngClass]="isFocused ? 'focused' : ''"
         contenteditable
-    >
-        Content editable!
-    </div>
+        appDomChange
+        [innerHTML]="initialValue"
+        #editable
+        (domChange)="onContentsChanged($event)"
+    ></div>
 </div>

src/app/components/nodes/norm/norm.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {EditorNodeContract} from '../EditorNode.contract';
 
 @Component({
@@ -7,10 +7,20 @@ import {EditorNodeContract} from '../EditorNode.contract';
     styleUrls: ['./norm.component.scss'],
 })
 export class NormComponent extends EditorNodeContract {
+    @ViewChild('editable') editable;
     public isFocused = false;
+    public initialValue = 'Content editable now...';
+    public contents = '';
+    private dirtyOverride = false;
+
+    constructor() {
+        super();
+        console.log('norm compt', this);
+        this.contents = this.initialValue;
+    }
 
     public isDirty(): boolean | Promise<boolean> {
-        return false; // TODO implement
+        return this.dirtyOverride || this.contents !== this.initialValue;
     }
 
     onFocusIn(event: MouseEvent) {
@@ -20,4 +30,16 @@ export class NormComponent extends EditorNodeContract {
     onFocusOut(event: MouseEvent) {
         this.isFocused = false;
     }
+
+    documentCommand(cmd: string) {
+        // Yes, technically this is deprecated, but it'll be poly-filled if necessary. Bite me.
+        document.execCommand(cmd, false, '');
+    }
+
+    onContentsChanged(contents: string) {
+        const innerHTML = this.editable.nativeElement.innerHTML;
+        if ( this.contents !== innerHTML ) {
+            this.contents = innerHTML;
+        }
+    }
 }