feat(ngx-codejar): readonly property

set this property if you don't want that a user makes code changes

README.md

@@ -134,6 +134,12 @@ If you want to use codejar with [prism.js](https://prismjs.com/) you should do t
 <td><code>(editor: CodeJarContainer) => {}</code></td>
 </tr>
 <tr>
+<td>Property</td>
+<td>readonly</td>
+<td>defines if user is allowed to make code changes</td>
+<td>false</td>
+</tr>
+<tr>
 <td>Event</td>
 <td>update</td>
 <td>this event is triggered after the code was updated.</td>

libs/ngx-codejar/package.json

@@ -4,6 +4,7 @@
   "description": "Angular wrapper for CodeJar supporting Prism.js and Highlight.js. With this you can easily add code-editors to your Angular app.",
   "peerDependencies": {
     "codejar": "^4.0.0",
+    "codejar-linenumbers": "^1.0.0",
     "@angular/common": ">= 14.0.0",
     "@angular/core": ">= 14.0.0"
   },

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

@@ -61,7 +61,7 @@ import {CommonModule} from '@angular/common';
     }
   `]
 })
-export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+export class NgxCodeJarComponent implements AfterViewInit, OnChanges, OnDestroy {
   constructor(private el: ElementRef, private renderer: Renderer2) {
     this.update = new EventEmitter<string>();
   }
@@ -86,6 +86,7 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges, On
 
   @Input() highlighter: 'prism' | 'hljs' = 'hljs';
   @Input() options: CodeJarOptions = {};
+  @Input() readonly = false;
 
   // Events
   /**
@@ -100,18 +101,30 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges, On
       if (this.codeJar) {
         this.codeJar.updateOptions(changes['options']?.currentValue);
         this.applyAdditionalOptions();
+        this.checkReadonly();
       }
     }
+
+    if (changes['readonly']) {
+      this.checkReadonly();
+    }
   }
 
-  ngOnInit(): void {
+  private checkReadonly() {
+    if (this.editor?.nativeElement) {
+      if (this.readonly) {
+        this.renderer.setAttribute(this.editor?.nativeElement, 'contenteditable', 'none');
+      } else {
+        this.renderer.setAttribute(this.editor?.nativeElement, 'contenteditable', 'plaintext-only');
+      }
+    }
   }
 
   ngAfterViewInit() {
-    this.int();
+    this.init();
   }
 
-  private int() {
+  private init() {
     if (this.editor !== undefined) {
       const highlightMethod = (this.showLineNumbers) ? withLineNumbers(this.highlightMethod) : this.highlightMethod;
 
@@ -126,6 +139,8 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges, On
       });
       this.updateCode(this._code);
       this.update.emit(this._code);
+      this.editor.nativeElement.addEventListener('keydown', this.onKeyDown);
+      this.checkReadonly();
     }
   }
 
@@ -212,4 +227,11 @@ export class NgxCodeJarComponent implements OnInit, AfterViewInit, OnChanges, On
       }
     }
   }
+
+  onKeyDown = (event: KeyboardEvent) => {
+    if (this.readonly) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
 }