Merge pull request #88 from ckeditor/t/86

Fix: `InputCommand` now accepts `Range` instead of `Position` as a parameter. Closes #86. Closes #54.
BREAKING CHANGE: `InputCommand` `options.resultPosition` was replaced with `options.resultRange`.

package.json

@@ -16,6 +16,7 @@
     "@ckeditor/ckeditor5-heading": "^0.8.0",
     "@ckeditor/ckeditor5-paragraph": "^0.6.1",
     "@ckeditor/ckeditor5-undo": "^0.7.1",
+    "@ckeditor/ckeditor5-presets": "^0.1.1",
     "gulp": "^3.9.0",
     "guppy-pre-commit": "^0.4.0"
   },

src/input.js

@@ -184,10 +184,10 @@ class MutationHandler {
 		}
 
 		// Try setting new model selection according to passed view selection.
-		let modelSelectionPosition = null;
+		let modelSelectionRange = null;
 
 		if ( viewSelection ) {
-			modelSelectionPosition = this.editing.mapper.toModelPosition( viewSelection.anchor );
+			modelSelectionRange = this.editing.mapper.toModelRange( viewSelection.getFirstRange() );
 		}
 
 		// Get the position in view and model where the changes will happen.
@@ -199,7 +199,7 @@ class MutationHandler {
 		this.editor.execute( 'input', {
 			text: insertText,
 			range: removeRange,
-			resultPosition: modelSelectionPosition
+			resultRange: modelSelectionRange
 		} );
 	}
 

src/inputcommand.js

