firebaseextended / firepad Goto Github PK

Collaborative Text Editor Powered by Firebase

License: Other

JavaScript 89.37% HTML 0.43% CSS 6.70% CoffeeScript 2.07% Shell 1.43%

firepad's Introduction

Firepad

Firepad is an open-source, collaborative code and text editor. It is designed to be embedded inside larger web applications.

Join our Firebase Google Group to ask questions, request features, or share your Firepad apps with the community.

Status

This repository is no longer under active development. No new features will be added and issues are not actively triaged. Pull Requests which fix bugs are welcome and will be reviewed on a best-effort basis.

If you maintain a fork of this repository that you believe is healthier than the official version, we may consider recommending your fork. Please open a Pull Request if you believe that is the case.

Getting Started With Firebase
Live Demo
Downloading Firepad
Documentation
Examples
Contributing
Database Structure
Repo Structure

Getting Started With Firebase

Firepad requires Firebase in order to sync and store data. Firebase is a suite of integrated products designed to help you develop your app, grow your user base, and earn money. You can sign up here for a free account.

Live Demo

Visit firepad.io to see a live demo of Firepad in rich text mode, or the examples page to see it setup for collaborative code editing.

Downloading Firepad

Firepad uses Firebase as a backend, so it requires no server-side code. It can be added to any web app by including a few JavaScript files:

<head>
  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>

  <!-- 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://firepad.io/releases/v1.5.10/firepad.css" />
  <script src="https://firepad.io/releases/v1.5.10/firepad.min.js"></script>
</head>

Then, you need to initialize the Firebase SDK and Firepad:

<body onload="init()">
  <div id="firepad"></div>
  <script>
    function init() {
      // Initialize the Firebase SDK.
      firebase.initializeApp({
        apiKey: '<API_KEY>',
        databaseURL: 'https://<DATABASE_NAME>.firebaseio.com'
      });

      // Get Firebase Database reference.
      var firepadRef = firebase.database().ref();

      // Create CodeMirror (with lineWrapping on).
      var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });

      // Create Firepad (with rich text toolbar and shortcuts enabled).
      var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
          { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!' });
    }
  </script>
</body>

Documentation

Firepad supports rich text editing with CodeMirror and code editing via Ace. Check out the detailed setup instructions at firepad.io/docs.

Examples

You can find some Firepad examples here.

Contributing

If you'd like to contribute to Firepad, please first read through our contribution guidelines. Local setup instructions are available here.

Database Structure

How is the data structured in Firebase?

<document id>/ - A unique hash generated when pushing a new item to Firebase.
- users/
  - <user id>/ - A unique hash that identifies each user.
    - cursor - The current location of the user's cursor.
    - color - The color of the user's cursor.
- history/ - The sequence of revisions that are automatically made as the document is edited.
  - <revision id>/ - A unique id that ranges from 'A0' onwards.
    - a - The user id that made the revision.
    - o/ - Array of operations (eg TextOperation objects) that represent document changes.
    - t - Timestamp in milliseconds determined by the Firebase servers.
- checkpoint/ - Snapshot automatically created every 100 revisions.
  - a - The user id that triggered the checkpoint.
  - id - The latest revision at the time the checkpoint was taken.
  - o/ - A representation of the document state at that time that includes styling and plaintext.

Repo Structure

Here are some highlights of the directory structure and notable source files:

dist/ - output directory for all files generated by grunt (firepad.js, firepad.min.js, firepad.css, firepad.eot).
examples/ - examples of embedding Firepad.
font/ - icon font used for rich text toolbar.
lib/
- firepad.js - Entry point for Firepad.
- text-operation.js, client.js - Heart of the Operation Transformation implementation. Based on ot.js but extended to allow arbitrary attributes on text (for representing rich-text).
- annotation-list.js - A data model for representing annotations on text (i.e. spans of text with a particular set of attributes).
- rich-text-codemirror.js - Uses AnnotationList to track annotations on the text and maintain the appropriate set of markers on a CodeMirror instance.
- firebase-adapter.js - Handles integration with Firebase (appending operations, triggering retries, presence, etc.).
test/ - Jasmine tests for Firepad (many of these were borrowed from ot.js).

firepad's People

Stargazers

Watchers

