Start new WYSIWYG node editor

src/app/components/components.module.ts

@@ -26,6 +26,8 @@ import {CurrencyRendererComponent} from './editor/database/renderers/currency-re
 import {BooleanRendererComponent} from './editor/database/renderers/boolean-renderer.component';
 import {SearchComponent} from './search/Search.component';
 
+import {NormComponent} from './nodes/norm/norm.component';
+
 @NgModule({
   declarations: [
     HostComponent,
@@ -49,6 +51,8 @@ import {SearchComponent} from './search/Search.component';
     CurrencyRendererComponent,
     BooleanRendererComponent,
     SearchComponent,
+
+    NormComponent,
   ],
   imports: [
     CommonModule,
@@ -79,6 +83,8 @@ import {SearchComponent} from './search/Search.component';
     CurrencyRendererComponent,
     BooleanRendererComponent,
     SearchComponent,
+
+    NormComponent,
   ],
   exports: [
     HostComponent,
@@ -102,6 +108,8 @@ import {SearchComponent} from './search/Search.component';
     CurrencyRendererComponent,
     BooleanRendererComponent,
     SearchComponent,
+
+    NormComponent,
   ]
 })
 export class ComponentsModule {}

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