mediawiki-extensions-VisualEditor/modules/ve/es/ve.es.Surface.js

/**
 * Creates an ve.es.Surface object.
 *
 * @class
 * @constructor
 * @param {jQuery} $container DOM Container to render surface into
 * @param {ve.dm.Surface} model Surface model to view
 */
ve.es.Surface = function( $container, model ) {
	// Inheritance
	ve.EventEmitter.call( this );

	// References for use in closures
	var	_this = this,
		$document = $( document ),
		$window = $( window );
	
	// Properties
	this.model = model;
	this.currentSelection = new ve.Range();
	this.documentView = new ve.es.DocumentNode( this.model.getDocument(), this );
	this.contextView = null;
	this.$ = $container
		.addClass( 'es-surfaceView' )
		.append( this.documentView.$ );
	this.$input = $( '<textarea class="es-surfaceView-textarea" autocapitalize="off" />' )
		.appendTo( 'body' );
	this.$cursor = $( '<div class="es-surfaceView-cursor"></div>' )
		.appendTo( 'body' );
	this.insertionAnnotations = [];
	this.updateSelectionTimeout = undefined;
	this.emitUpdateTimeout = undefined;
	this.emitCursorTimeout = undefined;

	// Interaction states
	
	/*
	 * There are three different selection modes available for mouse. Selection of:
	 *     1 - chars
	 *     2 - words
	 *     3 - nodes (e.g. paragraph, listitem)
	 *
	 * In case of 2 and 3 selectedRange stores the range of original selection caused by double
	 * or triple mousedowns.
	 */
	this.mouse = {
		selectingMode: null,
		selectedRange: null
	};
	this.cursor = {
		interval: null,
		initialLeft: null,
		initialBias: false
	};
	this.keyboard = {
		selecting: false,
		cursorAnchor: null,
		keydownTimeout: null,
		keys: { shift: false },
		readInterval: null,
		prevInput: '',
		undoCount: 0,
		chunkSize: 3
	};
	this.dimensions = {
		width: this.$.width(),
		height: $window.height(),
		scrollTop: $window.scrollTop(),
		// XXX: This is a dirty hack!
		toolbarHeight: $( '#es-toolbar' ).height()
	};

	// Events

	this.model.on( 'select', function( selection ) {
		// Keep a copy of the current selection on hand
		_this.currentSelection = selection.clone();
		// Respond to selection changes
		_this.updateSelection();
		if ( selection.getLength() ) {
			_this.$input.val( _this.documentView.model.getContentText( selection ) ).select();
			_this.clearInsertionAnnotations();
		} else {
			_this.loadInsertionAnnotations();
		}
	} );
	this.model.getDocument().on( 'update', function() {
		_this.emitUpdate( 25 );
	} );
	this.on( 'update', function() {
		_this.updateSelection( 25 );
	} );
	this.$.mousedown( function(e) {
		return _this.onMouseDown( e );
	} );

	this.$input.bind( {
			'focus': function( e ) {
				// Make sure we aren't double-binding
				$document.unbind( '.es-surfaceView' );
				// Bind mouse and key events to the document to ensure we don't miss anything
				$document.bind( {
					'mousemove.es-surfaceView': function( e ) {
						return _this.onMouseMove( e );
					},
					'mouseup.es-surfaceView': function( e ) {
						return _this.onMouseUp( e );
					},
					'keydown.es-surfaceView': function( e ) {
						return _this.onKeyDown( e );
					},
					'keyup.es-surfaceView': function( e ) {
						return _this.onKeyUp( e );
					},
					'copy.es-surfaceView': function( e ) {
						return _this.onCopy( e );
					},
					'cut.es-surfaceView': function( e ) {
						return _this.onCut( e );
					},
					'paste.es-surfaceView': function( e ) {
						return _this.onPaste( e );
					}
				} );
				return _this.onFocus( e );
			},
			'blur': function( e ) {
				// Release our event handlers when not focused
				$document.unbind( '.es-surfaceView' );
				_this.hideCursor();
				return _this.onBlur( e );
			},
			'paste': function() {
				setTimeout( function() {
					_this.model.breakpoint();
					_this.insertFromInput();
					_this.model.breakpoint();
				}, 0 );
			}
		} );
	$window.bind( {
		'resize': function() {
			// Re-render when resizing horizontally
			// TODO: Instead of re-rendering on every single 'resize' event wait till user is done
			// with resizing - can be implemented with setTimeout
			_this.hideCursor();
			_this.dimensions.height = $window.height();
			// XXX: This is a dirty hack!
			_this.dimensions.toolbarHeight = $( '#es-toolbar' ).height();
			var width = _this.$.width();
			if ( _this.dimensions.width !== width ) {
				_this.dimensions.width = width;
				_this.documentView.renderContent();
				_this.emitUpdate( 25 );
			}
		},
		'scroll': function() {
			_this.dimensions.scrollTop = $window.scrollTop();
			if ( _this.contextView ) {
				if ( _this.currentSelection.getLength() && !_this.mouse.selectingMode ) {
					_this.contextView.set();
				} else {
					_this.contextView.clear();
				}
			}
		},
		'blur': function() {
			_this.keyboard.keys.shift = false;
		}
	} );

	// Configuration
	this.mac = navigator.userAgent.match(/mac/i) ? true : false; // (yes it's evil, for keys only!)
	this.ie8 = $.browser.msie && $.browser.version === "8.0";

	// Initialization
	this.$input.focus();
	this.documentView.renderContent();
};

/* Methods */

ve.es.Surface.prototype.attachContextView = function( contextView ) {
	this.contextView = contextView;
};

ve.es.Surface.prototype.getContextView = function() {
	return this.contextView ;
};

ve.es.Surface.prototype.annotate = function( method, annotation ) {
	if ( method === 'toggle' ) {
		var annotations = this.getAnnotations();
		if ( ve.dm.DocumentNode.getIndexOfAnnotation( annotations.full, annotation ) !== -1 ) {
			method = 'clear';
		} else {
			method = 'set';
		}
	}
	if ( this.currentSelection.getLength() ) {
		var tx = this.model.getDocument().prepareContentAnnotation(
			this.currentSelection, method, annotation
		);
		this.model.transact( tx );
	} else {
		if ( method === 'set' ) {
			this.addInsertionAnnotation( annotation );
		} else if ( method === 'clear' ) {
			this.removeInsertionAnnotation( annotation );
		}
	}
};

ve.es.Surface.prototype.getAnnotations = function() {
	return this.currentSelection.getLength() ?
		this.model.getDocument().getAnnotationsFromRange( this.currentSelection ) :
		{
			'full': this.insertionAnnotations,
			'partial': [],
			'all': this.insertionAnnotations
		};
};

ve.es.Surface.prototype.emitCursor = function() {
	if ( this.emitCursorTimeout ) {
		clearTimeout( this.emitCursorTimeout );
	}
	var _this = this;
	this.emitCursorTimeout = setTimeout( function() {
		var	annotations = _this.getAnnotations(),
			nodes = [],
			model = _this.documentView.model;
		if ( _this.currentSelection.from === _this.currentSelection.to ) {
			nodes.push( model.getNodeFromOffset( _this.currentSelection.from ) );
		} else {
			var	startNode = model.getNodeFromOffset( _this.currentSelection.start ),
				endNode = model.getNodeFromOffset( _this.currentSelection.end );
			if ( startNode === endNode ) {
				nodes.push( startNode );
			} else {
				model.traverseLeafNodes( function( node ) {
					nodes.push( node );
					if( node === endNode ) {
						return false;
					}
				}, startNode );
			}
		}
		_this.emit( 'cursor', annotations, nodes );
	}, 50 );
};

ve.es.Surface.prototype.getInsertionAnnotations = function() {
	return this.insertionAnnotations;
};

ve.es.Surface.prototype.addInsertionAnnotation = function( annotation ) {
	this.insertionAnnotations.push( annotation );
	this.emitCursor();
};

ve.es.Surface.prototype.loadInsertionAnnotations = function( annotation ) {
	this.insertionAnnotations =
		this.model.getDocument().getAnnotationsFromOffset( this.currentSelection.to - 1 );
	// Filter out annotations that aren't textStyles or links
	for ( var i = 0; i < this.insertionAnnotations.length; i++ ) {
		if ( !this.insertionAnnotations[i].type.match( /(textStyle\/|link\/)/ ) ) {
			this.insertionAnnotations.splice( i, 1 );
			i--;
		}
	}
	this.emitCursor();
};

