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

Finish WYSIWYG editor commands and keybindings
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:50:38 -05:00
parent 2291b99512
commit ef5c53ae04
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
4 changed files with 65 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.ts
View File

@ -11,7 +11,7 @@ import {OptionPickerComponent} from './components/option-picker/option-picker.co
import {OptionMenuComponent} from './components/option-menu/option-menu.component';
import {SelectorComponent} from './components/sharing/selector/selector.component';
import {SessionService} from './service/session.service';
import {SearchComponent} from "./components/search/Search.component";
import {SearchComponent} from './components/search/Search.component';
@Component({
selector: 'app-root',

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

@ -38,23 +38,33 @@
<div class="toolbar-sep"></div>
<button class="toolbar-button" title="Increase Heading Level">
<i class="icon fa fa-heading"></i>
<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="Decrease Heading Level">
<i class="icon fa fa-heading"></i>
<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="Format Monospace">
<i class="icon fa fa-code"></i>
<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="Begin Bulleted List">
<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-base"

44
src/app/components/nodes/norm/norm.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ViewChild} from '@angular/core';
import {Component, HostListener, ViewChild} from '@angular/core';
import {EditorNodeContract} from '../EditorNode.contract';
@Component({
@ -42,4 +42,46 @@ export class NormComponent extends EditorNodeContract {
this.contents = innerHTML;
}
}
@HostListener('document:keydown.tab', ['$event'])
onIndent(event) {
event.preventDefault();
this.documentCommand('indent');
}
@HostListener('document:keydown.shift.tab', ['$event'])
onOutdent(event) {
event.preventDefault();
this.documentCommand('outdent');
}
@HostListener('document:keydown.control.b', ['$event'])
onBold(event) {
event.preventDefault();
this.documentCommand('bold');
}
@HostListener('document:keydown.control.i', ['$event'])
onItalic(event) {
event.preventDefault();
this.documentCommand('italic');
}
@HostListener('document:keydown.control.u', ['$event'])
onUnderline(event) {
event.preventDefault();
this.documentCommand('underline');
}
@HostListener('document:keydown.control.z', ['$event'])
onUndo(event) {
event.preventDefault();
this.documentCommand('undo');
}
@HostListener('document:keydown.control.shift.z', ['$event'])
onRedo(event) {
event.preventDefault();
this.documentCommand('redo');
}
}

4
src/global.scss
View File

@ -64,3 +64,7 @@ div.picker-wrapper {
//color: #fff;
}
hr {
background: darkgray;
}