Skip to content

A Mint package that provides a CodeMirror component

License

Notifications You must be signed in to change notification settings

mint-lang/mint-codemirror

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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