<wc-codemirror> Easily embed a CodeMirror editor

Setup

Install and import from NPM

npm i @vanillawc/wc-codemirror

<script type="module" src="[node_modules]/@vanillawc/wc-codemirror/index.js"></script>

Import from CDN

<script type="module" src="https://cdn.jsdelivr.net/gh/vanillawc/wc-codemirror@1/index.js"></script>

Demo

Try it on WebComponents.dev

Usage

Attributes

• src - load an external source file
• style - CSS styling (default height:100%;width:100%;)
• viewport-margin¹ - sets the viewportMargin option of the CodeMirrror editor instance (default 10)
• readonly - sets the codemirror's "readOnly" configuration attribute to true, you may set readonly="nocursor" if you want to disable the cursor and not let the user copy the text inside

¹Setting viewport-margin to infinity will auto-resize the editor to its contents. To see this in action, check out the CodeMirror Auto-Resize Demo.

Properties

• editor - the CodeMirror editor instance
• value - get/set the editor's contents

Note: The ID attribute is required when multiple editors instances are present

Basic Usage

An empty tag loads a basic CodeMirror editor pane

<wc-codemirror></wc-codemirror>

Inline Source

Inline source can be loaded by including a <script> of type wc-content in the body of the component. The <script> wrapper is necessary so '<' and '>' chars in the source are not interpreted as HTML.

<wc-codemirror mode="javascript">
  <script type="wc-content">
  function myGoodPerson(){
     return "what can I do for you ?"
  }
  </script>
</wc-codemirror>

Note: </script> cannot be used inside of <script type="wc-content"> until it's the angle brackets are escaped (ie < and >)

External Source

Load an external source file with the src attribute

<wc-codemirror src="sample.txt"></wc-codemirror>

Syntax Highlighting

Syntax highlighting requires importing a mode module for the language

<script type="module" src="[wc-codemirror]/mode/javascript/javascript.js"></script>

Then specify the language with the mode attribute

<wc-codemirror mode="javascript"></wc-codemirror>

Theming

Theming requires importing an editor theme stylesheet within wc-codemirror tag. You can import few themes this way and switch them with the theme attribute.

<wc-codemirror mode="javascript" theme="monokai">
  <link rel="stylesheet" href="[wc-codemirror]/theme/monokai.css">
</wc-codemirror>

Note: Check out the CodeMirror Theme Demo to try sample the full selection of editor themes.

Contributing

See CONTRIBUTING.md