oxy_editor() Custom Form Control Properties

The oxy_editor function allows you to edit attributes or simple element values in the Author mode, using standard built-in form controls (such as combo boxes, text fields, pop-ups, URL choosers, etc.) or to implement your own custom form controls and renderers.

myElement {
    content: oxy_editor(
        type, [my form control],
        edit, "@my_attr"
    )
}

The oxy_editor custom form control supports the following properties:

actionContext - Specifies the context in which the action associated with the form control is executed. Its possible values are element and caret. If you select the element value, the context is the element that holds the form control. If you select the caret value, the action is invoked at the caret location. If the caret is not inside the element that holds the form control, the element value is selected automatically.
actionID - The ID of the action, specified in the associated document type framework, that is invoked when you click the button.
Note: The element that contains the form control represents the context where the action is invoked.

action - Defines an action directly, rather than using the actionID parameter to reference an action from the associated document type framework. This property is defined using the oxy_action function.

oxy_action(
          name, 'Insert Section', 
          description, 'Insert an element after the current one', 
          icon, url('insert.png'), 
          operation, 'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation', 
          arg-fragment, '<element>${caret}</element>',
          arg-insertLocation, '.',
          arg-insertPosition, 'After'
)

action_list - Defines a list of actions directly, rather than using the actionID parameter to reference actions from the associated document type framework. This property is defined using the oxy_action_list function.

oxy_action_list(
          oxy_action(
                name, 'Insert', 
                description, 'Insert an element after the current one', 
                operation, 'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation', 
                arg-fragment, '<element></element>',
                arg-insertLocation, '.',
                arg-insertPosition, 'After'
          ),
          oxy_action(
                name, 'Delete', 
                description, 'Deletes the current element', 
                operation, 'ro.sync.ecss.extensions.commons.operations.DeleteElementOperation' 
          )
      )

actionStyle - Specifies what to display for an action in the form control. The values of this property can be text, icon, or both.
background-color - Specifies the background color of the form control. If the value of the background-color property is inherit, the form control has the same color as the element in which it is inserted.
color - Specifies the foreground color of the form control. If the value of the color property is inherit, the form control has the same color as the element in which it is inserted.
columns - Controls the width of the form control. The unit size is the width of the w character.
contentType - Specifies the type of content for which the form control offers syntax highlighting. The following values are supported: text/css; text/shell; text/cc; text/xquery; text/xml; text/python; text/xsd; text/c; text/xpath; text/javascript; text/xsl; text/wsdl; text/html; text/xproc; text/properties; text/sql; text/rng; text/sch; text/json; text/perl; text/php; text/java; text/batch; text/rnc; text/dtd; text/nvdl; text/plain.
edit - Lets you edit the value of an attribute, the text content of an element, or Processing Instructions (PI). This property can have the following values:
- @attribute_name - The name of the attribute whose value is being edited. If the attribute is in a namespace, the value of the property must be a QName and the CSS must have a namespace declaration for the prefix.
- #text - Specifies that the presented/edited value is the simple text value of an element.
  Note: You can set the value of the visibility property to -oxy-collapse-text to render the text only in the form control that the oxy_editor function specifies.
editorSort - Allows you to sort the values rendered on the form control. The possible values of this property are ascending and descending.
enableInReadOnlyContext - To enable button form controls or groups of buttons form controls this property needs to be set to true. This property can be used to specify areas as read-only (by setting the -oxy-editable property to false). This is useful when you want to execute an action that does not modify the context. If this property is missing or set to false, the button form controls or groups of buttons form controls are disabled.
fontInherit - This value specifies whether the form control inherits its font from its parent element. The values of this property can be true or false.
href - The absolute or relative location of a resource.
id - The unique identifier of an item.
indentOnTab - Specifies the behaviour of the Tab key. If the value of this property is set to true, the Tab key inserts characters. If it is set to false, Tab is used for navigation, jumping to the next editable position in the document.
labels - This property must have the same number of items as the values property. Each item provides a literal description of the items listed in the values property.
rendererSeparator - Defines a separator used when multiple values are rendered.
rendererSort - Allows you to sort the values rendered on the form control label. The possible values of this property are ascending and descending.
resultSeparator - If multiple check-boxes are used, the separator is used to compose the final result.
rows - This property specifies the number of rows that the form control presents.
selectionMode - Specifies whether the form control allows the selection of a single value or multiple values. The predefined values of this property are single and multiple.
showIcon - Specifies if the action icon should be displayed on the button form control. If this property is missing then the button displays the icon only if it is available, or the text if the icon is not available. The values of this property can be true or false.
```
element {
  content: oxy_button(actionID, 'remove.attribute', showIcon, true);
}
```
showText - Specifies if the action text should be displayed on the button form control. If this property is missing then the button displays the icon only if it is available, or the text if the icon is not available. The values of this property can be true or false.
```
element {
  content: oxy_button(actionID, 'remove.attribute', showText, true);
}
```

text-align - Specifies the alignment of the generated content in its reserved space. This property has three possible values:

left
right
center

element {
  content: 
    oxy_label(text, "Label1:", width, 20em, text-align, center)
    oxy_label(text, "Label2:", width, 100px, text-align, right)
}

text - This property specifies the built-in form control you are using.
tooltips - Associates tooltips to each value in the values property. The value of this property is a list of tooltips separated by commas. If you want the tooltip to display a comma, use the ${comma} variable. The property will be ignored if the number of tooltips and the number of values don't match.
tooltip - Specifies a tooltip to be displayed when you hover over the form control.
transparent - Flattens the aspect of the button form control, removing its border and background.
type - This property specifies the built-in form control you are using. This property can have one of the following values:
- oxy_textfield - A text field form control, with optional content completion capabilities, is used to present and edit a single line of text.
- oxy_combobox - A combo-box is used that can be a drop-down list or a combination of a drop-down list and a single-line text field.
- oxy_checkbox - Single or multiple check boxes are used to present and select a value.
- oxy_popup - A pop-up menu, allowing single or multiple selections, is used to provide quick access to various actions.
- oxy_button - A button is used that invokes a specific author action.
- oxy_buttonGroup - A group of buttons that invoke specific author actions.
- oxy_textArea - A text box is used to present and edit multiple lines of text.
- oxy_urlChooser - A dialog box with a browse button is used to select a location of local or remote resources.
- oxy_datePicker - A form control with a calendar browser button is used to select a date in a specified format.
- oxy_htmlContent- A form control box is used that is capable of rendering HTML content.
uncheckedValues - Specifies the values that are committed when check-boxes are not selected.
values - Specifies the values that populate the content completion list of proposals. If these values are not specified, they are collected from the associated schema.
visible - Specifies whether or not the form control is visible. The possible values of this property are true (the form control is visible) and false (the form control is not visible).
width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units. The width property takes precedence over the columns property (if the two are used together).
hoverPseudoclassName - Allows you to change the way an element is rendered when you hover over a form control. The value is the name of a CSS pseudo class. When you hover over the form control, the specified pseudo class will be set on the element that contains the form control.
```
p:before {
  content: oxy_button(hoverPseudoclassName, 'showBorder')
}
p:showBorder {
  border: 1px solid red;
}
```