ve.es.Surface.prototype.removeInsertionAnnotation = function( annotation ) {
	var index = ve.dm.DocumentNode.getIndexOfAnnotation( this.insertionAnnotations, annotation );
	if ( index !== -1 ) {
		this.insertionAnnotations.splice( index, 1 );
	}
	this.emitCursor();
};

ve.es.Surface.prototype.clearInsertionAnnotations = function() {
	this.insertionAnnotations = [];
	this.emitCursor();
};

ve.es.Surface.prototype.getModel = function() {
	return this.model;
};

ve.es.Surface.prototype.updateSelection = function( delay ) {
	var _this = this;
	function update() {
		if ( _this.currentSelection.getLength() ) {
			_this.clearInsertionAnnotations();
			_this.hideCursor();
			_this.documentView.drawSelection( _this.currentSelection );
		} else {
			_this.showCursor();
			_this.documentView.clearSelection( _this.currentSelection );
		}
		if ( _this.contextView ) {
			if ( _this.currentSelection.getLength() && !_this.mouse.selectingMode ) {
				_this.contextView.set();
			} else {
				_this.contextView.clear();
			}
		}
		_this.updateSelectionTimeout = undefined;
	}
	if ( delay ) {
		if ( this.updateSelectionTimeout !== undefined ) {
			return;
		}
		this.updateSelectionTimeout = setTimeout( update, delay );
	} else {
		update();
	}
};

ve.es.Surface.prototype.emitUpdate = function( delay ) {
	if ( delay ) {
		if ( this.emitUpdateTimeout !== undefined ) {
			return;
		}
		var _this = this;
		this.emitUpdateTimeout = setTimeout( function() {
			_this.emit( 'update' );
			_this.emitUpdateTimeout = undefined;
		}, delay );
	} else {
		this.emit( 'update' );
	}
};

ve.es.Surface.prototype.onMouseDown = function( e ) {
	// Only for left mouse button
	if ( e.which === 1 ) {
		var selection = this.currentSelection.clone(),
			offset = this.documentView.getOffsetFromEvent( e );
		// Single click
		if ( this.ie8 || e.originalEvent.detail === 1 ) {
			// @see {ve.es.Surface.prototype.onMouseMove}
			this.mouse.selectingMode = 1;

			if ( this.keyboard.keys.shift && offset !== selection.from ) {
				// Extend current or create new selection
				selection.to = offset;
			} else {
				selection.from = selection.to = offset;

				var	position = ve.Position.newFromEventPagePosition( e ),
					nodeView = this.documentView.getNodeFromOffset( offset, false );
				this.cursor.initialBias = position.left > nodeView.contentView.$.offset().left;
			}
		}
		// Double click
		else if ( e.originalEvent.detail === 2 ) {
			// @see {ve.es.Surface.prototype.onMouseMove}
			this.mouse.selectingMode = 2;
			
			var wordRange = this.model.getDocument().getWordBoundaries( offset );
			if( wordRange ) {
				selection = wordRange;
				this.mouse.selectedRange = selection.clone();
			}
		}
		// Triple click
		else if ( e.originalEvent.detail >= 3 ) {
			// @see {ve.es.Surface.prototype.onMouseMove}
			this.mouse.selectingMode = 3;

			var node = this.documentView.getNodeFromOffset( offset ),
				nodeOffset = this.documentView.getOffsetFromNode( node, false );

			selection.from = this.model.getDocument().getRelativeContentOffset( nodeOffset, 1 );
			selection.to = this.model.getDocument().getRelativeContentOffset(
				nodeOffset + node.getElementLength(), -1
			);
			this.mouse.selectedRange = selection.clone();
		}
		this.resetText();
	}
	
	var _this = this;
	
	function select() {
		if ( e.which === 1 ) {
			// Reset the initial left position
			_this.cursor.initialLeft = null;
			// Apply new selection
			_this.model.select( selection, true );
		}

		// If the inut isn't already focused, focus it and select it's contents
		if ( !_this.$input.is( ':focus' ) ) {
			_this.$input.focus().select();
		}
	}

	if ( this.ie8 ) {
		setTimeout( select, 0 );
	} else {
		select();
	}
	//end ime
	this.$input.blur();
	this.$input.focus();
	this.showCursor();
	return false;
};

