Editor: Use `editor.$` to improve `removeSelectionMarker()`.

See #42029

git-svn-id: https://develop.svn.wordpress.org/trunk@41656 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2017-10-01 10:32:58 +00:00
parent d36c32e299
commit a0692f9597
1 changed files with 13 additions and 34 deletions

View File

@ -508,47 +508,26 @@ window.wp = window.wp || {};
scrollVisualModeToStartElement( editor, startNode ); scrollVisualModeToStartElement( editor, startNode );
removeSelectionMarker( editor, startNode ); removeSelectionMarker( startNode );
removeSelectionMarker( editor, endNode ); removeSelectionMarker( endNode );
} }
/** /**
* @summary Remove selection marker with optional `<p>` parent. * @summary Remove selection marker and the parent node if it is an empty paragraph.
* *
* By default TinyMCE puts every inline node at the main level in a `<p>` wrapping tag. * By default TinyMCE wraps loose inline tags in a `<p>`.
* When removing selection markers an empty `<p>` may be left behind, remove it.
* *
* In the case with selection markers, when removed they leave an empty `<p>` behind, * @param {object} $marker The marker to be removed from the editor DOM, wrapped in an instnce of `editor.$`
* which adds an empty paragraph line with `&nbsp;` when switched to Text mode.
*
* In order to prevent that the wrapping `<p>` needs to be removed when removing the
* selection marker.
*
* @param {object} editor The TinyMCE Editor instance
* @param {object} marker The marker to be removed from the editor DOM
*/ */
function removeSelectionMarker( editor, marker ) { function removeSelectionMarker( $marker ) {
var markerParent = editor.$( marker ).parent(); var $markerParent = $marker.parent();
if ( $marker.remove();
! markerParent.length ||
markerParent.prop('tagName').toLowerCase() !== 'p' || //Remove empty paragraph left over after removing the marker.
markerParent[0].childNodes.length > 1 || if ( $markerParent.is( 'p' ) && ! $markerParent.children().length && ! $markerParent.text() ) {
! markerParent.prop('outerHTML').match(/^<p>/) $markerParent.remove();
) {
/**
* The selection marker is not self-contained in a <p>.
* In this case only the selection marker is removed, since
* it will affect the content.
*/
marker.remove();
}
else {
/**
* The marker is self-contained in an blank `<p>` tag.
*
* This is usually inserted by TinyMCE
*/
markerParent.remove();
} }
} }