@@ -64,7 +64,7 @@ export default class InputCommand extends Command {
 	 * @param {String} [options.text=''] Text to be inserted.
 	 * @param {module:engine/model/range~Range} [options.range] Range in which the text is inserted. Defaults
 	 * to the first range in the current selection.
-	 * @param {module:engine/model/position~Position} [options.resultPosition] Position at which the selection
+	 * @param {module:engine/model/range~Range} [options.resultRange] Range at which the selection
 	 * should be placed after the insertion. If not specified, the selection will be placed right after
 	 * the inserted text.
 	 */
@@ -73,7 +73,7 @@ export default class InputCommand extends Command {
 		const text = options.text || '';
 		const textInsertions = text.length;
 		const range = options.range || doc.selection.getFirstRange();
-		const resultPosition = options.resultPosition;
+		const resultRange = options.resultRange;
 
 		doc.enqueueChanges( () => {
 			const isCollapsedRange = range.isCollapsed;
@@ -86,8 +86,8 @@ export default class InputCommand extends Command {
 
 			this._buffer.batch.weakInsert( range.start, text );
 
-			if ( resultPosition ) {
-				this.editor.data.model.selection.collapse( resultPosition );
+			if ( resultRange ) {
+				this.editor.data.model.selection.setRanges( [ resultRange ] );
 			} else if ( isCollapsedRange ) {
 				// If range was collapsed just shift the selection by the number of inserted characters.
 				this.editor.data.model.selection.collapse( range.start.getShiftedBy( textInsertions ) );

tests/input.js

@@ -295,6 +295,27 @@ describe( 'Input feature', () => {
 			expect( getViewData( view ) ).to.equal( '<p>Foo house{}</p>' );
 		} );
 
+		it( 'should place non-collapsed selection after changing single character (composition)', () => {
+			editor.setData( '<p>Foo house</p>' );
+
+			const viewSelection = new ViewSelection();
+			viewSelection.collapse( viewRoot.getChild( 0 ).getChild( 0 ), 8 );
+			viewSelection.setFocus( viewRoot.getChild( 0 ).getChild( 0 ), 9 );
+
+			view.fire( 'mutations',
+				[ {
+					type: 'text',
+					oldText: 'Foo house',
+					newText: 'Foo housa',
+					node: viewRoot.getChild( 0 ).getChild( 0 )
+				} ],
+				viewSelection
+			);
+
+			expect( getModelData( model ) ).to.equal( '<paragraph>Foo hous[a]</paragraph>' );
+			expect( getViewData( view ) ).to.equal( '<p>Foo hous{a}</p>' );
+		} );
+
 		it( 'should replace last &nbsp; with space', () => {
 			model.enqueueChanges( () => {
 				model.selection.setRanges( [

tests/inputcommand.js

@@ -7,6 +7,8 @@ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtest
 import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+import Position from '@ckeditor/ckeditor5-engine/src/model/position';
 import InputCommand from '../src/inputcommand';
 import ChangeBuffer from '../src/changebuffer';
 import Input from '../src/input';
@@ -168,6 +170,30 @@ describe( 'InputCommand', () => {
 			expect( buffer.size ).to.be.equal( 0 );
 		} );
 
+		it( 'should set selection according to passed resultRange (collapsed)', () => {
+			setData( doc, '<p>[foo]bar</p>' );
+
+			editor.execute( 'input', {
+				text: 'new',
+				resultRange: new Range( new Position( doc.getRoot(), [ 0, 5 ] ) )
+			} );
+
+			expect( getData( doc, { selection: true } ) ).to.be.equal( '<p>newba[]r</p>' );
+			expect( buffer.size ).to.be.equal( 3 );
+		} );
+
+		it( 'should set selection according to passed resultRange (non-collapsed)', () => {
+			setData( doc, '<p>[foo]bar</p>' );
+
+			editor.execute( 'input', {
+				text: 'new',
+				resultRange: new Range( new Position( doc.getRoot(), [ 0, 3 ] ), new Position( doc.getRoot(), [ 0, 6 ] ) )
+			} );
+
+			expect( getData( doc, { selection: true } ) ).to.be.equal( '<p>new[bar]</p>' );
+			expect( buffer.size ).to.be.equal( 3 );
+		} );
+
 		it( 'only removes content when no text given (with default non-collapsed range)', () => {
 			setData( doc, '<p>[fo]obar</p>' );
 

tests/manual/20/1.js

@@ -6,16 +6,14 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 } )
 .then( editor => {

tests/manual/21/1.js

@@ -6,16 +6,14 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 } )
 .then( editor => {

tests/manual/82/1.js

@@ -6,19 +6,17 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 window.setInterval( function() {
 	console.log( getData( window.editor.document ) );
 }, 3000 );
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Heading ],
 	toolbar: [ 'headings', 'undo', 'redo' ]
 } )
 .then( editor => {

tests/manual/86/1.html

@@ -0,0 +1,3 @@
+<div id="editor">
+	<p>This is an editor instance.</p>
+</div>

tests/manual/86/1.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console, window, document */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+
+window.setInterval( function() {
+	console.log( getData( window.editor.document ) );
+}, 3000 );
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	plugins: [ EssentialsPreset, Paragraph ],
+	toolbar: [ 'undo', 'redo' ]
+} )
+.then( editor => {
+	window.editor = editor;
+} )
+.catch( err => {
+	console.error( err.stack );
+} );

tests/manual/86/1.md

@@ -0,0 +1,5 @@
+## Typing - MacOS accent balloon 
+
+It is possible to navigate with arrow keys inside MacOS balloon panel and insert a selected accent
+(long "a" press to activate accent balloon).
+

tests/manual/delete.js

@@ -6,13 +6,11 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 window.getData = getData;
@@ -22,7 +20,7 @@ window.setInterval( function() {
 }, 3000 );
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 } )
 .then( editor => {

tests/manual/input.js

@@ -6,21 +6,19 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 window.setInterval( function() {
 	console.log( getData( window.editor.document ) );
 }, 3000 );
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 } )
 .then( editor => {

tests/manual/rtl.js

@@ -6,17 +6,15 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 const config = {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 };
 

tests/manual/selection.js

@@ -6,14 +6,12 @@
 /* globals console, document, window */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../src/typing';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold ],
+	plugins: [ EssentialsPreset, Paragraph, Bold ],
 	toolbar: [ 'bold' ]
 } )
 .then( editor => {

tests/manual/spellchecking.js

@@ -6,21 +6,19 @@
 /* globals console, window, document */
 
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
-import Enter from '@ckeditor/ckeditor5-enter/src/enter';
-import Typing from '../../src/typing';
 import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Undo from '@ckeditor/ckeditor5-undo/src/undo';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import EssentialsPreset from '@ckeditor/ckeditor5-presets/src/essentials';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 window.setInterval( function() {
 	console.log( getData( window.editor.document ) );
 }, 3000 );
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading ],
+	plugins: [ EssentialsPreset, Paragraph, Bold, Italic, Heading ],
 	toolbar: [ 'headings', 'bold', 'italic', 'undo', 'redo' ]
 } )
 	.then( editor => {

tests/manual/spellchecking.md

@@ -4,5 +4,4 @@ Try to correct all misspelled words using native spell checking mechanism in the
 
 * Words should be corrected and selection placed after corrected word.
 
-_In Safari selection is placed at the beginning of the corrected word
-(this is a known issue [ckeditor5-typing/#54](https://github.com/ckeditor/ckeditor5-typing/issues/54))_.
+_In Safari selection contains whole corrected word (same as in native contenteditable)_.