ve.es.Surface.prototype.onMouseMove = function( e ) {
	// Only with the left mouse button while in selecting mode
	if ( e.which === 1 && this.mouse.selectingMode ) {
		var selection = this.currentSelection.clone(),
			offset = this.documentView.getOffsetFromEvent( e );

		// Character selection
		if ( this.mouse.selectingMode === 1 ) {
			selection.to = offset;
		}
		// Word selection
		else if ( this.mouse.selectingMode === 2 ) {
			var wordRange = this.model.getDocument().getWordBoundaries( offset );
			if ( wordRange ) {
				if ( wordRange.to <= this.mouse.selectedRange.from ) {
					selection.from = wordRange.from;
					selection.to = this.mouse.selectedRange.to;
				} else {
					selection.from = this.mouse.selectedRange.from;
					selection.to = wordRange.to;
				}
			}
		}
		// Node selection
		else if ( this.mouse.selectingMode === 3 ) {
			// @see {ve.es.Surface.prototype.onMouseMove}
			this.mouse.selectingMode = 3;

			var nodeRange = this.documentView.getRangeFromNode(
				this.documentView.getNodeFromOffset( offset )
			);
			if ( nodeRange.to <= this.mouse.selectedRange.from ) {
				selection.from = this.model.getDocument().getRelativeContentOffset(
					nodeRange.from, 1
				);
				selection.to = this.mouse.selectedRange.to;
			} else {
				selection.from = this.mouse.selectedRange.from;
				selection.to = this.model.getDocument().getRelativeContentOffset(
					nodeRange.to, -1
				);
			}
		}
		// Apply new selection
		this.model.select( selection, true );
	}
};

ve.es.Surface.prototype.onMouseUp = function( e ) {
	if ( e.which === 1 ) { // left mouse button
		this.mouse.selectingMode = this.mouse.selectedRange = null;
		this.model.select( this.currentSelection, true );
		if ( this.contextView ) {
			// We have to manually call this because the selection will not have changed between the
			// most recent mousemove and this mouseup
			this.contextView.set();
		}
	}
};

ve.es.Surface.prototype.onCopy = function( e ) {
	// TODO: Keep a data copy around
	return true;
};

ve.es.Surface.prototype.onCut = function( e ) {
	var _this = this;
	setTimeout( function() {
		_this.handleDelete();
	}, 10 );
	return true;
};

ve.es.Surface.prototype.onPaste = function( e ) {
	// TODO: Check if the data copy is the same as what got pasted, and use that instead if so
	return true;
};

ve.es.Surface.prototype.onFocus = function( e ) {
	var _this = this;
	this.keyboard.prevInput = _this.$input.val();
	//start polling
	this.keyboard.readInterval = setInterval( function(){
		_this.readInput( _this );
	}, 10 );
};

ve.es.Surface.prototype.onBlur = function( e ) {
	//stop polling
	if ( this.keyboard.readInterval ) {
		clearInterval( this.keyboard.readInterval );
	}
};

ve.es.Surface.prototype.readInput = function( _this ) {
	var		selection = _this.currentSelection.clone(),
			text = _this.$input.val();
	
	//Do nothing if the text is the same.
	if ( text == _this.keyboard.prevInput ) {
		return false;
	}

	//transfer text
	_this.keyboard.prevInput = text;
	_this.handleInsert();
};

/* TODO: need to complete the unicode expression for all RTL characters
	Currently have Hebrew & and all Arabic except numbers
 */
ve.es.Surface.prototype.isTextRTL = function( text ) {
	return /[\u0590–\u05FF\u0600-\u06FF\u0750—\u077F\u08A0—\u08FF\uFB50—\uFDFF\uFE70—\uFEFF]/.test( text );
};

ve.es.Surface.prototype.resetText = function( e ) {
	this.$input.val( '' );
	this.keyboard.undoCount = 0;
};

