You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
3.0 KiB
111 lines
3.0 KiB
import {Component, HostListener, Input, OnInit, ViewChild} from '@angular/core';
|
|
import {EditorNodeContract} from '../EditorNode.contract';
|
|
import {EditorService} from '../../../service/editor.service';
|
|
|
|
@Component({
|
|
selector: 'editor-norm',
|
|
templateUrl: './norm.component.html',
|
|
styleUrls: ['./norm.component.scss'],
|
|
})
|
|
export class NormComponent extends EditorNodeContract implements OnInit {
|
|
@ViewChild('editable') editable;
|
|
@Input() nodeId: string;
|
|
|
|
public isFocused = false;
|
|
public initialValue = 'Click to edit...';
|
|
public contents = '';
|
|
private dirtyOverride = false;
|
|
|
|
constructor(
|
|
public readonly editorService: EditorService,
|
|
) {
|
|
super();
|
|
this.contents = this.initialValue;
|
|
}
|
|
|
|
public isDirty(): boolean | Promise<boolean> {
|
|
return this.dirtyOverride || this.contents !== this.initialValue;
|
|
}
|
|
|
|
public writeChangesToNode(): void | Promise<void> {
|
|
this.nodeRec.value = this.contents;
|
|
this.initialValue = this.contents;
|
|
}
|
|
|
|
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.contents = this.initialValue;
|
|
});
|
|
}
|
|
|
|
onFocusIn(event: MouseEvent) {
|
|
this.isFocused = true;
|
|
}
|
|
|
|
onFocusOut(event: MouseEvent) {
|
|
this.isFocused = false;
|
|
}
|
|
|
|
documentCommand(cmd: string) {
|
|
// Yes, technically this is deprecated, but it'll be poly-filled if necessary. Bite me.
|
|
document.execCommand(cmd, false, '');
|
|
}
|
|
|
|
onContentsChanged(contents: string) {
|
|
const innerHTML = this.editable.nativeElement.innerHTML;
|
|
if ( this.contents !== innerHTML ) {
|
|
this.contents = innerHTML;
|
|
this.editorService.triggerSave();
|
|
}
|
|
}
|
|
|
|
@HostListener('document:keydown.tab', ['$event'])
|
|
onIndent(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('indent');
|
|
}
|
|
|
|
@HostListener('document:keydown.shift.tab', ['$event'])
|
|
onOutdent(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('outdent');
|
|
}
|
|
|
|
@HostListener('document:keydown.control.b', ['$event'])
|
|
onBold(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('bold');
|
|
}
|
|
|
|
@HostListener('document:keydown.control.i', ['$event'])
|
|
onItalic(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('italic');
|
|
}
|
|
|
|
@HostListener('document:keydown.control.u', ['$event'])
|
|
onUnderline(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('underline');
|
|
}
|
|
|
|
@HostListener('document:keydown.control.z', ['$event'])
|
|
onUndo(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('undo');
|
|
}
|
|
|
|
@HostListener('document:keydown.control.shift.z', ['$event'])
|
|
onRedo(event) {
|
|
event.preventDefault();
|
|
this.documentCommand('redo');
|
|
}
|
|
}
|