mint-codemirror

This package provides a component for the CodeMirror code editor to be used in Mint projects.

Installation

To use the component just add this to the dependencies field of the projects mint.json file.

"mint-codemirror": {
  "repository": "https://github.com/mint-lang/mint-codemirror",
  "constraint": "10.0.0 <= v < 11.0.0"
}

Usage

To get the basic component without any modes and the default theme, just add the component to your render function:

component Main {
  fun onChange (value : String) : Promise(Void) {
    Debug.log(value)
    next { }
  }

  fun render : Html {
    <CodeMirror onChange={onChange}/>
  }
}

Properties

The following properties are available:

Name	Type	Description
javascripts	Array(String)	URLs for the JavaScript files that are needed for CodeMirror to work. This can come from a CDN or from local files. This should contain the base JavaScript and any other addons or modes that is required.
styles	Array(String)	URLs for the CSS files that are that are needed for CodeMirror to work. This can come from a CDN or from local files. This should contain the base CSS and any other files for themes.
onChange	Function(String, a)	This is called when the content changes.
loadingContent	Html	This is shown until the all the files have loaded and editor is ready.
lineNumbers	Bool	Whether or not to show the line numbers.
lineWrapping	Bool	Whether or not to wrap the lines.
value	Bool	When provided this value will be in the editor.
theme	String	The theme of the editor.
mode	String	The mode of the editor.

Advanced Usage

This is an example for using the all of the properties:

component Main {
  state value : String = "def print\n  puts 'Hello World!'\nend"

  fun onChange (value : String) : Promise(Void) {
    next { value: value }
  }

  fun render : Html {
    <CodeMirror
      javascripts=[
        "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/mode/ruby/ruby.min.js"
      ]
      styles=[
        "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.css",
        "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/theme/dracula.min.css"
      ]
      onChange={onChange}
      theme="dracula"
      value={value}
      mode="ruby"/>
  }
}

License

MIT