// @monaco-editor/react fetches the editor from a CDN unless it is handed one. // A workflow tool that runs on your own machine should not stop working because // the machine is offline, so Monaco is bundled with the rest of the app and the // loader is pointed at it before any editor mounts. // // Only the pieces this app edits are pulled in. Importing monaco-editor whole // would add every language it ships - Solidity, PowerQuery, FreeMarker - for an // app that writes JavaScript and JSON. // The esm entry ships no type declarations of its own; the types live on the // package root, which is also the import that would drag in every language. // @ts-expect-error - untyped esm entry point, deliberately import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' import { loader } from '@monaco-editor/react' import 'monaco-editor/esm/vs/editor/editor.all.js' import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution' import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution' // @ts-expect-error - untyped esm entry point, deliberately import { jsonDefaults } from 'monaco-editor/esm/vs/language/json/monaco.contribution' import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' // Monaco does its parsing off the main thread and asks for a worker by // language. JSON has a language service of its own; everything else is served // by the plain editor worker, which still gives highlighting and editing. window.MonacoEnvironment = { getWorker(_workerId: string, label: string) { if (label === 'json') return new jsonWorker() return new editorWorker() }, } // A graph or request body edited here holds << >> placeholders where values // will go, so it is JSON with holes in it by design. Validating it would // underline most of the document in red for no reason. jsonDefaults.setDiagnosticsOptions({ validate: false, allowComments: true }) loader.config({ monaco })