onTextChanges are only supported when EditorService is usedf

Author: kaisalmen

packages/examples/src/langium/statemachine/main-react.tsx

@@ -5,6 +5,7 @@
 
 import React, { StrictMode, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
+import type { TextContents } from 'monaco-editor-wrapper';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
 import { createLangiumGlobalConfig } from './config/wrapperStatemachineConfig.js';
 import { loadStatemachineWorkerRegular } from './main.js';
@@ -21,6 +22,9 @@ export const runStatemachineReact = async () => {
     });
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
 
+    const onTextChanged = (textChanges: TextContents) => {
+        console.log(`text: ${textChanges.modified}\ntextOriginal: ${textChanges.original}`);
+    };
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
             const App = () => {
@@ -40,7 +44,8 @@ export const runStatemachineReact = async () => {
                     <div style={{ 'height': height }} >
                         <MonacoEditorReactComp
                             style={{ 'height': '100%' }}
-                            wrapperConfig={wrapperConfig} />
+                            wrapperConfig={wrapperConfig}
+                            onTextChanged={onTextChanged} />
                     </div>
                 );
             };

packages/examples/src/python/client/reactPython.tsx

@@ -8,15 +8,24 @@ import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vsco
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
-import { MonacoEditorLanguageClientWrapper, type TextChanges } from 'monaco-editor-wrapper';
+import { MonacoEditorLanguageClientWrapper, type TextContents } from 'monaco-editor-wrapper';
 import { createWrapperConfig  } from './config.js';
 import { confiugureDebugging } from '../../debugger/client/debugger.js';
 
 export const runPythonReact = async () => {
     const appConfig = createWrapperConfig();
-    
-    const onTextChanged = (textChanges: TextContents) => {
-        console.log(`text: ${textChanges.modified}\ntextOriginal: ${textChanges.original}`);
+
+    const onLoad = async (wrapper: MonacoEditorLanguageClientWrapper) => {
+        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
+        result.setAsDefaultApi();
+
+        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
+        if (initResult !== undefined) {
+            confiugureDebugging(await initResult.getApi(), appConfig.configParams);
+        }
+
+        await vscode.commands.executeCommand('workbench.view.explorer');
+        await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
     };
 
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
@@ -27,19 +36,7 @@ export const runPythonReact = async () => {
                 <MonacoEditorReactComp
                     wrapperConfig={appConfig.wrapperConfig}
                     style={{ 'height': '100%' }}
-                    onTextChanged={onTextChanged}
-                    onLoad={async (wrapper: MonacoEditorLanguageClientWrapper) => {
-                        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
-                        result.setAsDefaultApi();
-
-                        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
-                        if (initResult !== undefined) {
-                            confiugureDebugging(await initResult.getApi(), appConfig.configParams);
-                        }
-
-                        await vscode.commands.executeCommand('workbench.view.explorer');
-                        await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
-                    }}
+                    onLoad={onLoad}
                     onError={(e) => {
                         console.error(e);
                     }} />

verify/angular/src/monaco-angular-wrapper/monaco-angular-wrapper.component.ts

@@ -15,7 +15,7 @@ import {
 import * as monaco from '@codingame/monaco-vscode-editor-api';
 import {
     MonacoEditorLanguageClientWrapper,
-    TextChanges,
+    TextContents,
     TextModels,
     WrapperConfig, didModelContentChange
 } from 'monaco-editor-wrapper';
@@ -86,7 +86,7 @@ export class MonacoAngularWrapperComponent implements OnDestroy {
     }
 
     emitCodeChange(textModels: TextModels, wrapperConfig: WrapperConfig) {
-        const onTextChanged = (textChanges: TextChanges) => {
+        const onTextChanged = (textChanges: TextContents) => {
             this.onTextChanged.emit(textChanges.modified);
         };
         didModelContentChange(textModels, wrapperConfig.editorAppConfig?.codeResources, onTextChanged);