From d915eeff4b7c1d999a709fa4ecf6ed5f21c73e15 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 26 Mar 2019 15:27:27 +0100 Subject: [PATCH 01/42] Tests: added manual test. --- tests/core/editable/manual/insert.html | 24 ++++++++++++++++++++++++ tests/core/editable/manual/insert.md | 25 +++++++++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 tests/core/editable/manual/insert.html create mode 100644 tests/core/editable/manual/insert.md diff --git a/tests/core/editable/manual/insert.html b/tests/core/editable/manual/insert.html new file mode 100644 index 00000000000..55e88158cc5 --- /dev/null +++ b/tests/core/editable/manual/insert.html @@ -0,0 +1,24 @@ + +

+ + + +

+ diff --git a/tests/core/editable/manual/insert.md b/tests/core/editable/manual/insert.md new file mode 100644 index 00000000000..6b5d7d767db --- /dev/null +++ b/tests/core/editable/manual/insert.md @@ -0,0 +1,25 @@ +@bender-tags: bug, 4.11.4, 2813 +@bender-ui: collapsed +@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, sourcearea + +1. Select word `bar`. + +1. Press `Insert html` button. + + ## Expected + + There is one red border is on the left to the inserted `div`. + + ## Unexpected + + There are two red borders, one on the left and another on the right of inserted `div`. + +1. Press `Reset editor` button. + +1. Select word `bar`. + +1. Press `Insert text` button. + +## Expected + +Inserted word `text` replaces selected word - inside border. From a4e4faad551455a1fd5699d2d5aaf1a685bfb21a Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 26 Mar 2019 16:13:32 +0100 Subject: [PATCH 02/42] Tests: added unit test. --- .../core/editable/inserthtmlintostyledspan.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 tests/core/editable/inserthtmlintostyledspan.js diff --git a/tests/core/editable/inserthtmlintostyledspan.js b/tests/core/editable/inserthtmlintostyledspan.js new file mode 100644 index 00000000000..ed9a92646f9 --- /dev/null +++ b/tests/core/editable/inserthtmlintostyledspan.js @@ -0,0 +1,33 @@ +/* bender-tags: editor,insertion */ + +( function() { + 'use strict'; + + bender.editor = { + config: { + allowedContent: true, + autoParagraph: false + } + }; + + bender.test( { + // (#2813) + 'test insertHtml when selection ends at the end of span': assertInsertHtml( 'foo{bar}', 'foo
div
' ), + // (#2813) + 'test insertHtml when selection starts at the beginning of span': assertInsertHtml( '{foo}bar', '
div
bar' ), + // (#2813) + 'test insertHtml when selection covers span': assertInsertHtml( '{foobar}', '
div
' ) + } ); + + function assertInsertHtml( initial, expected ) { + return function() { + var editor = this.editorBot.editor; + + bender.tools.selection.setWithHtml( editor, initial ); + + editor.insertHtml( '
div
' ); + + assert.areSame( expected, editor.editable().getHtml().toLowerCase().replace( /(
|\s)/g, '' ) ); + }; + } +} )(); From f46ee15c12ff66a423b81082b174b9fa9c85e84f Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 26 Mar 2019 16:23:24 +0100 Subject: [PATCH 03/42] Fixed: editor.insertHtml pollutes editor with empty spans. --- core/editable.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/core/editable.js b/core/editable.js index 2508b81af4a..8c5f5dafa38 100644 --- a/core/editable.js +++ b/core/editable.js @@ -1664,6 +1664,7 @@ function prepareRangeToDataInsertion( that ) { var range = that.range, mergeCandidates = that.mergeCandidates, + isHtml = that.type === 'html', node, marker, path, startPath, endPath, previous, bm; // If range starts in inline element then insert a marker, so empty @@ -1713,11 +1714,11 @@ range.collapse(); marker.remove(); } - + var clone; // Split inline elements so HTML will be inserted with its own styles. path = range.startPath(); if ( ( node = path.contains( isInline, false, 1 ) ) ) { - range.splitElement( node ); + clone = range.splitElement( node ); that.inlineStylesRoot = node; that.inlineStylesPeak = path.lastElement; } @@ -1725,16 +1726,28 @@ // Record inline merging candidates for later cleanup in place. bm = range.createBookmark(); + // Remove empty element created after splitting. + if ( isHtml && clone && clone.isEmptyInlineRemoveable() ) { + clone.remove(); + } + + // Remove empty element after splitting. + if ( isHtml && node && node.isEmptyInlineRemoveable() ) { + node.remove(); + } + // 1. Inline siblings. node = bm.startNode.getPrevious( isNotEmpty ); + node && checkIfElement( node ) && isInline( node ) && mergeCandidates.push( node ); node = bm.startNode.getNext( isNotEmpty ); node && checkIfElement( node ) && isInline( node ) && mergeCandidates.push( node ); // 2. Inline parents. node = bm.startNode; - while ( ( node = node.getParent() ) && isInline( node ) ) + while ( ( node = node.getParent() ) && isInline( node ) ) { mergeCandidates.push( node ); + } range.moveToBookmark( bm ); } @@ -2273,7 +2286,7 @@ wrapper = doc.createText( '{cke-peak}' ), limit = that.inlineStylesRoot.getParent(); - while ( !element.equals( limit ) ) { + while ( element && !element.equals( limit ) ) { wrapper = wrapper.appendTo( element.clone() ); element = element.getParent(); } From e7699533736b11172d51f9ecc63aa01b9c8dbf01 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 26 Mar 2019 16:42:22 +0100 Subject: [PATCH 04/42] Changelog: new entry. --- CHANGES.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGES.md b/CHANGES.md index 45a434c988a..85f239cf3d1 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -22,6 +22,7 @@ Fixed Issues: * [#2235](https://github.com/ckeditor/ckeditor-dev/issues/2235): Fixed: [Image](https://ckeditor.com/cke4/addon/image) in table cell has an empty URL field when edited from context menu opened by right-click when [Table Selection](https://ckeditor.com/cke4/addon/tableselection) plugin is in use. * [#3120](https://github.com/ckeditor/ckeditor-dev/issues/3120): [IE8] Fixed: [`CKEDITOR.tools.extend`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tool.html#method-extend) function doesn't work with [`DontEnum`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Properties) object property attribute. * [#3098](https://github.com/ckeditor/ckeditor-dev/issues/3098): Fixed: Unit pickers for table cell width and height in [Table Tools](https://ckeditor.com/cke4/addon/tabletools) plugin have different width. +* [#2813](https://github.com/ckeditor/ckeditor-dev/issues/2813): Fixed: [editor.insertHtml](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml) pollutes editable with empty spans. API Changes: From b068efc21cf3b072caa6d0c6180bc93308ace78d Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 10:52:43 +0100 Subject: [PATCH 05/42] Tests: manual test step corrections. --- tests/core/editable/manual/insert.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/core/editable/manual/insert.md b/tests/core/editable/manual/insert.md index 6b5d7d767db..b4ce4e43d9f 100644 --- a/tests/core/editable/manual/insert.md +++ b/tests/core/editable/manual/insert.md @@ -8,7 +8,7 @@ ## Expected - There is one red border is on the left to the inserted `div`. + There is one red border on the left of inserted `div`. ## Unexpected From 6966a788a3b71f375daf0077314c69182db6315b Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 10:54:45 +0100 Subject: [PATCH 06/42] Remove extra new line. --- core/editable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/core/editable.js b/core/editable.js index 8c5f5dafa38..e5e68553d90 100644 --- a/core/editable.js +++ b/core/editable.js @@ -1738,7 +1738,6 @@ // 1. Inline siblings. node = bm.startNode.getPrevious( isNotEmpty ); - node && checkIfElement( node ) && isInline( node ) && mergeCandidates.push( node ); node = bm.startNode.getNext( isNotEmpty ); node && checkIfElement( node ) && isInline( node ) && mergeCandidates.push( node ); From cc224b80461fd665663c60d4585cf7fbf710963b Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 11:00:48 +0100 Subject: [PATCH 07/42] Exented comments with more details and ticket id. --- core/editable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/editable.js b/core/editable.js index e5e68553d90..c9059385a82 100644 --- a/core/editable.js +++ b/core/editable.js @@ -1726,12 +1726,12 @@ // Record inline merging candidates for later cleanup in place. bm = range.createBookmark(); - // Remove empty element created after splitting. + // When called by insertHtml remove empty element created after splitting (#2813). if ( isHtml && clone && clone.isEmptyInlineRemoveable() ) { clone.remove(); } - // Remove empty element after splitting. + // When called by insertHtml remove empty element after splitting (#2813). if ( isHtml && node && node.isEmptyInlineRemoveable() ) { node.remove(); } From 8434e51d63bc6246055a630cf05f1c837a1f7a48 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 11:02:27 +0100 Subject: [PATCH 08/42] Move variable declaration to grouped variables. --- core/editable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/editable.js b/core/editable.js index c9059385a82..f427bdbe060 100644 --- a/core/editable.js +++ b/core/editable.js @@ -1665,7 +1665,7 @@ var range = that.range, mergeCandidates = that.mergeCandidates, isHtml = that.type === 'html', - node, marker, path, startPath, endPath, previous, bm; + node, marker, path, startPath, endPath, previous, bm, clone; // If range starts in inline element then insert a marker, so empty // inline elements won't be removed while range.deleteContents @@ -1714,7 +1714,7 @@ range.collapse(); marker.remove(); } - var clone; + // Split inline elements so HTML will be inserted with its own styles. path = range.startPath(); if ( ( node = path.contains( isInline, false, 1 ) ) ) { From 32c4f79e0b69455aac3916fbbe757accbca69630 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 11:08:52 +0100 Subject: [PATCH 09/42] Tests: removed dash in test step. --- tests/core/editable/manual/insert.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/core/editable/manual/insert.md b/tests/core/editable/manual/insert.md index b4ce4e43d9f..6a154f9146f 100644 --- a/tests/core/editable/manual/insert.md +++ b/tests/core/editable/manual/insert.md @@ -22,4 +22,4 @@ ## Expected -Inserted word `text` replaces selected word - inside border. +Inserted word `text` replaces selected word inside border. From 969c9af7fc39c91b6c48edae58b9db4ab8f36299 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Wed, 27 Mar 2019 12:09:34 +0100 Subject: [PATCH 10/42] Test: renamed file. --- .../{inserthtmlintostyledspan.js => inserthtmlintospan.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename tests/core/editable/{inserthtmlintostyledspan.js => inserthtmlintospan.js} (100%) diff --git a/tests/core/editable/inserthtmlintostyledspan.js b/tests/core/editable/inserthtmlintospan.js similarity index 100% rename from tests/core/editable/inserthtmlintostyledspan.js rename to tests/core/editable/inserthtmlintospan.js From 92000684cdee3ca5187b9cd450676d7249c991de Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Tue, 2 Apr 2019 15:16:18 +0200 Subject: [PATCH 11/42] Tests: added 'insert element' button. --- tests/core/editable/manual/insert.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/core/editable/manual/insert.html b/tests/core/editable/manual/insert.html index 55e88158cc5..6140fdf2c7a 100644 --- a/tests/core/editable/manual/insert.html +++ b/tests/core/editable/manual/insert.html @@ -1,20 +1,24 @@

+

diff --git a/tests/core/editable/manual/insert.md b/tests/core/editable/manual/insert.md index ea72d64f84f..1f81e124eda 100644 --- a/tests/core/editable/manual/insert.md +++ b/tests/core/editable/manual/insert.md @@ -1,8 +1,8 @@ @bender-tags: bug, 4.12.0, 2813 @bender-ui: collapsed -@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, sourcearea +@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, sourcearea, list, table -## For each insert button +## For each insert button and for each element 1. After each case use `reset editor` button. @@ -20,4 +20,4 @@ Clicked button causes the creation of an additional rectangle. -**NOTE:** Insert HTML functions inserts `div` element as a plain text. Caused by [#3042](https://github.com/ckeditor/ckeditor-dev/issues/3042) issue. +**NOTE:** Because of [#3042](https://github.com/ckeditor/ckeditor-dev/issues/3042) two nested divs are used for insertion. From 940725d44e12b75df8e75b5158bfc7ff91ae10a5 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Thu, 23 May 2019 16:47:14 +0200 Subject: [PATCH 38/42] Revert "Changes: update entry." This reverts commit 9214d3aba85a4d5a6aea4bcd32877a0051af4d3b. --- CHANGES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index e296936ad3e..a8993522541 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -22,7 +22,7 @@ Fixed Issues: * [#2235](https://github.com/ckeditor/ckeditor-dev/issues/2235): Fixed: [Image](https://ckeditor.com/cke4/addon/image) in table cell has an empty URL field when edited from context menu opened by right-click when [Table Selection](https://ckeditor.com/cke4/addon/tableselection) plugin is in use. * [#3120](https://github.com/ckeditor/ckeditor-dev/issues/3120): [IE8] Fixed: [`CKEDITOR.tools.extend`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tool.html#method-extend) function doesn't work with [`DontEnum`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Properties) object property attribute. * [#3098](https://github.com/ckeditor/ckeditor-dev/issues/3098): Fixed: Unit pickers for table cell width and height in [Table Tools](https://ckeditor.com/cke4/addon/tabletools) plugin have different width. -* [#2813](https://github.com/ckeditor/ckeditor-dev/issues/2813): Fixed: Editor HTML insertion methods pollute the content with empty spans. +* [#2813](https://github.com/ckeditor/ckeditor-dev/issues/2813): Fixed: [editor.insertHtml](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml) and [editor.insertelement](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertElement) pollutes editable with empty spans. API Changes: From 2c773b05a5d6d13f524d1cbeb0ca7f9c7b606511 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Thu, 23 May 2019 16:54:02 +0200 Subject: [PATCH 39/42] Tests: fix for IE. --- tests/core/editable/insertion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/core/editable/insertion.js b/tests/core/editable/insertion.js index c44784b56ea..06e3827def1 100644 --- a/tests/core/editable/insertion.js +++ b/tests/core/editable/insertion.js @@ -271,6 +271,6 @@ } function normalizeHtml( html ) { - return html.toLowerCase().replace( /(


<\/p>|
|\s|\u200B)/g, '' ); + return html.toLowerCase().replace( /(

(
| )<\/p>|
|\s|\u200B)/g, '' ); } } )(); From 45733e366ebefdda5a3db044359d7eab1bea8e2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzton=CC=81?= Date: Wed, 12 Jun 2019 17:48:07 +0200 Subject: [PATCH 40/42] Updated changelog entry. --- CHANGES.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGES.md b/CHANGES.md index a8993522541..c56ebc4c437 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -22,7 +22,7 @@ Fixed Issues: * [#2235](https://github.com/ckeditor/ckeditor-dev/issues/2235): Fixed: [Image](https://ckeditor.com/cke4/addon/image) in table cell has an empty URL field when edited from context menu opened by right-click when [Table Selection](https://ckeditor.com/cke4/addon/tableselection) plugin is in use. * [#3120](https://github.com/ckeditor/ckeditor-dev/issues/3120): [IE8] Fixed: [`CKEDITOR.tools.extend`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_tool.html#method-extend) function doesn't work with [`DontEnum`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Properties) object property attribute. * [#3098](https://github.com/ckeditor/ckeditor-dev/issues/3098): Fixed: Unit pickers for table cell width and height in [Table Tools](https://ckeditor.com/cke4/addon/tabletools) plugin have different width. -* [#2813](https://github.com/ckeditor/ckeditor-dev/issues/2813): Fixed: [editor.insertHtml](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml) and [editor.insertelement](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertElement) pollutes editable with empty spans. +* [#2813](https://github.com/ckeditor/ckeditor-dev/issues/2813): Fixed: Editor HTML insertion methods ([`editor.insertHtml`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml), [`editor.insertHtmlIntoRange`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtmlIntoRange), [`editor.insertElement`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertElement) and [`editor.insertElementIntoRange`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertElementIntoRange)) pollutes editable with empty spans. API Changes: From c3aa928495b21f2504ef2c89a82ef19206757438 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzton=CC=81?= Date: Sat, 15 Jun 2019 13:21:18 +0200 Subject: [PATCH 41/42] Refactoring. --- core/editable.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/core/editable.js b/core/editable.js index c5d97f25b53..e48167b264e 100644 --- a/core/editable.js +++ b/core/editable.js @@ -467,14 +467,14 @@ // Remove empty element created after splitting (#2813). // The range.splitElement() method splits the given element in two and places the selection // in-between in such way that

F^oo
becomes
F
^
oo
. - // Then `removeEmptyInline()` method removes any of these elements if they are empty. - removeEmptyInline( current ); - removeEmptyInline( endNode ); + // Then removeEmptyInlineElement() method removes any of these elements if they are empty. + removeEmptyInlineElement( current ); + removeEmptyInlineElement( endNode ); range.moveToBookmark( bookmark ); - // If we're in an empty block which indicate a new paragraph, - // simply replace it with the inserting block.(https://dev.ckeditor.com/ticket/3664) + // If we're in an empty block which indicate a new paragraph, + // simply replace it with the inserting block (https://dev.ckeditor.com/ticket/3664). } else if ( range.checkStartOfBlock() && range.checkEndOfBlock() ) { range.setStartBefore( current ); range.collapse( true ); @@ -1738,8 +1738,8 @@ // When called by insertHtml remove empty element created after splitting (#2813). if ( isHtml ) { - removeEmptyInline( node ); - removeEmptyInline( endNode ); + removeEmptyInlineElement( node ); + removeEmptyInlineElement( endNode ); } // 1. Inline siblings. @@ -2304,7 +2304,7 @@ return insert; } )(); - function removeEmptyInline( element ) { + function removeEmptyInlineElement( element ) { if ( element && element.isEmptyInlineRemoveable() ) { element.remove(); } From 7f08cc6b47e074fb43a36018f416f3613e15c3f8 Mon Sep 17 00:00:00 2001 From: Kajetan Litwinowicz Date: Mon, 17 Jun 2019 11:28:26 +0200 Subject: [PATCH 42/42] Tests: remove empty paragraph from the end of normalized html string. --- tests/core/editable/insertion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/core/editable/insertion.js b/tests/core/editable/insertion.js index 06e3827def1..bbec95b3309 100644 --- a/tests/core/editable/insertion.js +++ b/tests/core/editable/insertion.js @@ -271,6 +271,6 @@ } function normalizeHtml( html ) { - return html.toLowerCase().replace( /(

(
| )<\/p>|
|\s|\u200B)/g, '' ); + return html.toLowerCase().replace( /(

(
| )<\/p>|

<\/p>$|
|\s|\u200B)/g, '' ); } } )();