From 2ed79b8b8260d66a1eaac9ef5f49f816debae9cb Mon Sep 17 00:00:00 2001 From: Sibiraj <20282546+Sibiraj-S@users.noreply.github.com> Date: Fri, 19 Jan 2018 12:13:06 +0530 Subject: [PATCH] release: ngx-editor v3.3.0-rc.0 (#39) * feat: add code-editor to view/edit plain HTML * fix: default configuration overrides input * chore: update docs * release: ngx-editor v3.3.0-rc.0 * chore: bump dependencies closes #26 --- README.md | 2 - docs/components/NgxEditorComponent.html | 572 +- .../components/NgxEditorMessageComponent.html | 7 +- .../components/NgxEditorToolbarComponent.html | 144 +- docs/graph/dependencies.svg | 120 +- docs/index.html | 1 - docs/js/search/search_index.js | 4 +- docs/license.html | 2 +- docs/miscellaneous/variables.html | 140 +- docs/modules/NgxEditorModule.html | 130 +- docs/modules/NgxEditorModule/dependencies.svg | 120 +- docs/overview.html | 120 +- package-lock.json | 6222 ++++++++++++++--- package.json | 49 +- src/app/app.component.ts | 1 - .../ngx-editor/common/ngx-editor.defaults.ts | 19 +- .../common/utils/ngx-editor.utils.ts | 5 +- .../ngx-editor-message.component.ts | 3 +- .../ngx-editor-toolbar.component.html | 62 +- .../ngx-editor-toolbar.component.scss | 1 - .../ngx-editor-toolbar.component.ts | 14 +- src/app/ngx-editor/ngx-editor.component.html | 15 +- src/app/ngx-editor/ngx-editor.component.scss | 63 +- src/app/ngx-editor/ngx-editor.component.ts | 154 +- src/app/ngx-editor/ngx-editor.module.ts | 5 +- src/styles.scss | 1 + tslint.json | 1 - yarn.lock | 1999 +++++- 28 files changed, 7870 insertions(+), 2106 deletions(-) diff --git a/README.md b/README.md index a62bdfb9..cda26baa 100644 --- a/README.md +++ b/README.md @@ -63,8 +63,6 @@ Demo at stackblitz [ngx-editor](https://ngx-editor.stackblitz.io/) Documentation is auto-generated using [compodoc][compodoc], and can be viewed here: [https://sibiraj-s.github.io/ngx-editor/](https://sibiraj-s.github.io/ngx-editor/) -Wiki [here][wiki] - [npm]: https://www.npmjs.com/ [yarn]: https://yarnpkg.com/lang/en/ [github]: https://sibiraj-s.github.io/ diff --git a/docs/components/NgxEditorComponent.html b/docs/components/NgxEditorComponent.html index 34448f38..5e3ba1bd 100644 --- a/docs/components/NgxEditorComponent.html +++ b/docs/components/NgxEditorComponent.html @@ -402,7 +402,13 @@
Properties
+ + +
Outputs
+ + + + + + +
HostListeners
@@ -530,7 +562,7 @@

Constructor

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:49
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:116
@@ -607,6 +639,10 @@

Inputs

config +

The config property is a JSON object

+

All avaibale inputs inputs can be provided in the configuration as JSON +inputs provided directly are considered as top priority

+

Default value: ngxEditorConfig

@@ -614,7 +650,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:39
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:87
@@ -627,6 +663,8 @@

Inputs

editable +

Specifies weather the textarea to be editable or not

+

Type: boolean @@ -635,7 +673,30 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:29
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:34
+ + + + + + + + + + + + @@ -648,6 +709,8 @@

Inputs

height @@ -669,6 +732,8 @@

Inputs

minHeight @@ -690,6 +755,8 @@

Inputs

minWidth @@ -711,6 +778,8 @@

Inputs

placeholder @@ -732,6 +801,10 @@

Inputs

resizer @@ -752,14 +825,17 @@

Inputs

showToolbar @@ -772,6 +848,8 @@

Inputs

spellcheck @@ -793,15 +871,19 @@

Inputs

toolbar @@ -814,6 +896,9 @@

Inputs

translate @@ -835,6 +920,8 @@

Inputs

width
+ + enableToolbar + +

Weather to enable or disable the toolbar

+
+

+ Type: boolean + +

+
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:95
+

Sets height of the editor

+

Type: string @@ -656,7 +719,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:33
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:52
+

Sets minimum height for the editor

+

Type: string @@ -677,7 +742,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:34
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:56
+

Sets minimum width of the editor

+

Type: string @@ -698,7 +765,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:36
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:64
+

Placeholder for the textArea

+

Type: string @@ -719,7 +788,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:31
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:42
+

The editor can be resized vertically.

+

basic resizer enables the html5 reszier. Check here https://www.w3schools.com/cssref/css3_pr_resize.asp

+

stack resizer enable a resizer that looks like as if in https://stackoverflow.com

+

Default value: 'stack'

@@ -739,7 +812,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:38
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:80
-

- Default value: true -

+

Weather to show or hide toolbar

+
+

+ Type: boolean + +

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:40
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:91
+

The spellcheck property specifies whether the element is to have its spelling and grammar checked or not.

+

Type: boolean @@ -780,7 +858,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:30
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:38
+

Toolbar accepts an array which specifies the options to be enabled for the toolbar

+

Check ngxEditorConfig for toolbar configuration

+

Passing an empty array will enable all toolbar

+

- Type: any + Type: Object

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:37
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:72
+

The translate property specifies whether the content of an element should be translated or not.

+

Check https://www.w3schools.com/tags/att_global_translate.asp for more information and browser support

+

Type: string @@ -822,7 +907,7 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:32
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:48
+

Sets Width of the editor

+

Type: string @@ -843,13 +930,58 @@

Inputs

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:35
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:60
+
+

Outputs

+ + + + + + + + + + +
+ + blur + +

emits blur event when focused out from the textarea

+
+ $event type: EventEmitter<string> + +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:100
+
+ + + + + + + + + + +
+ + focus + +

emits focus event when focused in to the textarea

+
+ $event type: EventEmitter<string> + +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:104
+
+
@@ -873,14 +1005,14 @@

HostListeners

@@ -915,7 +1047,7 @@

@@ -984,13 +1116,13 @@

- document:click(event: ) + document:click(event: MouseEvent)
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:72
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:140
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:116
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:192
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:172
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:301
-

return a json containing input params

+

returns a json containing input params

@@ -1001,6 +1133,74 @@

+ + + + + + + + + + + + + + + + + + +
+ + + + monitorEditor + + + +
+ monitorEditor(value: any) +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:289
+
+

monitor text area changes

+
+ +
+ Parameters : + + + + + + + + + + + + + + + + + +
NameTypeOptionalDescription
value + any + +
+
+
+
+
+ Returns : void + +
+
+ +
+
@@ -1023,7 +1223,7 @@

@@ -1060,12 +1260,14 @@

@@ -1166,7 +1368,7 @@

@@ -1235,7 +1437,7 @@

@@ -1305,7 +1507,7 @@

@@ -1375,7 +1577,7 @@

@@ -1422,6 +1624,45 @@

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:89
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:158
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:80
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:148
+

Executed from the contenteditable section while the input property changes

+
Parameters : @@ -1127,7 +1329,7 @@

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:67
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:134
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:163
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:248
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:144
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:229
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:154
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:239
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:103
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:172
+ + + + + + + + + + + + + + + + + + +
+ + + + toggleCodeEditor + + + +
+ toggleCodeEditor() +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:258
+
+

toggle between codeview and editor

+
+ +
+ Returns : void + +
+
@@ -1444,7 +1685,7 @@

@@ -1502,18 +1743,57 @@

+ + + + + + + + + + + + + +
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:130
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:213
- + - enableToolbar + codeEditor - +
- enableToolbar: + codeEditor: any + +
+ Type : any + +
+ Decorators : ViewChild +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:107
+
+ + + + + + + @@ -1524,7 +1804,46 @@

+ + + + +
+ + + + codeEditorMode + + + +
+ codeEditorMode:
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:44
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:111
+
+ + + + + + + + + + + + + + + + @@ -1563,7 +1882,7 @@

@@ -1585,10 +1904,16 @@

+ + + @@ -1615,11 +1940,13 @@

Renderer2, forwardRef } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; +import * as CodeMirror from 'codemirror'; +import 'codemirror/mode/xml/xml.js'; import { CommandExecutorService } from './common/services/command-executor.service'; import { MessageService } from './common/services/message.service'; -import { ngxEditorConfig } from './common/ngx-editor.defaults'; +import { ngxEditorConfig, codeMirrorConfig } from './common/ngx-editor.defaults'; import * as Utils from './common/utils/ngx-editor.utils'; @Component({ @@ -1637,25 +1964,90 @@

export class NgxEditorComponent implements OnInit, ControlValueAccessor { + /** + * Specifies weather the textarea to be editable or not + */ @Input() editable: boolean; + /** + * The spellcheck property specifies whether the element is to have its spelling and grammar checked or not. + */ @Input() spellcheck: boolean; + /** + * Placeholder for the textArea + */ @Input() placeholder: string; + /** + * The translate property specifies whether the content of an element should be translated or not. + * + * Check https://www.w3schools.com/tags/att_global_translate.asp for more information and browser support + */ @Input() translate: string; + /** + * Sets height of the editor + */ @Input() height: string; + /** + * Sets minimum height for the editor + */ @Input() minHeight: string; + /** + * Sets Width of the editor + */ @Input() width: string; + /** + * Sets minimum width of the editor + */ @Input() minWidth: string; - @Input() toolbar: any; + /** + * Toolbar accepts an array which specifies the options to be enabled for the toolbar + * + * Check ngxEditorConfig for toolbar configuration + * + * Passing an empty array will enable all toolbar + */ + @Input() toolbar: Object; + /** + * The editor can be resized vertically. + * + * `basic` resizer enables the html5 reszier. Check here https://www.w3schools.com/cssref/css3_pr_resize.asp + * + * `stack` resizer enable a resizer that looks like as if in https://stackoverflow.com + */ @Input() resizer = 'stack'; + /** + * The config property is a JSON object + * + * All avaibale inputs inputs can be provided in the configuration as JSON + * inputs provided directly are considered as top priority + */ @Input() config = ngxEditorConfig; - @Input() showToolbar = true; + /** + * Weather to show or hide toolbar + */ + @Input() showToolbar: boolean; + /** + * Weather to enable or disable the toolbar + */ + @Input() enableToolbar: boolean; + + /** + * emits `blur` event when focused out from the textarea + */ + @Output() blur: EventEmitter<string> = new EventEmitter<string>(); + /** + * emits `focus` event when focused in to the textarea + */ + @Output() focus: EventEmitter<string> = new EventEmitter<string>(); @ViewChild('ngxTextArea') textArea: any; + @ViewChild('ngxCodeEditor') codeEditor: any; + @ViewChild('ngxWrapper') ngxWrapper: any; - enableToolbar = false; - Utils = Utils; + Utils: any = Utils; + codeEditorMode = false; private lastViewModel: any = ''; + private ngxCodeMirror: any = undefined; private onChange: (value: string) => void; private onTouched: () => void; @@ -1677,21 +2069,23 @@

*/ onFocus(): void { this.enableToolbar = true; + this.focus.emit('focus'); return; } - @HostListener('document:click', ['$event']) onDocumentClick(event) { + @HostListener('document:click', ['$event']) onDocumentClick(event: MouseEvent) { this.enableToolbar = !!this._elementRef.nativeElement.contains(event.target); } /** - * + * Executed from the contenteditable section while the input property changes * @param html html string from contenteditable */ onContentChange(html: string): void { if (typeof this.onChange === 'function') { this.onChange(html); + this.monitorEditor(html); } return; @@ -1702,7 +2096,7 @@

if (typeof this.onTouched === 'function') { this.onTouched(); } - + this.blur.emit('blur'); return; } @@ -1716,6 +2110,13 @@

newHeight += offsetY; this.height = newHeight + 'px'; this.textArea.nativeElement.style.height = this.height; + + /** + * update code-editor height only on editor mode + */ + if (this.codeEditorMode) { + this.ngxCodeMirror.setSize('100%', this.height); + } return; } @@ -1725,11 +2126,18 @@

* @param commandName name of the command to be executed */ executeCommand(commandName: string): void { + + if (commandName === 'code') { + this.toggleCodeEditor(); + return; + } + try { this._commandExecutor.execute(commandName); } catch (error) { this._messageService.sendMessage(error.message); } + return; } @@ -1739,11 +2147,13 @@

* @param value value to be executed when there is a change in contenteditable */ writeValue(value: any): void { - if (value === undefined) { + + if (!!value) { return; } this.refreshView(value); + this.monitorEditor(value); } /** @@ -1777,8 +2187,52 @@

return; } + + /** + * toggle between codeview and editor + */ + toggleCodeEditor(): void { + this.codeEditorMode = !this.codeEditorMode; + + if (this.codeEditorMode) { + + this.ngxCodeMirror = CodeMirror.fromTextArea(this.codeEditor.nativeElement, codeMirrorConfig); + this._renderer.setStyle(this.textArea.nativeElement, 'display', 'none'); + + /** set value of the code editor */ + this.ngxCodeMirror.setValue(this.textArea.nativeElement.innerHTML); + + /** sets height of the code editor as same as the height of the textArea */ + this.ngxCodeMirror.setSize('100%', this.height); + + } else { + + /** remove/ destroy code editor */ + this.ngxCodeMirror.toTextArea(); + this._renderer.setStyle(this.textArea.nativeElement, 'display', 'block'); + + /** update the model value and html content on the contenteditable */ + this.refreshView(this.ngxCodeMirror.getValue()); + this.onContentChange(this.ngxCodeMirror.getValue()); + + } + return; + } + /** - * return a json containing input params + * monitor text area changes + */ + monitorEditor(value: any): void { + if (!value || value === '<br>' || value === '') { + this._renderer.addClass(this.ngxWrapper.nativeElement, 'show-placeholder'); + } else { + this._renderer.removeClass(this.ngxWrapper.nativeElement, 'show-placeholder'); + } + return; + } + + /** + * returns a json containing input params */ getCollectiveParams(): any { return { @@ -1790,6 +2244,8 @@

minHeight: this.minHeight, width: this.width, minWidth: this.minWidth, + enableToolbar: this.enableToolbar, + showToolbar: this.showToolbar, toolbar: this.toolbar }; } @@ -1803,6 +2259,7 @@

this.height = this.height || this.textArea.nativeElement.offsetHeight; this.executeCommand('enableObjectResizing'); + } } @@ -1812,15 +2269,20 @@ 

<div class="ngx-editor" id="ngxEditor" [style.width]="config['width']" [style.minWidth]="config['minWidth']">
 
-  <app-ngx-editor-toolbar [config]="config" [enableToolbar]="enableToolbar" [showToolbar]="showToolbar" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>
+  <app-ngx-editor-toolbar [config]="config" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>
 
   <!-- text area -->
-  <div class="ngx-editor-textarea" [attr.contenteditable]="config['editable']" [attr.placeholder]="config['placeholder']" (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>
+  <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>
 
-  <app-ngx-editor-message></app-ngx-editor-message>
+    <span class="ngx-editor-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>
@@ -1850,7 +2312,7 @@

+ + + + ngxWrapper + + + +
+ ngxWrapper: any + +
+ Type : any + +
+ Decorators : ViewChild +
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:108
-
Defined in src/app/ngx-editor/ngx-editor.component.ts:42
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:106
- Utils: + Utils: any
+ Type : any + +
Default value : Utils @@ -1596,7 +1921,7 @@

-
Defined in src/app/ngx-editor/ngx-editor.component.ts:45
+
Defined in src/app/ngx-editor/ngx-editor.component.ts:110