google / codemirror.dart Goto Github PK

View Code? Open in Web Editor NEW

87.0 10.0 33.0 4.27 MB

A Dart wrapper around the CodeMirror text editor.

License: BSD 3-Clause "New" or "Revised" License

CSS 2.63% HTML 3.77% Shell 0.81% Dart 92.79%

codemirror.dart's Introduction

codemirror.dart

What is it?

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.

Note: This is NOT a Flutter package, it is a Dart package for writing web applications like DartPad.

An example

final options = <String, String>{
  'mode': 'javascript',
  'theme': 'monokai'
};

final editor = CodeMirror.fromElement(
    querySelector('#textContainer')!, options: options);
editor.doc.setValue('foo.bar(1, 2, 3);');

How do I use it?

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';

What about modes? Addons?

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 :)

Themes

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">

Disclaimer

This is not an official Google product.

codemirror.dart's People

Contributors

Stargazers

Watchers

codemirror.dart's Issues

upgrade to 5.6

Codemirror conflicts with the polymer transformer

When I add polymer dependency and transformer to my project, codemirror stop working and 404 errors appears in the console:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/css/codemirror.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/3024-day.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/3024-night.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/ambiance-mobile.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/ambiance.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/base16-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/base16-light.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/blackboard.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/cobalt.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/eclipse.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/elegant.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/erlang-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/lesser-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/mbo.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/mdn-like.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/midnight.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/monokai.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/neat.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/neo.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/night.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/paraiso-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/paraiso-light.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/pastel-on-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/rubyblue.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/solarized.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/the-matrix.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/tomorrow-night-eighties.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/twilight.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/vibrant-ink.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/xq-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/xq-light.css

A sample project with the specified error can be found here: https://github.com/fedy2/codemirror_sample

fix strong mode changes

#51

Use new List.from() - casting doesn't work too well.

codemirror 5.1 is available

https://codemirror.net/doc/releases.html

how to use it in flutter

I want use Flutter build web ,but I don't know how to do

flutter mobile

I want to ask, how to port this to the mobile phone

add a grind task to drive bower, as per UPDATING_CODEMIRROR.md

rev to codemirror v5.0

http://codemirror.net/doc/releases.html

Also, re-evaluate our versioning; should we track codemirror's versions, for better clarity into what version we're built with?

change the return type of hints results

https://github.com/google/codemirror.dart/blob/master/lib/hints.dart#L68

more strong mode

warning: [DownCastComposite] keys(_cm['modes']).where((modeName) => modeName != 'null').toList() (List<dynamic>) will need runtime check to cast to type List<String> (lib/codemirror.dart, line 70, col 36)
warning: [DownCastComposite] keys(_cm['mimeModes']) (List<dynamic>) will need runtime check to cast to type List<String> (lib/codemirror.dart, line 73, col 41)
warning: [DownCastComposite] keys(_cm['commands']) (List<dynamic>) will need runtime check to cast to type List<String> (lib/codemirror.dart, line 75, col 39)
warning: [DownCastComposite] onEvent('mousedown', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 207, col 41)
warning: [DownCastComposite] onEvent('dblclick', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 213, col 43)
warning: [DownCastComposite] result.map((t) => new Token.fromProxy(t)).toList() (dynamic) will need runtime check to cast to type List<Token> (lib/codemirror.dart, line 500, col 14)
warning: [DownCastComposite] callArgs('getHelpers', [pos.toProxy(), type]) (dynamic) will need runtime check to cast to type List<JsObject> (lib/codemirror.dart, line 549, col 12)
warning: [DownCastComposite] result.map((mark) => new TextMarker(mark)).toList() (dynamic) will need runtime check to cast to type List<TextMarker> (lib/codemirror.dart, line 963, col 12)
warning: [DownCastComposite] result.map((mark) => new TextMarker(mark)).toList() (dynamic) will need runtime check to cast to type List<TextMarker> (lib/codemirror.dart, line 973, col 12)
warning: [DownCastComposite] result.map((mark) => new TextMarker(mark)).toList() (dynamic) will need runtime check to cast to type List<TextMarker> (lib/codemirror.dart, line 982, col 12)
warning: [DownCastComposite] jsProxy['ext'] (dynamic) will need runtime check to cast to type List<String> (lib/codemirror.dart, line 1072, col 27)

TextMarker.find always returns a null position

The issue is a type check that likely started failing with Dart 2.0

publish new version to capture codemirror upgrade

#87 / 0.5.1+5.44.0

bring in new version of show-hint.js

bring in new version of https://github.com/codemirror/CodeMirror/commits/master/addon/hint/show-hint.js, in order to fix dart-lang/dart-pad#293.

'JSObjectImpl' is not a subtype of type 'JsObject'

Codemirror started throwing this error, and we can't figure out the cause:

'JSObjectImpl' is not a subtype of type 'JsObject'

The usage was within an angular2 app:

    var element = (elementRef.nativeElement as Element);
    var container = element.querySelector('#container');
    var options = {
      "mode": "javascript",
      "theme": "default",
      "lineNumbers": "true"
    };
    editor = new CodeMirror.fromElement(container, options: options);

Changing to this solved the issue:

    var options = {
      "mode": "javascript",
      "theme": "default",
      "lineNumbers": "true"
    };
    var element = (elementRef.nativeElement as Element);
    var container = element.querySelector('#container');

    editor = new CodeMirror.fromElement(container, options: options);
    var doc =
        new Doc.fromProxy(new JsObject.fromBrowserObject(editor('getDoc')));

It seems like the result of editor('getDoc') was returning a JsObjectImpl. I was unable to reproduce using the example/ folder

Using the wrapper with Flutter

Is it possible to use this wrapper inside a Flutter application? If so, how could we do it?

upgrade to 5.3.0

Keeping CodeMirror up to date with bower?

Would you accept a patch that added Bower as the mechanism for updating codemirror?

Right now it looks like you've pulled in whatever was in codemirror's repository. There's a lot of unnecessary stuff in there, stuff that would get filtered out using bower install since codemirror specifies its own bower.json file.

I'm asking because the patch after that I would submit a PR to update to 4.7 (currently you're on 4.4, and missing 4.5's various fixes to horizontal scrolling). I suspect this package won't be healthy state without a very quick way of updating its dependent javascript files.

codemirror is not Dart 2 clean

Without a Travis cron it looks like we lost track of this component in Dart 2 migrations. It currently doesn't build or run.

Run the example dart file

Hey. I was checking out the simple.dart in the example/ folder.
How do I run it? My plan is integrate this in an Flutter app.

publish new version

to capture the unreleased changes in the repo (0.4.1).

provide a minified js file

codemirror.min.js

Exception when listening for changes

I'm trying to listen to codemirror field in this way:

editor.onChange.listen((e){
print('Change!!!');
});

but I get this exception when the field text is modified:

Uncaught Unhandled exception:
Closure call with mismatched arguments: function 'call'

NoSuchMethodError: incorrect number of arguments passed to method named 'call'
Receiver: Closure: (dynamic) => dynamic
Tried calling: call(Instance of 'JsObject', Instance of 'JsObject')
Found: call(obj)
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:45) (:1)

Am I listening to changes in the wrong way?

Version 0.7.4+5.65.3 appears bad. Re-spin.

Context: dart-lang/dart-pad#2263

re-enable ddc analysis

Once we're strong mode clean - blocked on some generic method work (context here: https://github.com/google/codemirror.dart/blob/master/tool/travis.sh#L18).

Current DDC failures:

warning: [DownCastComposite] onEvent('mousedown', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 207, col 41)
warning: [DownCastComposite] onEvent('mousedown', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 207, col 41)
warning: [DownCastComposite] onEvent('dblclick', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 213, col 43)
warning: [DownCastComposite] onEvent('dblclick', true) (Stream<dynamic>) will need runtime check to cast to type Stream<MouseEvent> (lib/codemirror.dart, line 213, col 43)

include the other addons and languages modes in the lib/ folder

Migrate to Github Actions for CI

expose completion.hint

As per dart-lang/dart-pad#165, expose completion.hint (https://github.com/google/codemirror.dart/blob/master/lib/hints.dart#L174).

the onGutterClick event stream is incorrect

the gutterClick event handler actually returns 3 args (line, gutter name, and the js event). It's only set up to handle 2 args, and throws exceptions when compiled under dart2js.

TextMarker.find() returns null for bookmarks

It looks like TextMarker.find() doesn't work at all for bookmarks; it always returns null, even after the bookmark was just added.

var bookmark = editor.getDoc().setBookmark(endPos, widget: span, insertLeft: true);
print("bookmark.find: ${bookmark.find()}");
print("bookmark.call: ${bookmark.call('find')}");

Result is:

bookmark.find: null
bookmark.call: [object Object]

According to the CodeMirror docs, the find() method for a bookmark returns a single value (the current position), rather than a list of two values (as with markText). The Dart code doesn't handle this case.

Workaround: use call() and handle it yourself.

var js = bookmark.call('find');
var pos = null;
if (js != null) pos = new Position.fromProxy(js);
print("bookmark workaround: $pos");

404 errors getting the resources

I'm trying to use the codemirror library but I'm getting a set of 404 errors:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/css/codemirror.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/ambiance.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/base16-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/base16-light.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/3024-night.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/3024-day.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/eclipse.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/elegant.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/erlang-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/lesser-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/mbo.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/mdn-like.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/midnight.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/monokai.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/neat.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/cobalt.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/blackboard.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/neo.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/paraiso-light.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/night.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/paraiso-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/rubyblue.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/the-matrix.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/pastel-on-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/solarized.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/vibrant-ink.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/twilight.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/tomorrow-night-eighties.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/xq-light.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/xq-dark.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/theme/ambiance-mobile.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/packages/codemirror/lib/codemirror.js

As I can see from the package explorer the lib folder is missing from the codemirror package.

events triggered by calls into CodeMirror should be delivered asynchronously

mirror.onEvent("focus", false) returns a stream of events that happens whenever CodeMirror gets focus.

Calling mirror.focus() causes an event to be delivered synchronously (in the middle of the focus call). This isn't normal behavior for a Dart stream; usually events are delivered asynchronously (such as in a microtask).

#6      _RootZone.runUnaryGuarded (dart:async/zone.dart:1087)
#7      _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:341)
#8      _BufferingStreamSubscription._add (dart:async/stream_impl.dart:270)
#9      _SyncBroadcastStreamController._sendData (dart:async/broadcast_stream_controller.dart:381)
#10     _BroadcastStreamController.add (dart:async/broadcast_stream_controller.dart:256)
#11     JsEventListener.stream.<anonymous closure>.<anonymous closure> (package:codemirror/src/js_utils.dart:62:27)
#12     JsObject._callMethod (dart:js:1132)
#13     JsObject.callMethod (dart:js:1071)
#14     ProxyHolder.call (package:codemirror/codemirror.dart:1207:46)
#15     CodeMirror.focus (package:codemirror/codemirror.dart:348:19)

dart:async not required now.

Eliminate uses of deprecated CONSTANTS

This package still uses deprecated Dart 1 SCREAMING CAPS CONSTANTS. These will be removed shortly in Dart 2. This rewriting tool is available for the migration: This tool is available for the migration: https://github.com/dart-lang/dart2_fix .

`Span` overloads `operator==` but not `hashCode`

The Span class overloads the equality operator. The documentation of Object.operator== states that:

If a subclass overrides the equality operator it should override the hashCode method as well to maintain consistency.

But there is no Span.hashCode method.

In Java I would probably write something like:

int get hashCode {
  int prime = 31;
  int result = 1;
  result = prime * result + head.hashCode;
  result = prime * result + anchor.hashCode;
  return result;
}

However, I'm not exactly sure how well this will perform in Dart, especially when compiled to JavaScript.

The best alternative I know of is the hash2 function from the quiver package.
This is what I'd usually use. I just wonder whether it is worth adding a dependency.

Pub.dev lists `codemirror.dart` as Flutter SDK

This package makes codemirror available only through dart2js and currently can't be added to a flutter application without creating a low level plugin.

The listing in pub.dev is quite misleading in that regard, as it induces flutter developers to mistakenly assume that it's a flutter package. It can take quite a frustrating amount of time and energy to put the pieces together and finally comprehend that this package only supports web through dart2js.

If there's no way to specify it's not a flutter package, there could be a mention to this at the top of the readme.