Fix host element

projects/codemirror6-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sandkasten/codemirror6-editor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^17.1.0",
     "@angular/core": "^17.1.0",

projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts

@@ -5,11 +5,12 @@ import {
   ElementRef,
   Input,
   NgZone,
-  OnDestroy
+  OnDestroy,
+  ViewChild
 } from '@angular/core';
-import { EditorState, Extension } from '@codemirror/state';
+import { EditorState, Extension, StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 @Component({
   selector: 'codemirror6-editor',
@@ -26,20 +27,15 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 })
 export class CodeMirrorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
 
+  private _extensions: Extension[] = [];
   @Input()
   set extensions(extensions: Extension[]) {
-    const state = EditorState.create({
+    extensions.push(this.updateListener);
-      extensions: [...extensions, this.updateListener]
+    this._extensions = extensions;
-    });
+    this.editor?.dispatch({
-    if (this.editor) {
+      effects: StateEffect.reconfigure.of(extensions),
-      this.editor.setState(state);
-    } else {
-      this.editor = new EditorView({
-        state,
-        parent: this.host.nativeElement,
     });
   }
-  }
 
   editor: EditorView | null = null;
   private handleChange: (value: string) => void = () => {};
@@ -50,11 +46,13 @@ export class CodeMirrorComponent implements AfterViewInit, OnDestroy, ControlVal
     });
   });
 
-  constructor(private host: ElementRef<HTMLElement>, private ngZone: NgZone) {}
+  @ViewChild("host") private host!: ElementRef<HTMLElement>;
+
+  constructor(private ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
     const state = EditorState.create({
-      extensions: [this.updateListener],
+      extensions: this._extensions,
     });
     this.editor = new EditorView({
       state,