Bug in CKEDITOR.htmlParser.fragment.prototype.add

[Aron Pasieka]

This function starts with the following:

add: function( node, index ) {
  isNaN( index ) && ( index = this.children.length );
  var previous = index > 0 ? this.children[ index - 1 ] : null;
  if ( previous ) {
    // If the block to be appended is following text, trim spaces at
    // the right of it.
    if ( node._.isBlockLike && previous.type == CKEDITOR.NODE_TEXT ) {
      previous.value = CKEDITOR.tools.rtrim( previous.value );
      // If we have completely cleared the previous node.
      if ( previous.value.length === 0 ) {
         // Remove it from the list and add the node again.
        this.children.pop();
        this.add( node );
        return;
      }
    }
  }
...

If you are adding a block-like node after a text node, it trims the text-node on the right and, if it is rendered empty, it claims to delete said text node and add the block node. However, this will only happen in the above if we are adding the node at the very end of the list of children of 'this', because we use .pop(), thereby removing the final element of the array and then add the block node to the end of the array.

The following

this.children.pop();
this.add( node );

should instead be something like

this.children.splice( index-1, 1, node );

The specific case where I am encountering this problem may not be terribly applicable, but I have a widget implementation that is upcasting LaTeX code, not requiring it to be wrapped in an HTML element. Example problematic code:

<div>

<h5>Solution</h5>

<p><strong>i.</strong> Since \(f(x)=2x+3\), 
\[
\begin{align*}
f(-6) &amp;= 2(-6)+3 \\
&amp;= -9
\end{align*}
\]
</p>


<p><strong>ii.</strong> Since \(g(x)=x^2+4x\),
\[
\begin{align*}
g(-3) &amp;= (-3)^2+4(-3) \\
&amp;= 9-12 \\ 
&amp;= -3
\end{align*}
\]
</p>

<h4>Example 2 &mdash; Part B</h4>
<p>Let \(f(x)=2x+3\) and \(g(x)=x^2+4x\).</p> 

</div>

Here, when wrapping the LaTeX code in a div for rendering by MathJax, the second align environment gets moved to the bottom of the outer div and replaces the last paragraph.