Dart pub
A Dart wrapper around the CodeMirror text editor. From codemirror.net:
CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
Map options = {
'mode': 'javascript',
'theme': 'monokai'
};
CodeMirror editor = new CodeMirror.fromElement(
querySelector('#textContainer'), options: options);
editor.getDoc().setValue('foo.bar(1, 2, 3);');
See also our example/ directory.
In your main html file, link to the style sheet:
<link href="packages/codemirror/codemirror.css" rel="stylesheet">
reference the CodeMirror JavaScript code:
<script src="packages/codemirror/codemirror.js"></script>
and, in your Dart code, import the library:
import 'package:codemirror/codemirror.dart';
This Dart package ships with several language modes built in. CodeMirror itself
supports over 100 modes; the modes built into the Dart package include the
usual suspects for web development - css, html, dart and javascript as
well as a few
others.
In order to add additional modes, you'll need to reference the mode file from
your html entry-point. So,
<script src="packages/codemirror/mode/lua.js"></script>
will bring in support for Lua.
Similarly with addons, we've included a few common ones, and have made the
others available to import on a case-by-case basis. In order to use the
active-line addon, import:
<script src="packages/codemirror/addon/selection/active-line.js"></script>
Be aware that many addons need additional configuration in order to enable then. This is generally done by passing values into the options of the CodeMirror constructor.
Some addons are exposed through the main Dart interface. Some are exposed via side-car Dart libraries available in the main package, and some have yet to be exposed. Pull requests welcome :)
By importing the codemirror.css file:
<link href="packages/codemirror/codemirror.css" rel="stylesheet">
You get access to all the CodeMirror themes. If you only want a few, or don't want to pay the network roundtrip cost to load all the themes, you can import only the ones you're interested in:
<link href="packages/codemirror/theme/monokai.css" rel="stylesheet">
<link href="packages/codemirror/theme/zenburn.css" rel="stylesheet">
The Polymer transfomer will inline our theme css references incorrectly.
Currently, to use the codemirror package with Polymer, you'll need to add the
following lines to your pubspec.yaml file.
- polymer:
entry_points: web/foo_bar.html
inline_stylesheets:
packages/codemirror/codemirror.css: false
This is not an official Google product.
getScrollInfo, scrollIntoView, onGutterClickDoc.eachLineDoc.addSelectionDoc.extendSelectionDoc.extendSelectionsDoc.extendSelectionsByDoc.setExtending and Doc.getExtendingCodeMirror.addCommand to better support custom commandsdefineExtension and defineDocExtensionDoc.getModeAtDoc.getModeName() and Doc.getModeNameAt() methodsselect, pick, and update eventsshown and close events (HintResults.registerOnShown)execCommandCodeMirror.getInputFieldCodeMirror.findModeByFileNamehints (code completion) addonTextMarkers (see Doc.markText and associated methods)posFromIndex and indexFromPosCodeMirror.fromJsObject constructorCodeMirror.getLineCodeMirror.findModeByExtension, CodeMirror.findModeByMime,
and CodeMirror.findModeByNameDoc.onChangeCodeMirror.getReadOnlyDoc.getSelectionDocCodeMirror.swapDoc methodAdd this to your package's pubspec.yaml file:
dependencies:
codemirror: ^0.4.7+5.41.0
You can install packages from the command line:
with pub:
$ pub get
Alternatively, your editor might support pub get.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:codemirror/codemirror.dart';
| Version | Uploaded | Documentation | Archive |
|---|---|---|---|
| 0.5.0+5.43.0 | Feb 3, 2019 |
|
|
| 0.4.7+5.41.0 | Dec 21, 2018 |
|
|
| 0.4.6+5.41.0 | Nov 30, 2018 |
|
|
| 0.4.5+5.41.0 | Nov 15, 2018 |
|
|
| 0.4.4+5.41.0 | Nov 15, 2018 |
|
|
| 0.4.3+5.13.4 | Jul 26, 2018 |
|
|
| 0.4.2+5.13.4 | Jul 11, 2018 |
|
|
| 0.4.1+5.13.4 | Apr 9, 2016 |
|
|
| 0.4.0+5.8.0 | Dec 7, 2015 |
|
|
| 0.3.2+5.8.0 | Oct 21, 2015 |
|
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
74
|
|
Health:
Code health derived from static analysis.
[more]
|
100
|
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
89
|
|
Overall:
Weighted score of the above.
[more]
|
84
|
We analyzed this package on Feb 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Detected platforms: web
Primary library:
package:codemirror/codemirror.dartwith components:html,js.
Fix lib/src/js_utils.dart. (-0.50 points)
Analysis of lib/src/js_utils.dart reported 1 hint:
line 51 col 35: Use = to separate a named parameter from its default value.
The package description is too short. (-11 points)
Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.
Maintain an example.
None of the files in the package's example/ directory matches known example patterns.
Common filename patterns include main.dart, example.dart, and codemirror.dart. Packages with multiple examples should provide example/README.md.
For more information see the pub package layout conventions.