From 41cd9b769bc7c4dccd6237ec0a28240754aa9642 Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Wed, 24 Jan 2024 19:50:09 +0100
Subject: [PATCH] Fix host element

---
 projects/codemirror6-editor/package.json      |  2 +-
 .../src/lib/codemirror6-editor.component.ts   | 28 +++++++++----------
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/projects/codemirror6-editor/package.json b/projects/codemirror6-editor/package.json
index b21d65d..7a2aa64 100644
--- a/projects/codemirror6-editor/package.json
+++ b/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",
diff --git a/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts b/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts
index 7d20a0f..a9b6d13 100644
--- a/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts
+++ b/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,19 +27,14 @@ 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: [...extensions, this.updateListener]
+    extensions.push(this.updateListener);
+    this._extensions = extensions;
+    this.editor?.dispatch({
+      effects: StateEffect.reconfigure.of(extensions),
     });
-    if (this.editor) {
-      this.editor.setState(state);
-    } else {
-      this.editor = new EditorView({
-        state,
-        parent: this.host.nativeElement,
-      });
-    }
   }
 
   editor: EditorView | null = null;
@@ -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,