Forkers

ngedmundas prabhjotsl dai jamon8888 phillehmann hms-teach e70838 nkavanagh ctraweek r351574nc3 timmensch rusintez mako-taco jbogp sanjaytalreja naturaldoc inlinecode goldblade pmnathan zhongwei0752 coolcloud diyjack todun hiearth john-kuo taitsnoopy easonoutlook i5ting vaibhavmano huruyizhenfeng ajbetteridge marcheiligers dawnee kennychung rmanalan domu904 circuitbomb mariobinder lvchaocai opensorceress jhona22baz dev-life hfeeki jtrick dylanjha cloudcache drrr chrisalbright legutierr nwlinux wuxq arnsch williamfromtexas suekhim mbreese takuan-osho shipow miffy408 panyuntao phaufe paultreny blazingcloud liveminutes bags307 gilhyun georules jonparker szs8 mattashweta writerduet logicart auchenberg minskybelieve ekebrab pac temple yoelcieno lawrence1789 petdoan generaleye leggetter shaggyone mfrbakery pchestek eduardolagares soft00null jgrimes jhead12 beholdenon sandi-ga roypeled aakashapoorv taptotweet itscaro nwinter ljy520yzy ducbin alchemisthq speedo-spin ethanliew

firepad's Issues

It is possible to insert image, iframe, another firepad instance into text?

Feature request to insert image, iframe, another firepad instance into text

Markdown parser/serializer to build visual markdown editor

I've been thinking that adding a markdown parser, and potential markdown output to Firepad, would make Firepad the ideal visual markdown editor.

You already did the work on adding per-word-formatting to CodeMirror, and store the internal state in a object model. We just need to build a markdown parser (similar to the html parser), and markdown serializer, and we have a really promising markdown editor.

What do you say?

Image Support: parentClass option should enable to add a class to the widget (not the 'img')

I've been playing a bit with the image support, that's really cool. But checking a bit how it works once you've added an image, I've found that it seems useful to be able to play directly on the widget (for instance to have a full blank line with just an image, the best way is to margin: 0 auto; and text-align: left/center/right; while positioning the 'img' directly results in bad CM interpretations of line positions, etc).

Example to help upload an image by drag-n-drop (BAD, directly in Firebase…!):

CodeMirror.setOption('onDragEvent', function(cm, e) {
        var isImage = event.type == 'drop' && event.dataTransfer.files && event.dataTransfer.files.length > 0 && event.dataTransfer.files[0].type && event.dataTransfer.files[0].type.indexOf('image/') > -1;
        if (!isImage) return;

      event.preventDefault();

      var reader = new FileReader();
      var fp = this._fp;

      reader.onload = function(event) { 
        var img = new Image();
        img.onload = function () {
            fp.insertEntity('img', { 
              'src' : event.target.result,
              'width' : this.width,
              'height' : this.height
            });
        };
        img.src = event.target.result;
      };

      reader.readAsDataURL(event.dataTransfer.files[0]);

      return true;
}.bind(this));

Fix handling of out-of-order CodeMirror changes.

There's a TODO in RichTextCodeMirror.onCodeMirrorChange_ that I need to deal with. It may be resposible for these exceptions Vincent Woo (coderpad) is seeing:
https://app.getsentry.com/coderpad/coderpad/group/6459436/events/118903453/

List items >9 don't render correctly.

Need to tweak some CSS to avoid the numbers wrapping to two lines.

Synchronized selection is too tall.

If you have a big font, other users' selections overlap the text above/below slightly.

Copy/Paste should preserve styling

There are three discussions here:

how to make rich copy/paste fully compatible within Firepad
how to preserve rich copy/paste fully compatible within Firepad from interfering with other apps (e.g. the issue with special chars appearing when you copy paste in other apps => oncopy event ?)
how to make rich copy/paste compatible with other apps (mainly I guess to make basic styling compatible with apps as a Text Editor / Word)

Regression on lists support

Following: #54

Hi Michael, it sounds like there is an issue with this fix as it mostly breaks the list support:

