feat(ngx-codejar): add options provided by CodeJar

README.md

@@ -105,21 +105,27 @@ If you want to use codejar with [prism.js](https://prismjs.com/) you should do t
 <tbody>
 <tr>
 <td>Property</td>
+<td>code</td>
+<td>property for two-way data-binding.</td>
+<td>-</td>
+</tr>
+<tr>
+<td>Property</td>
 <td>highlighter</td>
 <td>selects which highlighter should be used ('prism' or 'hljs')</td>
 <td>'hljs'</td>
 </tr>
 <tr>
 <td>Property</td>
-<td>showLineNumbers</td>
-<td>adds line numbers</td>
-<td>false</td>
+<td>options</td>
+<td>Options provided by CodeJar + additional Options (tabSize)</td>
+<td>Defaults provided by Codejar <a href="https://github.com/antonmedv/codejar">Defaults by CodeJar</a></td>
 </tr>
 <tr>
 <td>Property</td>
-<td>code</td>
-<td>property for two-way data-binding.</td>
-<td>-</td>
+<td>showLineNumbers</td>
+<td>adds line numbers</td>
+<td>false</td>
 </tr>
 <tr>
 <td>Property</td>

apps/demo/project.json

@@ -16,7 +16,7 @@
         "polyfills": ["zone.js"],
         "tsConfig": "apps/demo/tsconfig.app.json",
         "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
-        "styles": ["apps/demo/src/styles.scss"],
+        "styles": ["node_modules/highlight.js/styles/github-dark.css", "node_modules/prismjs/themes/prism-dark.css","apps/demo/src/styles.scss"],
         "scripts": []
       },
       "configurations": {

libs/ngx-codejar/src/lib/codejar.typings.ts

@@ -1,3 +1,16 @@
 export interface CodeJarContainer extends HTMLElement {
   textContent: string | null;
 }
+
+export interface CodeJarOptions{
+  tab?: string;
+  tabSize?: number;
+  indentOn?: RegExp;
+  moveToNewLine?: RegExp;
+  spellcheck?: boolean;
+  catchTab?: boolean;
+  preserveIdent?: boolean;
+  addClosing?: boolean;
+  history?: boolean;
+  window?: typeof window;
+}

libs/ngx-codejar/src/lib/ngx-code-jar.component.ts

@@ -4,13 +4,15 @@ import {
   ElementRef,
   EventEmitter,
   Input,
+  OnChanges,
   OnInit,
   Output,
   Renderer2,
+  SimpleChanges,
   ViewChild
 } from '@angular/core';
 import {CodeJar, Position} from 'codejar';
-import {CodeJarContainer} from './codejar.typings';
+import {CodeJarContainer, CodeJarOptions} from './codejar.typings';
 import {withLineNumbers} from 'codejar/linenumbers.js';
 
 @Component({
@@ -55,7 +57,7 @@ import {withLineNumbers} from 'codejar/linenumbers.js';
     }
   `]
 })
-export class NgxCodeJarComponent implements OnInit, AfterViewInit {
+export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges {
   constructor(private el: ElementRef, private renderer: Renderer2) {
     this.update = new EventEmitter<string>();
   }
@@ -79,6 +81,7 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit {
   @Output() codeChange = new EventEmitter<string>();
 
   @Input() highlighter: 'prism' | 'hljs' = 'hljs';
+  @Input() options: CodeJarOptions = {};
 
   // Events
   /**
@@ -88,15 +91,30 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit {
   @Input() highlightMethod: (editor: CodeJarContainer, pos?: Position) => void = () => {
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['options']?.currentValue && changes['options'].currentValue !== changes['options']) {
+      if (this.codeJar) {
+        this.codeJar.updateOptions(changes['options']?.currentValue);
+        this.applyAdditionalOptions();
+      }
+    }
+  }
+
   ngOnInit(): void {
   }
 
   ngAfterViewInit() {
+    this.int();
+  }
+
+  private int() {
     if (this.editor !== undefined) {
       const highlightMethod = (this.showLineNumbers) ? withLineNumbers(this.highlightMethod) : this.highlightMethod;
 
-      this.codeJar = CodeJar(this.editor.nativeElement, highlightMethod, {tab: '\t'});
+      this.codeJar = CodeJar(this.editor.nativeElement, highlightMethod, this.options);
       this.applyCustomizations();
+      this.applyAdditionalOptions();
+
       this.codeJar.onUpdate((newCode: string) => {
         this._code = newCode;
         this.codeChange.emit(newCode);
@@ -107,6 +125,14 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit {
     }
   }
 
+  applyAdditionalOptions() {
+    if (this.editor) {
+      if (this.options.tabSize) {
+        this.renderer.setStyle(this.editor.nativeElement, 'tab-size', this.options.tabSize);
+      }
+    }
+  }
+
   /***
    * updates the code and preserves the position
    * @param newCode new code