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

Initial editor functionality and data bindings
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills
2020-10-13 20:19:38 -05:00
parent 8a9f6d508e
commit 2291b99512
8 changed files with 121 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/components/nodes/norm/norm.component.html
View File

@@ -1,66 +1,68 @@
<div class="container"
(focusin)="onFocusIn($event)"
(focusout)="onFocusOut($event)">
(focusout)="onFocusIn($event)">
<div class="toolbar-base" *ngIf="isFocused">
<div class="toolbar-button" title="Bold">
<button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
<i class="icon fa fa-bold"></i>
</div>
<div class="toolbar-button" title="Italic">
</button>
<button class="toolbar-button" title="Italic" (click)="documentCommand('italic')">
<i class="icon fa fa-italic"></i>
</div>
<div class="toolbar-button" title="Underline">
</button>
<button class="toolbar-button" title="Underline" (click)="documentCommand('underline')">
<i class="icon fa fa-underline"></i>
</div>
<div class="toolbar-button" title="Strikethrough">
</button>
<button class="toolbar-button" title="Strikethrough" (click)="documentCommand('strikeThrough')">
<i class="icon fa fa-strikethrough"></i>
</div>
</button>
<div class="toolbar-sep"></div>
<div class="toolbar-button" title="Align Right">
<i class="icon fa fa-align-right"></i>
</div>
<div class="toolbar-button" title="Align Center">
<i class="icon fa fa-align-center"></i>
</div>
<div class="toolbar-button" title="Align Left">
<button class="toolbar-button" title="Align Left" (click)="documentCommand('justifyLeft')">
<i class="icon fa fa-align-left"></i>
</div>
</button>
<button class="toolbar-button" title="Align Center" (click)="documentCommand('justifyCenter')">
<i class="icon fa fa-align-center"></i>
</button>
<button class="toolbar-button" title="Align Right" (click)="documentCommand('justifyRight')">
<i class="icon fa fa-align-right"></i>
</button>
<div class="toolbar-sep"></div>
<div class="toolbar-button" title="Undo">
<button class="toolbar-button" title="Undo" (click)="documentCommand('undo')">
<i class="icon fa fa-undo"></i>
</div>
<div class="toolbar-button" title="Redo">
</button>
<button class="toolbar-button" title="Redo" (click)="documentCommand('redo')">
<i class="icon fa fa-redo"></i>
</div>
</button>
<div class="toolbar-sep"></div>
<div class="toolbar-button" title="Increase Heading Level">
<button class="toolbar-button" title="Increase Heading Level">
<i class="icon fa fa-heading"></i>
<i class="icon fa fa-long-arrow-alt-up"></i>
</div>
<div class="toolbar-button" title="Decrease Heading Level">
</button>
<button class="toolbar-button" title="Decrease Heading Level">
<i class="icon fa fa-heading"></i>
<i class="icon fa fa-long-arrow-alt-down"></i>
</div>
<div class="toolbar-button" title="Format Monospace">
</button>
<button class="toolbar-button" title="Format Monospace">
<i class="icon fa fa-code"></i>
</div>
</button>
<div class="toolbar-sep"></div>
<div class="toolbar-button" title="Begin Bulleted List">
<button class="toolbar-button" title="Begin Bulleted List">
<i class="icon fa fa-list-ul"></i>
</div>
</button>
</div>
<div
class="editable-base"
[ngClass]="isFocused ? 'focused' : ''"
contenteditable
>
Content editable!
</div>
appDomChange
[innerHTML]="initialValue"
#editable
(domChange)="onContentsChanged($event)"
></div>
</div>