open-consul/ui/packages/consul-ui/app/components/code-editor
James Tran 91abfe4b01
ui: Add XML syntax highlighting to key/value editor (#11785)
* ui: Add XML syntax highlighting to key/value editor

* ui: Make explicit options that are specific to XML for clarity
2022-01-04 16:24:09 +00:00
..
index.hbs ui: Adds partition support to Service and Node Identity templates (#11696) 2021-12-06 10:33:44 +00:00
index.js ui: Add XML syntax highlighting to key/value editor (#11785) 2022-01-04 16:24:09 +00:00
index.scss
layout.scss ui: Fix brand coloring for inline-code plus docs (#11578) 2021-11-23 18:32:11 +00:00
README.mdx ui: Adds partition support to Service and Node Identity templates (#11696) 2021-12-06 10:33:44 +00:00
skin.scss ui: Add XML syntax highlighting to key/value editor (#11785) 2022-01-04 16:24:09 +00:00

---
class: ember
state: needs-love
---

# CodeEditor

```hbs preview-template
<CodeEditor
    @readonly={{true}}
    @name={{concat name "[Rules]"}}
    @syntax="hcl"
    @oninput={{noop}}
>
    <:label>
    Rules <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#rule-specification" rel="help noopener noreferrer" target="_blank">(HCL Format)</a>
    </:label>
    <:content>
      {"content": "Initial Content"}
    </:content>
</CodeEditor>
```

A code-editor with syntax highlighting supporting multiple languages (JSON, HCL, YAML), validation and simple tools such as "Copy to clipboard"


### Arguments

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `readonly` | `Boolean` | false | If true, the content (value) of the CodeEditor cannot be changed by the user |
| `name` | `String` |  | The name attribute of the form element |
| `syntax` | `String` |  | Identifies the language used to validate/syntax highlight the code (possible values: hcl, json, yaml) |
| `oninput` | `Action` | noop | Action/callback that is triggered when the user inputs data |

### Named Blocks

| Name | Description | Behaviour if empty |
| --- | --- | --- |
| `:label` | Used to define the title that's displayed on the left inside the toolbar above the CodeEditor | Nothing is displayed |
| `:tools` | Used to define tools, buttons, widgets that will be displayed on the right inside the toolbar above the CodeEditor | By default it renders a `language selector` dropdown (if `readonly`== false and `syntax` is falsy) and a `CopyButton`
| `:content` | Used to display specific content such as code templates inside the CodeEditor | if the block is defined, @value will be displayed instead |


### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---