Code editor auto-completion by schema (josdejong#1435)

* textnode autocomplete by schema: Adding ext-language_tools Adding example Start SchemaTextCompleter * start processing schema: simple props primitives - string, number enums * text completion - handle boolean and refs * integrate current suggestions to completion api * autocomplete by schema: of-condition support * autocomplete by schema:array support * add allowSchemaSuggestions to valid options list * optimize suggestions * refactor suggessions process to enable schames with recursicve refs * handling suggesion duplications * code cleanup * wrap async execution with a function * add allowSchemaSuggestions to api.md * some md fixes * another md fix * SchemaTextCompleter: doc and typos * update sutocomplete example description * typos * remove yarn.lock * [schema autocomplete] handle schema change * a unit test for utils.uniqueMergeArrays functionality * base SchemaTextCompleter unit test * SchemaTextCompleter integration test * remove redundant autocomplete config
wjmboss · Jun 10, 2022 · 93ce059 · 93ce059
1 parent 78558b7
commit 93ce059
Show file tree

Hide file tree

Showing 12 changed files with 1,115 additions and 4 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -293,6 +293,14 @@ Constructs a new JSONEditor.
   Schemas that are referenced using the `$ref` property from the JSON schema that are set in the `schema` option,
   the object structure in the form of `{reference_key: schemaObject}`
 
+- `{boolean} allowSchemaSuggestions`
+
+  Enables autocomplete suggestions based on the JSON schema. `false` by default. when enabled and schema is configured, the editor will suggest text completions based on the schema properties, examples and enums.
+
+  **limitation**: the completions will be presented only for a valid json.
+
+  Only applicable when `mode` is 'code'.
+
 - `{boolean} search`
 
   Enables a search box in the upper right corner of the JSONEditor. `true` by default. Only applicable when `mode` is 'tree', 'view', or 'form'.

diff --git a/examples/25_autocomplete_by_schema.html b/examples/25_autocomplete_by_schema.html
@@ -0,0 +1,234 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>JSONEditor | Auto-completion by schema</title>
+
+  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+  <script src="../dist/jsoneditor.js"></script>
+
+  <style type="text/css">
+    body {
+      width: 600px;
+      font: 11pt sans-serif;
+    }
+    #jsoneditor {
+      width: 100%;
+      height: 500px;
+    }
+
+    /* custom bold styling for non-default JSON schema values */
+    .jsoneditor-is-not-default {
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+<h1>JSON autocompletion by schema</h1>
+<p>
+  This example demonstrates JSON autocompletion by schema. try to change the JSON properties and values and you'll get a suggestions that are based on the schema properties, examples and enums. 
+</p>
+<p>
+  See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
+</p>
+
+<div id="jsoneditor"></div>
+
+<script>
+  const schema = {
+    "title": "Employee",
+    "description": "Object containing employee details",
+    "type": "object",
+    "properties": {
+      "firstName": {
+        "title": "First Name",
+        "description": "The given name.",
+        "examples": [
+          "John"
+        ],
+        "type": "string"
+      },
+      "lastName": {
+        "title": "Last Name",
+        "description": "The family name.",
+        "examples": [
+          "Smith"
+        ],
+        "type": "string"
+      },
+      "gender": {
+        "title": "Gender",
+        "type": "string",
+        "enum": ["male", "female"],
+        "examples": ["male", "female"],
+      },
+      "availableToHire": {
+        "type": "boolean",
+        "default": false
+      },
+      "age": {
+        "description": "Age in years",
+        "type": "integer",
+        "minimum": 0,
+        "examples": [28, 32]
+      },
+      "job": {
+        "$ref": "job"
+      },
+      "profession": {
+        "oneOf": [
+          {
+            "$ref": "junior"
+          },
+          {
+            "$ref": "experienced"
+          },
+          {
+            "$ref": "senior"
+          },
+        ]
+      },
+      "publications": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "type": {
+              "type": "string",
+              "enum": ["academic", "professional"]
+            },
+            "journal": {
+              "type": "string"
+            }
+          }
+        }
+      }
+    },
+    "required": ["firstName", "lastName"]
+  }
+
+  const job = {
+    "title": "Job description",
+    "type": "object",
+    "required": ["address"],
+    "properties": {
+      "company": {
+        "type": "string",
+        "examples": [
+          "ACME",
+          "Dexter Industries"
+        ]
+      },
+      "role": {
+        "description": "Job title.",
+        "type": "string",
+        "examples": [
+          "Human Resources Coordinator",
+          "Software Developer"
+        ],
+        "default": "Software Developer"
+      },
+      "address": {
+        "type": "string"
+      },
+      "salary": {
+        "type": "number",
+        "minimum": 120,
+        "examples": [100, 110, 120]
+      }
+    }
+  }
+
+  const junior = {
+    "type": "object",
+    "properties": {
+      "level": {
+      "type": "string",
+      "enum": ["junior"]
+      },
+      "experience": {
+        "description": "years of experience",
+        "type": "number",
+        "minimum": 0,
+        "maximum": 3,
+        "examples": [0,1,2,3]
+      }
+    }
+  }
+
+  const experienced = {
+    "type": "object",
+    "properties": {
+      "level": {
+        "type": "string",
+        "enum": ["experienced"]
+      },
+      "experience": {
+        "description": "years of experience",
+        "type": "number",
+        "minimum": 3,
+        "maximum": 7,
+        "examples": [3,4,5,6,7]
+      }
+    }
+  }
+
+  const senior = {
+    "type": "object",
+    "properties": {
+      "level": {
+        "type": "string",
+        "enum": ["senior"]
+      },
+      "experience": {
+        "description": "years of experience",
+        "type": "number",
+        "minimum": 7,
+        "examples": [7,8,9,10,11]
+      }
+    }
+  }
+
+  const json = {
+    firstName: "John",
+    lastName: "Doe",
+    gender: "male",
+    age: 28,
+    availableToHire: true,
+    job: {
+      company: "freelance",
+      role: "developer",
+      salary: 140,
+      address: "Jerusalem"
+    },
+    profession: {
+      level: "senior",
+      experience: 10
+    },
+    publications: [{
+      type: 'academic',
+      journal: 'MIT today'
+    },
+    {
+      type: 'professional',
+      journal: 'stack overflow'
+    }]
+  }
+
+  const options = {
+    schema: schema,
+    schemaRefs: {job: job, junior: junior, experienced: experienced, senior: senior},
+    allowSchemaSuggestions: true,
+    mode: 'code',
+    modes: ['code']
+  }
+
+  // create the editor
+  const container = document.getElementById('jsoneditor')
+  const editor = new JSONEditor(container, options, json)
+  schema.properties.firstName.examples.push('David');
+  editor.setSchema(schema, {job: job, junior: junior, experienced: experienced, senior: senior});
+</script>
+</body>
+</html>