Start new WYSIWYG node editor

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

@@ -0,0 +1,32 @@
+import PageRecord from '../../structures/PageRecord';
+
+export abstract class EditorNodeContract {
+    protected pageRec!: PageRecord;
+    protected nodeRec!: any; // TODO
+
+    get page() {
+        return this.pageRec;
+    }
+
+    set page(page: PageRecord) {
+        this.pageRec = page;
+    }
+
+    get identifier() {
+        return this.nodeRec.UUID;
+    }
+
+    public abstract isDirty(): boolean | Promise<boolean>;
+
+    public needsSave(): boolean | Promise<boolean> {
+        return false;
+    }
+
+    public needsLoad(): boolean | Promise<boolean> {
+        return false;
+    }
+
+    public performSave(): void | Promise<void> {}
+
+    public performLoad(): void | Promise<void> {}
+}

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

@@ -0,0 +1,66 @@
+<div class="container"
+     (focusin)="onFocusIn($event)"
+     (focusout)="onFocusOut($event)">
+    <div class="toolbar-base" *ngIf="isFocused">
+        <div class="toolbar-button" title="Bold">
+            <i class="icon fa fa-bold"></i>
+        </div>
+        <div class="toolbar-button" title="Italic">
+            <i class="icon fa fa-italic"></i>
+        </div>
+        <div class="toolbar-button" title="Underline">
+            <i class="icon fa fa-underline"></i>
+        </div>
+        <div class="toolbar-button" title="Strikethrough">
+            <i class="icon fa fa-strikethrough"></i>
+        </div>
+
+        <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">
+            <i class="icon fa fa-align-left"></i>
+        </div>
+
+        <div class="toolbar-sep"></div>
+
+        <div class="toolbar-button" title="Undo">
+            <i class="icon fa fa-undo"></i>
+        </div>
+        <div class="toolbar-button" title="Redo">
+            <i class="icon fa fa-redo"></i>
+        </div>
+
+        <div class="toolbar-sep"></div>
+
+        <div 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">
+            <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">
+            <i class="icon fa fa-code"></i>
+        </div>
+
+        <div class="toolbar-sep"></div>
+
+        <div class="toolbar-button" title="Begin Bulleted List">
+            <i class="icon fa fa-list-ul"></i>
+        </div>
+    </div>
+    <div
+        class="editable-base"
+        [ngClass]="isFocused ? 'focused' : ''"
+        contenteditable
+    >
+        Content editable!
+    </div>
+</div>

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

@@ -0,0 +1,33 @@
+.editable-base {
+  padding: 20px;
+  background: aliceblue; // TODO temporary
+}
+
+.toolbar-base {
+  height: 40px;
+  border: 1px solid lightgray;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: row;
+
+  .toolbar-button {
+    height: calc(100% - 6px);
+    min-width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 3px;
+
+    &:hover {
+      background: lightgrey;
+      cursor: pointer;
+    }
+  }
+
+  .toolbar-sep {
+    height: 100%;
+    width: 1px;
+    border: 1px solid lightgrey;
+    margin: 0 5px;
+  }
+}

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

@@ -0,0 +1,23 @@
+import {Component} from '@angular/core';
+import {EditorNodeContract} from '../EditorNode.contract';
+
+@Component({
+    selector: 'editor-norm',
+    templateUrl: './norm.component.html',
+    styleUrls: ['./norm.component.scss'],
+})
+export class NormComponent extends EditorNodeContract {
+    public isFocused = false;
+
+    public isDirty(): boolean | Promise<boolean> {
+        return false; // TODO implement
+    }
+
+    onFocusIn(event: MouseEvent) {
+        this.isFocused = true;
+    }
+
+    onFocusOut(event: MouseEvent) {
+        this.isFocused = false;
+    }
+}