Exposing third-party lib (Firepad) methods in a React component

Question

I've been searching for answers to this for a couple of weeks now, and I've read through everything related I could find (on SO, in React's docs, in the source for related libraries like react-codemirror, etc.), and can't find an answer I can understand. I'm kind of weak on React, and that's probably where I'm falling down.

I'm working on a project built in React (called Pharaoh, a browser- and desktop-editor meant for the classroom) that uses Firepad (and so, uses Firebase and CodeMirror, which I love). I've used all of the above technologies a bit, including writing a desktop Markdown editor thing using CodeMirror and a few demo/practice apps using Firebase. My issue here is almost definitely one of just not understanding React all that well.

What I'm trying to do is get the ability to save files out of our Firepad/CodeMirror instance (to the desktop). I know generally how to use FileReader and the HTML5 Filesystem API, and this could even be done potentially with node-fs, since my target here is our desktop app (which runs on NW.js).

CodeMirror has some really useful methods like editorName.codeMirror.doc.getValue() which would work perfectly; Firepad has the even simpler editorName.firepad.getText() (and .setText() which I'd also end up using to load in files from the filesystem). I know how these work, and can see how I'd take what they return and save it out, that's no problem. My problem is that I can't actually access those methods. This is probably some silly thing I should just know about accessing methods from third-party libraries or from components in general, but I'm kind of stumped on it. A tool I frequently use at work, Codeshare.io, which I believe is built in React and uses Firepad, has those methods exposed, so I'm about to dig into their source (yay for cURL) and see if I can find any answers, but anything quicker would be really super helpful.

Thanks muchly!

Note: I guess I need to earn more SO reputation; removed/altered a bunch of links before posting.

Answer 1

Use these npm packages - brace, react-ace, firebase, firepad.

Since firepad needs aceto be present globally, assign brace to global var like(not the best way, but works) before importing firepad

import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';

Use ref to get instance of ReactAce and initialize it in componentDidMount using:

new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);

Similarly for CodeMirror editor.

Hoping, this would be of some help.