BlazorMonaco
BlazorMonaco copied to clipboard
Extended Lauguage Support - JSON Schemas
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
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 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.
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?