Skip to main content

@editor

The @editor decorator is used to mark a method that defines the visual editor that a user can use to manage the properties of the NodeBlock, ConditionBlock or Collection.Item. The builder will invoke this method when it wants to render an editor panel for an item.

Decorator type​

Method ℹ️

Applies to​

Decorator signature​

@editor

Decorated method signature​

(editor: EditorOrchestrator): void

Decorated method parameters​

NameTypeOptionalDescription
editorEditorOrchestratorNoReference to the EditorOrchestrator instance that is used to define the property editor.
tip

The EditorOrchestrator instance is also available using the editor property of a NodeBlock, ConditionBlock or Collection.Item.

Example​

import { tripetto, editor, NodeBlock } from "@tripetto/builder";

@tripetto({
  type: "node",
  identifier: "example-block",
  label: "Example",
  icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})
class ExampleBlock extends NodeBlock {
  @definition
  example: boolean;

  @editor
  onEdit(): void {
    // The `EditorOrchestrator` instance contains template functions for
    // managing often used properties (like the name of a node).
    this.editor.groups.general();
    this.editor.name();

    // But, it can also be used to define custom controls as shown in the
    // following example that controls the `example` property of the block.
    this.editor.form({
      title: "Toggle the example property",
      controls: [
        new Forms.Checkbox(
          "Example checkbox",
          Forms.Checkbox.bind(this, "example", false)
        )
      ]
    });
  }
}