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