firebaseextended / firepad Goto Github PK

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.

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?

/k

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!

Just struggled to build a project as... 'export' is a reserved keyword in JS (or at least we should warn people — as ignorant as me — about the issue ;-))

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.

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

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.

CodeMirror is compatible, but when trying to open Firepad on iOS, the keyboard is dismissed instantly

http://ace.ajax.org

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.

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/

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;').

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.

How many concurrent connection does firepad support?

Clement reports that this doesn't always happen.

Entering the following in console can destroy all the work and stop others from continuing:

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

See example provided

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

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

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

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.

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

It should handle this gracefully.

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?)

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/.

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

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.

Using Chrome

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.

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)

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):

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

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

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.

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));

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

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

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!)

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

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

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

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

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.

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/.

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

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;
  },
  ...
});