Add markdown editor node

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

@@ -0,0 +1,11 @@
+<div class="container" (click)="onFocusIn()">
+    <div class="editor-container" *ngIf="showEditor">
+        <ngx-monaco-editor class="editor"
+                           [options]="editorOptions"
+                           [(ngModel)]="contents"
+                           (ngModelChange)="onContentsChanged($event)"
+                           #editor
+        ></ngx-monaco-editor>
+    </div>
+    <div class="display" markdown katex [data]="contents"></div>
+</div>

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

@@ -0,0 +1,23 @@
+.container {
+  display: flex;
+  min-height: 600px;
+  flex-direction: row;
+
+  .editor-container, .display {
+    flex: 1;
+  }
+
+  .editor-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor {
+    border: 1px solid lightgrey;
+    flex: 1;
+  }
+
+  .display {
+    margin-left: 10px;
+  }
+}

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

@@ -0,0 +1,77 @@
+import {Component, HostListener, Input, OnInit, ViewChild} from '@angular/core';
+import {EditorNodeContract} from '../EditorNode.contract';
+import {EditorService} from '../../../service/editor.service';
+import {v4} from 'uuid';
+
+@Component({
+    selector: 'editor-markdown',
+    templateUrl: './markdown.component.html',
+    styleUrls: ['./markdown.component.scss'],
+})
+export class MarkdownComponent extends EditorNodeContract implements OnInit {
+    // @ViewChild('editable') editable;
+    @Input() nodeId: string;
+
+    // public isFocused = false;
+    public initialValue = 'Click to edit...';
+    protected savedValue = 'Click to edit...';
+    public contents = '';
+    private dirtyOverride = false;
+    public showEditor = false;
+
+    public editorOptions = {
+        language: 'markdown',
+        uri: v4(),
+        readOnly: false,
+        automaticLayout: true,
+    };
+
+    constructor(
+        public readonly editorService: EditorService,
+    ) {
+        super();
+        this.contents = this.initialValue;
+        this.savedValue = this.initialValue;
+    }
+
+    ngOnInit() {
+        this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+            if ( !this.node.Value ) {
+                this.node.Value = {};
+            }
+
+            if ( this.node.Value.Value ) {
+                this.initialValue = this.node.Value.Value;
+                this.savedValue = this.node.Value.Value;
+            }
+
+            this.contents = this.initialValue;
+        });
+    }
+
+    public isDirty(): boolean | Promise<boolean> {
+        return this.dirtyOverride || this.contents !== this.savedValue;
+    }
+
+    public writeChangesToNode(): void | Promise<void> {
+        this.node.Value.Mode = 'code';
+        this.node.Value.Value = this.contents;
+        this.node.value = this.contents;
+        this.savedValue = this.contents;
+    }
+
+    onContentsChanged(event) {
+        if ( event !== this.savedValue ) {
+            this.editorService.triggerSave();
+        }
+    }
+
+    onFocusIn() {
+        this.showEditor = true;
+    }
+
+    @HostListener('document:keyup.escape', ['$event'])
+    onFocusOut(event) {
+        this.showEditor = false;
+    }
+}