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.
118 lines
3.6 KiB
118 lines
3.6 KiB
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
|
|
import HostRecord from '../../../structures/HostRecord';
|
|
|
|
@Component({
|
|
selector: 'editor-host',
|
|
templateUrl: './host.component.html',
|
|
styleUrls: ['./host.component.scss'],
|
|
})
|
|
export class HostComponent implements OnInit {
|
|
@Input() record: HostRecord;
|
|
@Output() recordChange = new EventEmitter<HostRecord>();
|
|
@Output() newHostRequested = new EventEmitter<HostComponent>();
|
|
@Output() destroyHostRequested = new EventEmitter<HostComponent>();
|
|
@Output() saveHostRequested = new EventEmitter<HostComponent>();
|
|
@ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
|
|
@ViewChildren('liItems') liItems;
|
|
|
|
public listLines: Array<string> = [];
|
|
|
|
constructor() { }
|
|
|
|
ngOnInit() {}
|
|
|
|
onRecordChange($event) {
|
|
this.recordChange.emit($event);
|
|
}
|
|
|
|
onKeyUp($event) {
|
|
const innerText = this.hostContainer.nativeElement.innerText.trim()
|
|
if ( $event.code === 'Enter'
|
|
&& ( this.record.type !== 'block_code'
|
|
|| (innerText.endsWith('```') && (innerText.match(/`/g) || []).length >= 6)
|
|
)
|
|
) {
|
|
this.newHostRequested.emit(this);
|
|
this.hostContainer.nativeElement.innerText = this.hostContainer.nativeElement.innerText.trim();
|
|
} else if ( $event.code === 'Backspace' && !this.hostContainer.nativeElement.innerText.trim() ) {
|
|
this.destroyHostRequested.emit(this);
|
|
}
|
|
|
|
if ( innerText.startsWith('# ') ) {
|
|
this.record.type = 'header1';
|
|
} else if ( innerText.startsWith('## ') ) {
|
|
this.record.type = 'header2';
|
|
} else if ( innerText.startsWith('### ') ) {
|
|
this.record.type = 'header3';
|
|
} else if ( innerText.startsWith('#### ') ) {
|
|
this.record.type = 'header4';
|
|
} else if ( innerText.startsWith('```') ) {
|
|
this.record.type = 'block_code';
|
|
} else if ( innerText.startsWith('http') ) {
|
|
this.record.type = 'click_link';
|
|
} else if ( false && innerText.startsWith('-') || innerText.startsWith(' -') ) {
|
|
// this.record.type = 'ul';
|
|
this.listLines = [this.record.value];
|
|
setTimeout(() => {
|
|
const item = this.liItems.toArray()[0].nativeElement;
|
|
const s = window.getSelection();
|
|
const r = document.createRange();
|
|
r.setStart(item, 0);
|
|
r.setEnd(item, 0);
|
|
s.removeAllRanges();
|
|
s.addRange(r);
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
onRequestDelete($event) {
|
|
this.destroyHostRequested.emit(this);
|
|
}
|
|
|
|
onLIKeyUp($event, i) {
|
|
if ( $event.code === 'Enter' ) {
|
|
/*const newListLines = [];
|
|
this.liItems.forEach((li, index) => {
|
|
newListLines.push(li.nativeElement.innerText.trim());
|
|
if ( index === i ) {
|
|
newListLines.push('');
|
|
}
|
|
});
|
|
|
|
this.listLines = newListLines;*/
|
|
// this.listLines[i] = this.liItems[i].innerText.trim()
|
|
// const newLines = []
|
|
// this.listLines.forEach((rec, x) => {
|
|
// newLines.push(rec.trim());
|
|
// if ( i === x ) {
|
|
// newLines.push('');
|
|
// }
|
|
// })
|
|
|
|
|
|
// this.listLines = newLines;
|
|
|
|
// setTimeout(() => {
|
|
// const item = this.liItems.toArray()[i + 1].nativeElement;
|
|
// const s = window.getSelection();
|
|
// const r = document.createRange();
|
|
// r.setStart(item, 0);
|
|
// r.setEnd(item, 0);
|
|
// s.removeAllRanges();
|
|
// s.addRange(r);
|
|
// }, 10);
|
|
}
|
|
}
|
|
|
|
onRequestParentSave($event) {
|
|
this.saveHostRequested.emit(this);
|
|
}
|
|
|
|
onHostDblClick() {
|
|
if ( this.record.type === 'click_link' ) {
|
|
window.open(this.record.value.trim(), '_blank');
|
|
}
|
|
}
|
|
|
|
}
|