feat: height property for editable area

sibiraj-s · Oct 3, 2017 · fdb1b30 · fdb1b30
1 parent 8695873
commit fdb1b30
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.6c0759721ec60f001dae.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.da145bc5715ac7d23378.bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.7592105dd06098fc91a8.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.e5226f3858d1515860a8.bundle.js"></script></body></html>
diff --git a/docs/inline.6c0759721ec60f001dae.bundle.js → docs/inline.7592105dd06098fc91a8.bundle.js b/docs/inline.6c0759721ec60f001dae.bundle.js → docs/inline.7592105dd06098fc91a8.bundle.js
diff --git a/docs/main.da145bc5715ac7d23378.bundle.js b/docs/main.da145bc5715ac7d23378.bundle.js
diff --git a/docs/main.e5226f3858d1515860a8.bundle.js b/docs/main.e5226f3858d1515860a8.bundle.js
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,6 +15,8 @@ export class AppComponent implements OnInit {
   editorConfig = {
     editable: true,
     spellcheck: false,
+    height: '5rem',
+    minHeight: '2rem',
     placeholder: 'Enter text here...',
     translate: 'no'
   };

diff --git a/src/app/ngx-editor/ngx-editor.component.html b/src/app/ngx-editor/ngx-editor.component.html
@@ -35,5 +35,5 @@
   </div>
   <div class="textarea" [attr.contenteditable]="getBooleanProperty('editable')" [attr.placeholder]="placeholder || config['placeholder']"
     (input)="html = $event.target.innerHTML; htmlContentChange($event.target.innerHTML)" [attr.translate]="translate || config['translate']"
-    [attr.spellcheck]="getBooleanProperty('spellcheck')"></div>
+    [attr.spellcheck]="getBooleanProperty('spellcheck')" [style.height]="height || config['height']" [style.minHeight]="minHeight || config['minHeight']"></div>
 </div>
diff --git a/src/app/ngx-editor/ngx-editor.component.ts b/src/app/ngx-editor/ngx-editor.component.ts
@@ -49,7 +49,8 @@ export class NgxEditorComponent implements OnInit {
   @Input() spellcheck: boolean;
   @Input() placeholder: string;
   @Input() translate: string;
-
+  @Input() height: string;
+  @Input() minHeight: string;
   /*
    * update html on changes in content editable
    */
@@ -85,10 +86,12 @@ export class NgxEditorComponent implements OnInit {
     if (this[value] === false) {
       return false;
     }
-    if (this[value] === undefined) {
+    else if (this[value] === undefined) {
       return this.config[value];
     }
-    return true;
+    else {
+      return true;
+    }
   }
 
   /*

diff --git a/src/app/ngx-editor/ngx-editor.defaults.ts b/src/app/ngx-editor/ngx-editor.defaults.ts
@@ -1,6 +1,8 @@
 export const ngxEditorConfig = {
   editable: true,
   spellcheck: true,
+  height: '5rem',
+  minHeight: 'inherit',
   translate: 'yes',
   placeholder: 'Enter text here...',
   toolbar: {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.6c0759721ec60f001dae.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.da145bc5715ac7d23378.bundle.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>NgxEditor</title><base href="ngx-editor"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"><link href="styles.f6a07fb204943f53af55.bundle.css" rel="stylesheet"/></head><body><app-root></app-root><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="inline.7592105dd06098fc91a8.bundle.js"></script><script type="text/javascript" src="polyfills.8eba0ab53b5457105d75.bundle.js"></script><script type="text/javascript" src="vendor.0aaa6fe23ea3764cdb3e.bundle.js"></script><script type="text/javascript" src="main.e5226f3858d1515860a8.bundle.js"></script></body></html>