BlazorMonaco icon indicating copy to clipboard operation
BlazorMonaco copied to clipboard

Extended Lauguage Support - JSON Schemas

Open DerekChasse opened this issue 3 years ago • 3 comments

I'm using this editor to support JSON file authoring. Out of the box this is supported and works fine.

I'm also looking to validate and ensure that the authored JSON conforms to a given schema that I will provide. This is similar to the "Configure Json Defaults" example on the playground.

Example: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults

I see all of this documented on Monaco's Language API but don't see an obvious mechanism to set these values in this implementation.

API: https://microsoft.github.io/monaco-editor/api/modules/monaco.languages.json.html

Is this possible?

Thanks, ~Derek

DerekChasse avatar Jul 22 '21 12:07 DerekChasse

An update on this:

I was able to get this working though the method doesn't feel all too first class. That might just be me though...

This is a barebones component which contains the MonacoEditor

public partial class CodeEditor
{
    private MonacoEditor editor;
  
    protected async Task EditorInitialized(MonacoEditorBase editorBase)
    {
        var model = await this.editor.GetModel();
  
        await model.jsRuntime.InvokeVoidAsync("setModelSchema", model.Uri);
    }  
}

And this is the javascript for the setModelSchema method, it's essentially a wrapper for the code which Microsoft supplies for their demo.

function setModelSchema(modelUri) {
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
        validate: true,
        schemas: [{
            uri: "http://myserver/foo-schema.json",
            fileMatch: [modelUri.toString()],
            schema: {
                type: "object",
                properties: {
                    p1: {
                        enum: ["v1", "v2"]
                    },
                    p2: {
                        $ref: "http://myserver/bar-schema.json" // reference the second schema
                    }
                }
            }
        }, {
            uri: "http://myserver/bar-schema.json",
            schema: {
                type: "object",
                properties: {
                    q1: {
                        enum: ["x1", "x2"]
                    }
                }
            }
        }]
    });
}

I suppose this works well enough for my purposes, but I'm curious if the Languages API will be a part of this project, and if this could be done in a more first class way.

Thanks, ~Derek

DerekChasse avatar Jul 23 '21 19:07 DerekChasse

@DerekChasse have a look at my library JsonSchema.Net.

You can see it in action at https://json-everything.net/json-schema. I don't do active validation like you're planning, but I do read the content and apply a schema in the .Net code.

gregsdennis avatar Jun 13 '22 05:06 gregsdennis

An update on this:

I was able to get this working though the method doesn't feel all too first class. That might just be me though...

This is a barebones component which contains the MonacoEditor

public partial class CodeEditor
{
    private MonacoEditor editor;
  
    protected async Task EditorInitialized(MonacoEditorBase editorBase)
    {
        var model = await this.editor.GetModel();
  
        await model.jsRuntime.InvokeVoidAsync("setModelSchema", model.Uri);
    }  
}

And this is the javascript for the setModelSchema method, it's essentially a wrapper for the code which Microsoft supplies for their demo.

function setModelSchema(modelUri) {
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
        validate: true,
        schemas: [{
            uri: "http://myserver/foo-schema.json",
            fileMatch: [modelUri.toString()],
            schema: {
                type: "object",
                properties: {
                    p1: {
                        enum: ["v1", "v2"]
                    },
                    p2: {
                        $ref: "http://myserver/bar-schema.json" // reference the second schema
                    }
                }
            }
        }, {
            uri: "http://myserver/bar-schema.json",
            schema: {
                type: "object",
                properties: {
                    q1: {
                        enum: ["x1", "x2"]
                    }
                }
            }
        }]
    });
}

I suppose this works well enough for my purposes, but I'm curious if the Languages API will be a part of this project, and if this could be done in a more first class way.

Thanks, ~Derek

Can you expand on this? I'm not clear what you're doing with everything. Did you fork it? How is this added to the editor, how is it used etc. Do you have a working example?

jstafford5380 avatar Feb 24 '24 20:02 jstafford5380