demo/with_monaco: use grid layout and add schema in place editor

7e79da6c · Boris Kocherov · d7d515b2 · 7e79da6c · 7e79da6c · 7e79da6c
Commit 7e79da6c authored Nov 20, 2018 by Boris Kocherov
Showing with 58 additions and 27 deletions

demo/with_monaco/index.css demo/with_monaco/index.css +18 -6

demo/with_monaco/index.html demo/with_monaco/index.html +4 -6

demo/with_monaco/index.js demo/with_monaco/index.js +36 -15

No files found.
--- a/demo/with_monaco/index.css
+++ b/demo/with_monaco/index.css
-.row, html, body {
+.container, html, body {
  height: 100%;
  margin: 0;
+  overflow: hidden;
 }

-.row {
-  display: flex;
+.container {
+  display: grid;
+  grid-gap: 5px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 50% 50%;
+  grid-template-areas:
+    "s f"
+    "d f";
 }

-.column {
-  flex: 50%;
+#monaco-schema {
+  grid-area: s;
+}
+
+#monaco-editor {
+  grid-area: d;
 }

 #rjs_json_form {
+  grid-area: f;
  background-color: grey;
 }

 .rjs_json_form_gadget > iframe {
  width: 100%;
  height: 100%;
-  min-height: 1000px;
+  min-height: 800px;
 }
\ No newline at end of file
--- a/demo/with_monaco/index.html
+++ b/demo/with_monaco/index.html
@@ -7,19 +7,17 @@
    <title>Demo UI JSON Schema form generator</title>
    <link rel="stylesheet" href="index.css">

-    <!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/rsvp.js"></script>-->
-    <!--<script src="https://d1.erp5.ru/nexedi/rjs_json_form/renderjs.js"></script>-->
    <script src="../../rsvp.js"></script>
    <script src="../../renderjs.js"></script>
    <script src="https://unpkg.com/monaco-editor@0.14.3/min/vs/loader.js"></script>
-    <!--<script src="http://127.0.0.1/nexedi/rjs_json_form/jio.js"></script>-->
    <script src="index.js"></script>
  </head>

  <body>
-    <div class="row">
-      <div id="monaco-editor" class="column"></div>
-      <div id="rjs_json_form" class="column">
+    <div class="container">
+      <div id="monaco-schema"></div>
+      <div id="monaco-editor"></div>
+      <div id="rjs_json_form">
        <div class="rjs_json_form_gadget" data-gadget-url="../../jsonform.gadget.html"
             data-gadget-scope="rjs_json_form"
             data-gadget-sandbox="iframe">

--- a/demo/with_monaco/index.js
+++ b/demo/with_monaco/index.js
-/*jslint esversion: 6, nomen: true, maxlen: 200, indent: 2, maxerr: 100*/
+/*jslint nomen: true, maxlen: 200, indent: 2, maxerr: 100*/
+/*jshint esversion: 6*/
 /*global window, document, require, URL, rJS*/

 (function (window, document, rJS) {
  "use strict";
-  let repo = "jerome/slapos";
-  let branch = "feat/erp5-fix-schema";
-  /*
+  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";
-  */
-
-/// XXX use jstestnode
-// const baseUrl = `https://lab.nexedi.com/bk/slapos/raw/wip/feat/json-test-failure/software/jstestnode/`;
-  const baseUrl = `http://localhost/nexedi/slapos/software/jstestnode/`;
-  const mainSchema = "instance-jstestnode-input-schema.json";
-

+  let monacoSchemaEditor;
  let monacoEditor;
 // monaco should ignore edit event when it's caused by rjs_json_form
  let monacoIgnoreEvent = false;
@@ -29,8 +23,7 @@
  });
  let proxy = URL.createObjectURL(
    new Blob(
-      [
-        `
+      [`
 self.MonacoEnvironment = {
  baseUrl: 'https://unpkg.com/monaco-editor@0.14.3/min/'
 };
@@ -63,8 +56,8 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
      let gadget = this;

      require(["vs/editor/editor.main"], function (monaco) {
-        var modelUri = monaco.Uri.parse("tmp://xxx.json"); // a made up unique URI for our model
-        var model = monaco.editor.createModel("{\n}", "json", modelUri);
+        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 = relativeUrl => {
          const schemaUrl = new URL(relativeUrl, baseUrl);
@@ -86,6 +79,7 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
            s.fileMatch = [modelUri.toString()]; // this is the main schema associated to the model
            return s;
          }),
+          getSchema("http://json-schema.org/draft-07/schema")
        ]).then(schemas => {
          gadget.getDeclaredGadget("rjs_json_form").then(g => {
            return g.render({
@@ -101,6 +95,33 @@ importScripts('https://unpkg.com/monaco-editor@0.14.3/min/vs/base/worker/workerM
            schemas: schemas
          });

+          monacoSchemaEditor = monaco.editor.create(
+            document.getElementById("monaco-schema"),
+            {
+              model: monaco.editor.createModel(JSON.stringify(schemas[0].schema, null, 2), "json", schemas[0].schema_url)
+            }
+          );
+
+          monacoSchemaEditor.onDidChangeModelContent(e => {
+            if (!monacoIgnoreEvent) {
+              console.log("schema changed", monacoEditor.getValue());
+              let parsed;
+              try {
+                parsed = JSON.parse(monacoSchemaEditor.getValue());
+              } catch (error) {
+                console.error("parse error, ignoring changes from monaco", error);
+                return;
+              }
+              gadget.getDeclaredGadget("rjs_json_form").then(g => {
+                return g.render({
+                  key: "rjs_json_form",
+                  schema: parsed,
+                  schema_url: schemas[0].schema_url,
+                });
+              });
+            }
+          });
+
          monacoEditor = monaco.editor.create(
            document.getElementById("monaco-editor"),
            {