Skip to content

R
rjs_json_form
Commit afdbbce8 authored by Boris Kocherov's avatar Boris Kocherov
Browse files
Options

demo/with_monaco: use url input field for online download and change schema

parent b285566d
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 59 deletions
demo/with_monaco/index.css
View file @ afdbbce8
......@@ -8,12 +8,17 @@
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 50% 50%;
grid-template-rows: 24pt 50% 50%;
grid-template-areas:
"u f"
"s f"
"d f";
}
#monaco-schema-url {
grid-area: u;
}
#monaco-schema {
grid-area: s;
}
......
demo/with_monaco/index.html
View file @ afdbbce8
......@@ -15,6 +15,7 @@
<body>
<div class="container">
<input id="monaco-schema-url" type="text">
<div id="monaco-schema"></div>
<div id="monaco-editor"></div>
<div id="rjs_json_form">
......
demo/with_monaco/index.js
View file @ afdbbce8
......@@ -6,8 +6,7 @@
"use strict";
let repo = "nexedi/slapos";
let branch = "master";
const baseUrl = `https://lab.nexedi.com/${repo}/raw/${branch}/software/erp5/`;
const mainSchema = "instance-erp5-input-schema.json";
const defaultSchema = `https://lab.nexedi.com/${repo}/raw/${branch}/software/kvm/instance-kvm-input-schema.json`;
let monacoSchemaEditor;
let monacoEditor;
......@@ -36,6 +35,19 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM
window.MonacoEnvironment = {getWorkerUrl: () => proxy};
const getSchema = (schemaUrl, mappedUrl)=> {
return fetch(schemaUrl)
.then(resp => {
return resp.json();
})
.then(s => {
return {
uri: mappedUrl || schemaUrl,
schema: s
};
});
};
rJS(window)
.allowPublicAcquisition("notifyValid", function (arr, scope) {
})
......@@ -53,102 +65,109 @@ importScripts('https://unpkg.com/monaco-editor@0.15.5/min/vs/base/worker/workerM
});
})
.ready(function () {
let gadget = this;
let g = this;
g.props = {};
document.getElementById("monaco-schema-url").value = defaultSchema;
require(["vs/editor/editor.main"], function (monaco) {
let modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
let model = monaco.editor.createModel("{\n}", "json", modelUri);
const getSchema = (schemaUrl, mappedUrl)=> {
return fetch(schemaUrl)
.then(resp => {
return resp.json();
})
.then(s => {
return {
uri: mappedUrl || schemaUrl,
schema: s
};
});
};
g.props.monaco = monaco;
g.props.modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
let model = monaco.editor.createModel("{\n}", "json", g.props.modelUri);
Promise.all([
getSchema(baseUrl + mainSchema).then(s => {
s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model
return s;
}),
getSchema("../../json-schema/schema7.json", "http://json-schema.org/draft-07/schema")
]).then(schemas => {
gadget.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({
key: "rjs_json_form",
schema: schemas[0].schema,
schema_url: schemas[0].uri,
value: {}
});
});
g.props.baseSchemas = schemas;
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
schemas: schemas
});
monacoSchemaEditor = monaco.editor.create(
document.getElementById("monaco-schema"),
monacoEditor = monaco.editor.create(
document.getElementById("monaco-editor"),
{
model: monaco.editor.createModel(JSON.stringify(schemas[0].schema, null, 2), "json", schemas[0].uri)
model: model
}
);
monacoSchemaEditor.onDidChangeModelContent(e => {
monacoEditor.onDidChangeModelContent(e => {
if (!monacoIgnoreEvent) {
console.log("schema changed", monacoEditor.getValue());
console.log("monaco changed", monacoEditor.getValue());
let parsed;
try {
parsed = JSON.parse(monacoSchemaEditor.getValue());
parsed = JSON.parse(monacoEditor.getValue());
} catch (error) {
console.error("parse error, ignoring changes from monaco", error);
return;
}
gadget.getDeclaredGadget("rjs_json_form").then(g => {
g.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({
key: "rjs_json_form",
schema: parsed,
schema_url: schemas[0].uri,
value: parsed
});
});
}
});
monacoEditor = monaco.editor.create(
document.getElementById("monaco-editor"),
g.changeState({url: defaultSchema});
});
});
})
.onStateChange(function () {
let g = this;
return getSchema(g.state.url).then(s => {
s.fileMatch = [g.props.modelUri.toString()]; // this is the main schema associated to the model
return s;
}).then(schema => {
g.props.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true,
schemas: [schema].concat(g.props.baseSchemas)
});
monacoIgnoreEvent = true;
if (monacoSchemaEditor) {
monacoSchemaEditor
.getModel()
.setValue(JSON.stringify(schema.schema, null, 4));
} else {
monacoSchemaEditor = g.props.monaco.editor.create(
document.getElementById("monaco-schema"),
{
model: model
model: g.props.monaco.editor.createModel(JSON.stringify(schema.schema, null, 4), "json", schema.uri)
}
);
monacoEditor.onDidChangeModelContent(e => {
monacoSchemaEditor.onDidChangeModelContent(e => {
if (!monacoIgnoreEvent) {
console.log("monaco changed", monacoEditor.getValue());
console.log("schema changed", monacoEditor.getValue());
let parsed;
try {
parsed = JSON.parse(monacoEditor.getValue());
parsed = JSON.parse(monacoSchemaEditor.getValue());
} catch (error) {
console.error("parse error, ignoring changes from monaco", error);
return;
}
gadget.getDeclaredGadget("rjs_json_form").then(g => {
g.getDeclaredGadget("rjs_json_form").then(g => {
return g.render({
key: "rjs_json_form",
schema: schemas[0].schema,
schema_url: schemas[0].uri,
value: parsed
schema: parsed
});
});
}
});
}
monacoIgnoreEvent = false;
return g.getDeclaredGadget("rjs_json_form").then(gadget => {
return gadget.render({
key: "rjs_json_form",
schema: schema.schema,
schema_url: g.state.url
});
});
});
})
.catch(e => {
});
})
.onEvent('input', function (evt) {
if (evt.target.id === "monaco-schema-url") {
return this.changeState({
url: evt.target.value
});
}
});
}(window, document, rJS));
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7