mirror of
https://github.com/fastmail/Squire.git
synced 2025-01-03 05:00:13 -05:00
Better algorithm for remove all formatting action.
1. Keeps all leaf nodes not just text nodes, so images etc. are not removed. 2. If the selection is not within a single block, it is expanded to the edges of the blocks rather than splitting the blocks; this is unlikely to have been what the user wanted. 3. More efficient tree traversal and manipulation; no duplication of nodes. 4. Records undo state before performing the action.
This commit is contained in:
Neil Jenkins
parent
d9872fb4b2
commit
345159b4c4
4 changed files with 137 additions and 126 deletions
|
|
@ -851,8 +851,9 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
|
|||
nodeBeforeSplit = next.previousSibling;
|
||||
}
|
||||
if ( !startContainer.parentNode ) {
|
||||
startContainer = nodeBeforeSplit;
|
||||
startOffset = nodeBeforeSplit.childNodes.length;
|
||||
startContainer = nodeBeforeSplit || next.parentNode;
|
||||
startOffset = nodeBeforeSplit ?
|
||||
nodeBeforeSplit.childNodes.length : 0;
|
||||
}
|
||||
// Merge inserted containers with edges of split
|
||||
if ( isContainer( next ) ) {
|
||||
|
|
@ -878,7 +879,7 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
|
|||
endOffset = prev.childNodes.length;
|
||||
}
|
||||
// Merge inserted containers with edges of split
|
||||
if ( isContainer( nodeAfterSplit ) ) {
|
||||
if ( nodeAfterSplit && isContainer( nodeAfterSplit ) ) {
|
||||
mergeContainers( nodeAfterSplit );
|
||||
}
|
||||
|
||||
|
|
@ -1983,7 +1984,7 @@ proto._saveRangeToBookmark = function ( range ) {
|
|||
range.setEndBefore( endNode );
|
||||
};
|
||||
|
||||
proto._getRangeAndRemoveBookmark = function ( range, persistSplits ) {
|
||||
proto._getRangeAndRemoveBookmark = function ( range ) {
|
||||
var doc = this._doc,
|
||||
start = doc.getElementById( startSelectionId ),
|
||||
end = doc.getElementById( endSelectionId );
|
||||
|
|
@ -2007,13 +2008,11 @@ proto._getRangeAndRemoveBookmark = function ( range, persistSplits ) {
|
|||
detach( start );
|
||||
detach( end );
|
||||
|
||||
if ( !persistSplits ) {
|
||||
// Merge any text nodes we split
|
||||
mergeInlines( startContainer, _range );
|
||||
if ( startContainer !== endContainer ) {
|
||||
mergeInlines( endContainer, _range );
|
||||
}
|
||||
}
|
||||
|
||||
if ( !range ) {
|
||||
range = doc.createRange();
|
||||
|
|
@ -3620,84 +3619,91 @@ proto.setTextDirection = function ( direction ) {
|
|||
return this.focus();
|
||||
};
|
||||
|
||||
|
||||
function forEachChildInRange ( rootNode, range, iterator ) {
|
||||
var childNodes = rootNode.childNodes,
|
||||
node = rootNode.firstChild;
|
||||
while ( node ) {
|
||||
if ( isNodeContainedInRange( range, node, false ) ) {
|
||||
iterator( node );
|
||||
function removeFormatting ( self, root, clean ) {
|
||||
var node, next;
|
||||
for ( node = root.firstChild; node; node = next ) {
|
||||
next = node.nextSibling;
|
||||
if ( isInline( node ) ) {
|
||||
if ( node.nodeType === TEXT_NODE || isLeaf( node ) ) {
|
||||
clean.appendChild( node );
|
||||
continue;
|
||||
}
|
||||
node = node.nextSibling;
|
||||
} else if ( isBlock( node ) ) {
|
||||
clean.appendChild( self.createDefaultBlock([
|
||||
removeFormatting(
|
||||
self, node, self._doc.createDocumentFragment() )
|
||||
]));
|
||||
continue;
|
||||
}
|
||||
removeFormatting( self, node, clean );
|
||||
}
|
||||
return clean;
|
||||
}
|
||||
|
||||
function mapEachChildInRange ( rootNode, range, iterator ) {
|
||||
var output = [];
|
||||
forEachChildInRange( rootNode, range, function ( node ) {
|
||||
output.push( iterator( node ) );
|
||||
});
|
||||
return output;
|
||||
}
|
||||
|
||||
var stylingNodeNames = /(^|>)(?:B|I|S|SUB|SUP|U|BLOCKQUOTE|OL|UL|LI|T(?:ABLE|BODY|HEAD|FOOT|R|D|H))(>|$)/;
|
||||
|
||||
proto.removeAllFormatting = function ( range ) {
|
||||
if ( !range && !( range = this.getSelection() ) || range.collapsed ) {
|
||||
return false;
|
||||
return this;
|
||||
}
|
||||
|
||||
var stopNode = range.commonAncestorContainer;
|
||||
while ( stylingNodeNames.test( getPath( stopNode ) ) ) {
|
||||
while ( stopNode && !isBlock( stopNode ) ) {
|
||||
stopNode = stopNode.parentNode;
|
||||
}
|
||||
if (stopNode.nodeType === TEXT_NODE) {
|
||||
return false;
|
||||
if ( !stopNode ) {
|
||||
expandRangeToBlockBoundaries( range );
|
||||
stopNode = this._body;
|
||||
}
|
||||
if ( stopNode.nodeType === TEXT_NODE ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
// Record undo point
|
||||
this._recordUndoState( range );
|
||||
this._getRangeAndRemoveBookmark( range );
|
||||
|
||||
|
||||
// Avoid splitting where we're already at edges.
|
||||
moveRangeBoundariesUpTree( range, stopNode );
|
||||
this._saveRangeToBookmark( range );
|
||||
|
||||
// Split the selection up to the block, or if whole selection in same
|
||||
// block, expand range boundaries to ends of block and split up to body.
|
||||
var doc = stopNode.ownerDocument;
|
||||
|
||||
var startContainer = range.startContainer;
|
||||
var startOffset = range.startOffset;
|
||||
var endContainer = range.endContainer;
|
||||
var endOffset = range.endOffset;
|
||||
// Split end point first to avoid problems when end and start in same container.
|
||||
split( endContainer, endOffset, stopNode );
|
||||
split( startContainer, startOffset, stopNode );
|
||||
|
||||
range = this._getRangeAndRemoveBookmark(null, true);
|
||||
moveRangeBoundariesUpTree( range, stopNode );
|
||||
this._saveRangeToBookmark( range );
|
||||
// Split end point first to avoid problems when end and start
|
||||
// in same container.
|
||||
var formattedNodes = doc.createDocumentFragment();
|
||||
var cleanNodes = doc.createDocumentFragment();
|
||||
var nodeAfterSplit = split( endContainer, endOffset, stopNode );
|
||||
var nodeInSplit = split( startContainer, startOffset, stopNode );
|
||||
var nextNode;
|
||||
|
||||
var that = this;
|
||||
|
||||
var contents = [];
|
||||
forEachChildInRange( stopNode, range, function cleanSingleNode( node ) {
|
||||
if ( isContainer( node ) ) {
|
||||
forEachChildInRange( node, range, cleanSingleNode );
|
||||
} else if ( isBlock( node ) ) {
|
||||
var block = that.createDefaultBlock();
|
||||
block.appendChild( doc.createTextNode( node.textContent ) );
|
||||
contents.push( block );
|
||||
} else if ( isInline( node ) ) {
|
||||
contents.push( doc.createTextNode( node.textContent ) );
|
||||
// Then replace contents in split with a cleaned version of the same:
|
||||
// blocks become default blocks, text and leaf nodes survive, everything
|
||||
// else is obliterated.
|
||||
while ( nodeInSplit !== nodeAfterSplit ) {
|
||||
nextNode = nodeInSplit.nextSibling;
|
||||
formattedNodes.appendChild( nodeInSplit );
|
||||
nodeInSplit = nextNode;
|
||||
}
|
||||
});
|
||||
var oldContents = mapEachChildInRange( stopNode, range, function ( node ) {
|
||||
return node;
|
||||
});
|
||||
removeFormatting( this, formattedNodes, cleanNodes );
|
||||
nodeInSplit = cleanNodes.firstChild;
|
||||
nextNode = cleanNodes.lastChild;
|
||||
|
||||
contents.forEach( function ( node ) {
|
||||
stopNode.insertBefore( node, oldContents[0] );
|
||||
});
|
||||
oldContents.forEach( function ( node ) {
|
||||
stopNode.removeChild( node );
|
||||
});
|
||||
if ( nodeInSplit ) {
|
||||
stopNode.insertBefore( cleanNodes, nodeAfterSplit );
|
||||
range.setStartBefore( nodeInSplit );
|
||||
range.setEndAfter( nextNode );
|
||||
} else {
|
||||
range.setStartBefore( nodeAfterSplit );
|
||||
range.setEndBefore( nodeAfterSplit );
|
||||
}
|
||||
moveRangeBoundariesDownTree( range );
|
||||
|
||||
this.setSelection( this._getRangeAndRemoveBookmark() );
|
||||
this.setSelection( range );
|
||||
|
||||
return this;
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
111
source/Editor.js
111
source/Editor.js
|
|
@ -525,7 +525,7 @@ proto._saveRangeToBookmark = function ( range ) {
|
|||
range.setEndBefore( endNode );
|
||||
};
|
||||
|
||||
proto._getRangeAndRemoveBookmark = function ( range, persistSplits ) {
|
||||
proto._getRangeAndRemoveBookmark = function ( range ) {
|
||||
var doc = this._doc,
|
||||
start = doc.getElementById( startSelectionId ),
|
||||
end = doc.getElementById( endSelectionId );
|
||||
|
|
@ -549,13 +549,11 @@ proto._getRangeAndRemoveBookmark = function ( range, persistSplits ) {
|
|||
detach( start );
|
||||
detach( end );
|
||||
|
||||
if ( !persistSplits ) {
|
||||
// Merge any text nodes we split
|
||||
mergeInlines( startContainer, _range );
|
||||
if ( startContainer !== endContainer ) {
|
||||
mergeInlines( endContainer, _range );
|
||||
}
|
||||
}
|
||||
|
||||
if ( !range ) {
|
||||
range = doc.createRange();
|
||||
|
|
@ -2162,84 +2160,91 @@ proto.setTextDirection = function ( direction ) {
|
|||
return this.focus();
|
||||
};
|
||||
|
||||
|
||||
function forEachChildInRange ( rootNode, range, iterator ) {
|
||||
var childNodes = rootNode.childNodes,
|
||||
node = rootNode.firstChild;
|
||||
while ( node ) {
|
||||
if ( isNodeContainedInRange( range, node, false ) ) {
|
||||
iterator( node );
|
||||
function removeFormatting ( self, root, clean ) {
|
||||
var node, next;
|
||||
for ( node = root.firstChild; node; node = next ) {
|
||||
next = node.nextSibling;
|
||||
if ( isInline( node ) ) {
|
||||
if ( node.nodeType === TEXT_NODE || isLeaf( node ) ) {
|
||||
clean.appendChild( node );
|
||||
continue;
|
||||
}
|
||||
node = node.nextSibling;
|
||||
} else if ( isBlock( node ) ) {
|
||||
clean.appendChild( self.createDefaultBlock([
|
||||
removeFormatting(
|
||||
self, node, self._doc.createDocumentFragment() )
|
||||
]));
|
||||
continue;
|
||||
}
|
||||
removeFormatting( self, node, clean );
|
||||
}
|
||||
return clean;
|
||||
}
|
||||
|
||||
function mapEachChildInRange ( rootNode, range, iterator ) {
|
||||
var output = [];
|
||||
forEachChildInRange( rootNode, range, function ( node ) {
|
||||
output.push( iterator( node ) );
|
||||
});
|
||||
return output;
|
||||
}
|
||||
|
||||
var stylingNodeNames = /(^|>)(?:B|I|S|SUB|SUP|U|BLOCKQUOTE|OL|UL|LI|T(?:ABLE|BODY|HEAD|FOOT|R|D|H))(>|$)/;
|
||||
|
||||
proto.removeAllFormatting = function ( range ) {
|
||||
if ( !range && !( range = this.getSelection() ) || range.collapsed ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var stopNode = range.commonAncestorContainer;
|
||||
while ( stylingNodeNames.test( getPath( stopNode ) ) ) {
|
||||
while ( stopNode && !isBlock( stopNode ) ) {
|
||||
stopNode = stopNode.parentNode;
|
||||
}
|
||||
if ( !stopNode ) {
|
||||
expandRangeToBlockBoundaries( range );
|
||||
stopNode = this._body;
|
||||
}
|
||||
if ( stopNode.nodeType === TEXT_NODE ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
// Record undo point
|
||||
this._recordUndoState( range );
|
||||
this._getRangeAndRemoveBookmark( range );
|
||||
|
||||
|
||||
// Avoid splitting where we're already at edges.
|
||||
moveRangeBoundariesUpTree( range, stopNode );
|
||||
this._saveRangeToBookmark( range );
|
||||
|
||||
// Split the selection up to the block, or if whole selection in same
|
||||
// block, expand range boundaries to ends of block and split up to body.
|
||||
var doc = stopNode.ownerDocument;
|
||||
|
||||
var startContainer = range.startContainer;
|
||||
var startOffset = range.startOffset;
|
||||
var endContainer = range.endContainer;
|
||||
var endOffset = range.endOffset;
|
||||
// Split end point first to avoid problems when end and start in same container.
|
||||
split( endContainer, endOffset, stopNode );
|
||||
split( startContainer, startOffset, stopNode );
|
||||
|
||||
range = this._getRangeAndRemoveBookmark( null, true );
|
||||
moveRangeBoundariesUpTree( range, stopNode );
|
||||
this._saveRangeToBookmark( range );
|
||||
// Split end point first to avoid problems when end and start
|
||||
// in same container.
|
||||
var formattedNodes = doc.createDocumentFragment();
|
||||
var cleanNodes = doc.createDocumentFragment();
|
||||
var nodeAfterSplit = split( endContainer, endOffset, stopNode );
|
||||
var nodeInSplit = split( startContainer, startOffset, stopNode );
|
||||
var nextNode;
|
||||
|
||||
var that = this;
|
||||
|
||||
var contents = [];
|
||||
forEachChildInRange( stopNode, range, function cleanSingleNode ( node ) {
|
||||
if ( isContainer( node ) ) {
|
||||
forEachChildInRange( node, range, cleanSingleNode );
|
||||
} else if ( isBlock( node ) ) {
|
||||
var block = that.createDefaultBlock();
|
||||
block.appendChild( doc.createTextNode( node.textContent ) );
|
||||
contents.push( block );
|
||||
} else if ( isInline( node ) ) {
|
||||
contents.push( doc.createTextNode( node.textContent ) );
|
||||
// Then replace contents in split with a cleaned version of the same:
|
||||
// blocks become default blocks, text and leaf nodes survive, everything
|
||||
// else is obliterated.
|
||||
while ( nodeInSplit !== nodeAfterSplit ) {
|
||||
nextNode = nodeInSplit.nextSibling;
|
||||
formattedNodes.appendChild( nodeInSplit );
|
||||
nodeInSplit = nextNode;
|
||||
}
|
||||
});
|
||||
var oldContents = mapEachChildInRange( stopNode, range, function ( node ) {
|
||||
return node;
|
||||
});
|
||||
removeFormatting( this, formattedNodes, cleanNodes );
|
||||
nodeInSplit = cleanNodes.firstChild;
|
||||
nextNode = cleanNodes.lastChild;
|
||||
|
||||
contents.forEach( function ( node ) {
|
||||
stopNode.insertBefore( node, oldContents[0] );
|
||||
});
|
||||
oldContents.forEach( function ( node ) {
|
||||
stopNode.removeChild( node );
|
||||
});
|
||||
if ( nodeInSplit ) {
|
||||
stopNode.insertBefore( cleanNodes, nodeAfterSplit );
|
||||
range.setStartBefore( nodeInSplit );
|
||||
range.setEndAfter( nextNode );
|
||||
} else {
|
||||
range.setStartBefore( nodeAfterSplit );
|
||||
range.setEndBefore( nodeAfterSplit );
|
||||
}
|
||||
moveRangeBoundariesDownTree( range );
|
||||
|
||||
this.setSelection( this._getRangeAndRemoveBookmark() );
|
||||
this.setSelection( range );
|
||||
|
||||
return this;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ describe('Squire RTE', function () {
|
|||
expect(editor, 'to contain HTML', startHTML);
|
||||
selectAll(editor);
|
||||
editor.removeAllFormatting();
|
||||
var expectedHTML = '<div><div>one</div><div>two</div><div>three</div><div>four</div><div>five</div></div>';
|
||||
var expectedHTML = '<div>one</div><div>two</div><div>three</div><div>four</div><div>five</div>';
|
||||
expect(editor, 'to contain HTML', expectedHTML);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue