How to add Firepad to a reactjs app

Question

I am trying to add Firepad to a reactjs application. Here is my code

import React, { Component } from "react";
import firebase from "firebase";
import Firepad from "firepad";
import CodeMirror from 'codemirror';

class CourseNotes extends Component {
  componentDidMount() {
    var firepadRef = firebase.database().ref();
    var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
            richTextShortcuts: true,
            richTextToolbar: true,
            defaultText: 'Hello, World!'
          });
  }

  render() {
    return (
      <div>
        <div>testing </div>
        <div id="firepad" />
      </div>
    );
  }
}

export default CourseNotes;

I've tried a few things to no success. Other solutions on stack overflow include adding these script tags to the html but that didn't seem to work.

<!-- CodeMirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css" />

<!-- Firepad -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>

Any advice would be much appreciated.

Answer 1

For anyone else who comes accross this question. I eventually figured it out.

The issue was the way create-react-app builds itself.

To use imported scripts just prepend "window." before the firebase and codemirror functions. IE:

var codeMirror = window.CodeMirror(document.getElementById('firepad'), { lineWrapping: true });

Answer 2

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

Since firepad needs ace to 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.