Skip to main content

EditorOrchestrator class

๐Ÿ“– Descriptionโ€‹

The EditorOrchestrator class instance is supplied to the @editor decorated method of a NodeBlock, ConditionBlock or Collection.Item. It is used to define UI controls for editing the properties of an item. Those properties can be edited in the builder using an editor panel that is automatically generated. The EditorOrchestrator class contains methods that supply out-of-the-box components for managing often used properties, like the name, description, and alias of a block. But it also allows to add custom forms for managing properties.

tip

The EditorOrchestrator instance is only available within the method of the NodeBlock marked with the @editor decorator. The instance is supplied as argument to that decorated method or through the editor property of the NodeBlock instance.

See the Block editor guide for more information about editor panels.

๐Ÿ—ƒ๏ธ Fieldsโ€‹


๐Ÿท๏ธ featuresโ€‹

Retrieves a reference to the features of an editor panel.

Typeโ€‹

Components.Features


๐Ÿท๏ธ groupsโ€‹

Retrieves the group templates with common used groups titles used in the feature list of an editor panel.

caution

This property is only available for node blocks.

Previewโ€‹

Typeโ€‹

{
/* Group title for general features. */
general: () => string,

/* Group title for settings. */
settings: () => string,

/* Group title for options. */
options: () => string,
}

๐Ÿท๏ธ referenceโ€‹

Reference to the element being edited.

Typeโ€‹

NodeBlock | ConditionBlock | Collection.Item

โ–ถ๏ธ Methodsโ€‹


๐Ÿ”ง aliasโ€‹

Adds the alias feature that manages the alias property of the supplied object.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

