2020-11-20 18:07:25 +00:00
|
|
|
import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';
|
2020-10-16 17:20:16 +00:00
|
|
|
import {EditorNodeContract} from '../EditorNode.contract';
|
|
|
|
import {EditorService} from '../../../service/editor.service';
|
|
|
|
import {v4} from 'uuid';
|
2020-11-20 18:07:25 +00:00
|
|
|
import {EditorComponent} from 'ngx-monaco-editor';
|
2020-10-16 17:20:16 +00:00
|
|
|
|
|
|
|
@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;
|
2020-11-03 03:59:58 +00:00
|
|
|
@Input() editorUUID?: string;
|
2020-11-20 18:07:25 +00:00
|
|
|
@ViewChild('editor') editor: EditorComponent;
|
|
|
|
@ViewChild('editorContainer') editorContainer: ElementRef;
|
2020-10-16 17:20:16 +00:00
|
|
|
|
|
|
|
// public isFocused = false;
|
|
|
|
public initialValue = 'Click to edit...';
|
|
|
|
protected savedValue = 'Click to edit...';
|
|
|
|
public contents = '';
|
|
|
|
private dirtyOverride = false;
|
|
|
|
public showEditor = false;
|
2020-10-28 14:02:36 +00:00
|
|
|
protected hadOneFocusOut = false;
|
2020-11-16 15:47:06 +00:00
|
|
|
public singleColumn = false;
|
2020-11-20 18:07:25 +00:00
|
|
|
public containerHeight = 540;
|
2020-10-16 17:20:16 +00:00
|
|
|
|
|
|
|
public editorOptions = {
|
2020-11-12 20:18:19 +00:00
|
|
|
theme: this.isDark() ? 'vs-dark' : 'vs',
|
2020-10-16 17:20:16 +00:00
|
|
|
language: 'markdown',
|
|
|
|
uri: v4(),
|
|
|
|
readOnly: false,
|
|
|
|
automaticLayout: true,
|
2020-10-20 15:20:00 +00:00
|
|
|
wordWrap: 'on',
|
2020-11-20 18:07:25 +00:00
|
|
|
scrollBeyondLastLine: false,
|
|
|
|
scrollbar: {
|
|
|
|
alwaysConsumeMouseWheel: false,
|
|
|
|
},
|
2020-10-16 17:20:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(
|
2020-11-03 03:59:58 +00:00
|
|
|
public editorService: EditorService,
|
2020-10-16 17:20:16 +00:00
|
|
|
) {
|
|
|
|
super();
|
|
|
|
this.contents = this.initialValue;
|
|
|
|
this.savedValue = this.initialValue;
|
|
|
|
}
|
|
|
|
|
2020-11-12 20:18:19 +00:00
|
|
|
public isDark() {
|
|
|
|
return document.body.classList.contains('dark');
|
|
|
|
}
|
|
|
|
|
2020-10-16 17:20:16 +00:00
|
|
|
ngOnInit() {
|
2020-11-03 03:59:58 +00:00
|
|
|
this.editorService = this.editorService.getEditor(this.editorUUID);
|
2020-10-16 17:20:16 +00:00
|
|
|
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;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-11-20 18:07:25 +00:00
|
|
|
onMonacoEditorInit(editor) {
|
|
|
|
let ignoreEvent = false;
|
|
|
|
const updateHeight = () => {
|
|
|
|
const contentHeight = Math.max(540, editor.getContentHeight());
|
|
|
|
this.containerHeight = contentHeight;
|
|
|
|
|
|
|
|
try {
|
|
|
|
ignoreEvent = true;
|
|
|
|
editor.layout({ width: this.editorContainer.nativeElement.offsetWidth, height: contentHeight });
|
|
|
|
} finally {
|
|
|
|
ignoreEvent = false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
editor.onDidContentSizeChange(updateHeight);
|
|
|
|
updateHeight();
|
|
|
|
}
|
|
|
|
|
2020-10-16 17:20:16 +00:00
|
|
|
public isDirty(): boolean | Promise<boolean> {
|
|
|
|
return this.dirtyOverride || this.contents !== this.savedValue;
|
|
|
|
}
|
|
|
|
|
|
|
|
public writeChangesToNode(): void | Promise<void> {
|
2020-10-16 17:31:26 +00:00
|
|
|
this.node.Value.Mode = 'markdown';
|
2020-10-16 17:20:16 +00:00
|
|
|
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() {
|
2020-11-03 04:36:20 +00:00
|
|
|
this.showEditor = this.editorService.canEdit();
|
2020-10-16 17:20:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('document:keyup.escape', ['$event'])
|
|
|
|
onFocusOut(event) {
|
2020-10-28 14:02:36 +00:00
|
|
|
if ( !this.hadOneFocusOut ) {
|
|
|
|
this.hadOneFocusOut = true;
|
|
|
|
setTimeout(() => {
|
|
|
|
this.hadOneFocusOut = false;
|
|
|
|
}, 500);
|
|
|
|
} else {
|
|
|
|
this.hadOneFocusOut = false;
|
|
|
|
this.showEditor = false;
|
|
|
|
}
|
2020-10-16 17:20:16 +00:00
|
|
|
}
|
2020-11-16 15:47:06 +00:00
|
|
|
|
|
|
|
onEditorHostResize($event) {
|
|
|
|
if ( $event.newWidth < 700 && !this.singleColumn ) {
|
|
|
|
this.singleColumn = true;
|
|
|
|
} else if ( $event.newWidth > 700 && this.singleColumn ) {
|
|
|
|
this.singleColumn = false;
|
|
|
|
}
|
|
|
|
}
|
2020-10-16 17:20:16 +00:00
|
|
|
}
|