Code component
An extensible code editor and code display component. It wraps the Codemirror Code Editor by defining the Sema4.ai theme and adding support for Robot Framework syntax highlight. The component automatically uses the current theme context unless overridden.
Properties
| Name | Description | Default |
|---|---|---|
| busy | Input busy state | - |
| codemirrorRef | Codemirror View instance reference | - |
| description | Input description | - |
| error | Input error state | - |
| extensions | Codemirror extensions | - |
| labelOptional | Optional label appended to label content | - |
| lineNumbers | Show line numbers | - |
| maxRows | Code editor maximum height defined in code rows | - |
| onChange | Code editor value change callback, returns Codemirror ViewUpdate as second parameter | - |
| placeholder | Placeholder value | - |
0-10 of 16
Codemirror
You can extend Codemirror by defining compatible extensions via the `extensions` property. Remember to Memoize the extension value to prevent reinitialization of the component.
You can also interact with Codemirror by defining `codemirrorRef` that references the View instance.
Languages
By default the Code component has no specific language highlight active you need to add one via the `extensions` property.
Robot Framework highlight is included in the Design System package as `import { robotFramework } from "@sema4ai/components"`.
For other language support, install the corresponding Codemirror language extensions (e.g. `@codemirror/lang-python`).
Toolbar
`toolbar` property can be used to define custom action icons on the top right corner of the editor. Buttons with variant `inverted` have to be used.
As Input
Code component supports `label`, `description` and `error` properties and it can be used as a replacement for textareas that need coe hilight support