e0b46721c4
Fixes an issue where the code editor would not resizing to the full extent of the browser window plus CodeEditor restyling/refactoring - :label named block - :tools named block - :content named block - code and CSS cleanup - CodeEditor.mdx Signed-off-by: Alessandro De Blasis <alex@deblasis.net> Co-authored-by: John Cowen <johncowen@users.noreply.github.com> |
||
---|---|---|
.. | ||
index.hbs | ||
index.js | ||
index.scss | ||
layout.scss | ||
README.mdx | ||
skin.scss |
--- 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> <!-- Plain text or something that renders data like the following --> <Consul::ServiceIdentity::Template @nspace={{nspace}} @name={{item.Name}} /> </: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) ---