frontend/src/app/components/nodes/norm/norm.component.html

<div class="container"
     (focusin)="onFocusIn($event)"
     (focusout)="onFocusIn($event)">
    <div class="toolbar-base" *ngIf="isFocused">
        <button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
            <i class="icon fa fa-bold"></i>
        </button>
        <button class="toolbar-button" title="Italic" (click)="documentCommand('italic')">
            <i class="icon fa fa-italic"></i>
        </button>
        <button class="toolbar-button" title="Underline" (click)="documentCommand('underline')">
            <i class="icon fa fa-underline"></i>
        </button>
        <button class="toolbar-button" title="Strikethrough" (click)="documentCommand('strikeThrough')">
            <i class="icon fa fa-strikethrough"></i>
        </button>

        <div class="toolbar-sep"></div>

        <button class="toolbar-button" title="Align Left" (click)="documentCommand('justifyLeft')">
            <i class="icon fa fa-align-left"></i>
        </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>

        <button class="toolbar-button" title="Undo" (click)="documentCommand('undo')">
            <i class="icon fa fa-undo"></i>
        </button>
        <button class="toolbar-button" title="Redo" (click)="documentCommand('redo')">
            <i class="icon fa fa-redo"></i>
        </button>

        <div class="toolbar-sep"></div>

        <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>
        </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>
        </button>
        <button class="toolbar-button" title="Format Monospace">
            <i class="icon fa fa-code"></i>
        </button>

        <div class="toolbar-sep"></div>

        <button class="toolbar-button" title="Begin Bulleted List">
            <i class="icon fa fa-list-ul"></i>
        </button>
    </div>
    <div
        class="editable-base"
        [ngClass]="isFocused ? 'focused' : ''"
        contenteditable
        appDomChange
        [innerHTML]="initialValue"
        #editable
        (domChange)="onContentsChanged($event)"
    ></div>
</div>