0

This issue is duplicate of this but in newer version of monaco-editor, They have removed the StandaloneServices. I want to the same make Monaco load the CSS without creating an editor instance.

Can somebody tell me what alternative can be used for this?

import React from 'react';
import * as MonacoEditorApi from 'monaco-editor/esm/vs/editor/editor.api';
const { StaticServices } = require('monaco-editor/esm/vs/editor/standalone/browser/standaloneServices');
const { StandaloneThemeServiceImpl } = require('monaco-editor/esm/vs/editor/standalone/browser/standaloneThemeServiceImpl');

export const Viewer: React.FC<{ source: string }> = (props) => {
  // use a callback ref to get notified when the element has mounted
  const viewerRef = (ref: HTMLPreElement) => {
    if (ref) {
      MonacoEditorApi.editor.colorizeElement(ref, { theme: 'vs' });
      const themeService: typeof StandaloneThemeServiceImpl = StaticServices.standaloneThemeService.get();
      themeService.registerEditorContainer(ref);
    }
  };
  return (
    <pre data-lang="yaml" ref={viewerRef}>
      {props.source}
    </pre>
  );
};

0 Answers0