ve.es.Surface.prototype.onKeyDown = function( e ) {
	switch ( e.keyCode ) {
		// Tab
		case 9:
			if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
				this.$input.val( '\t' );
				this.handleInsert();
				this.resetText();
				e.preventDefault();
				return false;
			}
			return true;
		// Shift
		case 16:
			this.keyboard.keys.shift = true;
			this.keyboard.selecting = true;
			break;
		// Ctrl
		case 17:
			break;
		// Home
		case 36:
			this.moveCursor( 'left', 'line' );
			break;
		// End
		case 35:
			this.moveCursor( 'right', 'line' );
			break;
		// Left arrow
		case 37:
			if ( !this.mac ) {
				if ( e.ctrlKey ) {
					this.moveCursor( 'left', 'word' );
				} else {
					this.moveCursor( 'left', 'char' );
				}
			} else {
				if ( e.metaKey || e.ctrlKey ) {
					this.moveCursor( 'left', 'line' );
				} else  if ( e.altKey ) {
					this.moveCursor( 'left', 'word' );
				} else {
					this.moveCursor( 'left', 'char' );
				}
			}
			break;
		// Up arrow
		case 38:
			if ( !this.mac ) {
				if ( e.ctrlKey ) {
					this.moveCursor( 'up', 'unit' );
				} else {
					this.moveCursor( 'up', 'char' );
				}
			} else {
				if ( e.altKey ) {
					this.moveCursor( 'up', 'unit' );
				} else {
					this.moveCursor( 'up', 'char' );
				}
			}
			break;
		// Right arrow
		case 39:
			if ( !this.mac ) {
				if ( e.ctrlKey ) {
					this.moveCursor( 'right', 'word' );
				} else {
					this.moveCursor( 'right', 'char' );
				}
			} else {
				if ( e.metaKey || e.ctrlKey ) {
					this.moveCursor( 'right', 'line' );
				} else  if ( e.altKey ) {
					this.moveCursor( 'right', 'word' );
				} else {
					this.moveCursor( 'right', 'char' );
				}
			}
			break;
		// Down arrow
		case 40:
			if ( !this.mac ) {
				if ( e.ctrlKey ) {
					this.moveCursor( 'down', 'unit' );
				} else {
					this.moveCursor( 'down', 'char' );
				}
			} else {
				if ( e.altKey ) {
					this.moveCursor( 'down', 'unit' );
				} else {
					this.moveCursor( 'down', 'char' );
				}
			}
			break;
		// Backspace
		case 8:
			this.handleDelete( true );
			break;
		// Delete
		case 46:
			this.handleDelete();
			break;
		// Enter
		case 13:
			if ( this.keyboard.keys.shift ) {
				this.$input.val( '\n' );
				this.handleInsert();
				this.resetText();
				e.preventDefault();
				return false;
			}
			this.handleEnter();
			this.resetText();
			e.preventDefault();
			break;
		// Insert content (maybe)
		default:
			// Control/command + character combos
			if ( e.metaKey || e.ctrlKey ) {
				switch ( e.keyCode ) {
					// y (redo)
					case 89:
						this.model.redo();
						return false;
					// z (undo/redo)
					case 90:
						if ( this.keyboard.keys.shift ) {
							this.model.redo();
						} else {
							this.model.undo();
							this.resetText();
						}
						return false;
					// a (select all)
					case 65:
						this.model.select( new ve.Range(
							this.model.getDocument().getRelativeContentOffset( 0, 1 ),
							this.model.getDocument().getRelativeContentOffset(
								this.model.getDocument().getContentLength(), -1
							)
						), true );
						return false;
					// b (bold)
					case 66:
						this.annotate( 'toggle', {'type': 'textStyle/bold' } );
						return false;
					// i (italic)
					case 73:
						this.annotate( 'toggle', {'type': 'textStyle/italic' } );
						return false;
					// k (hyperlink)
					case 75:
						if ( this.currentSelection.getLength() ) {
							this.contextView.openInspector( 'link' );
						} else {
							var range = this.model.getDocument().getAnnotationBoundaries(
									this.currentSelection.from, { 'type': 'link/internal' }, true
								);
							if ( range ) {
								this.model.select( range );
								this.contextView.openInspector( 'link' );
							}
						}
						return false;
				}
			}
			// Ignore chrome 229 IME event.
			if (e.which !== 229) {
				// Chunked insert
				this.handleInsert( this.keyboard.chunkSize );
			}
			break;
	}
	return true;
};

ve.es.Surface.prototype.onKeyUp = function( e ) {
	if ( e.keyCode === 16 ) {
		this.keyboard.keys.shift = false;
		if ( this.keyboard.selecting ) {
			this.keyboard.selecting = false;
		}
	}
};

