Properties editor

This add-on enables users to edit the attributes of elements. This add-on requires configuration for which attributes are editable.

Configure this add-on

First, create a file called attributesEditorConfiguration.json on in the config folder and set its contents to:

{}

Then include the attributesEditorConfiguration.json in the configuration.js file. Set its contents in the attributes-editor-configuration field with the ConfigurationManager.

import configurationManager from 'fontoxml-configuration/src/configurationManager.js';
import attributesEditorConfigurationJson from './attributesEditorConfiguration.json';

configurationManager.set(
	'attributes-editor-configuration',
	attributesEditorConfigurationJson
);

At this point, the editor should load without any errors.

Configure editable attributes

Editable attributes should be listed in the attributesEditorConfiguration.json. This is best illustrated with an example:

{
	"self::div": {
		"class": {
			"localName": "class",
			"label": "Class",
			"display": "input",
			"properties": {
				"type": "text"
			}
		}
	}
}

The first level in the json should be an XPathTest to select an element. The second level is the name of the attribute which is being configured.

The following properties need to be configured for each attribute:

• localName: The name of the attribute as defined in the schema.

• namespaceURI: The namespace uri of this attribute. This may be omitted for attributes in the null namespace.

• label: The label which will be displayed for the attribute.

• display: The type of input which will be provided for input.

• properties: The properties of the input.

The different display options are:

• readonly: When an attribute should not be edited, but should be shown in the attributes editor, it can be configured to display as readonly:

{
	"self::div": {
		"id": {
			"localName": "id",
			"label": "Identifier",
			"display": "readonly"
		}
	}
}

• input with properties.type is:

  • text: A normal text input, the value should be a string.

  • number: A numeric stepper input, the value should be a number. Extra properties that can be used are numberOfDecimals(default is 2) and step(default is 1)

{
	"self::age": {
		"mean": {
			"localName": "mean",
			"label": "Mean",
			"display": "input",
			"properties": {
				"type": "number",
				"numberOfDecimals": 0
			}
		}
	}
}

• select: A single select with drop down menu. Use when the attribute should have a value out of a clearly defined list. The possible values should be provided with properties.options. This should be an array of items, with a label and value. This should be a string.

{
	"self::div": {
		"class": {
			"localName": "class",
			"label": "Class",
			"display": "select",
			"properties": {
				"options": [
					{
						"label": "Aligned left",
						"value": "left"
					},
					{
						"label": "Aligned center",
						"value": "center"
					},
					{
						"label": "Aligned right",
						"value": "right"
					}
				]
			}
		}
	}
}

• autocomplete: A single autocomple with drop down menu. Use when the attribute should have a value out of a clearly defined (and long) list. The possible values should be provided with properties.options. This should be an array of items, with a label and value. This should be a string.

{
	"self::div": {
		"color": {
			"localName": "color",
			"label": "Color",
			"display": "autocomplete",
			"properties": {
				"options": [
					{
						"label": "Blue",
						"value": "blue"
					},
					{
						"label": "Red",
						"value": "red"
					},
					⋮
					{
						"label": "Yellow",
						"value": "yellow"
					},
					{
						"label": "Violet",
						"value": "violet"
					}
				]
			}
		}
	}
}

• button-with-value-from-modal: A button that opens a modal which should provide a value (this should be a string) that is displayed after the button. The modalComponentName and buttonLabel should at least be added to the properties. The properties buttonLabel, icon and iconAfter are optional.

{
	"self::div": {
		"date": {
			"localName": "date",
			"label": "Date",
			"display": "button-with-value-from-modal",
			"properties": {
				"modalComponentName": "DateSelectModal",
				"icon": "calendar"
			}
		}
	}
}