npm.io
4.0.10 • Published 3 years ago

@api-components/api-body-editor

Licence
Apache-2.0
Version
4.0.10
Deps
18
Size
50 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

DEPRECATED

This component is deprecated. The code base has been moved to 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>
  <head>
    <script type="module">
      import '@api-components/api-body-editor/api-body-editor.js';
    </script>
  </head>
  <body>
    <api-body-editor></api-body-editor>
    <script>
    {
      document.querySelector('api-body-editor').addEventListener('value-changed', (e) => {
        console.log(e.detail.value);
      });
    }
    </script>
  </body>
</html>
In a LitElement
import { LitElement, html } from 'lit-element';
import '@api-components/api-body-editor/api-body-editor.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <api-body-editor
      allowdisableparams
      allowcustom
      allowhideoptional
      .contentType="${this.contentType}"
      @value-changed="${this._handleValue}"></api-headers-editor>
    `;
  }

  _handleValue(e) {
    this.bodyValue = e.target.value;
  }
}
customElements.define('sample-element', SampleElement);

Development

Running the demo locally
npm start
Running the tests
npm test
API components

This components is a part of API components ecosystem

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.

<!-- CodeMirror + modes loader -->
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/addon/mode/loadmode.js"></script>
<script src="node_modules/codemirror/mode/meta.js"></script>
<!--Default set of parsers, add as many as you need -->
<script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="node_modules/codemirror/mode/xml/xml.js"></script>
<script src="node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- JSON linter -->
<script src="node_modules/jsonlint/lib/jsonlint.js"></script>
<script src="node_modules/codemirror/addon/lint/lint.js"></script>
<script src="node_modules/codemirror/addon/lint/json-lint.js"></script>

Add linter popup styles:

<link rel="stylesheet" href="node_modules/codemirror/addon/lint/lint.css" />

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.

<script>
CodeMirror.modeURL = 'node_modules/codemirror/mode/%N/%N.js';
</script>

The jsonlint library is a dependency of @api-components/code-mirror-linter already included in the dependency graph of this element.

Keywords

payloadbodyeditorformdatawwwurlencoded