Is there an option in WrapperConfig or somewhere else to disable the creation of default workers?

[pbrostean]

When building my project with vite, assets are built for an editorWorker, jsonWorker, htmlWorker, cssWorker, tsWorker and extensionHost.worker.

My editor should not support any of these languages and I have set enableExtHostWorker to false.
I also don't understand why an editorWorker is created when I have to build and pass it separately:

editorAppConfig: {
      $type: "extended",
      loadThemes: false,
      useDiffEditor: false,
      htmlContainer: document.getElementById("monaco-editor-root") as HTMLElement,
      monacoWorkerFactory: (logger) => {
        useWorkerFactory({
          workerOverrides: {
            ignoreMapping: true,
            workerLoaders: {
              TextEditorWorker: () =>
                new textEditorWorker(),
              TextMateWorker: () =>
                new textMateWorker(),
            },
          },
          logger,
        });
      },
...

Currently I remove the worker after the build, does anyone here know if there is a more elegant solution? :)

[kaisalmen]

Hi @pbrostean when you completely remove or comment monacoWorkerFactory does monaco-editor print the warning in the console that no editor worker could be created and that it will run on main?

monaco-editor will always try to create its workers. We cannot prevent that.

[pbrostean]

Good Morning @kaisalmen, good to know. Then I will continue to handle this in the build process with a cleanup plugin. If I remove monacoWorkerFactory it throws me some errors, it's not worth the debugging effort I just wanted to ask if there is a simple option :).

Relatedly, I have not yet fully understood whether these default workers are also automatically included in the editor. Attempts to specify the corresponding fileExt in codeResources (ts, html, css...) have not led to any noticeable support of the languages.

[kaisalmen]

@pbrostean the editor worker is tried to be loaded by monaco-editor every time. If you use the extended mode (textmate is used) the standard monaco workers will not work.

If you use monaco-editor the classic way you can add the worker based support by importing a the packages (e.g. @codingame/monaco-vscode-standalone-html-language-features). In pure monaco-editor from Microsoft this is done similarly, but there is not an extra npm package available.

[pbrostean]

@kaisalmen interesting, does that mean if I want to extend my editor for example with languages bundled in VSIX or the languages provided by codingame as npm I have to use it in the classic config?

[kaisalmen]

You can test it directly here:
https://typefox.github.io/monaco-languageclient/ghp_appPlayground.html

[pbrostean]

Thank you very much, that helps me. I have tried exactly the same with the import of the two typescript packages but I do not use the workspace approach but simply pass my editor via coneResources the corresponding text with corresponding fileExt. If I enter "ts" at fileExt I thought that I would get the corresponding language functionalities but that does not work yet.

[kaisalmen]

Are you aware of this example: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/ts/wrapperTs.ts

Online: https://typefox.github.io/monaco-languageclient/ghp_tsExtHost.html

[pbrostean]

I do but I'm not getting it to work, no matter what I try. I have removed my own languages and reduced the editor to a minimum:

import '@codingame/monaco-vscode-typescript-basics-default-extension';
import '@codingame/monaco-vscode-typescript-language-features-default-extension';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import { LogLevel } from "vscode/services";
import { WrapperConfig } from "monaco-editor-wrapper";
import { useWorkerFactory } from "monaco-editor-wrapper/workerFactory";
import textEditorWorker from "monaco-editor/esm/vs/editor/editor.worker.js?worker&inline";
import textMateWorker from "@codingame/monaco-vscode-textmate-service-override/worker?worker&inline";

export const createWrapperConfig = (): WrapperConfig => {
  const codeUri = "/workspace/hello.ts";
  const code = `function sayHello(): string {
    return "Hello";
  };`;

  const codeOriginalUri = "/workspace/goodbye.ts";
  const codeOriginal = `function sayGoodbye(): string {
    return "Goodbye";
  };`;

  return {
    logLevel: LogLevel.Debug,
    vscodeApiConfig: {
      userServices: {
        ...getKeybindingsServiceOverride()
      },
      enableExtHostWorker: true,
      userConfiguration: {
        json: JSON.stringify({
          "workbench.colorTheme": "Default Dark Modern",
          "typescript.tsserver.web.projectWideIntellisense.enabled": true,
          "typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors": false,
          "diffEditor.renderSideBySide": false,
          "editor.lightbulb.enabled": "on",
          "editor.glyphMargin": true,
          "editor.guides.bracketPairsHorizontal": true,
          "editor.experimental.asyncTokenization": true,
        })
      }
    },
    editorAppConfig: {
      $type: "extended",
      codeResources: {
        main: {
          text: code,
          uri: codeUri,
        },
        original: {
          text: codeOriginal,
          uri: codeOriginalUri,
        }
      },
      useDiffEditor: false,
      monacoWorkerFactory: (logger) => {
        useWorkerFactory({
          workerOverrides: {
            ignoreMapping: true,
            workerLoaders: {
              TextEditorWorker: () => new textEditorWorker(),
              TextMateWorker: () => new textMateWorker(),
            }
          },
          logger,
        })
      },
      htmlContainer: document.getElementById(
        "monaco-editor-root"
      ) as HTMLElement
    }
  }
}

