CodeMirror object requirements

[Adam Romines]

I'm working with Josh LeDuc on the Firepad React component. We're hoping to be able to use JedWatson's react-codemirror component because it (seems like it) provides a way around the issue of the CodeMirror library doing DOM manipulation itself (which React doesn't like). The problem we're running into is that Firepad doesn't seem to see the CodeMirror library when we merely include react-codemirror (which encapsulates CodeMirror, and successfully instantiates a CodeMirror instance). Firepad errors with:

Uncaught Error: Couldn't find CodeMirror or ACE.  Did you forget to include codemirror.js or ace.js?

 If we include CodeMirror separately we get

Uncaught TypeError: place is not a function

...an error from within CodeMirror that comes from a block of code meant to be some sort of IE7 workaround.

Does anyone know if there is some reason we shouldn't be able to use Firepad with this react-codemirror component? Or anything that could be done to make Firepad recognize the presence of CodeMirror?

Thanks in advance!

Adam Romines

[Michael Lehenbauer]

Sorry, I probably won't be of too much help, but a couple notes:

1. As written, firepad relies on CodeMirror (or ace) to be defined in the global scope.  So I don't know how react-codemirror works, but if it's encapsulating CodeMirror somehow so that it doesn't get defined on the global scope, then that'll lead to the first error you pasted.  
   
   I don't know how a React Component would generally consume dependencies, but if there's some tweak we can make to firepad to make it play better as a react component, I'd certainly be open to it.
   
   
2. I could imagine that if you include CodeMirror twice (once via react-codemirror and once manually) that might possibly explain the second error (but that's a big guess; it could be something else.  If you can include more details (e.g. stacktrace) it might be easier to tell).
   

-Michael

--
You received this message because you are subscribed to the Google Groups "Firepad" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firepad-io+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firepad-io/a4bfeb89-66d4-483b-b7b7-7d8f133b1919%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Adam Romines]

I was wrong about the error coming from an IE7 workaround if I include both the react component and the regular CodeMirror library (the error comes from the block of code just after the IE7 stuff). Here is a stacktrace: http://pastebin.com/LrWsiRRV

I'm noticing some differences with the html elements and js object react-codemirror creates compared to plain CodeMirror. I can see that causing issues with firepad, but I am confused that the error is coming from CodeMirror and not firepad.

Thanks so much for your response!

Adam

[Michael Lehenbauer]

So depending on how you instantiate Firepad, it'll end up calling "new CodeMirror(place)" and so if you're giving Firepad an invalid "place", then it could end up throwing an exception in CodeMirror.

In fact, if I were to take a guess from what you've said, I'd guess:

1. You're ending up with two different copies of CodeMirror loaded; we'll call them CM1 and CM2.
2. You (or react-codemirror) are creating an instance of CM1.
3. Firepad is getting CM2 from the global scope.
4. You pass an instance of CM1 to Firepad but it doesn't recognize it (this instanceof check fails) since it's testing for CM2.
5. Firepad calls new CodeMirror(cm1)  <-- where "cm1" is an instance of CM1.
6. CodeMirror crashes since cm1 is not a valid "place".

If I'm right, then the root cause is having 2 different copies of CodeMirror loaded.  You need to somehow get Firepad and react-codemirror to play together with the same copy of CodeMirror.

Good luck!

-Michael

To view this discussion on the web visit https://groups.google.com/d/msgid/firepad-io/fa09afd7-84ef-4cb2-b03e-d16c25bec1c8%40googlegroups.com.