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.
100 lines
4.4 KiB
100 lines
4.4 KiB
<div [ngClass]="isDark() ? 'container dark' : 'container'"
|
|
(dblclick)="onFocusIn($event)">
|
|
<div class="toolbar-base" *ngIf="editingUsers && editingUsers.length">
|
|
<div class="editing-msg">Also editing:</div>
|
|
<div class="editing-user"
|
|
*ngFor="let user of editingUsers"
|
|
[ngStyle]="{background: user.color, color: getContrastYIQ(user.color.slice(1))}"
|
|
[title]="user.display"
|
|
>{{ user.display.charAt(0).toUpperCase() }}</div>
|
|
</div>
|
|
<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="Make text bigger" (click)="documentCommand('increaseFontSize')">
|
|
<i class="icon fa fa-font"></i>
|
|
<i class="icon fa fa-long-arrow-alt-up"></i>
|
|
</button>
|
|
<button class="toolbar-button" title="Make text smaller" (click)="documentCommand('decreaseFontSize')">
|
|
<i class="icon fa fa-font"></i>
|
|
<i class="icon fa fa-long-arrow-alt-down"></i>
|
|
</button>
|
|
|
|
<button class="toolbar-button" title="Make text superscript" (click)="documentCommand('superscript')">
|
|
<i class="icon fa fa-superscript"></i>
|
|
</button>
|
|
<button class="toolbar-button" title="Make text subscript" (click)="documentCommand('subscript')">
|
|
<i class="icon fa fa-subscript"></i>
|
|
</button>
|
|
|
|
<div class="toolbar-sep"></div>
|
|
|
|
<button class="toolbar-button" title="Insert unordered list" (click)="documentCommand('insertUnorderedList')">
|
|
<i class="icon fa fa-list-ul"></i>
|
|
</button>
|
|
<button class="toolbar-button" title="Insert ordered list" (click)="documentCommand('insertOrderedList')">
|
|
<i class="icon fa fa-list-ol"></i>
|
|
</button>
|
|
<button class="toolbar-button" title="Insert horizontal rule" (click)="documentCommand('insertHorizontalRule')">
|
|
―
|
|
</button>
|
|
</div>
|
|
<div class="editable-container">
|
|
<div class="remote-cursors-container" *ngIf="editable && editingUserSelections && editingUserSelections.length">
|
|
<div class="remote-cursor"
|
|
*ngFor="let sel of editingUserSelections"
|
|
[ngStyle]="{backgroundColor: sel.user_data.color, left: (sel.left || 0) + 'px', top: (sel.top || 0) + 'px'}"
|
|
[title]="sel.user_data.display"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="editable-base"
|
|
[ngClass]="isFocused ? 'focused' : ''"
|
|
contenteditable
|
|
appDomChange
|
|
*ngIf="isFocused"
|
|
[innerHTML]="contents"
|
|
#editable
|
|
(domChange)="onContentsChanged($event)"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="editable-base"
|
|
*ngIf="!isFocused"
|
|
[innerHTML]="displayContents"
|
|
></div>
|
|
</div> |