From 6eefa6972b7139dee9004b23a32f0e340644cf4c Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Sun, 21 Jan 2024 14:21:27 +0100
Subject: [PATCH] Allow accessing the inner editor state

---
 projects/codemirror6-editor/README.md         | 113 ++++++++++++++++--
 .../src/lib/codemirror6-editor.component.ts   |   2 +-
 2 files changed, 104 insertions(+), 11 deletions(-)

diff --git a/projects/codemirror6-editor/README.md b/projects/codemirror6-editor/README.md
index 464f183..8dcb898 100644
--- a/projects/codemirror6-editor/README.md
+++ b/projects/codemirror6-editor/README.md
@@ -18,33 +18,126 @@ Install the language support you need, for example with JavaScript:
 npm install @codemirror/lang-javascript
 ```
 
-Import the component in either the `app.module.ts` file or the component:
+Don't forget to import the standalone component in either the `app.module.ts` file or in the component file.
 
-```typescript
-import { CodeMirrorComponent } from 'codemirror6';
-```
+## Simple examples
 
-## Examples
+Those examples use [Angular's standalone API](https://angular.io/guide/standalone-migration).
 
-A code editor with JavaScript syntax highlighting:
+### Editor with JavaScript syntax highlighting
 
 ```html
 <codemirror6-editor
   [(ngModel)]="editorContent"
   [extensions]="[
     basicSetup,
-    javascript()
+    javascript
   ]"
 ></codemirror6-editor>
 ```
 
-A read-only code output:
+```ts
+import { Component } from '@angular/core';
+import { basicSetup } from 'codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+
+@Component({
+  selector: 'code-editor',
+  standalone: true,
+  templateUrl: './code-editor.component.html',
+  imports: [CodeMirrorComponent],
+})
+export class CodeEditorComponent {
+  protected readonly basicSetup = basicSetup;
+  protected readonly javascript = javascript();
+  editorContent: string = '';
+}
+```
+
+### Read-only editor
 
 ```html
 <codemirror6-editor
-  [(ngModel)]="editorContent"
+  [(ngModel)]="outputContent"
   [extensions]="[
-    EditorState.readOnly.of(true)
+    readOnlyState
   ]"
 ></codemirror6-editor>
 ```
+
+```ts
+import { Component } from '@angular/core';
+import { EditorState } from '@codemirror/state';
+import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+
+@Component({
+  selector: 'code-output',
+  standalone: true,
+  templateUrl: './code-output.component.html',
+  imports: [CodeMirrorComponent],
+})
+export class CodeOutputComponent {
+  protected readonly readOnlyState = EditorState.readOnly.of(true);
+  outputContent: string = '';
+}
+```
+
+## Dynamic configuration
+
+CodeMirror 6 uses a transaction-based API to update the editor state.
+See the [CodeMirror 6 documentation](https://codemirror.net/examples/config/#dynamic-configuration) for more information.
+
+To access it programmatically, you can use the `editor` property of the component. Coupled with a CodeMirror's `Compartment`,
+you can dynamically replace the language extension used in the editor for example.
+
+```html
+<codemirror6-editor
+  [extensions]="extensions"
+></codemirror6-editor>
+```
+
+```ts
+import { Component } from '@angular/core';
+import { javascript } from '@codemirror/lang-javascript';
+import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
+
+type JavaScriptConfig = {
+  jsx: boolean;
+  typescript: boolean;
+};
+
+@Component({
+  selector: 'code-editor',
+  standalone: true,
+  templateUrl: './code-editor.component.html',
+  imports: [CodeMirrorComponent],
+})
+export class CodeEditorComponent {
+  // Access the CodeMirror Angular component
+  @ViewChild(CodeMirrorComponent) codemirror!: CodeMirrorComponent;
+  // Create a new dynamic configuration compartment
+  private readonly languageCompartment = new Compartment();
+
+  // Represent the editor configuration for the UI
+  private _config: JavaScriptConfig = {
+    jsx: false,
+    typescript: false,
+  };
+  get config(): JavaScriptConfig {
+    return this._config;
+  }
+  set config(value: JavaScriptConfig) {
+    this._config = value;
+    // Update the editor according to the new configuration
+    this.codemirror.editor?.dispatch({
+      effects: this.languageCompartment.reconfigure(javascript(value))
+    });
+  }
+  // Create the initial extensions array
+  protected readonly extensions: Extension[] = [
+    basicSetup,
+    this.languageCompartment.of(javascript(this.config))
+  ];
+}
+```
diff --git a/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts b/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts
index db59b5d..76e6f69 100644
--- a/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts
+++ b/projects/codemirror6-editor/src/lib/codemirror6-editor.component.ts
@@ -33,7 +33,7 @@ export class CodeMirrorComponent implements AfterViewInit, OnDestroy, ControlVal
     });
   }
 
-  private editor: EditorView | null = null;
+  editor: EditorView | null = null;
   private handleChange: (value: string) => void = () => {};
 
   constructor(private host: ElementRef<HTMLElement>, private ngZone: NgZone) {}