Skip to content

Commit

Permalink
feat: support TAB key to focus the editor
Browse files Browse the repository at this point in the history 
closes #79
  • Loading branch information
@sibiraj-s
sibiraj-s committed Mar 7, 2018
1 parent 391c915 commit 5097dcc
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 15 deletions.
76 changes: 62 additions & 14 deletions docs/components/NgxEditorComponent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,6 +522,9 @@ <h6><b>Methods</b></h6>
<li>
<a href="#onContentChange">onContentChange</a>
</li>
<li>
<a href="#onEditorFocus">onEditorFocus</a>
</li>
<li>
<a href="#onFocus">onFocus</a>
</li>
Expand Down Expand Up @@ -1142,7 +1145,7 @@ <h3>HostListeners</h3> <table class="table table-sm table-bordered">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="120" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:120</a></div>
<div class="io-line">Defined in <a href="" data-line="125" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:125</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1177,7 +1180,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:175</a></div>
<div class="io-line">Defined in <a href="" data-line="180" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:180</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1253,7 +1256,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="284" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:284</a></div>
<div class="io-line">Defined in <a href="" data-line="289" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:289</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1292,7 +1295,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="272" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:272</a></div>
<div class="io-line">Defined in <a href="" data-line="277" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:277</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1363,7 +1366,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:138</a></div>
<div class="io-line">Defined in <a href="" data-line="143" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:143</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1400,7 +1403,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="128" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:128</a></div>
<div class="io-line">Defined in <a href="" data-line="133" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:133</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1454,6 +1457,45 @@ <h3 id="methods">
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="onEditorFocus"></a>
<span class="name">
<b>
onEditorFocus
</b>
<a href="#onEditorFocus"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>onEditorFocus()</code>
</td>
</tr>


<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="121" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:121</a></div>
</td>
</tr>

<tr>
<td class="col-md-4">
<div class="io-description"><p>focus the text area when the editor is focussed </p>
</div>

<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
Expand Down Expand Up @@ -1515,7 +1557,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="231" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:231</a></div>
<div class="io-line">Defined in <a href="" data-line="236" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:236</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1591,7 +1633,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="212" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:212</a></div>
<div class="io-line">Defined in <a href="" data-line="217" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:217</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1668,7 +1710,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:222</a></div>
<div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:227</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1745,7 +1787,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="155" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:155</a></div>
<div class="io-line">Defined in <a href="" data-line="160" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:160</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1821,7 +1863,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:241</a></div>
<div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:246</a></div>
</td>
</tr>

Expand Down Expand Up @@ -1860,7 +1902,7 @@ <h3 id="methods">

<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="196" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:196</a></div>
<div class="io-line">Defined in <a href="" data-line="201" class="link-to-prism">src/app/ngx-editor/ngx-editor.component.ts:201</a></div>
</td>
</tr>

Expand Down Expand Up @@ -2235,6 +2277,11 @@ <h3 id="inputs">
return;
}

/** focus the text area when the editor is focussed */
onEditorFocus() {
this.textArea.nativeElement.focus();
}

@HostListener(&#x27;document:click&#x27;, [&#x27;$event&#x27;]) onDocumentClick(event: MouseEvent) {
this.enableToolbar &#x3D; !!this._elementRef.nativeElement.contains(event.target);
}
Expand Down Expand Up @@ -2433,7 +2480,8 @@ <h3 id="inputs">
</div>

<div class="tab-pane fade" id="c-templateData">
<pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;ngx-editor&quot; id&#x3D;&quot;ngxEditor&quot; [style.width]&#x3D;&quot;config[&#x27;width&#x27;]&quot; [style.minWidth]&#x3D;&quot;config[&#x27;minWidth&#x27;]&quot;&gt;
<pre class="line-numbers"><code class="language-html">&lt;div class&#x3D;&quot;ngx-editor&quot; id&#x3D;&quot;ngxEditor&quot; [style.width]&#x3D;&quot;config[&#x27;width&#x27;]&quot; [style.minWidth]&#x3D;&quot;config[&#x27;minWidth&#x27;]&quot; tabindex&#x3D;&quot;0&quot;
(focus)&#x3D;&quot;onEditorFocus()&quot;&gt;

