EzDev.org

firepad

firepad - Collaborative Text Editor Powered by Firebase


Firebase JSON Security and Arrays

We'd like to use Firepad in our (mostly non-Firebase hosted) project, but we're having some troubles figuring out the best way to approach the problem.

Basically, we have many users, and each user can be a member of many groups. These "groups" each have their own Firepad which users can edit. We already have a deeply developed database structure using MySQL and don't really want to migrate our user data into Firebase right now, so we figured we'd get more creative.

We don't want users being able to edit the Firepads of groups they do not belong to. As such, as part of our authentication token, we figured we'd try sending along the user ID and the list of groups they belong to. Then, using the Firebase JSON security system, we could verify that the Firepad currently being edited is in the list of groups the user belongs to.

The problem is, the JSON system doesn't seem to accept many commands. There's no indexOf, and I can't call hasChild on the auth variable.

How can we ensure that users can only edit the Firepads of groups they belong to, without migrating all of our data to Firebase? (Or maintaining two copies of the database - one on MySQL and one on Firebase)


Source: (StackOverflow)

Proper authorization rules for protected content in firebase

Is there a best practice approach to proper authorization rules for protected content in a firebase app

  • using firepad specifically
  • By protected content I mean where a user creates a document and only shares it with certain other users).
  • Also I need to be able to query firebase for all documents that i have access to (docs that I created and docs other users shared with me)

Some of my research thus far:

Method 1: Secret URL

  • I need to know the URL to be able to view/edit the document

  • Not real authorization, as any logged in user that has access to that URL could edit/modify it.

  • Cant index all the docs i have access to

Method 2: Using firebase authorization rules to add users to a document and check if user is document.users before reading/writing.

Taken From: Protected content in Firebase possible?

{

"documents": {

   "$documents_id": {

       // any friend can read my post

       ".read":  "auth.id === data.child('owner').val() || root.child('users/'+data.child.owner.val()+'/users/'+auth.id).exists()",

       // any friend can edit my post
       ".write": "auth.id === data.child('owner').val() || root.child('users/'+data.child.owner.val()+'/users/'+auth.id).exists()"

   },

   users:{

   // List of user.ids that have access to this document

   }

}

}

Pros:

  • Proper authorization/authentication. Only authenticated users who have been granted access can view/edit.

Cons:

  • Cannot query for all documents a user is allowed to edit (those that I own or have been shared with me) (Is this assumption correct?)

Method 3: Firebase authorization rules (method 2), plus a redundant store of users with array of document_ids each users has access to. This user store would only be used to query all the documents a user has access to. ie:

{
"documents": {
   "$documents_id": {
       // any friend can read my post
       ".read":  "auth.id === data.child('owner').val() || root.child('users/'+data.child.owner.val()+'/users/'+auth.id).exists()",
       // any friend can edit my post
       ".write": "auth.id === data.child('owner').val() || root.child('users/'+data.child.owner.val()+'/users/'+auth.id).exists()"
   }
},
"users":{
    "$user":{
        ".read": "auth.id=$user.id",
        ".write": "auth.id=$user.id"
        "$documents":{
            // All the documents i have access to. This list gets ammended whenever I am granted/stripped access to a document.
        }
    }
}
}

Pros:

  • Proper authentication/authorization

Cons:

  • Duplicate data, have to deal with synchronization issues between two data stores. This just doesnt seem like a good idea.

Method 4: Groups

Using groups per Granting access to Firebase locations to a group of users

  • We have a group for every document in data store

  • Cant easily query firebase for all the docs a user can access

Is there a better way to do this?


Source: (StackOverflow)

Real time collaboration with CodeMirror

I started this little project where I would do real time collaboration on code using CodeMirror.

I have a msgs system setup such its easy to pass objects from one user to another. My problem is getting it integrated with CodeMirror. I found out that it have events for onchange and a replaceRange(string, from, to).

I pass the onchange objects to the other users and uses the replaceRange to update the view. Problem is then when using replaceRange, it triggers an new onchange and it sends msgs back and forward. Anyone know if there are some way of updating the local view without it triggering an onchange. Or suggestings for other paths to take. (the msgs system is already set up and its easy to pass javascript objects to other clients).


Source: (StackOverflow)

Firepad fetch and save the content

What I need is to save the content (html) of firepad periodically in a database.

I tried to save that information with a cron service which call a page that with an ajax request send the content to a second php page that do the job.

