# DEPRECATED This component is deprecated. The code base has been moved to [api-request](https://github.com/advanced-rest-client/api-request) module. -------- Renders body editor that correspond to selected media type. It works with AMF data model to produce pre-populated view with values. **See breaking changes and list of required dependencies at the bottom of this document** ## Version compatibility This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use `3.x.x` version of the component. ## Usage ### Installation ``` npm install --save @api-components/api-body-editor ``` ### In an html file ```html

``` ### In a LitElement ```js import { LitElement, html } from 'lit-element'; import '@api-components/api-body-editor/api-body-editor.js'; class SampleElement extends PolymerElement { render() { return html` `; } _handleValue(e) { this.bodyValue = e.target.value; } } customElements.define('sample-element', SampleElement); ``` ## Development ### Running the demo locally ```sh npm start ``` ### Running the tests ```sh npm test ``` ### API components This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/) ## Breaking Changes in v3 You need to include CodeMirror into the document before importing this element as it expect this global variable to be already set. This is due CodeMirror not being able to run as ES module. Use your build system to bundle CodeMirror into the build and don't forget to export global variable. ```html ``` Add linter popup styles: ```html ``` Finally, you should set the path to CodeMirror modes. When content type change this path is used to load syntax highlighter. If you list all modes in the scripts above then this is not required. ```html ``` The `jsonlint` library is a dependency of `@api-components/code-mirror-linter` already included in the dependency graph of this element.