smartbotic/webui/src/monaco.ts

// @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 })