Force state redraw when editing the state array

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

@@ -7,7 +7,7 @@ import {
   NgZone,
   OnDestroy
 } from '@angular/core';
-import { EditorState, Extension, StateEffect } from '@codemirror/state';
+import { EditorState, Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -28,26 +28,33 @@ export class CodeMirrorComponent implements AfterViewInit, OnDestroy, ControlVal
 
   @Input()
   set extensions(extensions: Extension[]) {
-    this.editor?.dispatch({
+    const state = EditorState.create({
-      effects: StateEffect.reconfigure.of(extensions),
+      extensions: [...extensions, this.updateListener]
     });
+    if (this.editor) {
+      this.editor.setState(state);
+    } else {
+      this.editor = new EditorView({
+        state,
+        parent: this.host.nativeElement,
+      });
+    }
   }
 
   editor: EditorView | null = null;
   private handleChange: (value: string) => void = () => {};
+  private readonly updateListener = EditorView.updateListener.of((update) => {
+    this.ngZone.run(() => {
+      const value = update.state.doc.toString();
+      this.handleChange(value);
+    });
+  });
 
   constructor(private host: ElementRef<HTMLElement>, private ngZone: NgZone) {}
 
   ngAfterViewInit(): void {
     const state = EditorState.create({
-      extensions: [
+      extensions: [this.updateListener],
-        EditorView.updateListener.of((update) => {
-          this.ngZone.run(() => {
-            const value = update.state.doc.toString();
-            this.handleChange(value);
-          });
-        }),
-      ],
     });
     this.editor = new EditorView({
       state,