From f9f6a3f60085daaaf72349b3c17f0d7e1c521185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 24 Jan 2019 16:11:24 +0100
Subject: [PATCH 01/14] Introduce inline widget manual test.

---
 tests/manual/inline-widget.html | 28 ++++++++++
 tests/manual/inline-widget.js   | 95 +++++++++++++++++++++++++++++++++
 tests/manual/inline-widget.md   |  3 ++
 3 files changed, 126 insertions(+)
 create mode 100644 tests/manual/inline-widget.html
 create mode 100644 tests/manual/inline-widget.js
 create mode 100644 tests/manual/inline-widget.md

diff --git a/tests/manual/inline-widget.html b/tests/manual/inline-widget.html
new file mode 100644
index 00000000..bbdf7811
--- /dev/null
+++ b/tests/manual/inline-widget.html
@@ -0,0 +1,28 @@
+<div id="editor">
+	<h1>Hello <placeholder>name</placeholder>!</h1>
+
+	<p>We would like to invite you to <placeholder>place</placeholder> that will take place on <placeholder>date</placeholder>.</p>
+</div>
+
+<h2>Model contents:</h2>
+
+<pre id="model"></pre>
+
+<style>
+	placeholder {
+		background: #ffff00;
+		padding: 2px;
+	}
+
+	placeholder::selection{
+		display: none;
+	}
+
+	placeholder:before{
+		content: '{'
+	}
+
+	placeholder:after{
+		content: '}'
+	}
+</style>
diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
new file mode 100644
index 00000000..8b3c1e8e
--- /dev/null
+++ b/tests/manual/inline-widget.js
@@ -0,0 +1,95 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console */
+
+import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Enter from '@ckeditor/ckeditor5-enter/src/enter';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Typing from '@ckeditor/ckeditor5-typing/src/typing';
+import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+
+class InlineWidget extends Plugin {
+	constructor( editor ) {
+		super( editor );
+		editor.model.schema.register( 'placeholder', {
+			allowWhere: '$text',
+			isObject: true,
+			allowAttributes: [ 'type' ]
+		} );
+
+		editor.conversion.for( 'editingDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: ( modelItem, viewWriter ) => {
+				const widgetElement = createPlaceholderView( viewWriter, modelItem );
+
+				return toWidget( widgetElement, viewWriter );
+			}
+		} );
+
+		editor.conversion.for( 'dataDowncast' ).elementToElement( {
+			model: 'placeholder',
+			view: createPlaceholderView
+		} );
+
+		editor.conversion.for( 'upcast' ).elementToElement( {
+			view: 'placeholder',
+			model: ( viewElement, modelWriter ) => {
+				let type = 'general';
+
+				if ( viewElement.childCount ) {
+					const text = viewElement.getChild( 0 );
+
+					if ( text.is( 'text' ) ) {
+						type = text.data;
+					}
+				}
+
+				return modelWriter.createElement( 'placeholder', { type } );
+			}
+		} );
+
+		function createPlaceholderView( viewWriter, modelItem ) {
+			const widgetElement = viewWriter.createContainerElement( 'placeholder' );
+
+			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
+			return widgetElement;
+		}
+	}
+}
+
+ClassicEditor
+	.create( global.document.querySelector( '#editor' ), {
+		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Widget, InlineWidget ],
+		toolbar: [ 'heading', '|', 'bold', 'undo', 'redo' ]
+	} )
+	.then( editor => {
+		editor.model.document.on( 'change', () => {
+			printModelContents( editor );
+		} );
+
+		printModelContents( editor );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+const modelDiv = global.document.querySelector( '#model' );
+
+function printModelContents( editor ) {
+	modelDiv.innerText = formatData( getData( editor.model ) );
+}
+
+function formatData( data ) {
+	return data.replace( /<(paragraph)>/g, '\n<$1>' );
+}
diff --git a/tests/manual/inline-widget.md b/tests/manual/inline-widget.md
new file mode 100644
index 00000000..c9148446
--- /dev/null
+++ b/tests/manual/inline-widget.md
@@ -0,0 +1,3 @@
+### Inline widget
+
+* TODO

From 6b8bcd0170df5e81c8dc543c5b9f0597ad5d1e2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 24 Jan 2019 16:22:29 +0100
Subject: [PATCH 02/14] Add toolbar button for creating inline widget in manual
 test.

---
 tests/manual/inline-widget.js | 35 ++++++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index 8b3c1e8e..fe693c8a 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -18,10 +18,12 @@ import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 class InlineWidget extends Plugin {
 	constructor( editor ) {
 		super( editor );
+
 		editor.model.schema.register( 'placeholder', {
 			allowWhere: '$text',
 			isObject: true,
@@ -65,13 +67,44 @@ class InlineWidget extends Plugin {
 			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
 			return widgetElement;
 		}
+
+		this._createToolbarButton();
+	}
+
+	_createToolbarButton() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( 'placeholder', locale => {
+			const buttonView = new ButtonView( locale );
+
+			buttonView.set( {
+				label: t( 'Insert placeholder' ),
+				tooltip: true,
+				withText: true
+			} );
+
+			this.listenTo( buttonView, 'execute', () => {
+				const model = editor.model;
+
+				model.change( writer => {
+					const placeholder = writer.createElement( 'placeholder', { type: 'placeholder' } );
+
+					model.insertContent( placeholder );
+
+					writer.setSelection( placeholder, 'on' );
+				} );
+			} );
+
+			return buttonView;
+		} );
 	}
 }
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
 		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Widget, InlineWidget ],
-		toolbar: [ 'heading', '|', 'bold', 'undo', 'redo' ]
+		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		editor.model.document.on( 'change', () => {

From 9e8a4a5c66abc8ffb09b9a35c68d718343e74496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Fri, 25 Jan 2019 17:01:55 +0100
Subject: [PATCH 03/14] Add Clipboard plugin and fix the sample code.

---
 tests/manual/inline-widget.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index fe693c8a..2a921e4f 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -19,6 +19,7 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 class InlineWidget extends Plugin {
 	constructor( editor ) {
@@ -33,7 +34,7 @@ class InlineWidget extends Plugin {
 		editor.conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'placeholder',
 			view: ( modelItem, viewWriter ) => {
-				const widgetElement = createPlaceholderView( viewWriter, modelItem );
+				const widgetElement = createPlaceholderView( modelItem, viewWriter );
 
 				return toWidget( widgetElement, viewWriter );
 			}
@@ -61,7 +62,7 @@ class InlineWidget extends Plugin {
 			}
 		} );
 
-		function createPlaceholderView( viewWriter, modelItem ) {
+		function createPlaceholderView( modelItem, viewWriter ) {
 			const widgetElement = viewWriter.createContainerElement( 'placeholder' );
 
 			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
@@ -103,7 +104,7 @@ class InlineWidget extends Plugin {
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Widget, InlineWidget ],
+		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Clipboard, Widget, InlineWidget ],
 		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {

From 4cc12eaec442204dbb347359fd316c69b4529f59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Wed, 30 Jan 2019 11:21:57 +0100
Subject: [PATCH 04/14] Add isInline=true to placeholder's schema definition in
 manual test.

---
 tests/manual/inline-widget.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index 2a921e4f..d1637641 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -28,6 +28,7 @@ class InlineWidget extends Plugin {
 		editor.model.schema.register( 'placeholder', {
 			allowWhere: '$text',
 			isObject: true,
+			isInline: true,
 			allowAttributes: [ 'type' ]
 		} );
 

From 9ee4d0b2078715e45626442ccb1f8cdce9ca1ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Wed, 30 Jan 2019 16:08:02 +0100
Subject: [PATCH 05/14] Add ShiftEnter plugin to inline widget manual sample.

---
 tests/manual/inline-widget.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index d1637641..4da02c2d 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -20,6 +20,7 @@ import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
 
 class InlineWidget extends Plugin {
 	constructor( editor ) {
@@ -63,14 +64,15 @@ class InlineWidget extends Plugin {
 			}
 		} );
 
+		this._createToolbarButton();
+
 		function createPlaceholderView( modelItem, viewWriter ) {
 			const widgetElement = viewWriter.createContainerElement( 'placeholder' );
 
 			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
+
 			return widgetElement;
 		}
-
-		this._createToolbarButton();
 	}
 
 	_createToolbarButton() {
@@ -105,7 +107,7 @@ class InlineWidget extends Plugin {
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Clipboard, Widget, InlineWidget ],
+		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Clipboard, Widget, ShiftEnter, InlineWidget ],
 		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {

From 41aa892fec692619dcf0ebea32f69b6155ff97f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Wed, 30 Jan 2019 16:14:06 +0100
Subject: [PATCH 06/14] Add description for inline widget manual test.

---
 tests/manual/inline-widget.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/manual/inline-widget.md b/tests/manual/inline-widget.md
index c9148446..806474d4 100644
--- a/tests/manual/inline-widget.md
+++ b/tests/manual/inline-widget.md
@@ -1,3 +1,4 @@
 ### Inline widget
 
-* TODO
+* You should be able to type after inline widget (if it is last child of parent <heading> or <paragraph>)
+* Select text before/after widget and expand selection beyond widget. The widget should be selected and selection expanded beyond it on further expanding.

From 0e173b2b89197461846f5f3a64b8df8dc163e918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Wed, 30 Jan 2019 17:05:53 +0100
Subject: [PATCH 07/14] Add table feature to inline widget manual test.

---
 tests/manual/inline-widget.js | 10 +++++++---
 tests/manual/inline-widget.md |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index 4da02c2d..7765019d 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -21,6 +21,7 @@ import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
+import Table from '@ckeditor/ckeditor5-table/src/table';
 
 class InlineWidget extends Plugin {
 	constructor( editor ) {
@@ -107,8 +108,8 @@ class InlineWidget extends Plugin {
 
 ClassicEditor
 	.create( global.document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Clipboard, Widget, ShiftEnter, InlineWidget ],
-		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, Clipboard, Widget, ShiftEnter, InlineWidget, Table ],
+		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'insertTable', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		editor.model.document.on( 'change', () => {
@@ -128,5 +129,8 @@ function printModelContents( editor ) {
 }
 
 function formatData( data ) {
-	return data.replace( /<(paragraph)>/g, '\n<$1>' );
+	return data
+		.replace( /<(paragraph|\/tableRow|tableCell|table|heading[0-5])>/g, '\n<$1>' )
+		.replace( /(<tableCell>)\n(<paragraph>)/g, '$1$2' )
+		.replace( /\n(<tableCell>)/g, '\n\t$1' );
 }
diff --git a/tests/manual/inline-widget.md b/tests/manual/inline-widget.md
index 806474d4..2b48826a 100644
--- a/tests/manual/inline-widget.md
+++ b/tests/manual/inline-widget.md
@@ -1,4 +1,6 @@
 ### Inline widget
 
-* You should be able to type after inline widget (if it is last child of parent <heading> or <paragraph>)
+* You should be able to type after inline widget (if it is last child of parent <heading> or <paragraph>).
 * Select text before/after widget and expand selection beyond widget. The widget should be selected and selection expanded beyond it on further expanding.
+* The inline-widget should work in nested editable widget (table).
+* Use "insert placeholder" toolbar button to insert inline widget.

From e097009d12417fef39929b5fb81182ccd1a3a614 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Thu, 31 Jan 2019 15:20:47 +0100
Subject: [PATCH 08/14] The findOptimalInsertionPosition() function should
 treat inline elements as text.

---
 src/utils.js   |  2 +-
 tests/utils.js | 23 ++++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 0a7f448a..0cde4bd1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -265,7 +265,7 @@ export function toWidgetEditable( editable, writer ) {
 export function findOptimalInsertionPosition( selection, model ) {
 	const selectedElement = selection.getSelectedElement();
 
-	if ( selectedElement ) {
+	if ( selectedElement && !model.schema.isInline( selectedElement ) ) {
 		return model.createPositionAfter( selectedElement );
 	}
 
diff --git a/tests/utils.js b/tests/utils.js
index 31a99906..b3fe2bf6 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -392,7 +392,7 @@ describe( 'widget utils', () => {
 			expect( pos.path ).to.deep.equal( [ 1 ] );
 		} );
 
-		it( 'returns position before block if in the middle of that block', () => {
+		it( 'returns position before block if in the middle of that block (collapsed selection)', () => {
 			setData( model, '<paragraph>x</paragraph><paragraph>f[]oo</paragraph><paragraph>y</paragraph>' );
 
 			const pos = findOptimalInsertionPosition( doc.selection, model );
@@ -400,6 +400,14 @@ describe( 'widget utils', () => {
 			expect( pos.path ).to.deep.equal( [ 1 ] );
 		} );
 
+		it( 'returns position before block if in the middle of that block (non-collapsed selection)', () => {
+			setData( model, '<paragraph>x</paragraph><paragraph>f[o]o</paragraph><paragraph>y</paragraph>' );
+
+			const pos = findOptimalInsertionPosition( doc.selection, model );
+
+			expect( pos.path ).to.deep.equal( [ 1 ] );
+		} );
+
 		it( 'returns position after block if at the end of that block', () => {
 			setData( model, '<paragraph>x</paragraph><paragraph>foo[]</paragraph><paragraph>y</paragraph>' );
 
@@ -425,5 +433,18 @@ describe( 'widget utils', () => {
 
 			expect( pos.path ).to.deep.equal( [ 3 ] );
 		} );
+
+		it( 'returns position before block selection is on inline element', () => {
+			model.schema.register( 'placeholder', {
+				allowWhere: '$text',
+				isInline: true
+			} );
+
+			setData( model, '<paragraph>x</paragraph><paragraph>f[<placeholder></placeholder>]oo</paragraph><paragraph>y</paragraph>' );
+
+			const pos = findOptimalInsertionPosition( doc.selection, model );
+
+			expect( pos.path ).to.deep.equal( [ 1 ] );
+		} );
 	} );
 } );

From 90c55d8c2d70d3569102a6362db14e896d88f538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Tue, 5 Feb 2019 10:42:26 +0100
Subject: [PATCH 09/14] Add fake selection indicator to the inline widget
 manual test.

---
 tests/manual/inline-widget.html | 16 ++++++++++++++++
 tests/manual/inline-widget.md   |  3 +++
 2 files changed, 19 insertions(+)

diff --git a/tests/manual/inline-widget.html b/tests/manual/inline-widget.html
index bbdf7811..535b31e3 100644
--- a/tests/manual/inline-widget.html
+++ b/tests/manual/inline-widget.html
@@ -25,4 +25,20 @@ <h2>Model contents:</h2>
 	placeholder:after{
 		content: '}'
 	}
+
+	/* This will show box when the fake selection is active. */
+	.ck.ck-content div[style*="left: -9999px;"]:before {
+		background: hsla(9,100%,56%,.3);
+		border: 1px dotted hsl(15, 100%, 43%);
+		color: #333;
+		content: 'fake selection set';
+		display: block;
+		height: 20px;
+		left: calc(50% - 60px);
+		line-height: 20px;
+		padding: 2px 5px;
+		position: fixed;
+		top: 5px;
+		z-index: 1;
+	}
 </style>
diff --git a/tests/manual/inline-widget.md b/tests/manual/inline-widget.md
index 2b48826a..8543eca9 100644
--- a/tests/manual/inline-widget.md
+++ b/tests/manual/inline-widget.md
@@ -4,3 +4,6 @@
 * Select text before/after widget and expand selection beyond widget. The widget should be selected and selection expanded beyond it on further expanding.
 * The inline-widget should work in nested editable widget (table).
 * Use "insert placeholder" toolbar button to insert inline widget.
+* Selected inline widget should have
+    * widget border (blue)
+    * activate fake selection - the "fake selection" element will be shown above the editor

From 0a5cfef6801adfefacb12acc693753401c3dfe88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= <jodator@jodator.net>
Date: Tue, 5 Feb 2019 12:32:43 +0100
Subject: [PATCH 10/14] Improve text visibility around selected inline widget
 in its manual test.

---
 tests/manual/inline-widget.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tests/manual/inline-widget.html b/tests/manual/inline-widget.html
index 535b31e3..c6034842 100644
--- a/tests/manual/inline-widget.html
+++ b/tests/manual/inline-widget.html
@@ -11,7 +11,9 @@ <h2>Model contents:</h2>
 <style>
 	placeholder {
 		background: #ffff00;
-		padding: 2px;
+		padding: 4px 2px;
+		outline-offset: -2px;
+		line-height: 1em;
 	}
 
 	placeholder::selection{

From 21c2cfd3a504892e7351023c7834f05b36ced670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Wed, 13 Feb 2019 09:57:40 +0100
Subject: [PATCH 11/14] Minor logic clarification.

---
 src/utils.js   |  2 +-
 tests/utils.js | 30 ++++++++++++++++--------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 0cde4bd1..22ffc007 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -265,7 +265,7 @@ export function toWidgetEditable( editable, writer ) {
 export function findOptimalInsertionPosition( selection, model ) {
 	const selectedElement = selection.getSelectedElement();
 
-	if ( selectedElement && !model.schema.isInline( selectedElement ) ) {
+	if ( selectedElement && model.schema.isBlock( selectedElement ) ) {
 		return model.createPositionAfter( selectedElement );
 	}
 
diff --git a/tests/utils.js b/tests/utils.js
index b3fe2bf6..b31007c4 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -361,7 +361,8 @@ describe( 'widget utils', () => {
 
 			model.schema.extend( 'image', {
 				allowIn: '$root',
-				isObject: true
+				isObject: true,
+				isBlock: true
 			} );
 
 			model.schema.extend( 'span', { allowIn: 'paragraph' } );
@@ -376,6 +377,20 @@ describe( 'widget utils', () => {
 			expect( pos.path ).to.deep.equal( [ 2 ] );
 		} );
 
+		it( 'returns position before parent block if an inline object is selected', () => {
+			model.schema.register( 'placeholder', {
+				allowWhere: '$text',
+				isInline: true,
+				isObject: true
+			} );
+
+			setData( model, '<paragraph>x</paragraph><paragraph>f[<placeholder></placeholder>]oo</paragraph><paragraph>y</paragraph>' );
+
+			const pos = findOptimalInsertionPosition( doc.selection, model );
+
+			expect( pos.path ).to.deep.equal( [ 1 ] );
+		} );
+
 		it( 'returns position inside empty block', () => {
 			setData( model, '<paragraph>x</paragraph><paragraph>[]</paragraph><paragraph>y</paragraph>' );
 
@@ -433,18 +448,5 @@ describe( 'widget utils', () => {
 
 			expect( pos.path ).to.deep.equal( [ 3 ] );
 		} );
-
-		it( 'returns position before block selection is on inline element', () => {
-			model.schema.register( 'placeholder', {
-				allowWhere: '$text',
-				isInline: true
-			} );
-
-			setData( model, '<paragraph>x</paragraph><paragraph>f[<placeholder></placeholder>]oo</paragraph><paragraph>y</paragraph>' );
-
-			const pos = findOptimalInsertionPosition( doc.selection, model );
-
-			expect( pos.path ).to.deep.equal( [ 1 ] );
-		} );
 	} );
 } );

From efbdbf71b8884e3389ce962f1b986f1ff058f7c4 Mon Sep 17 00:00:00 2001
From: Szymon Cofalik <s.cofalik@cksource.com>
Date: Fri, 15 Feb 2019 18:52:30 +0100
Subject: [PATCH 12/14] Added `utils.viewToModelPositionOutsideModelElement`.
 Changed inline-widget manual sample to use it. Removed CSS-created '{}' from
 manual sample.

---
 src/utils.js                    | 60 ++++++++++++++++++++++
 tests/manual/inline-widget.html | 12 +----
 tests/manual/inline-widget.js   | 16 ++++--
 tests/utils.js                  | 89 ++++++++++++++++++++++++++++++++-
 4 files changed, 161 insertions(+), 16 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 22ffc007..a1257a7a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -292,6 +292,66 @@ export function findOptimalInsertionPosition( selection, model ) {
 	return selection.focus;
 }
 
+/**
+ * Maps view position to model position if view position is inside a view inline widget which has content while
+ * the model element is empty.
+ *
+ *		editor.editing.mapper.on(
+ *			'viewToModelPosition',
+ *			viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
+ *		);
+ *
+ * For example:
+ *
+ *		// Model:
+ *		<placeholder type="name"></placeholder>
+ *
+ *		// View:
+ *		<span class="placeholder">name</span>
+ *
+ * In such case, view position inside `<span>` could not be correct mapped to the model.
+ *
+ * The callback will try to map the view offset of selection to an expected model position.
+ *
+ * 1. When the position is at the end (or in the middle) of the inline widget:
+ *
+ *		// View:
+ *		<p>foo <span class="placeholder">name|</span> bar</p>
+ *
+ *		// Model:
+ *		<paragraph>foo <placeholder type="name"></inline-widget>| bar</paragraph>
+ *
+ * 2. When the position is at the beginning of the inline widget:
+ *
+ *		// View:
+ *		<p>foo <span class="placeholder">|name</span> bar</p>
+ *
+ *		// Model:
+ *		<paragraph>foo |<placeholder type="name"></inline-widget> bar</paragraph>
+ *
+ * **Note:** remember to {@link module:engine/conversion/mapper~Mapper#bindElements bind} model and view element.
+ *
+ * @param {module:engine/model/model~Model} model Model instance on which the callback operates.
+ * @param {Function} viewElementMatcher Function that is passed a view element and should return `true` if the custom mapping
+ * should be applied to the given view element.
+ * @return {Function}
+ */
+export function viewToModelPositionOutsideModelElement( model, viewElementMatcher ) {
+	return ( evt, data ) => {
+		const { mapper, viewPosition } = data;
+
+		const viewParent = mapper.findMappedViewAncestor( viewPosition );
+
+		if ( !viewElementMatcher( viewParent ) ) {
+			return;
+		}
+
+		const modelParent = mapper.toModelElement( viewParent );
+
+		data.modelPosition = model.createPositionAt( modelParent, viewPosition.isAtStart ? 'before' : 'after' );
+	};
+}
+
 // Default filler offset function applied to all widget elements.
 //
 // @returns {null}
diff --git a/tests/manual/inline-widget.html b/tests/manual/inline-widget.html
index c6034842..147dc978 100644
--- a/tests/manual/inline-widget.html
+++ b/tests/manual/inline-widget.html
@@ -1,7 +1,7 @@
 <div id="editor">
-	<h1>Hello <placeholder>name</placeholder>!</h1>
+	<h1>Hello <placeholder>{name}</placeholder>!</h1>
 
-	<p>We would like to invite you to <placeholder>place</placeholder> that will take place on <placeholder>date</placeholder>.</p>
+	<p>We would like to invite you to <placeholder>{place}</placeholder> that will take place on <placeholder>{date}</placeholder>.</p>
 </div>
 
 <h2>Model contents:</h2>
@@ -20,14 +20,6 @@ <h2>Model contents:</h2>
 		display: none;
 	}
 
-	placeholder:before{
-		content: '{'
-	}
-
-	placeholder:after{
-		content: '}'
-	}
-
 	/* This will show box when the fake selection is active. */
 	.ck.ck-content div[style*="left: -9999px;"]:before {
 		background: hsla(9,100%,56%,.3);
diff --git a/tests/manual/inline-widget.js b/tests/manual/inline-widget.js
index 7765019d..da2c22ee 100644
--- a/tests/manual/inline-widget.js
+++ b/tests/manual/inline-widget.js
@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* global console */
+/* global console, window */
 
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
@@ -17,7 +17,7 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Typing from '@ckeditor/ckeditor5-typing/src/typing';
 import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
-import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
+import { toWidget, viewToModelPositionOutsideModelElement } from '../../src/utils';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
@@ -57,7 +57,7 @@ class InlineWidget extends Plugin {
 					const text = viewElement.getChild( 0 );
 
 					if ( text.is( 'text' ) ) {
-						type = text.data;
+						type = text.data.slice( 1, -1 );
 					}
 				}
 
@@ -65,12 +65,18 @@ class InlineWidget extends Plugin {
 			}
 		} );
 
+		editor.editing.mapper.on(
+			'viewToModelPosition',
+			viewToModelPositionOutsideModelElement( editor.model, viewElement => viewElement.name == 'placeholder' )
+		);
+
 		this._createToolbarButton();
 
 		function createPlaceholderView( modelItem, viewWriter ) {
 			const widgetElement = viewWriter.createContainerElement( 'placeholder' );
+			const viewText = viewWriter.createText( '{' + modelItem.getAttribute( 'type' ) + '}' );
 
-			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewWriter.createText( modelItem.getAttribute( 'type' ) ) );
+			viewWriter.insert( viewWriter.createPositionAt( widgetElement, 0 ), viewText );
 
 			return widgetElement;
 		}
@@ -112,6 +118,8 @@ ClassicEditor
 		toolbar: [ 'heading', '|', 'bold', '|', 'placeholder', '|', 'insertTable', '|', 'undo', 'redo' ]
 	} )
 	.then( editor => {
+		window.editor = editor;
+
 		editor.model.document.on( 'change', () => {
 			printModelContents( editor );
 		} );
diff --git a/tests/utils.js b/tests/utils.js
index b31007c4..8b0d62b6 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -6,8 +6,9 @@
 /* global document */
 
 import DowncastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter';
-import Text from '@ckeditor/ckeditor5-engine/src/view/text';
+import ViewText from '@ckeditor/ckeditor5-engine/src/view/text';
 import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
+import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
 import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
 import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
 import {
@@ -18,6 +19,7 @@ import {
 	toWidgetEditable,
 	setHighlightHandling,
 	findOptimalInsertionPosition,
+	viewToModelPositionOutsideModelElement,
 	WIDGET_CLASS_NAME
 } from '../src/utils';
 import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
@@ -25,6 +27,9 @@ import env from '@ckeditor/ckeditor5-utils/src/env';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import Model from '@ckeditor/ckeditor5-engine/src/model/model';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import Mapper from '@ckeditor/ckeditor5-engine/src/conversion/mapper';
+import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
+import ModelText from '@ckeditor/ckeditor5-engine/src/model/text';
 
 describe( 'widget utils', () => {
 	let element, writer, viewDocument;
@@ -146,7 +151,7 @@ describe( 'widget utils', () => {
 		} );
 
 		it( 'should return false for text node', () => {
-			expect( isWidget( new Text( 'p' ) ) ).to.be.false;
+			expect( isWidget( new ViewText( 'p' ) ) ).to.be.false;
 		} );
 	} );
 
@@ -449,4 +454,84 @@ describe( 'widget utils', () => {
 			expect( pos.path ).to.deep.equal( [ 3 ] );
 		} );
 	} );
+
+	describe( 'viewToModelPositionOutsideModelElement', () => {
+		let mapper, model, modelP, viewP, viewXyz, modelSpan, viewSpan;
+
+		beforeEach( () => {
+			mapper = new Mapper();
+			model = new Model();
+
+			const modelFoo = new ModelText( 'foo' );
+			modelSpan = new ModelElement( 'span' );
+			const modelBar = new ModelText( 'bar' );
+			modelP = new ModelElement( 'p', null, [ modelFoo, modelSpan, modelBar ] );
+
+			const viewFoo = new ViewText( 'foo' );
+			viewXyz = new ViewText( 'xyz' );
+			viewSpan = new ViewElement( 'span', null, viewXyz );
+			const viewBar = new ViewText( 'bar' );
+			viewP = new ViewElement( 'p', null, [ viewFoo, viewSpan, viewBar ] );
+
+			mapper.bindElements( modelP, viewP );
+			mapper.bindElements( modelSpan, viewSpan );
+		} );
+
+		it( 'should map view position that is at the beginning of the view element to a position before the model element', () => {
+			mapper.on( 'viewToModelPosition', viewToModelPositionOutsideModelElement( model, viewElement => viewElement.name == 'span' ) );
+
+			// View:
+			// <p>foo<span>|xyz</span>bar</p>.
+			const viewPosition = new ViewPosition( viewXyz, 0 );
+
+			// Model:
+			// <p>foo|<span></span>bar</p>.
+			const modelPosition = mapper.toModelPosition( viewPosition );
+
+			expect( modelPosition.path ).to.deep.equal( [ 3 ] );
+		} );
+
+		it( 'should map view position that is in the middle of the view element to a position after the model element', () => {
+			mapper.on( 'viewToModelPosition', viewToModelPositionOutsideModelElement( model, viewElement => viewElement.name == 'span' ) );
+
+			// View:
+			// <p>foo<span>x|yz</span>bar</p>.
+			const viewPosition = new ViewPosition( viewXyz, 1 );
+
+			// Model:
+			// <p>foo|<span></span>bar</p>.
+			const modelPosition = mapper.toModelPosition( viewPosition );
+
+			expect( modelPosition.path ).to.deep.equal( [ 4 ] );
+		} );
+
+		it( 'should map view position that is at the end of the view element to a position after the model element', () => {
+			mapper.on( 'viewToModelPosition', viewToModelPositionOutsideModelElement( model, viewElement => viewElement.name == 'span' ) );
+
+			// View:
+			// <p>foo<span>xyz|</span>bar</p>.
+			const viewPosition = new ViewPosition( viewXyz, 3 );
+
+			// Model:
+			// <p>foo<span></span>|bar</p>.
+			const modelPosition = mapper.toModelPosition( viewPosition );
+
+			expect( modelPosition.path ).to.deep.equal( [ 4 ] );
+		} );
+
+		it( 'should not fire if view element is not matched', () => {
+			mapper.on( 'viewToModelPosition', viewToModelPositionOutsideModelElement( model, () => false ) );
+
+			// View:
+			// <p>foo<span>x|yz</span>bar</p>.
+			const viewPosition = new ViewPosition( viewXyz, 1 );
+
+			// Model:
+			// <p>foo<span>x|yz</span>bar</p>.
+			modelSpan._appendChild( new ModelText( 'xyz' ) );
+			const modelPosition = mapper.toModelPosition( viewPosition );
+
+			expect( modelPosition.path ).to.deep.equal( [ 3, 1 ] );
+		} );
+	} );
 } );

From 5adcd2423171e85127f8120de5ace66d70333364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 18 Feb 2019 11:37:49 +0100
Subject: [PATCH 13/14] Improved docs.

---
 src/utils.js   | 23 +++++++++++------------
 tests/utils.js |  6 ++++--
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index f40c53e8..84b2ad54 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -290,13 +290,8 @@ export function findOptimalInsertionPosition( selection, model ) {
 }
 
 /**
- * Maps view position to model position if view position is inside a view inline widget which has content while
- * the model element is empty.
- *
- *		editor.editing.mapper.on(
- *			'viewToModelPosition',
- *			viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
- *		);
+ * A util to be used in order to map view positions to correct model positions when implementing a widget
+ * which renders non-empty view element for an empty model element.
  *
  * For example:
  *
@@ -306,7 +301,13 @@ export function findOptimalInsertionPosition( selection, model ) {
  *		// View:
  *		<span class="placeholder">name</span>
  *
- * In such case, view position inside `<span>` could not be correct mapped to the model.
+ * In such case, view positions inside `<span>` cannot be correct mapped to the model (because the model element is empty).
+ * To handle mapping positions inside `<span class="placeholder">` to the model use this util as follows:
+ *
+ *		editor.editing.mapper.on(
+ *			'viewToModelPosition',
+ *			viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
+ *		);
  *
  * The callback will try to map the view offset of selection to an expected model position.
  *
@@ -316,7 +317,7 @@ export function findOptimalInsertionPosition( selection, model ) {
  *		<p>foo <span class="placeholder">name|</span> bar</p>
  *
  *		// Model:
- *		<paragraph>foo <placeholder type="name"></inline-widget>| bar</paragraph>
+ *		<paragraph>foo <placeholder type="name"></placeholder>| bar</paragraph>
  *
  * 2. When the position is at the beginning of the inline widget:
  *
@@ -324,9 +325,7 @@ export function findOptimalInsertionPosition( selection, model ) {
  *		<p>foo <span class="placeholder">|name</span> bar</p>
  *
  *		// Model:
- *		<paragraph>foo |<placeholder type="name"></inline-widget> bar</paragraph>
- *
- * **Note:** remember to {@link module:engine/conversion/mapper~Mapper#bindElements bind} model and view element.
+ *		<paragraph>foo |<placeholder type="name"></placeholder> bar</paragraph>
  *
  * @param {module:engine/model/model~Model} model Model instance on which the callback operates.
  * @param {Function} viewElementMatcher Function that is passed a view element and should return `true` if the custom mapping
diff --git a/tests/utils.js b/tests/utils.js
index 8b0d62b6..f7707f8c 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -180,7 +180,7 @@ describe( 'widget utils', () => {
 		} );
 	} );
 
-	describe( 'toWidgetEditable', () => {
+	describe( 'toWidgetEditable()', () => {
 		let viewDocument, element;
 
 		beforeEach( () => {
@@ -455,18 +455,20 @@ describe( 'widget utils', () => {
 		} );
 	} );
 
-	describe( 'viewToModelPositionOutsideModelElement', () => {
+	describe( 'viewToModelPositionOutsideModelElement()', () => {
 		let mapper, model, modelP, viewP, viewXyz, modelSpan, viewSpan;
 
 		beforeEach( () => {
 			mapper = new Mapper();
 			model = new Model();
 
+			// MODEL: <p>foo<span></span>bar</p>
 			const modelFoo = new ModelText( 'foo' );
 			modelSpan = new ModelElement( 'span' );
 			const modelBar = new ModelText( 'bar' );
 			modelP = new ModelElement( 'p', null, [ modelFoo, modelSpan, modelBar ] );
 
+			// VIEW: <p>foo<span>xyz</span>bar</p>
 			const viewFoo = new ViewText( 'foo' );
 			viewXyz = new ViewText( 'xyz' );
 			viewSpan = new ViewElement( 'span', null, viewXyz );

From 77fe639a211a93ae4146baa307b1f9516bfe0650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= <pkoszulinski@gmail.com>
Date: Mon, 18 Feb 2019 11:45:14 +0100
Subject: [PATCH 14/14] The world's a better place now.

---
 tests/manual/inline-widget.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/manual/inline-widget.html b/tests/manual/inline-widget.html
index 147dc978..163ce927 100644
--- a/tests/manual/inline-widget.html
+++ b/tests/manual/inline-widget.html
@@ -16,12 +16,12 @@ <h2>Model contents:</h2>
 		line-height: 1em;
 	}
 
-	placeholder::selection{
+	placeholder::selection {
 		display: none;
 	}
 
 	/* This will show box when the fake selection is active. */
-	.ck.ck-content div[style*="left: -9999px;"]:before {
+	.ck.ck-content div[style*="left: -9999px;"]::before {
 		background: hsla(9,100%,56%,.3);
 		border: 1px dotted hsl(15, 100%, 43%);
 		color: #333;