Add markdown editor node
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
74b7cdadc7
commit
b588865137
GPG Key ID:
D2BF5FBA8298F246
@ -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