If I call manually this url all work, but if the url is called by the cron service javascript doesn't execute.

How can I do this?


Source: (StackOverflow)

How do I get the latest Firebase and Firepad version from Firebase cdn?

The firebase CDN does not appear to have an API or a "latest" tag. The suggestion is:

<script src="https://cdn.firebase.com/js/client/2.2.9/firebase.js"></script>

A quick google shows that different sites have a lot of different version loading. I know I forget to update when I am forced to ask for a specific version.

The question is how can I infer the versions for firebase.js and firepad.(js|css) from a browser request?


Some examples...

enter image description here

enter image description here

enter image description here


Source: (StackOverflow)

Firepad's color button does not change color of the text

I am using the userlist.html given in github. However the color drop down does not change the color of the text. Everything else works as expected. I also do not get any error in the console.

PS: I am using codemirror with firepad.

Any help is appreciated :)


Source: (StackOverflow)

How to find the text storage location of the firepad editor and how to clear the editor

I'm trying to create a custom editor for my personel need, Is there any way to delete the data which was entered by me before when I refresh the page?


Source: (StackOverflow)

Read array Objects from Firebase + Firepad + Ace Editor

I am storing the data to the Firebase when the user starts typing in the ACE editor with the help of firepad.

The data is stored in the Firebase like an Array. Each character in array index.

I just typed "Hi Its" then "Hi Its Nithi" then inserted "Hi Its Me Nithi"

It's really hard to read the data with key, value, array, index with -ve value.

Is there any plugin to convert handle the index?

Data:

B11
o
    0: 7 
    1: -1
B12
o
    0: 7
    1: "N"
B13
o
    0: 8
    1: "ithi" 
B14
o
    0: 7
    1: "M"
    2: 5
B15
o
    0: 8 
    1: "e"
    2: 5

Am really tired by constructing a code like :

Which grow and getting more complex.