if you create a list and try to hit enter on an empty line, it won't work
todos are no longer working (can't be clicked)
text alignment is also broken
The selection issue is clearly improved, though there's still some very tiny issue with a space which appears selected on the next line.

Tell me if I can help!

Dragging text doesn't properly delete the old text for other clients.

Reported by Guy. The drag/drop works correctly on the local client, but on other clients they only get the insert. Not sure why. I either need to fix that or disable drag/drop (ondragstart='return false;').

Caret position incorrect after pasting text into Firepad

This is an easily reproduced bug even on Firepad.io. Just copy-paste a paragraph of text in and try navigating through it with arrow keys and typing or backspacing. Caret is way off.

Add a spell checker

The browser spell check doesn't recognize text inside a firepad. Either a spell check integrated into firepad or a workaround for browser spell check would be very helpful.

Add H1, H2, H3, H4... titles

It'd be nice to have the capability of organizing a firepad document with various headers, rather than having to use font / font size / font color to make headers ourselves.
Supporting titles like H1, H2, etc would be nice.

Line spacing options

Add general line spacing like in most document editors, 0.5 line spacing, 1.0 line spacing, etc.

Multiple Independently Styled Firepads on a Single Page

Hey Mike,

Really love Firepad. I'm new to the development scene so the answer to this might be
obvious, but I was wondering what the best protocol is for calling multiple independently styled firepads onto a single page?

Thanks
-emjoseph

When selecting line and applying non-line attributes, attributes also applied to the next line and difficult to remove

Pressing enter should always preserve text attributes from previous line.

This seems to work sometimes, but not always. Not sure why.

Add Ace Editor Support

http://ace.ajax.org

Firepad dropdown buttons not working on Firepad.io

Using Chrome

Clean up cursor movement.

Right now, cursor updates are always initiated by the user that owns the cursor. This means when you make edits locally, other users' cursors lag a bit in updating properly. We should transform other cursors automatically based on the edit.

getHtml() throws error

Encountered unknown attribute while rendering html: l

This is an "l" character that is used for LINE_SENTINEL , the error occurs while iterating through HTML attributes in getHtml() function.

Does it scale?

How many concurrent connection does firepad support?

Toolbar overflows when firepad is too narrow.

See the userlist example on http://www.firepad.io/examples/#-tw4OVAOGRu

I tried to fix this with "overflow-x: hidden" but apparently that switches overflow-y to auto and so you get a scrollbar. Need to mess around with it.

Make toolbar respond to active rich text options.

When you're bolding text, the bold icon should be highlighted, etc.

Add rich text support to copy/paste.

Add easy way for an entity to modify its own attributes.

Clement brought up the use case where you want to drop in an image but then have a way to resize it (dragging on the corners, some sort of explicit properties UI, or whatever). Right now it would be difficult to do that. You can attach event handlers to the rendered entity easily, but you don't have an easy way to go back and modify the entity in the Firepad contents.

Perhaps when you are asked to render an entity you should also be provided an "update" callback method that you can use to update the entity. E.g. Something along the lines of:

this.registerEntity('img', {
  render: function(info, update) {
    var elt = // ... create dom element.
    // double the width when clicked!
    elt.onclick = function() { 
      info.width *= 2;
      update(info);
    };
    return elt;
  },
  ...
});

Cursor displays in incorrect position after pasting large text blob

Pasting in a large amount of text appears to mess with the cursor position to the point where it displays mid-letter or even several characters to the right. Using the latest Chrome the issue is demonstrated by this fiddle.

Side note: This may be unrelated but that fiddle appears to break Firepad and keep any editing from occuring in Firefox 22, I'm not sure if this is jsFiddle or Firepad breaking in this case.

Implement html import.

Firepad.io Example #3 Toolbar is too wide

Example #3 on the Firepad.io website is too wide since the addition of new items to the Firepad toolbar.

Uncaught Error: Shouldn't have a non-indented list.

Attempting to create a list does not seem to function properly (it seems like items are put into li's but they aren't wrapped in a ul/ol, maybe?). Calling getHtml() results in the above error. I don't have any more information or ideas, but here is a fiddle demonstrating it http://jsfiddle.net/ch7K5/.

Make CSS style attributes dynamic

This could be a first implementation (i.e. exiting firepad.css remains, but additional props can also be used)

GetHtml is not compatible with lists

CodeMirror.markText() should trigger an op

Currently, using CodeMirror.markText() to add classes to content does not get picked up by Firepad. Is this intentional?

getHtml infinite loop

Browser getting to 100% CPU and no way to find which changes had lead to this… but I've finally found it: there's something with getHtml (I'll try to investigate tomorrow, but maybe you'll have an idea before me!)

Add paragraph indent.

Add lists (ordered and unordered)

Make cursor tracking less obnoxious with many users.

Right now, most people's cursor end up at the end of the document and they all move together as people make edits. And, exacerbated by #3, this can be pretty jarring.

Might make sense to do one/both of the following (need to experiment a little):

Ensure cursors start at the beginning of the document.
when another user makes an edit at the location of your cursor, don't track it forward. Keep it at its existing location.

Consider keeping build/firepad.js and build/firepad.js.min in the repository

Would ease the use of firepad as a submodule dependency. You might also want to add this as a package on NPM.

getHtml() returns markup with excessive styling.

Specifically this style tag is included in all generated HTML, even if no ul.firepad-todo exist.

 <style>ul.firepad-todo { list-style: none; margin-left: 0; padding-left: 0; } ul.firepad-todo > li { padding-left: 1em; text-indent: -1em; } ul.firepad-todo > li:before { content: "\2610"; padding-right: 5px; } ul.firepad-todo > li.firepad-checked:before { content: "\2611"; padding-right: 5px; }</style>

Unless I'm missing something, this isn't needed unless the todo lists are used.

Error: pos exceeds the bounds of the AnnotationList

I'm attempting to get Firepad set up and initialized on a page but I'm having some troubles. Specifically I get this error when I attempt to type anything into the Firepad (which appears and renders completely normally):

Uncaught Error: pos exceeds the bounds of the AnnotationList firepad.js:1163
firepad.AnnotationList.AnnotationList.getAnnotatedSpansForPos firepad.js:1163
firepad.RichTextCodeMirror.RichTextCodeMirror.updateCurrentAttributes_ firepad.js:2928
firepad.RichTextCodeMirror.RichTextCodeMirror.getCurrentAttributes_ firepad.js:2914
firepad.RichTextCodeMirror.RichTextCodeMirror.onCodeMirrorChange_ firepad.js:2739
obj.(anonymous function) firepad.js:3135
signal codemirror.js:5139
endOperation codemirror.js:1378
readInput codemirror.js:1469
p

You can see how my files are set up here http://jsfiddle.net/r4uxC/. This uses the versions of the files hosted on Firepad.io because I slowly switched my local versions for the hosted versions in an attempt to fix the issue. The demo firepad on Firepad.io functions without any error so I don't know what could possibly be causing mine to not function.

This issue exists in modern versions of Chrome and Firefox. I have to suspect that I'm just missing something dumb but I sure can't figure it out.

Synchronized selection draws over local selection.

The problem is CodeMirror draws your selection on a layer behind the text, but other users' selections are drawn as a background color on the text itself, so they completely hide your own selection.

Entity remove handler may break undo (cursor position broken)

See example provided

Sync alert

Alert if the text is synced with the server. At times what I write is not synced correctly so

What I write is not visible to other users on the same pad, only a part of it is.
On reload, I get part of what I wrote.

Enable safe copy/paste (issues with lists inside)

If you copy paste (even within the same Firepad) some lines containing line attributes, you lose the ability to change line attributes within this Firepad (or lines at least?).

If you try to toggle the list type for instance, it won't work. But if you refresh the page, the previous action will finally have effect. So this is mainly a visual issue, probably related to the sentinel characters? (cf. if you copy paste from Firepad to a classic text editor you'll see the special char appear at the beginning of the lines: my guess is that may well be the cause for what happens in this issue?)

Hiding a firepad element should hide all cursors.

Clement reports that this doesn't always happen.

Changing font size generates "pxpx" in style

When changing font-size Firepad generates a tag that looks like this:

<span style="font-size: 34pxpx">Hello</span>

Although functional everywhere I tested, this is obviously not ideal. Here is a fiddle for proof http://jsfiddle.net/ch7K5/.

setInterval(function() {
  firepad.setText('Always Wrap The JavaScript!');
}, 100);

Add a bower.json file

It would be useful to have a bower.json file for installing Firepad via bower.