Unable to get Firepad to work properly

StackOverflow https://stackoverflow.com/questions/19470628

Question

I created a Firebase (https://mkaminsky.firebaseio.com/), and am attempting to use Firepad to create a code collaboration tool. I created this html file, as said in the example(https://github.com/firebase/firepad/blob/master/examples/code.html).

<!doctype html>
<!-- See http://www.firepad.io/docs/ for detailed embedding docs. -->
   <html>
      <head>
         <meta charset="utf-8" />
         <script src="https://cdn.firebase.com/v0/firebase.js"></script>

         <script src="codemirror/lib/codemirror.js"></script>
         <script src="codemirror/mode/javascript/javascript.js"></script>
         <link rel="stylesheet" href="codemirror/lib/codemirror.css" />

         <script src="firepad.js"></script>
         <link rel="stylesheet" href="firepad.css" />
         <style>
             html { height: 100%; }
             body { margin: 0; height: 100%; position: relative; }
             .firepad {
              position: absolute; left: 0; top: 0; bottom: 0; right: 0; height: auto;
              }
         </style>
   </head>
   <body>
      <button type="button">Test</button> 
      <div id="firepad-container"></div>

      <script>
         //// Initialize Firebase.
         var firepadRef = new Firebase('https://mkaminsky.firebaseio.com/');

         //// Create CodeMirror (with line numbers and the JavaScript mode).
         var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
           lineNumbers: true,
           mode: 'javascript'
         });

         //// Create Firepad.
         var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror);

         //// Initialize contents.
         firepad.on('ready', function() {
           if (firepad.isHistoryEmpty()) {
            firepad.setText('//hello');
           }
         });
    </script>
</body>
</html>

However, this code does not work as it should. It displays the code editor, complete with syntax highlighting, but does not execute the "setText('//hello');" method. Any other commands put in its place also do not work.

In addition, the button is not displayed in the html page.

I have tested and verified that the Firebase works properly.

Was it helpful?

Solution

Could it be the isHistoryEmpty() code doesn't run for you simply because it worked once and now the history is not empty?

$ curl  https://mkaminsky.firebaseio.com/.json 
{"users":{"-J6J90xrR-D-XC6WE23F":{"color":"#d5b3ff"}},"history":{"A0":{"a":"-J6HUBET5icmC-yXAkJb","o":["//hello"]}}}

Try clearing your firebase or using a fresh namespace for the firepad documents. The easiest way to test fresh namespaces is

Firepad.fromCodeMirror(firepadRef.push(), codeMirror);

which consistently runs the isHistoryEmpty() branch for me (tested on https://cben-sandbox.firebaseio.com/, Chrome & Firefox).

OTHER TIPS

It's most likely missing CSS formatting. As per the documentation, add the following CSS rule: 

.firepad {
  width: 700px;
  height: 450px;
  background-color: #f62; /* dark orange background */
}

Before CSS Styling Before CSS Styling After CSS Styling After CSS Styling

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top