codeTimeFirebaseRef.on('value', function(snapshot) {
        var data = snapshot.val();
        var i = 1;
        var jsonData = {};
        var jsonDataArray = {};
        async.forEach(Object.keys(data), function(key) {
          var code = data[key];
          if (code.o.length === 1) {
            if (jsonDataArray.length > 1) {
              jsonData.answer = jsonDataArray;
              codes.push(jsonData);
              i++;
              jsonData = {};
              jsonDataArray = {};
            } else {
              jsonData.index = i;
              jsonData.time = code.t;
              if (typeof code.o[0] === 'string') {
                jsonDataArray = code.o[0];
              } else if (typeof code.o[0] === 'number') {
                jsonDataArray = jsonDataArray.substring(0, code.o[0]);
              }
            }
          } else {
            if (typeof code.o[1] === 'string') {
              jsonDataArray += '' + code.o[1];
            } else if (typeof code.o[1] === 'number') {
              jsonDataArray = jsonDataArray.substring(code.o[0], code.o[1]);
            }
          }

Please help to get through.


Source: (StackOverflow)

getSelection won't find selected text for me in custom text input

I'm using the new Firepad realtime text collaboration service.

I would like to use the JavaScript getSelection method on text in the box that the user selects.

However, my code isn't working for whatever reason.

My JavaScript:

function myFunction()
{
    alert(window.getSelection());
}

HTML:

<button onclick="myFunction();">Get Selected Text in Firepad</button>

My test site


Source: (StackOverflow)

How can I make add firepad to my reactjs project?

So I've been learning react, and wanted to make a basic firepad instance. My current setup is having one container div in my index.html, and having all of my react components rendering through that div. My current attempts and the code I'm showing with this have been in an environment with gulp and browserify, but I'm also playing around with ES6 and webpack. So I'm pretty flexible about getting this working as I learn. Here's the code:

"use strict"

var React = require('react')
  , Firebase = require('firebase')
  , fbRoot = 'myURL'
  , CodeMirror = require('codemirror')
  , Firepad = require('firepad')
  , firepadRef = new Firebase(fbRoot + 'session/')
  , myCodeMirror = CodeMirror(document.getElementById('firepad'), {lineWrapping: true})
  , myFirePad = Firepad.fromCodeMirror(firepadRef, myCodeMirror, { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!'});

var WritePage = React.createClass({
  render: function(){
    return (
      <div>
        <div id="firepad"></div>
      </div>
    );
  }
});

module.exports = WritePage;

The first error I was getting was that it couldn't find the codemirror.js file. Although CodeMirror was being correctly defined in Chrome's dev tools, I moved that from requiring the npm package to just linking the 2 needed codemirror files to my html. It then gave me an error about not being able to take .replaceChild of undefined. I then tried moving all of the dependency files over to my index.html, but still had the same .replaceChild error. Anyone have any experience with react and firepad? I read in the reactfire docs that it's one way binding from firebase to my site, which for my case making a read-only firepad would be fine. Like I said, I'm flexible all of this stuff is new to me.


Source: (StackOverflow)

Firepad text editor - text area not showing

I'm following the instruction from here to create a firepad editor.

my code is:

    function init() {
      var firepadRef = getExampleRef();
      var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
        lineWrapping: true
      });
      var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
        richTextToolbar: true,
        richTextShortcuts: true
      });
      firepad.on('ready', function() {
        if (firepad.isHistoryEmpty()) {
          firepad.setHtml('<span style="font-size: 24px;">Rich-text editing with <span style="color: red">Firepad!</span></span><br/><br/>Collaborative-editing made easy.\n');
        }
      });
    }

    function getExampleRef() {
      var ref = new Firebase('https://firepad.firebaseio-demo.com');
      var hash = window.location.hash.replace(/#/g, '');
      if (hash) {
        ref = ref.child(hash);
      } else {
        ref = ref.push();
        window.location = window.location + '#' + ref.key(); // add it as a hash to the URL.
      }
      return ref;
    }
    init();
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>

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

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

<div class="page-content">
  <div id="firepad-container">
  </div>
</div>

The problem is i got the button for option as shown in the figure.

enter image description here

but the text field is not coming, even i mention the correct id. The original will be like this.

enter image description here

what i'm doing wrong. is there any other text editor available to work with?


Source: (StackOverflow)

Using firepad with node.js

How would I modify the text in a firepad editor on my webpage using Node? What I'm trying to do is have the user upload a file, then read the contents of the file, and replace the firepad contents with the uploaded file's contents.

I see that there's a firepad npm module https://www.npmjs.com/package/firepad, but it doesn't say how to use it with node. I currently have it setup in my html and using a normal public js file in my node project.

So I was thinking that to update the text, I could either send a post request with the text, and my client side js would receive it and then update the firepad since it has access to the firepad variable there.

Or I could use the npm module, but I'm not sure if it's a full module.


Source: (StackOverflow)

How do you apply security rules to Firepad?

I'd like to secure a Firepad. After my research, I discovered https://github.com/firebase/firepad/tree/master/examples/security, which lists some rules in .json for securing a Firepad. I have looked extensively at the Firepad docs, but cannot figure out how to apply the example security rules when initializing a Firepad.

How do you initialize a Firepad using the example security rules embedded in JSON (referred to above)?

EDIT 01: I can see that Firebase lets you configure the rules, I'm interested in finding out how to APPLY these rules. For example, if I initialize a Firepad like this:

var firepadRef = new Firebase('MYURL');
var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
    { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!' });   

how do I incorporate the rules in JSON? As an option to the Firepad.fromCodeMirror() call? As some sort of parameter to the new Firebase() call?


Source: (StackOverflow)

code replay reading object in each revision Id using firepad+firebase+ace

I am using firebase, firepad and ace technology. I am able to write a document by firepad and ace and stores it in firebase, at different times.I see history being generated in firebase. Next thing is I need to add piece of code, where I can retrieve the document at any point in history. I wrote the following code:

sObj.once('value', function(historySnapshot){
// Get each revision Id
    historySnapshot.forEach(function(itemSnapshot) {
        var name = 'history/'+itemSnapshot.name(); 
        console.log(name);
        var idref = sObj.child(name);
        /* Here I can read each revision object, find the operation  and apply that change
           in ace editor */

    });
});

One way to read revision object is JSon parsing, know what operation is there. Apply that operation on the editor. constructing code what operation corresponds to what can be tedious.

Other than this are there any functions, which can avoid parsing and can directly tell me what operation to apply.

I saw getText function but that tells the current value. I need to see value at any point in the given history.


Source: (StackOverflow)

How to fetch string in particular key in firebase

I have firebase data as below:

chats
| 
|
+ - - -simplelogin48simplelogin50
|    
|     
|
+ - - simplelogin50simplelogin48 
|
|     
|   
+ - - -simplelogin48simplelogin50

Now I want to fetch chat data which contains "simplelogin 48". Is it is possible?


Source: (StackOverflow)