serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
441 stars 99 forks source link

Extended Lauguage Support - JSON Schemas #47

Open DerekChasse opened 3 years ago

DerekChasse commented 3 years ago

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 commented 3 years ago

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

gregsdennis commented 2 years ago

@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.

jstafford5380 commented 6 months ago

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?