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.
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 15
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
With Theme
By default `Code` component is dark themed is used in light theming as well. You can override the default theme by setting the `theme` property to `light`.