ve.es.Surface.prototype.handleInsert = function( chunkSize ) {
	var _this = this;
	if ( _this.keyboard.keydownTimeout ) {
		clearTimeout( _this.keyboard.keydownTimeout );
	}
	_this.keyboard.keydownTimeout = setTimeout( function () {
		_this.insertFromInput( chunkSize );
	}, 10 );
};

ve.es.Surface.prototype.handleDelete = function( backspace, isPartial ) {
	var selection = this.currentSelection.clone(),
		sourceOffset,
		targetOffset,
		sourceSplitableNode,
		targetSplitableNode,
		tx;
	this.resetText();
	if ( selection.from === selection.to ) {
		if ( backspace ) {
			sourceOffset = selection.to;
			targetOffset = this.model.getDocument().getRelativeContentOffset(
				sourceOffset,
				-1
			);
		} else {
			sourceOffset = this.model.getDocument().getRelativeContentOffset(
				selection.to,
				1
			);
			targetOffset = selection.to;
		}

		var	sourceNode = this.documentView.getNodeFromOffset( sourceOffset, false ),
			targetNode = this.documentView.getNodeFromOffset( targetOffset, false );
	
		if ( sourceNode.model.getElementType() === targetNode.model.getElementType() ) {
			sourceSplitableNode = ve.es.Node.getSplitableNode( sourceNode );
			targetSplitableNode = ve.es.Node.getSplitableNode( targetNode );
		}
		
		selection.from = selection.to = targetOffset;
		this.model.select( selection );
		
		if ( sourceNode === targetNode ||
			( typeof sourceSplitableNode !== 'undefined' &&
			sourceSplitableNode.getParent()  === targetSplitableNode.getParent() ) ) {
			tx = this.model.getDocument().prepareRemoval(
				new ve.Range( targetOffset, sourceOffset )
			);
			this.model.transact( tx, isPartial );
		} else {
			tx = this.model.getDocument().prepareInsertion(
				targetOffset, sourceNode.model.getContentData()
			);
			this.model.transact( tx, isPartial );
			
			var nodeToDelete = sourceNode;
			ve.Node.traverseUpstream( nodeToDelete, function( node ) {
				if ( node.getParent().children.length === 1 ) {
					nodeToDelete = node.getParent();
					return true;
				} else {
					return false;
				}
			} );
			var range = new ve.Range();
			range.from = this.documentView.getOffsetFromNode( nodeToDelete, false );
			range.to = range.from + nodeToDelete.getElementLength();
			tx = this.model.getDocument().prepareRemoval( range );
			this.model.transact( tx, isPartial );
		}
	} else {
		// selection removal
		tx = this.model.getDocument().prepareRemoval( selection );
		this.model.transact( tx, isPartial );
		selection.from = selection.to = selection.start;
		this.model.select( selection );
	}
};

ve.es.Surface.prototype.handleEnter = function() {
	var selection = this.currentSelection.clone(),
		tx;
	if ( selection.from !== selection.to ) {
		this.handleDelete( false, true );
	}
	var	node = this.documentView.getNodeFromOffset( selection.to, false ),
		nodeOffset = this.documentView.getOffsetFromNode( node, false );

	if (
		nodeOffset + node.getContentLength() + 1 === selection.to &&
		node ===  ve.es.Node.getSplitableNode( node )
	) {
		tx = this.documentView.model.prepareInsertion(
			nodeOffset + node.getElementLength(),
			[ { 'type': 'paragraph' }, { 'type': '/paragraph' } ]
		);
		this.model.transact( tx );
		selection.from = selection.to = nodeOffset + node.getElementLength() + 1;
	} else {
		var	stack = [],
			splitable = false;

		ve.Node.traverseUpstream( node, function( node ) {
			var elementType = node.model.getElementType();
			if (
				splitable === true &&
				ve.es.DocumentNode.splitRules[ elementType ].children === true
			) {
				return false;
			}
			stack.splice(
				stack.length / 2,
				0,
				{ 'type': '/' + elementType },
				{
					'type': elementType,
					'attributes': ve.copyObject( node.model.element.attributes )
				}
			);
			splitable = ve.es.DocumentNode.splitRules[ elementType ].self;
			return true;
		} );
		tx = this.documentView.model.prepareInsertion( selection.to, stack );
		this.model.transact( tx );
		selection.from = selection.to =
			this.model.getDocument().getRelativeContentOffset( selection.to, 1 );
	}
	this.model.select( selection );
};

