Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Task #11, Task #6 - add click_link type, saving/restore support to the editor

Browse Source
This commit is contained in:
garrettmills
2020-02-08 11:19:00 -06:00
parent 8a53bc2888
commit 3861c1e72f
11 changed files with 255 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/editor/host/host.component.html
View File

@@ -1,13 +1,13 @@
<ng-container>
<div
*ngIf="record.type === 'paragraph' || record.type === 'header1' || record.type === 'header2' || record.type === 'header3' || record.type === 'header4' || record.type === 'block_code'"
*ngIf="record.type === 'paragraph' || record.type === 'header1' || record.type === 'header2' || record.type === 'header3' || record.type === 'header4' || record.type === 'block_code' || record.type === 'click_link'"
class="host-host ion-padding"
contenteditable="true"
(keyup)="onKeyUp($event)"
(blur)="record.value=hostContainer.innerText"
(blur)="record.value=hostContainer.innerHTML"
(dblclick)="onHostDblClick()"
#hostContainer
[ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code'}"
>
{{ record.value }}
</div>
[ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code', 'click_link': record.type === 'click_link'}"
[innerHTML]="record.value.replace('\n', '<br>')"
></div>
</ng-container>

9
src/app/components/editor/host/host.component.scss
View File

@@ -24,3 +24,12 @@
background-color: #ddd;
margin-bottom: 15px;
}
.host-host.click_link {
color: #0141b0;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}

8
src/app/components/editor/host/host.component.ts
View File

@@ -40,9 +40,17 @@ export class HostComponent implements OnInit {
this.record.type = 'header4';
} else if ( innerText.startsWith('```') ) {
this.record.type = 'block_code';
} else if ( innerText.startsWith('http') ) {
this.record.type = 'click_link';
} else {
this.record.type = 'paragraph';
}
}
onHostDblClick() {
if ( this.record.type === 'click_link' ) {
window.open(this.record.value.trim(), '_blank');
}
}
}