Unable to integrate Shiki Highlighter

[ansh]

Describe the bug I want to integrate Shiki highlighter, but there is a significant delay, and sometimes it doesn't work because I have to make handleEditorWillMount into an async function

To Reproduce

Steps to reproduce the behavior:

1. Integrate Monaco React
2. Try to integrate Shiki editor as follows

  const handleEditorWillMount: BeforeMount = async (monaco) => {

    // Create the highlighter, it can be reused
    const highlighter = await createHighlighter({
      themes: ["slack-dark", "vitesse-dark", "vitesse-light"],
      langs: ["javascript", "typescript", "css", "html", "json"],
    })
    // Register the languageIds first. Only registered languages will be highlighted.
    monaco.languages.register({ id: "typescript" })
    monaco.languages.register({ id: "javascript" })
    monaco.languages.register({ id: "css" })
    monaco.languages.register({ id: "html" })
    monaco.languages.register({ id: "json" })
    // Register the themes from Shiki, and provide syntax highlighting for Monaco.
    shikiToMonaco(highlighter, monaco)
  }

But this has a delay so it doesn't work properly. If I save highlighter into a state variable, then it doesn't work either.

Any workarounds since createHighlighter is async?

Expected behavior No delay, full integration

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version Latest