alias(
ref: {
alias?: string
}
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
refobjectNoSpecifies the object with the alias property to manage.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง descriptionโ€‹

Adds the description feature which manages the description property of the Node.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

description(
locked?: boolean,
label?: string,
supportVariables: boolean | "validated" | "exclude"
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
lockedbooleanYesSpecifies if the feature is locked (default is false).
labelbooleanYesSpecifies the label for the feature (default is Description).
supportsVariablesboolean | "validated" | "exclude"YesSpecifies if markdown variables inside the description are supported (default is true). Can be one of the following values:
- boolean: Specifies if variables are supported or not;
- validated: Specifies to only include validated variables (basically these are all the variables prepending the current block);
- exclude: Specifies to include all variables, except those of the current block itself.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง closeโ€‹

Closes the editor panel.

Signatureโ€‹

close(): boolean

Return valueโ€‹

Returns true if the panel was closed.


๐Ÿ”ง collectionโ€‹

Adds a collection control that can manage the items in a collection. For example, the dropdown options of a dropdown block.

Previewโ€‹

Signatureโ€‹

collection(properties: Collection.IProperties): Collection.Card

Parametersโ€‹

NameTypeOptionalDescription
propertiesCollection.IPropertiesNoSpecifies the collection properties.

Return valueโ€‹

Returns the new Collection.Card instance.

Exampleโ€‹

import { _, tripetto, definition, name, Collection, NodeBlock } from "tripetto";

class DropdownOption extends Collection.Item<Dropdown> {
@definition
@name
name = "";
}

@tripetto({
type: "node",
identifier: "dropdown",
label: "Dropdown",
icon: "data:image/svg+xml;base64,PHN2ZyAvPg=="
})
class Dropdown extends NodeBlock {
// This is the collection that contains the dropdown options
options = Collection.of<DropdownOption, Dropdown>(DropdownOption, this);

@editor
onEdit(): void {
this.editor.collection({
collection: this.options,
title: _("Dropdown options"),
placeholder: _("Unnamed option"),
sorting: "manual",
editable: true,
emptyMessage: _("Click the + button to add an option...")
});
}
}

๐Ÿ”ง explanationโ€‹

Adds the explanation feature which manages the explanation property of the Node.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

explanation(): Components.Feature

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง exportableโ€‹

Adds the exportable feature that manages the exportable property of the supplied object.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

exportable(
ref: {
exportable?: boolean
},
includedByDefault?: boolean,
label?: string
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
refobjectNoSpecifies the object with the exportable property to manage.
includedByDefaultbooleanYesSpecifies if the data is exportable by default (so when this feature is unchecked, default is true).
labelstringYesSpecifies the label for the required checkbox.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง formโ€‹

Adds a custom form.

Signatureโ€‹

form(properties: Forms.IFormProperties): Form

Parametersโ€‹

NameTypeOptionalDescription
propertiesForms.IFormPropertiesNoSpecifies the form properties.

Return valueโ€‹

Returns the new Form instance.

Exampleโ€‹

import { tripetto, editor, NodeBlock } from "tripetto";

@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 {
this.editor.form({
title: "Toggle the example property",
controls: [
new Forms.Checkbox(
"Example checkbox",
Forms.Checkbox.bind(this, "example", false)
)
]
});
}
}

๐Ÿ”ง groupโ€‹

Adds a group label in the features list.

Signatureโ€‹

group(label: string): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
labelstringNoSpecifies the group label.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง nameโ€‹

Adds the name feature which manages the name property of the Node.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

name(
toggle?: boolean,
multiline?: boolean,
label?: string,
supportVariables: boolean | "validated" | "exclude"
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
togglebooleanYesSpecifies if the name visibility can be toggled (default is true). This controls the nameVisible property of the Node.
multilinebooleanYesSpecifies if multiline text is supported (default is true).
labelbooleanYesSpecifies the label for the feature (default is Text).
supportsVariablesboolean | "validated" | "exclude"YesSpecifies if markdown variables inside the description are supported (default is true). Can be one of the following values:
- boolean: Specifies if variables are supported or not;
- validated: Specifies to only include validated variables (basically these are all the variables prepending the current block);
- exclude: Specifies to include all variables, except those of the current block itself.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง numericโ€‹

Adds a numeric feature that automatically creates a feature slot. Can be used, for example, to add a calculator feature to a block.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

numeric(properties: {
/* Reference to the target `NodeBlock`. */
target: {
slots: Slots;
};

/*Specifies the slot reference. */
reference: string;

/* Specifies the slot label. */
label: string;

/* Specifies the name of the feature. */
name: string;

/* Specifies an optional title for the feature. */
title?: string;

/* Optional description. */
description?: string;

/* Optional paired feature or card. */
pair?: Components.Feature | Components.Card | (() => Components.Feature | Components.Card);

/* Specifies if the slot is exportable or not (default is `false`). */
exportable?: boolean;

/* Specifies scores to display inside the feature. */
scores?: Forms.Numeric[];

/* Specifies a collection that holds the scores. */
collection?: Collection.Card;
}): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
propertiesobjectNoSpecifies the properties for the numeric feature.

Return valueโ€‹

Returns a reference to the Components.Feature instance.

Exampleโ€‹

// Import the calculator
import { calculator } from "tripetto-block-calculator";

// Use this code snippet to add a numeric feature with the calculator
this.editor.numeric({
target: this,
reference: "calculator",
label: _("Calculation"),
name: _("Calculator"),
pair: this.editor.collection(calculator(this))
});

๐Ÿ”ง optionโ€‹

Adds an optional feature with a form or collection.

Signatureโ€‹

option(properties: {
/* Name for the option. */
name: string;

/* Specifies if the option is activated. */
activated?: boolean;

/* Specifies if the option is visible. */
visible?: boolean;

/* Specifies if the option is disabled. */
disabled?: boolean;

/* Specifies if the option is locked. */
locked?: boolean;

/* Specifies a function that is invoked when the option is toggled. */
on?: (feature: Components.Feature) => void;

/* Specifies a function that is invoked when the option is shown or hidden. */
onVisible?: (feature: Components.Feature) => void;

/* Specifies a function that is invoked when the option is disabled or enabled. */
onDisable?: (feature: Components.Feature) => void;

/* Specifies a function that is invoked when the option is locked or unlocked. */
onLock?: (feature: Components.Feature) => void;
} & (
| {
/* Form properties in case of a form. */
form?: Forms.IFormProperties;

}
| {
/* Collection properties in case of a collection. */
collection?: Collection.IProperties;
}
)
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
propertiesobjectNoSpecifies the properties for the option.

Return valueโ€‹

Returns a reference to the Components.Feature instance.

Exampleโ€‹

import { tripetto, editor, isBoolean, NodeBlock } from "tripetto";

@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 {
this.editor.option({
// The feature is activated when `example` is a valid boolean value
activated: isBoolean(this.example),
name: "Example feature",
form: {
title: "Feature for managing the optional example field",
controls: [
new Forms.Checkbox(
"Example checkbox",
// When the feature is activated and `example` is undefined, its initial value is set to `true`
Forms.Checkbox.bind(this, "example", undefined, true)
)
]
}
});
}
}

๐Ÿ”ง placeholderโ€‹

Adds the placeholder feature which manages the placeholder property of the Node.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

placeholder(...additionalPlaceholders: (Control | Group)[]): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
...additionalPlaceholders(Forms.Control | Forms.Group)[]YesSpecifies additional controls.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง requiredโ€‹

Adds the required feature that manages the required property of the supplied object.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

required(
ref: {
required?: boolean
},
label?: string,
onChange?: (required: boolean) => void
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
refobjectNoSpecifies the object with the required property to manage.
labelstringYesSpecifies the label for the required checkbox.
onChange(required: boolean) => voidYesSpecifies a function that is invoked when the required prop of ref has changed.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง scoresโ€‹

Adds the scores feature.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

scores(properties: {
/* Reference to the target `NodeBlock`. */
target: {
slots: Slots;
};

/* Optional description. */
description?: string;

/* Specifies if the score slot is exportable or not (default is `false`). */
exportable?: boolean;

/* Specifies scores to display inside the feature. */
scores?: Numeric[];

/* Specifies a collection that holds the scores. */
collection?: Collection.Card | Components.Feature;
}): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
propertiesobjectNoSpecifies the properties for the scores feature.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง transformationsโ€‹

Adds the transformations feature that manages the transformation property of the supplied object.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

transformations(
ref: {
transformation?: "none" | "capitalize" | "capitalize-words" | "capitalize-sentences" | "uppercase" | "lowercase"
}
): Components.Feature

Parametersโ€‹

NameTypeOptionalDescription
refobjectNoSpecifies the object with the transformation property to manage.

Return valueโ€‹

Returns a reference to the Components.Feature instance.


๐Ÿ”ง visibilityโ€‹

Adds the visibility feature which manages the disabled property of the Node.

caution

This method is only available for node blocks.

Previewโ€‹

Signatureโ€‹

visibility(): Components.Feature

Return valueโ€‹

Returns a reference to the Components.Feature instance.