and then using it as here:

import React, { CSSProperties } from "react";
import ReactDOM from "react-dom/client";
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
import { createWrapperConfig } from "./ls/wrapperConfig.js";

const App = () => {
  const style: CSSProperties = {
    height: "50vh",
    outline: "1px solid black",
  };

  return (
    <div id="monaco-editor-root">
      <MonacoEditorReactComp
        wrapperConfig={createWrapperConfig()}
        style={style}
      />
    </div>
  );
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

But it doesnt seem to work..

[kaisalmen]

@pbrostean can you share the above in a repo. I don't see a direct problem. Another idea is that you modify the ts example in a local checkout and transform it to react.

[pbrostean]

I will create a new clean repo with the code above and share it, i will get back to you when done.

[pbrostean]

@kaisalmen here is the repo i set up: https://github.com/pbrostean/monaco-editor-react-typescript-test

I am staggering from error to error, currently I get an error with Uncaught (in promise) TypeError: logger.getLevel is not a function.

[kaisalmen]

Hi @pbrostean here is the solution. The versions weren't properly aligned (11.0.1 and 11.1.1). It is advised to use the ~ as it only allows bugfix versions to be taken, also -next.7 was pulling in 11.0.1. We need to make this more robust on our side (better peer dependency enforcement, but need to find out how).
These are the changes required in the package.json:

  "dependencies": {
    "@codingame/monaco-vscode-textmate-service-override": "~11.1.1",
    "@typefox/monaco-editor-react": "6.0.0-next.9",
    "@types/vscode": "~1.95.0",
    "vscode-languageserver": "~9.0.1",
    "vscode-uri": "~3.0.8",
    "@codingame/monaco-vscode-typescript-basics-default-extension": "~11.1.1",
    "@codingame/monaco-vscode-typescript-language-features-default-extension": "~11.1.1",
    "react": "~18.3.1",
    "react-dom": "~18.3.1"
  },
  "devDependencies": {
    "@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
    "@codingame/monaco-vscode-rollup-vsix-plugin": "~11.1.1",
    "@types/node": "^22.0.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.3",
    "typescript": "^4.9.5",
    "vite": "^5.3.5"
  }

That is the required config alignment because I upgrade to -next.9

export const createWrapperConfig = (): WrapperConfig => {
  const codeUri = "/workspace/hello.ts";
  const code = `function sayHello(): string {
    return "Hello";
  };`;

  const codeOriginalUri = "/workspace/goodbye.ts";
  const codeOriginal = `function sayGoodbye(): string {
    return "Goodbye";
  };`;

  return {
    logLevel: LogLevel.Debug,
    $type: "extended",
    htmlContainer: document.getElementById("monaco-editor-root") as HTMLElement,
    vscodeApiConfig: {
      enableExtHostWorker: true,
      userConfiguration: {
        json: JSON.stringify({
          "workbench.colorTheme": "Default Dark Modern",
          "typescript.tsserver.web.projectWideIntellisense.enabled": true,
          "typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors": false,
          "diffEditor.renderSideBySide": false,
          "editor.lightbulb.enabled": "on",
          "editor.glyphMargin": true,
          "editor.guides.bracketPairsHorizontal": true,
          "editor.experimental.asyncTokenization": true,
        })
      }
    },
    editorAppConfig: {      
      codeResources: {
        main: {
          text: code,
          uri: codeUri,
        },
        original: {
          text: codeOriginal,
          uri: codeOriginalUri,
        }
      },
      useDiffEditor: false,
      monacoWorkerFactory: (logger) => {
        useWorkerFactory({
          workerOverrides: {
            ignoreMapping: true,
            workerLoaders: {
              TextEditorWorker: () => new textEditorWorker(),
              TextMateWorker: () => new textMateWorker(),
            }
          },
          logger,
        })
      }
    }
  }
}

[kaisalmen]

I just opened #789 to track the peer dependency issue

[pbrostean]

@kaisalmen that works, thank you very much. Then it was really due to dependency mismatches.