Skip to content
Permalink
Browse files

Added insertHtmlIntoRange method. Fixed tests.

  • Loading branch information...
pjasiun authored and Reinmar committed Sep 17, 2014
1 parent 90f42e9 commit 4f040ebb6785b57d6b03ac5c2ba5d1916c993d92
Showing with 47 additions and 58 deletions.
  1. +27 −19 core/editable.js
  2. +2 −5 plugins/widget/plugin.js
  3. +17 −33 tests/core/editable/inserthtmlinto.js
  4. +1 −1 tests/plugins/widget/widgetsintegration.js
@@ -230,21 +230,40 @@
} }
}, },


/**
* @see CKEDITOR.editor#insertText
*/
insertText: function( text ) {
this.insertHtml( this.transformPlainTextToHtml( text ), 'text' );
},

/** /**
* @see CKEDITOR.editor#insertHtml * @see CKEDITOR.editor#insertHtml
*/ */
insertHtml: function( data, mode ) { insertHtml: function( data, mode ) {
// HTML insertion only considers the first range.
// Note: getRanges will be overwritten for tests since we want to test
// custom ranges and bypass native selections.
var range = this.editor.getSelection().getRanges()[ 0 ];

beforeInsert( this ); beforeInsert( this );

// Default mode is 'html'. // Default mode is 'html'.
insert( this, mode || 'html', data ); insert( this, mode || 'html', data, range );

// Make the final range selection.
range.select();

afterInsert( this );

this.editor.fire( 'afterInsert' );
}, },


/** insertHtmlIntoRange: function( data, mode, range ) {
* @see CKEDITOR.editor#insertText // Default mode is 'html'
*/ insert( this, mode || 'html', data, range );
insertText: function( text ) {
beforeInsert( this ); this.editor.fire( 'afterInsert' );
insert( this, 'text', this.transformPlainTextToHtml( text ) );
}, },


