@typefox/monaco-editor-react 6.9.0 → 7.0.0-next.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to npm module [@typefox/monaco-editor-react](https://www.npmjs.com/package/@typefox/monaco-editor-react) are documented in this file.
 
+## [7.0.0-next.0] - 2025-0z-xy
+
+- Updated to `monaco-languageclient@10.0.0-next.0` and `monaco-editor-wrapper@7.0.0-next.0`.
+- Updated all `@codingame/monaco-vscode` packages to `18.2.0`.
+
 ## [6.9.0] - 2025-06-24
 
 - Updated to `monaco-languageclient@9.8.0` and `monaco-editor-wrapper@6.9.0`.

package/README.md

@@ -20,7 +20,7 @@ You can import the monaco react component for easy use in an existing React proj
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import '@codingame/monaco-vscode-python-default-extension';
-import { WrapperConfig } from 'monaco-editor-wrapper';
+import { WrapperConfig } from 'monaco-languageclient/editorApp';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
 import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
 

package/lib/index.d.ts

@@ -0,0 +1,23 @@
+import { EditorApp, type EditorAppConfig, type TextContents } from 'monaco-languageclient/editorApp';
+import { type LanguageClientConfigs, LanguageClientsManager } from 'monaco-languageclient/lcwrapper';
+import { type MonacoVscodeApiConfig, MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import React, { type CSSProperties } from 'react';
+export type ResolveFc = (value: void | PromiseLike<void>) => void;
+export type MonacoEditorProps = {
+    style?: CSSProperties;
+    className?: string;
+    vscodeApiConfig: MonacoVscodeApiConfig;
+    editorAppConfig?: EditorAppConfig;
+    languageClientConfigs?: LanguageClientConfigs;
+    onVscodeApiInitDone?: (monacoVscodeApiManager: MonacoVscodeApiWrapper) => void;
+    onEditorStartDone?: (editorApp?: EditorApp) => void;
+    onLanguagClientsStartDone?: (lcsManager?: LanguageClientsManager) => void;
+    onTextChanged?: (textChanges: TextContents) => void;
+    onError?: (error: Error) => void;
+    onDisposeEditor?: () => void;
+    onDisposeLanguagaeClients?: () => void;
+    modifiedTextValue?: string;
+    originalTextValue?: string;
+};
+export declare const MonacoEditorReactComp: React.FC<MonacoEditorProps>;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAE,KAAK,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACrG,OAAO,EAAgC,KAAK,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAC1I,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAA+B,MAAM,OAAO,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;AAElE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,qBAAqB,CAAC;IACvC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,mBAAmB,CAAC,EAAE,CAAC,sBAAsB,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC/E,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACpD,yBAAyB,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC1E,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyL7D,CAAC"}

package/lib/index.js

@@ -0,0 +1,153 @@
+/* --------------------------------------------------------------------------------------------
+* Copyright (c) 2024 TypeFox and others.
+* Licensed under the MIT License. See LICENSE in the package root for license information.
+* ------------------------------------------------------------------------------------------ */
+import { EditorApp } from 'monaco-languageclient/editorApp';
+import { LanguageClientsManager } from 'monaco-languageclient/lcwrapper';
+import { getEnhancedMonacoEnvironment, MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import React, { useEffect, useRef, useState } from 'react';
+export const MonacoEditorReactComp = (props) => {
+    const { style, className, vscodeApiConfig, editorAppConfig, languageClientConfigs, onVscodeApiInitDone, onEditorStartDone, onLanguagClientsStartDone, onTextChanged, onError, onDisposeEditor, onDisposeLanguagaeClients, modifiedTextValue, originalTextValue } = props;
+    const apiWrapperRef = useRef(new MonacoVscodeApiWrapper(vscodeApiConfig));
+    const haveEditorService = useRef(true);
+    const editorAppRef = useRef(null);
+    const lcsManagerRef = useRef(null);
+    const containerRef = useRef(null);
+    const onTextChangedRef = useRef(onTextChanged);
+    const [modifiedCode, setModifiedCode] = useState(modifiedTextValue);
+    const [originalCode, setOriginalCode] = useState(originalTextValue);
+    const performErrorHandling = (error) => {
+        if (onError) {
+            onError(error);
+        }
+        else {
+            throw error;
+        }
+    };
+    useEffect(() => {
+        // this is only available if EditorService is configured
+        if (modifiedTextValue !== undefined && haveEditorService.current) {
+            setModifiedCode(modifiedTextValue);
+            editorAppRef.current?.updateCode({ modified: modifiedTextValue });
+        }
+    }, [modifiedTextValue]);
+    useEffect(() => {
+        // this is only available if EditorService is configured
+        if (originalTextValue !== undefined && haveEditorService.current) {
+            setOriginalCode(originalTextValue);
+            editorAppRef.current?.updateCode({ original: originalTextValue });
+        }
+    }, [originalTextValue]);
+    const awaitGlobal = async () => {
+        // await global init if not completed before doing anything else
+        const envEnhanced = getEnhancedMonacoEnvironment();
+        return (envEnhanced.vscodeApiGlobalInitAwait !== undefined) ? envEnhanced.vscodeApiGlobalInitAwait : Promise.resolve();
+    };
+    const performGlobalInit = async () => {
+        if (containerRef.current === null) {
+            performErrorHandling(new Error('No htmlContainer found! Aborting...'));
+        }
+        const envEnhanced = getEnhancedMonacoEnvironment();
+        // init will only performed once
+        if (!(envEnhanced.vscodeApiInitialising === true)) {
+            (async () => {
+                apiWrapperRef.current.getLogger().debug('GLOBAL INIT');
+                await apiWrapperRef.current.init({
+                    caller: className,
+                    htmlContainer: containerRef.current
+                });
+                // set if editor mode is available, otherwise text bindings will not work
+                haveEditorService.current = envEnhanced.viewServiceType === 'EditorService';
+                onVscodeApiInitDone?.(apiWrapperRef.current);
+            })();
+        }
+    };
+    useEffect(() => {
+        // always try to perform kick global init
+        performGlobalInit();
+        (async () => {
+            try {
+                apiWrapperRef.current.getLogger().debug('INIT');
+                await awaitGlobal();
+                // it is possible to run without an editorApp, for example when using the ViewsService
+                if (haveEditorService.current) {
+                    editorAppRef.current = new EditorApp(editorAppConfig);
+                    if (editorAppRef.current.isStarting() === true || editorAppRef.current.isDisposing() === true) {
+                        await Promise.all([
+                            editorAppRef.current.getStartingAwait(),
+                            editorAppRef.current.getDisposingAwait()
+                        ]);
+                    }
+                    editorAppRef.current.registerOnTextChangedCallback((textChanges) => {
+                        if (textChanges.modified !== undefined) {
+                            setModifiedCode(textChanges.modified);
+                        }
+                        if (textChanges.original !== undefined) {
+                            setOriginalCode(textChanges.original);
+                        }
+                        if (onTextChangedRef.current !== undefined) {
+                            onTextChangedRef.current(textChanges);
+                        }
+                    });
+                    await editorAppRef.current.start(containerRef.current);
+                    onEditorStartDone?.(editorAppRef.current);
+                    // originalTextValue and modifiedTextValue useEffects may happen before
+                    editorAppRef.current.updateCode({
+                        original: originalCode,
+                        modified: modifiedCode
+                    });
+                }
+                apiWrapperRef.current.getLogger().debug('INIT DONE');
+            }
+            catch (error) {
+                performErrorHandling(error);
+            }
+        })();
+    }, [editorAppConfig]);
+    useEffect(() => {
+        // always try to perform kick global init
+        performGlobalInit();
+        if (languageClientConfigs !== undefined) {
+            (async () => {
+                try {
+                    apiWrapperRef.current.getLogger().debug('INIT LC');
+                    await awaitGlobal();
+                    if (lcsManagerRef.current === null) {
+                        lcsManagerRef.current = new LanguageClientsManager(apiWrapperRef.current.getLogger());
+                    }
+                    await lcsManagerRef.current.setConfigs(languageClientConfigs);
+                    await lcsManagerRef.current.start();
+                    onLanguagClientsStartDone?.(lcsManagerRef.current);
+                    apiWrapperRef.current.getLogger().debug('INIT LC DONE');
+                }
+                catch (error) {
+                    performErrorHandling(error);
+                }
+            })();
+        }
+    }, [languageClientConfigs]);
+    useEffect(() => {
+        // always try to perform kick global init
+        performGlobalInit();
+        return () => {
+            (async () => {
+                // dispose editor id used and languageclient if enforced
+                try {
+                    apiWrapperRef.current.getLogger().debug('DISPOSE');
+                    await editorAppRef.current?.dispose();
+                    onDisposeEditor?.();
+                    if (languageClientConfigs?.enforceDispose === true) {
+                        lcsManagerRef.current?.dispose();
+                        onDisposeLanguagaeClients?.();
+                    }
+                }
+                catch (error) {
+                    // The language client may throw an error during disposal, but we want to continue anyway
+                    performErrorHandling(new Error(`Unexpected error occurred during disposal of the language client: ${error}`));
+                }
+            })();
+        };
+    }, []);
+    return (React.createElement("div", { ref: containerRef, style: style, className: className }));
+};
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typefox/monaco-editor-react",
-  "version": "6.9.0",
+  "version": "7.0.0-next.0",
   "license": "MIT",
   "description": "React component for Monaco-Editor and Monaco Languageclient",
   "keywords": [
@@ -10,30 +10,30 @@
     "react"
   ],
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
     }
   },
   "typesVersions": {
     "*": {
       ".": [
-        "dist/index"
+        "lib/index"
       ]
     }
   },
   "files": [
-    "dist",
+    "lib",
     "src",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {
-    "clean": "shx rm -fr ./dist ./bundle *.tsbuildinfo",
+    "clean": "shx rm -fr ./lib ./bundle *.tsbuildinfo",
     "compile": " tsc --build tsconfig.src.json",
     "build": "npm run clean && npm run compile"
   },
@@ -46,8 +46,7 @@
     "npm": "10.9.2"
   },
   "dependencies": {
-    "@codingame/monaco-vscode-editor-api": "~18.1.0",
-    "monaco-editor-wrapper": "~6.9.0",
+    "@codingame/monaco-vscode-editor-api": "~18.2.0",
     "react": ">=18.0.0 || <20.0.0"
   },
   "repository": {

package/src/index.tsx

@@ -3,82 +3,204 @@
 * Licensed under the MIT License. See LICENSE in the package root for license information.
 * ------------------------------------------------------------------------------------------ */
 
-import React, { type CSSProperties, useEffect, useRef } from 'react';
-import { MonacoEditorLanguageClientWrapper, type TextContents, type WrapperConfig } from 'monaco-editor-wrapper';
+import { EditorApp, type EditorAppConfig, type TextContents } from 'monaco-languageclient/editorApp';
+import { type LanguageClientConfigs, LanguageClientsManager } from 'monaco-languageclient/lcwrapper';
+import { getEnhancedMonacoEnvironment, type MonacoVscodeApiConfig, MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import React, { type CSSProperties, useEffect, useRef, useState } from 'react';
+
+export type ResolveFc = (value: void | PromiseLike<void>) => void;
 
 export type MonacoEditorProps = {
     style?: CSSProperties;
     className?: string;
-    wrapperConfig: WrapperConfig,
+    vscodeApiConfig: MonacoVscodeApiConfig;
+    editorAppConfig?: EditorAppConfig;
+    languageClientConfigs?: LanguageClientConfigs;
+    onVscodeApiInitDone?: (monacoVscodeApiManager: MonacoVscodeApiWrapper) => void;
+    onEditorStartDone?: (editorApp?: EditorApp) => void;
+    onLanguagClientsStartDone?: (lcsManager?: LanguageClientsManager) => void;
     onTextChanged?: (textChanges: TextContents) => void;
-    onLoad?: (wrapper: MonacoEditorLanguageClientWrapper) => void;
-    onError?: (e: unknown) => void;
+    onError?: (error: Error) => void;
+    onDisposeEditor?: () => void;
+    onDisposeLanguagaeClients?: () => void;
+    modifiedTextValue?: string;
+    originalTextValue?: string;
 }
 
 export const MonacoEditorReactComp: React.FC<MonacoEditorProps> = (props) => {
     const {
         style,
         className,
-        wrapperConfig,
+        vscodeApiConfig,
+        editorAppConfig,
+        languageClientConfigs,
+        onVscodeApiInitDone,
+        onEditorStartDone,
+        onLanguagClientsStartDone,
         onTextChanged,
-        onLoad,
-        onError
+        onError,
+        onDisposeEditor,
+        onDisposeLanguagaeClients,
+        modifiedTextValue,
+        originalTextValue
     } = props;
 
-    const wrapperRef = useRef<MonacoEditorLanguageClientWrapper>(new MonacoEditorLanguageClientWrapper());
+    const apiWrapperRef = useRef<MonacoVscodeApiWrapper>(new MonacoVscodeApiWrapper(vscodeApiConfig));
+    const haveEditorService = useRef(true);
+    const editorAppRef = useRef<EditorApp>(null);
+    const lcsManagerRef = useRef<LanguageClientsManager>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const onTextChangedRef = useRef(onTextChanged);
-    onTextChangedRef.current = onTextChanged;
+    const [modifiedCode, setModifiedCode] = useState(modifiedTextValue);
+    const [originalCode, setOriginalCode] = useState(originalTextValue);
+
+    const performErrorHandling = (error: Error) => {
+        if (onError) {
+            onError(error);
+        } else {
+            throw error;
+        }
+    };
+
+    useEffect(() => {
+        // this is only available if EditorService is configured
+        if (modifiedTextValue !== undefined && haveEditorService.current) {
+            setModifiedCode(modifiedTextValue);
+            editorAppRef.current?.updateCode({modified: modifiedTextValue});
+        }
+    }, [modifiedTextValue]);
+
+    useEffect(() => {
+        // this is only available if EditorService is configured
+        if (originalTextValue !== undefined && haveEditorService.current) {
+            setOriginalCode(originalTextValue);
+            editorAppRef.current?.updateCode({original: originalTextValue});
+        }
+    }, [originalTextValue]);
+
+    const awaitGlobal = async () => {
+        // await global init if not completed before doing anything else
+        const envEnhanced = getEnhancedMonacoEnvironment();
+        return (envEnhanced.vscodeApiGlobalInitAwait !== undefined) ? envEnhanced.vscodeApiGlobalInitAwait : Promise.resolve();
+    };
+
+    const performGlobalInit = async () => {
+        if (containerRef.current === null) {
+            performErrorHandling(new Error('No htmlContainer found! Aborting...'));
+        }
+        const envEnhanced = getEnhancedMonacoEnvironment();
+
+        // init will only performed once
+        if (!(envEnhanced.vscodeApiInitialising === true)) {
+
+            (async () => {
+                apiWrapperRef.current.getLogger().debug('GLOBAL INIT');
+                await apiWrapperRef.current.init({
+                    caller: className,
+                    htmlContainer: containerRef.current
+                });
+
+                // set if editor mode is available, otherwise text bindings will not work
+                haveEditorService.current = envEnhanced.viewServiceType === 'EditorService';
+
+                onVscodeApiInitDone?.(apiWrapperRef.current);
+            })();
+        }
+    };
 
     useEffect(() => {
+        // always try to perform kick global init
+        performGlobalInit();
 
         (async () => {
-            if (containerRef.current) {
-                try {
-                    wrapperConfig.htmlContainer = containerRef.current;
-                    if (wrapperRef.current.isInitializing() || wrapperRef.current.isStarting() || wrapperRef.current.isDisposing()) {
+            try {
+                apiWrapperRef.current.getLogger().debug('INIT');
+                await awaitGlobal();
+
+                // it is possible to run without an editorApp, for example when using the ViewsService
+                if (haveEditorService.current) {
+                    editorAppRef.current = new EditorApp(editorAppConfig);
+                    if (editorAppRef.current.isStarting() === true || editorAppRef.current.isDisposing() === true) {
                         await Promise.all([
-                            wrapperRef.current.getInitializingAwait(),
-                            wrapperRef.current.getStartingAwait(),
-                            wrapperRef.current.getDisposingAwait()
+                            editorAppRef.current.getStartingAwait(),
+                            editorAppRef.current.getDisposingAwait()
                         ]);
                     }
 
-                    await wrapperRef.current.init(wrapperConfig);
-
-                    wrapperRef.current.registerTextChangedCallback((textChanges) => {
+                    editorAppRef.current.registerOnTextChangedCallback((textChanges) => {
+                        if (textChanges.modified !== undefined) {
+                            setModifiedCode(textChanges.modified);
+                        }
+                        if (textChanges.original !== undefined) {
+                            setOriginalCode(textChanges.original);
+                        }
                         if (onTextChangedRef.current !== undefined) {
                             onTextChangedRef.current(textChanges);
                         }
                     });
-                    await wrapperRef.current.start();
-                    onLoad?.(wrapperRef.current);
-                } catch (e) {
-                    if (onError) {
-                        onError(e);
-                    } else {
-                        throw e;
-                    }
+                    await editorAppRef.current.start(containerRef.current!);
+
+                    onEditorStartDone?.(editorAppRef.current);
+
+                    // originalTextValue and modifiedTextValue useEffects may happen before
+                    editorAppRef.current.updateCode({
+                        original: originalCode,
+                        modified: modifiedCode
+                    });
                 }
-            } else {
-                throw new Error('No htmlContainer found! Aborting...');
+                apiWrapperRef.current.getLogger().debug('INIT DONE');
+            } catch (error) {
+                performErrorHandling(error as Error);
             }
         })();
-    }, [wrapperConfig]);
+    }, [editorAppConfig]);
 
     useEffect(() => {
-        const disposeMonaco = async () => {
-            try {
-                await wrapperRef.current.dispose();
-            } catch (error) {
-                // The language client may throw an error during disposal, but we want to continue anyway
-                console.error(`Unexpected error occurred during disposal of the language client: ${error}`);
-            }
-        };
+        // always try to perform kick global init
+        performGlobalInit();
+
+        if (languageClientConfigs !== undefined) {
+            (async () => {
+                try {
+                    apiWrapperRef.current.getLogger().debug('INIT LC');
+                    await awaitGlobal();
+
+                    if (lcsManagerRef.current === null) {
+                        lcsManagerRef.current = new LanguageClientsManager(apiWrapperRef.current.getLogger());
+                    }
+
+                    await lcsManagerRef.current.setConfigs(languageClientConfigs);
+                    await lcsManagerRef.current.start();
+
+                    onLanguagClientsStartDone?.(lcsManagerRef.current);
+                    apiWrapperRef.current.getLogger().debug('INIT LC DONE');
+                } catch (error) {
+                    performErrorHandling(error as Error);
+                }
+            })();
+        }
+    }, [languageClientConfigs]);
+
+    useEffect(() => {
+        // always try to perform kick global init
+        performGlobalInit();
 
         return () => {
             (async () => {
-                await disposeMonaco();
+                // dispose editor id used and languageclient if enforced
+                try {
+                    apiWrapperRef.current.getLogger().debug('DISPOSE');
+                    await editorAppRef.current?.dispose();
+                    onDisposeEditor?.();
+
+                    if (languageClientConfigs?.enforceDispose === true) {
+                        lcsManagerRef.current?.dispose();
+                        onDisposeLanguagaeClients?.();
+                    }
+                } catch (error) {
+                    // The language client may throw an error during disposal, but we want to continue anyway
+                    performErrorHandling(new Error(`Unexpected error occurred during disposal of the language client: ${error}`));
+                }
             })();
         };
     }, []);

package/dist/index.d.ts

@@ -1,12 +0,0 @@
-import React, { type CSSProperties } from 'react';
-import { MonacoEditorLanguageClientWrapper, type TextContents, type WrapperConfig } from 'monaco-editor-wrapper';
-export type MonacoEditorProps = {
-    style?: CSSProperties;
-    className?: string;
-    wrapperConfig: WrapperConfig;
-    onTextChanged?: (textChanges: TextContents) => void;
-    onLoad?: (wrapper: MonacoEditorLanguageClientWrapper) => void;
-    onError?: (e: unknown) => void;
-};
-export declare const MonacoEditorReactComp: React.FC<MonacoEditorProps>;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,iCAAiC,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEjH,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,iCAAiC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2E7D,CAAC"}

package/dist/index.js

@@ -1,66 +0,0 @@
-/* --------------------------------------------------------------------------------------------
-* Copyright (c) 2024 TypeFox and others.
-* Licensed under the MIT License. See LICENSE in the package root for license information.
-* ------------------------------------------------------------------------------------------ */
-import React, { useEffect, useRef } from 'react';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-export const MonacoEditorReactComp = (props) => {
-    const { style, className, wrapperConfig, onTextChanged, onLoad, onError } = props;
-    const wrapperRef = useRef(new MonacoEditorLanguageClientWrapper());
-    const containerRef = useRef(null);
-    const onTextChangedRef = useRef(onTextChanged);
-    onTextChangedRef.current = onTextChanged;
-    useEffect(() => {
-        (async () => {
-            if (containerRef.current) {
-                try {
-                    wrapperConfig.htmlContainer = containerRef.current;
-                    if (wrapperRef.current.isInitializing() || wrapperRef.current.isStarting() || wrapperRef.current.isDisposing()) {
-                        await Promise.all([
-                            wrapperRef.current.getInitializingAwait(),
-                            wrapperRef.current.getStartingAwait(),
-                            wrapperRef.current.getDisposingAwait()
-                        ]);
-                    }
-                    await wrapperRef.current.init(wrapperConfig);
-                    wrapperRef.current.registerTextChangedCallback((textChanges) => {
-                        if (onTextChangedRef.current !== undefined) {
-                            onTextChangedRef.current(textChanges);
-                        }
-                    });
-                    await wrapperRef.current.start();
-                    onLoad?.(wrapperRef.current);
-                }
-                catch (e) {
-                    if (onError) {
-                        onError(e);
-                    }
-                    else {
-                        throw e;
-                    }
-                }
-            }
-            else {
-                throw new Error('No htmlContainer found! Aborting...');
-            }
-        })();
-    }, [wrapperConfig]);
-    useEffect(() => {
-        const disposeMonaco = async () => {
-            try {
-                await wrapperRef.current.dispose();
-            }
-            catch (error) {
-                // The language client may throw an error during disposal, but we want to continue anyway
-                console.error(`Unexpected error occurred during disposal of the language client: ${error}`);
-            }
-        };
-        return () => {
-            (async () => {
-                await disposeMonaco();
-            })();
-        };
-    }, []);
-    return (React.createElement("div", { ref: containerRef, style: style, className: className }));
-};
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}