|
|
@ -1,4 +1,4 @@
|
|
|
|
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
|
|
|
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
|
|
|
|
import HostRecord from '../../../structures/HostRecord';
|
|
|
|
import HostRecord from '../../../structures/HostRecord';
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
@Component({
|
|
|
@ -12,6 +12,9 @@ export class HostComponent implements OnInit {
|
|
|
|
@Output() newHostRequested = new EventEmitter<HostComponent>();
|
|
|
|
@Output() newHostRequested = new EventEmitter<HostComponent>();
|
|
|
|
@Output() destroyHostRequested = new EventEmitter<HostComponent>();
|
|
|
|
@Output() destroyHostRequested = new EventEmitter<HostComponent>();
|
|
|
|
@ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
|
|
|
|
@ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
|
|
|
|
|
|
|
|
@ViewChildren('liItems') liItems;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public listLines: Array<string> = [];
|
|
|
|
|
|
|
|
|
|
|
|
constructor() { }
|
|
|
|
constructor() { }
|
|
|
|
|
|
|
|
|
|
|
@ -42,11 +45,59 @@ export class HostComponent implements OnInit {
|
|
|
|
this.record.type = 'block_code';
|
|
|
|
this.record.type = 'block_code';
|
|
|
|
} else if ( innerText.startsWith('http') ) {
|
|
|
|
} else if ( innerText.startsWith('http') ) {
|
|
|
|
this.record.type = 'click_link';
|
|
|
|
this.record.type = 'click_link';
|
|
|
|
|
|
|
|
} else if ( 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);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.record.type = 'paragraph';
|
|
|
|
this.record.type = 'paragraph';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onLIKeyUp($event, i) {
|
|
|
|
|
|
|
|
console.log({$event});
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onHostDblClick() {
|
|
|
|
onHostDblClick() {
|
|
|
|
if ( this.record.type === 'click_link' ) {
|
|
|
|
if ( this.record.type === 'click_link' ) {
|
|
|
|
window.open(this.record.value.trim(), '_blank');
|
|
|
|
window.open(this.record.value.trim(), '_blank');
|
|
|
|