/** /**
@@ -1260,14 +1279,8 @@


// Inserts the given (valid) HTML into the range position (with range content deleted), // Inserts the given (valid) HTML into the range position (with range content deleted),
// guarantee it's result to be a valid DOM tree. // guarantee it's result to be a valid DOM tree.
function insert( editable, type, data ) { function insert( editable, type, data, range ) {
var editor = editable.editor, var editor = editable.editor,
selection = editor.getSelection(),
// HTML insertion only considers the first range.
// Note: getRanges will be overwritten for tests since we want to test
// custom ranges and bypass native selections.
// TODO what should we do with others? Remove?
range = selection.getRanges()[ 0 ],
dontFilter = false; dontFilter = false;


if ( type == 'unfiltered_html' ) { if ( type == 'unfiltered_html' ) {
@@ -1320,11 +1333,6 @@
// Set final range position and clean up. // Set final range position and clean up.


cleanupAfterInsertion( that ); cleanupAfterInsertion( that );

// Make the final range selection.
range.select();

afterInsert( editable );
} }


// Prepare range to its data deletion. // Prepare range to its data deletion.
@@ -2626,18 +2626,15 @@
} ); } );


// Listen with high priority to check widgets after data was inserted. // Listen with high priority to check widgets after data was inserted.
editor.on( 'insertText', checkNewWidgets, null, null, 999 ); editor.on( 'afterInsert', function() {
editor.on( 'insertHtml', checkNewWidgets, null, null, 999 );

function checkNewWidgets() {
editor.fire( 'lockSnapshot' ); editor.fire( 'lockSnapshot' );


// Init only new for performance reason. // Init only new for performance reason.
// Focus inited if only widget was processed. // Focus inited if only widget was processed.
widgetsRepo.checkWidgets( { initOnlyNew: true, focusInited: processedWidgetOnly } ); widgetsRepo.checkWidgets( { initOnlyNew: true, focusInited: processedWidgetOnly } );


editor.fire( 'unlockSnapshot' ); editor.fire( 'unlockSnapshot' );
} }, null, null, 999 );
} }


// Helper for coordinating which widgets should be // Helper for coordinating which widgets should be
@@ -5,15 +5,15 @@


bender.editor = { bender.editor = {
config: { config: {
allowedContent: 'div,p,b,i', allowedContent: 'div p b i',
autoParagraph: false autoParagraph: false
} }
}; };


var tools = bender.tools; var tools = bender.tools;


bender.test( { bender.test( {
checkInsertHtmlIntoRange: function( insertedHtml, range, expectedInsetionResult, expectedHtml ) { checkInsertHtmlIntoRange: function( insertedHtml, range, expectedHtml ) {
var bot = this.editorBot, var bot = this.editorBot,
editor = bot.editor, editor = bot.editor,
editable = editor.editable(), editable = editor.editable(),
@@ -23,12 +23,10 @@
afterInsertCount++; afterInsertCount++;
} ); } );


assert.areSame( expectedInsetionResult, editable.insertHtmlIntoRange( insertedHtml, range ), 'Insertion should be ' + expectedInsetionResult + '.' ); editable.insertHtmlIntoRange( insertedHtml, 'html', range );
assert.isInnerHtmlMatching( expectedHtml, tools.selection.getWithHtml( editor ), 'Editor content.' );


if ( expectedInsetionResult ) { assert.isInnerHtmlMatching( expectedHtml, editable.getHtml(), 'Editor content.' );
assert.areSame( 1, afterInsertCount, 'afterInsert should be fired once.' ); assert.areSame( 1, afterInsertCount, 'afterInsert should be fired once.' );
};
}, },


'test insertHtmlIntoRange - block': function() { 'test insertHtmlIntoRange - block': function() {
@@ -39,9 +37,7 @@
range.setStart( textNode, 2 ); range.setStart( textNode, 2 );
range.setEnd( textNode, 4 ); range.setEnd( textNode, 4 );


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<div>div</div>', range, '<p>fodivar</p>' ); // Works the same way as insertHtml
'<div>div</div>', range,
true, '<p>fo</p><div>div</div><p>ar</p>' );
}, },


'test insertHtmlIntoRange - inline': function() { 'test insertHtmlIntoRange - inline': function() {
@@ -52,35 +48,29 @@
range.setStart( textNode, 2 ); range.setStart( textNode, 2 );
range.setEnd( textNode, 4 ); range.setEnd( textNode, 4 );


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<b>b</b><i>i</i>', range, '<p>fo<b>b</b><i>i</i>ar</p>' );
'<b>b</b><i>i</i>', range,
true, '<p>fo<b>b</b><i>i</i>ar</p>' );
}, },


'test insertHtmlIntoRange - inline, the same range': function() { 'test insertHtmlIntoRange - inline, the same range': function() {
tools.setHtmlWithSelection( this.editor, '<p>fo[ob]ar</p>' ); tools.setHtmlWithSelection( this.editor, '<p>fo[ob]ar</p>' );


var range = this.editor.createRange(), var range = this.editor.createRange(),
textNode = this.editor.editable().getChild( [ 0, 0 ] ); editable = this.editor.editable();
range.setStart( textNode, 2 ); range.setStart( editable.getChild( [ 0, 0 ] ), 2 );
range.setEnd( textNode, 4 ); range.setEnd( editable.getChild( [ 0, 2 ] ), 0 );


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<b>b</b><i>i</i>', range, '<p>fo<b>b</b><i>i</i>ar</p>' );
'<b>b</b><i>i</i>', range,
true, '<p>fo<b>b</b><i>i</i>ar</p>' );
}, },


'test insertHtmlIntoRange - collapsed': function() { 'test insertHtmlIntoRange - collapsed': function() {
tools.setHtmlWithSelection( this.editor, '<p>foobar</p>' ); tools.setHtmlWithSelection( this.editor, '<p>foobar</p>' );


var range = this.editor.createRange(), var range = this.editor.createRange(),
textNode = this.editor.editable().getChild( [ 0, 0 ] ); textNode = this.editor.editable().getChild( [ 0, 0 ] );
range.setStart( textNode, 2 ); range.setStart( textNode, 3 );
range.setEnd( textNode, 4 ); range.collapse();


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<b>b</b>', range, '<p>foo<b>b</b>bar</p>' );
'<b>b</b>', range,
true, '<p>foo<b>b</b>ba[]r</p>' );
}, },


'test insertHtmlIntoRange - read-only': function() { 'test insertHtmlIntoRange - read-only': function() {
@@ -90,9 +80,7 @@
range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 ); range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 );
range.collapse(); range.collapse();


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<div>div</div>', range, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y</p>' );
'<div>div</div>', range,
false, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y[]</p>' );
}, },


'test insertHtmlIntoRange - empty': function() { 'test insertHtmlIntoRange - empty': function() {
@@ -102,9 +90,7 @@
range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 ); range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 );
range.collapse(); range.collapse();


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '', range, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y</p>' );
'', range,
false, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y[]</p>' );
}, },


'test insertHtmlIntoRange - removed content': function() { 'test insertHtmlIntoRange - removed content': function() {
@@ -114,9 +100,7 @@
range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 ); range.setStart( this.editor.document.getById( 'x' ).getFirst(), 3 );
range.collapse(); range.collapse();


this.checkInsertHtmlIntoRange( this.checkInsertHtmlIntoRange( '<img src="foo">', range, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y</p>' );
'<img src="foo">', range,
false, '<p>x</p><p contenteditable="false" id="x">foobar</p><p>y[]</p>' );
} }
} ); } );


@@ -259,7 +259,7 @@


listener.removeListener(); listener.removeListener();


assert.areSame( 1, checked ); assert.areSame( 1, checked, 'checkWidgets' );
assert.isTrue( eventData.initOnlyNew, 'data.initOnlyNew was passed' ); assert.isTrue( eventData.initOnlyNew, 'data.initOnlyNew was passed' );
assert.areSame( '<p>xfoox</p>', editorData, 'event was fired after data was inserted' ); assert.areSame( '<p>xfoox</p>', editorData, 'event was fired after data was inserted' );
}, },

0 comments on commit 4f040eb

Please sign in to comment.
You can’t perform that action at this time.