element-codemirror

Custom element that wraps up the CodeMirror text editor for you.

Usage

CodeMirrorElement = CME(CodeMirror, options)

Where CodeMirror is a reference to the CodeMirror singleton you'd like to use, and options is a set of default options to apply to each instance of the editor created with this element.

See demo.js for a full usage example.

require('webcomponents.js')
require('codemirror/mode/javascript/javascript')
 
var CodeMirror = require('codemirror')
var CME        = require('element-codemirror')
 
var CodeMirrorElement = CME(CodeMirror, {
  viewportMargin: Infinity,
  mode: 'javascript'
})
 
document.registerElement('code-mirror', CodeMirrorElement)

<code-mirror mode="javascript" theme="dracula">
function thisIsSomeJavaScript() {
  console.log('hello!')
}
</code-mirror>

Note that for themes to work properly their styles must be included within <code-mirror>'s Shadow DOM: you can use custom-element-styles for this.

Properties

CodeMirrorElement.value

Represents the content of the CodeMirror editor. Use this to read the text contained within, or to change its value.

CodeMirrorElement.editor

The CodeMirror editor instance attached to the element. Useful for adding custom behaviours, for example watching changes to its content:

var element = document.querySelector('code-mirror')
 
element.editor.on('change', function() {
  console.log(element.value)
})

Attributes

mode

Determines the mode for the editor to use, e.g. javascript, glsl, haskell, etc.

Note that modes must be loaded manually onto CodeMirror before they may be used.

theme

Determines he theme for the editor to use.

width

The width to use for the editor. Note that you may use CSS units here, such as 50vh or 75%.

height

The height to use for the editor. Note that you may use CSS units here, such as 50vh or 75%.

Methods

CodeMirrorElement.reset()

Resets the editor's contents to be its textContent value.

License

MIT. See LICENSE.md for details.