json-schema-and-editron-editors.md

• Further Reading

JSON-Schema And Editron Editors

For each json-schema (each object containing a type) editron will pass this schema to a selected editron editor, which in turn will display a user input form for this schema.

That is, a json-schema like

{ "type": "object", "title": "MyData" }

will be rendered as

<ObjectEditor title="MyData"></ObjectEditor>

Editors like ObjectEditor and ArrayEditor usually contain further editors:

{ 
  "type": "object", 
  "title": "MyData",
  "properties": {
    "image": {
      "title": "MyImageUrl",
      "type": "string"
    }
  }
}

which will be rendered as expected:

<ObjectEditor title="MyData">
  <ValueEditor title="MyImageUrl" />
</ObjectEditor>

You can define your custom editors for specific json-schema types. In most cases a property format is used for this:

{ 
  "type": "object", 
  "title": "MyData",
  "properties": {
    "image": {
      "title": "MyImageUrl",
      "type": "string",
      "format": "MyImagePreview"
    }
  }
}

<ObjectEditor title="MyData">
  <ImagePreview title="MyImageUrl" />
</ObjectEditor>

It is also possible to write custom editors, that manage more complex objects, like in:

{ 
  "type": "object", 
  "title": "MyData",
  "properties": {
    "image": {
      "type": "object",
      "format": "MyImageEditor",
      "properties": {
        "url": {
          "type": "string"
        },
        "quality": {
          "type": "number"
}}}}}

with an editor registered to a format MyImageEditor that now manages the whole image-object on its own:

<ObjectEditor title="MyData">
  <MyImageEditor />
</ObjectEditor>

Editron contains a list of editors to render each json-schema type. You can add editors either on initialization:

import { Editron } from "editron";
const editron = new Editron(schema, data, {
  editors: [MyImageEditor]
})

or later by the instance method:

editron.registerEditor(MyImageEditor);

Each editor has a static editorOf-method. This method will be called by editron to decide if this editor should be used for the given json-schema. For example:

class MyImageEditor {
  editorOf(pointer: string, editron: Editron) {
    const jsonSchema = editron.service("schema").get(pointer);
    const useThisEditor = jsonSchema.format === "MyImageEditor";
    return useThisEditor;
  }
}

Further Reading

• learn to work with editron
• read about custom editron editors or
• follow the howto write a value editor

more details can be found on

• howto write a custom validation
• details about plugins and
• howto write a custom plugin

Back to README