@materia-ui/ngx-monaco-editor - Unable to get a custom json schema working with editor

Question

I cannot figure out how to get a custom json schema to be loaded in and used for validating input into a monaco editor instance using the @materia-ui/ngx-monaco-editor library

I have been following guides here https://levelup.gitconnected.com/autocomplete-json-with-angular-and-monaco-f1dcc01e36e1 and the lib's readme of course.

I am trying to make use of their MonacoEditorLoaderService from the library as per their docs and setting the various diagnostic options of the jsonDefaults like so:

constructor(private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe(
        filter(isLoaded => isLoaded),
        take(1)
      )
      .subscribe(() => {
        console.log("loaded");
        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          enableSchemaRequest: true,
          validate: true,
          schemas: [
            // @ts-ignore
            {
              fileMatch: ["file:///schema"], // associate with our model
              schema: {
                type: "object",
                properties: {
                  scopes: {
                    description: "something useful here",
                    type: "array",
                    items: {
                      type: "object",
                      properties: {
                        include: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        },
                        exclude: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        },
                        asset_types: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        }
                      },
                      required: ["include"]
                    }
                  }
                },
                required: ["scopes"]
              }
            }
          ]
        });
      });
  }

Ctrl+Space just gives me the following $schema option and none of my schema defined properties.

I have clearly got something misconfigured and misunderstood how to set up the schema loading correctly.

Stackblitz of my setup is here - https://stackblitz.com/edit/materia-ngx-monaco-editor-example-y2tcrz?file=src/app/app.component.ts

Can someone kindly point out what the problem is here, what am I doing incorrectly please?

Thanks

Answer 1

The simplest solution is to set the model after editor is initialized:

  editorInit(editor: MonacoStandaloneCodeEditor) {
    const model = monaco.editor.createModel(
      this.getCode(),
      "json",
      monaco.Uri.parse("a://b/foo.json")
    );
    editor.setModel(model);
  }

Here is an stackblitz example working with json schema: https://stackblitz.com/edit/materia-ngx-monaco-editor-example-gtgxpy?file=src/app/app.component.ts

Said that, the preferred way would be just initialize the editor with that model, not setting it after it is created... but after checking the source code ngx-monaco-editor, this way is the most consistent solution.