CKEditor exception in Firefox

[Alan]

Please see comment:4 and comment:5 for more details.

Our web app has been generating countless exceptions in CKEditor. I have finally been able to reproduce one of them. For the demo please visit '​http://jsfiddle.net/ftey46fc/3/' and follow these steps in the editor in the lower right:

1) Type three lines of text with the letters a, b, and c on them (one

letter per line).

2) Select the first two lines and make that a numbered list. 3) Select all three lines and change to a bulleted list.

An exception is generated "TypeError: a is null".

This error is caused because when bookmarks are selected/restored in the selectBookmarks function the starting bookmark has been removed thus it fails to select it in the moveToBookmark function so startNode is null and the setStartBefore call will a null parameters throws an exception. I changed said function during me debugging to:

setStartBefore: function (node) {

if (node == null) {

console.log('* About to throw an exception');

} this.setStart( node.getParent(), node.getIndex() );

}

to better illustrate that.

Why has the bookmark been purged? Well the long story is that a <li> with the start bookmark gets added before the two existing <li>s and so the first <li> has no text in it and it's purged by the 'changeListType' function, but it all seems to come down to the getNative function that looks kind of (this is my debug version now) like this:

getNative: function() {

if ( this._.cache.nativeSel !== undefined ){

return this._.cache.nativeSel;

} if(isMSSelection){

this._.cache.nativeSel = this.document.$.selection;

}else{

var win = this.document.getWindow(); this._.cache.nativeSel = win.$.getSelection();

}

console.log('* new native selection = anchor = ' + this._.cache.nativeSel.anchorNode.nodeName + ' focus node = ' + this._.cache.nativeSel.focusNode.nodeName); return ( this._.cache.nativeSel );

}

which I have modified to break complex lines into pieces and add the logging. When this returns the selection via getSelection the focus node SHOULD be on the 'a' #text node, but it's actually on the OL node. This works fine in Chrome and usually works fine in FireFox, but the CSS I inject into the document seems to trigger this problem. Remove that and it works fine.

That makes me question whether this is actually a Firefox bug that needs to be worked around, but I don't know my browser specs. In any event one quick fix I've done to code around this was a patch to the moveToBookmark function that basically verifies that the startBookmark was found but

a) I don't know the extent that this kind of bug is going to have

on the rest of the system. If there are other places where the start bookmarks premature removal is going to wreak havoc then I'd like to know about it.

b) I don't know if there are other cases where we're going to see this

type of problem because of other CSS that Firefox/CKEditor doesn't work with properly. Like I said we're seeing all kinds of exceptions coming from CKEditor and it could all be permutations of this bug. I don't know yet.

c) When the exception occurs it leaves the end bookmark span in the

HTML and it seems that that can cause later problems.

Let me know if there's any additional info I can provide. I'm just glad to finally get this bug in a form reproducible outside of our code base.

• Thanks, Alan

[Alan]

Now I see at least one reason this hasn't had a response... I posted the wrong demo link. It should be:

​http://jsfiddle.net/ftey46fc/12/

[Jakub Ś]

Hi. I have checked your fiddle but didn't get this error. I have tried in Firefox, Blink and IE.

My TC steps (Have I done something wrong here?):

1. Type a, Enter, b, Enter, c
2. Select a,b with mouse and make is numbered list
3. Click next to a element to remove selection (I have also tried not removing existing selection and select last element with keyboard)
4. Make all a bullet list

Result: Bullet list and no errors.

I have tried in Windows and Mac.

---

Any tips telling me how to reproduce this problem are more than welcome.

[Alan]

If you're not seeing the exception then you're not doing it correctly :-)

1. No need to try other browsers... FireFox is all you need.
2. I'm running Windows 7 to do this.
3. Not sure about your step 3... you will see an exception in the console log after selecting the first two lines and creating a numbered list and then selecting all three lines (a and b being part of a numbered list and c being a separate <p>) and then converting that to a bulleted list.

I am in the process of uploading a video of what I am doing to YouTube so hopefully that will clarify the steps needed to recreate this exception.

[Alan]

At ​http://youtu.be/FEQBQOQsknU you will see a video of the bug starting with navigating to ​http://jsfiddle.net/ftey46fc/12/ in FireFox.

0:00 I show the URL of the page (​http://jsfiddle.net/ftey46fc/12/)

0:10 Show Firefox version is current (36.0.1)

0:24 Show current status of the web console

0:35 Type lines a, b, and c into the editor

0:41 Select the three lines (not necessary - this was an accident)

0:45 Select the first two lines

0:48 Click on numbered list button

0:50 Select all three lines

0:54 Show web console and that no exceptions have been generated

1:00 Click on bulleted list button

1:06 You can see the triggered exception in the console log

• Thanks, Alan

[Jakub Ś]

I was able to reproduce this issue from CKEditor 4.0 beta in Firefox.

Error:
Message: node is null
Code: this.setStart( node.getParent(), node.getIndex() );
URI: range.js
Line: 1765

The important things are inserting styles into CKEditor document header and selecting list from bottom to top. Another important thing to note is that removing 'list-style: inside;' solves the problem