@advanced-rest-client/code-mirror

v3.1.5

Published

3 years ago

CodeMirror as a web component

Downloads

1,780

0High
0Medium
0Low

web-components code-mirror code mirror

Code mirror web component

This is a wrapper for CodeMirror library. It has been adjusted to work inside shadow DOM. The component is used by Advanced REST Client and API Console.

Required imports

CodeMirror library has to be included into the document before inserting this element to the DOM. CodeMirror 6 possibly will be working with ES imports but this is not set in stone at the moment.

Below is the default set of scripts to be added to the document.

<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 -->
<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>

If you are using 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>
<link rel="stylesheet" href="node_modules/codemirror/addon/lint/lint.css" />

Finally, if your application will use modes that aren't included in the document, you should set import URI. This will be used to resolve modes dependencies.

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

Accessing options

The element exposes setOption() function that should be used to directly set editor option.

cm.setOption('extraKeys', {
 'Ctrl-Space': (cm) => {
   CodeMirror.showHint(cm, CodeMirror.hint['http-headers'], {
     container: containerRef
   });
 }
});

Additionally, the element has the editor property which is a reference to the CodeMirror instance.

Rendering hidden element

If the element is active but not visible then you may need to call refresh() function on a CodeMirror instance after showing the element.

parent.style.display = 'block';
cm.editor.refresh();

Styling

See codemirror-styles.js file for CSS variables definition.

Usage

Installation

npm install --save @advanced-rest-client/code-mirror

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/code-mirror/code-mirror.js';
    </script>
  </head>
  <body>
    <code-mirror mode="javascript">
      function myScript() {
        return 100;
      }
    </code-mirror>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/code-mirror/code-mirror.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <code-mirror @value-changed="${this._valueHandler}"></code-mirror>
    `;
  }

  _valueHandler(e) {
    this.value = e.detail.value;
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/advanced-rest-client/code-mirror
cd code-mirror
npm install

Running the demo locally

npm start

Running the tests

npm test