&lt;app-ngx-editor-toolbar [config]&#x3D;&quot;config&quot; (execute)&#x3D;&quot;executeCommand($event)&quot;&gt;&lt;/app-ngx-editor-toolbar&gt;

Expand Down Expand Up @@ -2478,7 +2526,7 @@ <h3 id="inputs">
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
var COMPONENT_TEMPLATE = '<div><div class="ngx-editor" id="ngxEditor" [style.width]="config[\'width\']" [style.minWidth]="config[\'minWidth\']"> <app-ngx-editor-toolbar [config]="config" (execute)="executeCommand($event)"></app-ngx-editor-toolbar> <!-- text area --> <div class="ngx-wrapper" #ngxWrapper> <div class="ngx-editor-textarea" [attr.contenteditable]="config[\'editable\']" (input)="onContentChange($event.target.innerHTML)" [attr.translate]="config[\'translate\']" [attr.spellcheck]="config[\'spellcheck\']" [style.height]="config[\'height\']" [style.minHeight]="config[\'minHeight\']" [style.resize]="Utils?.canResize(resizer)" (focus)="onFocus()" (blur)="onBlur()" #ngxTextArea></div> <span class="ngx-editor-placeholder">{{ placeholder || config[\'placeholder\'] }}</span> </div> <textarea #ngxCodeEditor [hidden]="true"></textarea> <app-ngx-editor-message></app-ngx-editor-message> <app-ngx-grippie *ngIf="resizer === \'stack\'"></app-ngx-grippie></div></div>'
var COMPONENT_TEMPLATE = '<div><div class="ngx-editor" id="ngxEditor" [style.width]="config[\'width\']" [style.minWidth]="config[\'minWidth\']" tabindex="0" (focus)="onEditorFocus()"> <app-ngx-editor-toolbar [config]="config" (execute)="executeCommand($event)"></app-ngx-editor-toolbar> <!-- text area --> <div class="ngx-wrapper" #ngxWrapper> <div class="ngx-editor-textarea" [attr.contenteditable]="config[\'editable\']" (input)="onContentChange($event.target.innerHTML)" [attr.translate]="config[\'translate\']" [attr.spellcheck]="config[\'spellcheck\']" [style.height]="config[\'height\']" [style.minHeight]="config[\'minHeight\']" [style.resize]="Utils?.canResize(resizer)" (focus)="onFocus()" (blur)="onBlur()" #ngxTextArea></div> <span class="ngx-editor-placeholder">{{ placeholder || config[\'placeholder\'] }}</span> </div> <textarea #ngxCodeEditor [hidden]="true"></textarea> <app-ngx-editor-message></app-ngx-editor-message> <app-ngx-grippie *ngIf="resizer === \'stack\'"></app-ngx-grippie></div></div>'
var COMPONENTS = [{'name': 'NgxEditorComponent', 'selector': 'app-ngx-editor'},{'name': 'NgxEditorMessageComponent', 'selector': 'app-ngx-editor-message'},{'name': 'NgxEditorToolbarComponent', 'selector': 'app-ngx-editor-toolbar'},{'name': 'NgxGrippieComponent', 'selector': 'app-ngx-grippie'}];
var DIRECTIVES = [];
var ACTUAL_COMPONENT = {'name': 'NgxEditorComponent'};
Expand Down
3 changes: 2 additions & 1 deletion src/app/ngx-editor/ngx-editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
<div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']" tabindex="0"
(focus)="onEditorFocus()">

<app-ngx-editor-toolbar [config]="config" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>

Expand Down
5 changes: 5 additions & 0 deletions src/app/ngx-editor/ngx-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,11 @@ export class NgxEditorComponent implements OnInit, ControlValueAccessor {
return;
}

/** focus the text area when the editor is focussed */
onEditorFocus() {
this.textArea.nativeElement.focus();
}

@HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent) {
this.enableToolbar = !!this._elementRef.nativeElement.contains(event.target);
}
Expand Down

0 comments on commit 5097dcc

Please sign in to comment.