support @monaco-editor/react

[leermao]

Clear and concise description of the problem

import Editor, { loader } from '@monaco-editor/react';
import { Box } from '@mui/material';
import { shikiToMonaco } from '@shikijs/monaco';
import * as monaco from 'monaco-editor-core';
import { useEffect } from 'react';
import { createHighlighter } from 'shiki';

// @ts-ignore
loader.config({ monaco });

function TestCode({ language, value }: { language: string; value: string }) {
  const init = async () => {
    // Create the highlighter, it can be reused
    const highlighter = await createHighlighter({
      themes: ['vitesse-dark', 'vitesse-light'],
      langs: [language],
    });

    monaco.languages.register({ id: language });

    shikiToMonaco(highlighter, monaco);

    const container = document.getElementById('container');
    if (container) {
      const editor = monaco.editor.create(container, {
        value,
        language,
        theme: 'vitesse-dark',
      });

      console.log(editor);
    }
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <Box id="container" height={300} />
      <Box component={Editor} height={300} value={value} language={language} />
    </>
  );
}

export default TestCode;

Currently this version does not seem to integrate with @monaco-editor/react ？

Suggested solution

Currently this version does not seem to integrate with @monaco-editor/react ？

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[antfu]

I don't know react nor the project to investigate. Counting on community to help on this.

[Zxilly]

create a beforeMount hook like this

export function setupCangjie(monaco: Monaco) {
  monaco.languages.register({id: 'cangjie'});
  // debugger
  // monaco.languages.setLanguageConfiguration('cangjie', langConf as any);

  (async function() {
    const highlighter = await createHighlighterCore({
      themes: [
        theme as any,
      ],
      langs: [
        grammer as any,
      ],
      loadWasm: getWasm
    })

    shikiToMonaco(highlighter, monaco)
  })()
}

[leermao]

Have you tried? I tried to use it this way and kept reporting errors in screenshots， When there are multiple editors, or switch pages and re-render the editor.

[Zxilly]

I only have one monaco instance, this works for me.

[leermao]

It will report an error when there are multiple instances