Add markdown editor node
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
74b7cdadc7
commit
b588865137
@ -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>
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue