google / codemirror.dart Goto Github PK

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.

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

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

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)

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

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.

codemirror.min.js

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 .

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

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

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

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

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.

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.

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)

#87 / 0.5.1+5.44.0

#51

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

Can you provide some examples of flutter

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

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

Context: dart-lang/dart-pad#2263

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

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.

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.

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

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?

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

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?

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.