ve.es.Surface.prototype.insertFromInput = function( chunkSize ) {
	var		selection = this.currentSelection.clone(),
			val = this.$input.val(),
			chunkThis = '',
			chunked = [],
			slice,
			data,
			tx;

	if ( val.length > 0 ) {
		// Check if there was any effective input
		var input = this.$input[0],
			// Internet Explorer
			range = document.selection && document.selection.createRange();
		if (
			// Be sure text is being selected so IME updates are not blocked
			( this.mouse.selectingMode || this.keyboard.selection ) &&
			// DOM 3.0
			(( 'selectionStart' in input && input.selectionEnd - input.selectionStart ) ||
			// Internet Explorer
			( range && range.text.length ))
		) {
			// The input is still selected, so the key must not have inserted anything
			return;
		}

		//process undo count
		while ( this.keyboard.undoCount > 0 ) {
			this.keyboard.undoCount--;
			this.model.undo();
		}
		//reset selection
		selection = this.currentSelection.clone();

		// Prepare and process a selection removal.
		if ( selection.from != selection.to ) {
			tx = this.model.getDocument().prepareRemoval( selection );
			this.model.transact( tx, true );
			selection.from = selection.to =
				Math.min( selection.from, selection.to );
		}
		//Chunking text only on keyDown.
		if (chunkSize !== null && val.length > chunkSize && chunkSize > 1) {
			chunkThis = val;
			//build a chunked array
			while ( chunkThis.length > 0 ) {
				slice = chunkThis.substring( 0, chunkSize );
				chunkThis = chunkThis.substring( chunkSize );
				chunked.push( slice );
			}
			//chunked transactions
			for ( var chunk in chunked ) {
				this.model.breakpoint();
				data = chunked[chunk].split('');
				selection = this.currentSelection.clone();
				ve.dm.DocumentNode.addAnnotationsToData( data, this.getInsertionAnnotations() );
				tx = this.model.getDocument().prepareInsertion( selection.from, data );
				this.model.transact( tx );
				// Move the selection
				selection.from += chunked[chunk].length;
				selection.to += chunked[chunk].length;
				this.model.select( selection );
				this.model.breakpoint();
			}

			//set the working text to the last chunk
			this.$input.val( chunked[chunked.length - 1] );
			this.keyboard.undoCount = 1;
		} else {
			this.model.breakpoint();
			data = val.split('');
			ve.dm.DocumentNode.addAnnotationsToData( data, this.getInsertionAnnotations() );
			tx = this.model.getDocument().prepareInsertion( selection.from, data );
			this.model.transact( tx );
			// Move the selection
			selection.from += val.length;
			selection.to += val.length;
			this.model.select( selection );
			this.keyboard.undoCount++;
			this.model.breakpoint();

			
			/*	Move the cursor left if RTL
				TODO:
				1) Create method to detect end of RTL and move cursor the the right
				2) moveCursor is breaking IME for the RTL language, need to add mode switching
			 */
			if( this.isTextRTL( val.charAt( val.length-1 ) ) ) {
				this.moveCursor('left', 'char');
			}
		}

	}
};

/**
 * @param {String} direction up | down | left | right
 * @param {String} unit char | word | line | node | page
 */
ve.es.Surface.prototype.moveCursor = function( direction, unit ) {
	if ( direction !== 'up' && direction !== 'down' ) {
		this.cursor.initialLeft = null;
	}
	var selection = this.currentSelection.clone(),
		to,
		offset;
	switch ( direction ) {
		case 'left':
		case 'right':
			switch ( unit ) {
				case 'char':
				case 'word':
					if ( this.keyboard.keys.shift || selection.from === selection.to ) {
						offset = selection.to;
					} else {
						offset = direction === 'left' ? selection.start : selection.end;
					}
					to = this.model.getDocument().getRelativeContentOffset(
							offset,
							direction === 'left' ? -1 : 1
					);
					if ( unit === 'word' ) {
						var wordRange = this.model.getDocument().getWordBoundaries(
							direction === 'left' ? to : offset
						);
						if ( wordRange ) {
							to = direction === 'left' ? wordRange.start : wordRange.end;
						}
					}
					break;
				case 'line':
					offset = this.cursor.initialBias ?
						this.model.getDocument().getRelativeContentOffset(
							selection.to,
							-1) :
								selection.to;
					var range = this.documentView.getRenderedLineRangeFromOffset( offset );
					to = direction === 'left' ? range.start : range.end;
					break;
				default:
					throw new Error( 'unrecognized cursor movement unit' );
			}
			break;
		case 'up':
		case 'down':
			switch ( unit ) {
				case 'unit':
					var toNode = null;
					this.model.getDocument().traverseLeafNodes(
						function( node ) {
							var doNextChild = toNode === null;
							toNode = node;
							return doNextChild;
						},
						this.documentView.getNodeFromOffset( selection.to, false ).getModel(),
						direction === 'up' ? true : false
					);
					to = this.model.getDocument().getOffsetFromNode( toNode, false ) + 1;
					break;
				case 'char':
					/*
					 * Looks for the in-document character position that would match up with the
					 * same horizontal position - jumping a few pixels up/down at a time until we
					 * reach the next/previous line
					 */
					var position = this.documentView.getRenderedPositionFromOffset(
						selection.to,
						this.cursor.initialBias
					);
					
					if ( this.cursor.initialLeft === null ) {
						this.cursor.initialLeft = position.left;
					}
					var	fakePosition = new ve.Position( this.cursor.initialLeft, position.top ),
						i = 0,
						step = direction === 'up' ? -5 : 5,
						top = this.$.position().top;

					this.cursor.initialBias = position.left > this.documentView.getNodeFromOffset(
						selection.to, false
					).contentView.$.offset().left;

					do {
						i++;
						fakePosition.top += i * step;
						if ( fakePosition.top < top ) {
							break;
						} else if (
							fakePosition.top > top + this.dimensions.height +
								this.dimensions.scrollTop
						) {
							break;
						}
						fakePosition = this.documentView.getRenderedPositionFromOffset(
							this.documentView.getOffsetFromRenderedPosition( fakePosition ),
							this.cursor.initialBias
						);
						fakePosition.left = this.cursor.initialLeft;
					} while ( position.top === fakePosition.top );
					to = this.documentView.getOffsetFromRenderedPosition( fakePosition );
					break;
				default:
					throw new Error( 'unrecognized cursor movement unit' );
			}
			break;
		default:
			throw new Error( 'unrecognized cursor direction' );
	}

	if( direction != 'up' && direction != 'down' ) {
		this.cursor.initialBias = direction === 'right' && unit === 'line' ? true : false;
	}

	if ( this.keyboard.keys.shift && selection.from !== to) {
		selection.to = to;
	} else {
		selection.from = selection.to = to;
	}
	this.model.select( selection, true );
	this.resetText();
};

/**
 * Shows the cursor in a new position.
 *
 * @method
 * @param offset {Integer} Position to show the cursor at
 */
ve.es.Surface.prototype.showCursor = function() {
	var $window = $( window ),
		position = this.documentView.getRenderedPositionFromOffset(
			this.currentSelection.to, this.cursor.initialBias
		);
	
	this.$cursor.css( {
		'left': position.left,
		'top': position.top,
		'height': position.bottom - position.top
	} ).show();
	this.$input.css({
		'top': position.top,
		'left': position.left,
		'height': position.bottom - position.top
	});

	// Auto scroll to cursor
	var inputTop = this.$input.offset().top,
		inputBottom = inputTop + position.bottom - position.top;
	if ( inputTop - this.dimensions.toolbarHeight < this.dimensions.scrollTop ) {
		$window.scrollTop( inputTop - this.dimensions.toolbarHeight );
	} else if ( inputBottom > ( this.dimensions.scrollTop + this.dimensions.height ) ) {
		$window.scrollTop( inputBottom - this.dimensions.height );
	}

	// cursor blinking
	if ( this.cursor.interval ) {
		clearInterval( this.cursor.interval );
	}

	var _this = this;
	this.cursor.interval = setInterval( function( surface ) {
		_this.$cursor.css( 'display', function( index, value ) {
			return value === 'block' ? 'none' : 'block';
		} );
	}, 500 );
};

/**
 * Hides the cursor.
 *
 * @method
 */
ve.es.Surface.prototype.hideCursor = function() {
	if( this.cursor.interval ) {
		clearInterval( this.cursor.interval );
	}
	this.$cursor.hide();
};

/* Inheritance */

ve.extendClass( ve.es.Surface, ve.EventEmitter );