Update to 4.7.3

[perso/Immae/Projets/packagist/ludivine-ckeditor-component.git] / sources / plugins / magicline / plugin.js

/**\r
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
 * For licensing, see LICENSE.md or http://ckeditor.com/license\r
 */\r
\r
/**\r
 * @fileOverview The [Magic Line](http://ckeditor.com/addon/magicline) plugin that makes it easier to access some document areas that\r
 * are difficult to focus.\r
 */\r
\r
'use strict';\r
\r
( function() {\r
	CKEDITOR.plugins.add( 'magicline', {\r
		lang: 'af,ar,az,bg,ca,cs,cy,da,de,de-ch,el,en,en-gb,eo,es,es-mx,et,eu,fa,fi,fr,fr-ca,gl,he,hr,hu,id,it,ja,km,ko,ku,lv,nb,nl,no,oc,pl,pt,pt-br,ru,si,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%\r
		init: initPlugin\r
	} );\r
\r
	// Activates the box inside of an editor.\r
	function initPlugin( editor ) {\r
		// Configurables\r
		var config = editor.config,\r
			triggerOffset = config.magicline_triggerOffset || 30,\r
			enterMode = config.enterMode,\r
			that = {\r
				// Global stuff is being initialized here.\r
				editor: editor,\r
				enterMode: enterMode,\r
				triggerOffset: triggerOffset,\r
				holdDistance: 0 | triggerOffset * ( config.magicline_holdDistance || 0.5 ),\r
				boxColor: config.magicline_color || '#ff0000',\r
				rtl: config.contentsLangDirection == 'rtl',\r
				tabuList: [ 'data-cke-hidden-sel' ].concat( config.magicline_tabuList || [] ),\r
				triggers: config.magicline_everywhere ? DTD_BLOCK : { table: 1, hr: 1, div: 1, ul: 1, ol: 1, dl: 1, form: 1, blockquote: 1 }\r
			},\r
			scrollTimeout, checkMouseTimeoutPending, checkMouseTimer;\r
\r
		// %REMOVE_START%\r
		// Internal DEBUG uses tools located in the topmost window.\r
\r
		// (http://dev.ckeditor.com/ticket/9701) Due to security limitations some browsers may throw\r
		// errors when accessing window.top object. Do it safely first then.\r
		try {\r
			that.debug = window.top.DEBUG;\r
		}\r
		catch ( e ) {}\r
\r
		that.debug = that.debug || {\r
			groupEnd: function() {},\r
			groupStart: function() {},\r
			log: function() {},\r
			logElements: function() {},\r
			logElementsEnd: function() {},\r
			logEnd: function() {},\r
			mousePos: function() {},\r
			showHidden: function() {},\r
			showTrigger: function() {},\r
			startTimer: function() {},\r
			stopTimer: function() {}\r
		};\r
		// %REMOVE_END%\r
\r
		// Simple irrelevant elements filter.\r
		that.isRelevant = function( node ) {\r
			return isHtml( node ) && // -> Node must be an existing HTML element.\r
				!isLine( that, node ) && // -> Node can be neither the box nor its child.\r
				!isFlowBreaker( node ); // -> Node can be neither floated nor positioned nor aligned.\r
		};\r
\r
		editor.on( 'contentDom', addListeners, this );\r
\r
		function addListeners() {\r
			var editable = editor.editable(),\r
				doc = editor.document,\r
				win = editor.window;\r
\r
			// Global stuff is being initialized here.\r
			extend( that, {\r
				editable: editable,\r
				inInlineMode: editable.isInline(),\r
				doc: doc,\r
				win: win,\r
				hotNode: null\r
			}, true );\r
\r
			// This is the boundary of the editor. For inline the boundary is editable itself.\r
			// For classic (`iframe`-based) editor, the HTML element is a real boundary.\r
			that.boundary = that.inInlineMode ? that.editable : that.doc.getDocumentElement();\r
\r
			// Enabling the box inside of inline editable is pointless.\r
			// There's no need to access spaces inside paragraphs, links, spans, etc.\r
			if ( editable.is( dtd.$inline ) )\r
				return;\r
\r
			// Handle in-line editing by setting appropriate position.\r
			// If current position is static, make it relative and clear top/left coordinates.\r
			if ( that.inInlineMode && !isPositioned( editable ) ) {\r
				editable.setStyles( {\r
					position: 'relative',\r
					top: null,\r
					left: null\r
				} );\r
			}\r
			// Enable the box. Let it produce children elements, initialize\r
			// event handlers and own methods.\r
			initLine.call( this, that );\r
\r
			// Get view dimensions and scroll positions.\r
			// At this stage (before any checkMouse call) it is used mostly\r
			// by tests. Nevertheless it a crucial thing.\r
			updateWindowSize( that );\r
\r
			// Remove the box before an undo image is created.\r
			// This is important. If we didn't do that, the *undo thing* would revert the box into an editor.\r
			// Thanks to that, undo doesn't even know about the existence of the box.\r
			editable.attachListener( editor, 'beforeUndoImage', function() {\r
				that.line.detach();\r
			} );\r
\r
			// Removes the box HTML from editor data string if getData is called.\r
			// Thanks to that, an editor never yields data polluted by the box.\r
			// Listen with very high priority, so line will be removed before other\r
			// listeners will see it.\r
			editable.attachListener( editor, 'beforeGetData', function() {\r
				// If the box is in editable, remove it.\r
				if ( that.line.wrap.getParent() ) {\r
					that.line.detach();\r
\r
					// Restore line in the last listener for 'getData'.\r
					editor.once( 'getData', function() {\r
						that.line.attach();\r
					}, null, null, 1000 );\r
				}\r
			}, null, null, 0 );\r
\r
			// Hide the box on mouseout if mouse leaves document.\r
			editable.attachListener( that.inInlineMode ? doc : doc.getWindow().getFrame(), 'mouseout', function( event ) {\r
				if ( editor.mode != 'wysiwyg' )\r
					return;\r
\r
				// Check for inline-mode editor. If so, check mouse position\r
				// and remove the box if mouse outside of an editor.\r
				if ( that.inInlineMode ) {\r
					var mouse = {\r
						x: event.data.$.clientX,\r
						y: event.data.$.clientY\r
					};\r
\r
					updateWindowSize( that );\r
					updateEditableSize( that, true );\r
\r
					var size = that.view.editable,\r
						scroll = that.view.scroll;\r
\r
					// If outside of an editor...\r
					if ( !inBetween( mouse.x, size.left - scroll.x, size.right - scroll.x ) || !inBetween( mouse.y, size.top - scroll.y, size.bottom - scroll.y ) ) {\r
						clearTimeout( checkMouseTimer );\r
						checkMouseTimer = null;\r
						that.line.detach();\r
					}\r
				}\r
\r
				else {\r
					clearTimeout( checkMouseTimer );\r
					checkMouseTimer = null;\r
					that.line.detach();\r
				}\r
			} );\r
\r
			// This one deactivates hidden mode of an editor which\r
			// prevents the box from being shown.\r
			editable.attachListener( editable, 'keyup', function() {\r
				that.hiddenMode = 0;\r
				that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
			} );\r
\r
			editable.attachListener( editable, 'keydown', function( event ) {\r
				if ( editor.mode != 'wysiwyg' )\r
					return;\r
\r
				var keyStroke = event.data.getKeystroke();\r
\r
				switch ( keyStroke ) {\r
					// Shift pressed\r
					case 2228240: // IE\r
					case 16:\r
						that.hiddenMode = 1;\r
						that.line.detach();\r
				}\r
\r
				that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
			} );\r
\r
			// This method ensures that checkMouse aren't executed\r
			// in parallel and no more frequently than specified in timeout function.\r
			// In classic (`iframe`-based) editor, document is used as a trigger, to provide magicline\r
			// functionality when mouse is below the body (short content, short body).\r
			editable.attachListener( that.inInlineMode ? editable : doc, 'mousemove', function( event ) {\r
				checkMouseTimeoutPending = true;\r
\r
				if ( editor.mode != 'wysiwyg' || editor.readOnly || checkMouseTimer )\r
					return;\r
\r
				// IE<9 requires this event-driven object to be created\r
				// outside of the setTimeout statement.\r
				// Otherwise it loses the event object with its properties.\r
				var mouse = {\r
					x: event.data.$.clientX,\r
					y: event.data.$.clientY\r
				};\r
\r
				checkMouseTimer = setTimeout( function() {\r
					checkMouse( mouse );\r
				}, 30 ); // balances performance and accessibility\r
			} );\r
\r
			// This one removes box on scroll event.\r
			// It is to avoid box displacement.\r
			editable.attachListener( win, 'scroll', function() {\r
				if ( editor.mode != 'wysiwyg' )\r
					return;\r
\r
				that.line.detach();\r
\r
				// To figure this out just look at the mouseup\r
				// event handler below.\r
				if ( env.webkit ) {\r
					that.hiddenMode = 1;\r
\r
					clearTimeout( scrollTimeout );\r
					scrollTimeout = setTimeout( function() {\r
						// Don't leave hidden mode until mouse remains pressed and\r
						// scroll is being used, i.e. when dragging something.\r
						if ( !that.mouseDown )\r
							that.hiddenMode = 0;\r
						that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
					}, 50 );\r
\r
					that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
				}\r
			} );\r
\r
			// Those event handlers remove the box on mousedown\r
			// and don't reveal it until the mouse is released.\r
			// It is to prevent box insertion e.g. while scrolling\r
			// (w/ scrollbar), selecting and so on.\r
			editable.attachListener( env_ie8 ? doc : win, 'mousedown', function() {\r
				if ( editor.mode != 'wysiwyg' )\r
					return;\r
\r
				that.line.detach();\r
				that.hiddenMode = 1;\r
				that.mouseDown = 1;\r
\r
				that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
			} );\r
\r
			// Google Chrome doesn't trigger this on the scrollbar (since 2009...)\r
			// so it is totally useless to check for scroll finish\r
			// see: http://code.google.com/p/chromium/issues/detail?id=14204\r
			editable.attachListener( env_ie8 ? doc : win, 'mouseup', function() {\r
				that.hiddenMode = 0;\r
				that.mouseDown = 0;\r
				that.debug.showHidden( that.hiddenMode ); // %REMOVE_LINE%\r
			} );\r
\r
			// Editor commands for accessing difficult focus spaces.\r
			editor.addCommand( 'accessPreviousSpace', accessFocusSpaceCmd( that ) );\r
			editor.addCommand( 'accessNextSpace', accessFocusSpaceCmd( that, true ) );\r
\r
			editor.setKeystroke( [\r
				[ config.magicline_keystrokePrevious, 'accessPreviousSpace' ],\r
				[ config.magicline_keystrokeNext, 'accessNextSpace' ]\r
			] );\r
\r
			// Revert magicline hot node on undo/redo.\r
			editor.on( 'loadSnapshot', function() {\r
				var elements, element, i;\r
\r
				for ( var t in { p: 1, br: 1, div: 1 } ) {\r
					// document.find is not available in QM (http://dev.ckeditor.com/ticket/11149).\r
					elements = editor.document.getElementsByTag( t );\r
\r
					for ( i = elements.count(); i--; ) {\r
						if ( ( element = elements.getItem( i ) ).data( 'cke-magicline-hot' ) ) {\r
							// Restore hotNode\r
							that.hotNode = element;\r
							// Restore last access direction\r
							that.lastCmdDirection = element.data( 'cke-magicline-dir' ) === 'true' ? true : false;\r
\r
							return;\r
						}\r
					}\r
				}\r
			} );\r
\r
			// This method handles mousemove mouse for box toggling.\r
			// It uses mouse position to determine underlying element, then\r
			// it tries to use different trigger type in order to place the box\r
			// in correct place. The following procedure is executed periodically.\r
			function checkMouse( mouse ) {\r
				that.debug.groupStart( 'CheckMouse' ); // %REMOVE_LINE%\r
				that.debug.startTimer(); // %REMOVE_LINE%\r
\r
				that.mouse = mouse;\r
				that.trigger = null;\r
\r
				checkMouseTimer = null;\r
				updateWindowSize( that );\r
\r
				if (\r
					checkMouseTimeoutPending &&								// There must be an event pending.\r
					!that.hiddenMode &&										// Can't be in hidden mode.\r
					editor.focusManager.hasFocus &&							// Editor must have focus.\r
					!that.line.mouseNear() &&								// Mouse pointer can't be close to the box.\r
					( that.element = elementFromMouse( that, true ) )		// There must be valid element.\r
				) {\r
					// If trigger exists, and trigger is correct -> show the box.\r
					// Don't show the line if trigger is a descendant of some tabu-list element.\r
					if ( ( that.trigger = triggerEditable( that ) || triggerEdge( that ) || triggerExpand( that ) ) &&\r
						!isInTabu( that, that.trigger.upper || that.trigger.lower ) ) {\r
						that.line.attach().place();\r
					}\r
\r
					// Otherwise remove the box\r
					else {\r
						that.trigger = null;\r
						that.line.detach();\r
					}\r
\r
					that.debug.showTrigger( that.trigger ); // %REMOVE_LINE%\r
					that.debug.mousePos( mouse.y, that.element ); // %REMOVE_LINE%\r
\r
					checkMouseTimeoutPending = false;\r
				}\r
\r
				that.debug.stopTimer(); // %REMOVE_LINE%\r
				that.debug.groupEnd(); // %REMOVE_LINE%\r
			}\r
\r
			// This one allows testing and debugging. It reveals some\r
			// inner methods to the world.\r
			this.backdoor = {\r
				accessFocusSpace: accessFocusSpace,\r
				boxTrigger: boxTrigger,\r
				isLine: isLine,\r
				getAscendantTrigger: getAscendantTrigger,\r
				getNonEmptyNeighbour: getNonEmptyNeighbour,\r
				getSize: getSize,\r
				that: that,\r
				triggerEdge: triggerEdge,\r
				triggerEditable: triggerEditable,\r
				triggerExpand: triggerExpand\r
			};\r
		}\r
	}\r
\r
	// Some shorthands for common methods to save bytes\r
	var extend = CKEDITOR.tools.extend,\r
		newElement = CKEDITOR.dom.element,\r
		newElementFromHtml = newElement.createFromHtml,\r
		env = CKEDITOR.env,\r
		env_ie8 = CKEDITOR.env.ie && CKEDITOR.env.version < 9,\r
		dtd = CKEDITOR.dtd,\r
\r
		// Global object associating enter modes with elements.\r
		enterElements = {},\r
\r
		// Constant values, types and so on.\r
		EDGE_TOP = 128,\r
		EDGE_BOTTOM = 64,\r
		EDGE_MIDDLE = 32,\r
		TYPE_EDGE = 16,\r
		TYPE_EXPAND = 8,\r
		LOOK_TOP = 4,\r
		LOOK_BOTTOM = 2,\r
		LOOK_NORMAL = 1,\r
		WHITE_SPACE = '\u00A0',\r
		DTD_LISTITEM = dtd.$listItem,\r
		DTD_TABLECONTENT = dtd.$tableContent,\r
		DTD_NONACCESSIBLE = extend( {}, dtd.$nonEditable, dtd.$empty ),\r
		DTD_BLOCK = dtd.$block,\r
\r
		// Minimum time that must elapse between two update*Size calls.\r
		// It prevents constant getComuptedStyle calls and improves performance.\r
		CACHE_TIME = 100,\r
\r
		// Shared CSS stuff for box elements\r
		CSS_COMMON = 'width:0px;height:0px;padding:0px;margin:0px;display:block;' + 'z-index:9999;color:#fff;position:absolute;font-size: 0px;line-height:0px;',\r
		CSS_TRIANGLE = CSS_COMMON + 'border-color:transparent;display:block;border-style:solid;',\r
		TRIANGLE_HTML = '<span>' + WHITE_SPACE + '</span>';\r
\r
	enterElements[ CKEDITOR.ENTER_BR ] = 'br';\r
	enterElements[ CKEDITOR.ENTER_P ] = 'p';\r
	enterElements[ CKEDITOR.ENTER_DIV ] = 'div';\r
\r
	function areSiblings( that, upper, lower ) {\r
		return isHtml( upper ) && isHtml( lower ) && lower.equals( upper.getNext( function( node ) {\r
			return !( isEmptyTextNode( node ) || isComment( node ) || isFlowBreaker( node ) );\r
		} ) );\r
	}\r
\r
	// boxTrigger is an abstract type which describes\r
	// the relationship between elements that may result\r
	// in showing the box.\r
	//\r
	// The following type is used by numerous methods\r
	// to share information about the hypothetical box placement\r
	// and look by referring to boxTrigger properties.\r
	function boxTrigger( triggerSetup ) {\r
		this.upper = triggerSetup[ 0 ];\r
		this.lower = triggerSetup[ 1 ];\r
		this.set.apply( this, triggerSetup.slice( 2 ) );\r
	}\r
\r
	boxTrigger.prototype = {\r
		set: function( edge, type, look ) {\r
			this.properties = edge + type + ( look || LOOK_NORMAL );\r
			return this;\r
		},\r
\r
		is: function( property ) {\r
			return ( this.properties & property ) == property;\r
		}\r
	};\r
\r
	var elementFromMouse = ( function() {\r
		function elementFromPoint( doc, mouse ) {\r
			var pointedElement = doc.$.elementFromPoint( mouse.x, mouse.y );\r
\r
			// IE9QM: from times to times it will return an empty object on scroll bar hover. (http://dev.ckeditor.com/ticket/12185)\r
			return pointedElement && pointedElement.nodeType ?\r
				new CKEDITOR.dom.element( pointedElement ) :\r
				null;\r
		}\r
\r
		return function( that, ignoreBox, forceMouse ) {\r
			if ( !that.mouse )\r
				return null;\r
\r
			var doc = that.doc,\r
				lineWrap = that.line.wrap,\r
				mouse = forceMouse || that.mouse,\r
				// Note: element might be null.\r
				element = elementFromPoint( doc, mouse );\r
\r
			// If ignoreBox is set and element is the box, it means that we\r
			// need to hide the box for a while, repeat elementFromPoint\r
			// and show it again.\r
			if ( ignoreBox && isLine( that, element ) ) {\r
				lineWrap.hide();\r
				element = elementFromPoint( doc, mouse );\r
				lineWrap.show();\r
			}\r
\r
			// Return nothing if:\r
			//	\-> Element is not HTML.\r
			if ( !( element && element.type == CKEDITOR.NODE_ELEMENT && element.$ ) )\r
				return null;\r
\r
			// Also return nothing if:\r
			//	\-> We're IE<9 and element is out of the top-level element (editable for inline and HTML for classic (`iframe`-based)).\r
			//		This is due to the bug which allows IE<9 firing mouse events on element\r
			//		with contenteditable=true while doing selection out (far, away) of the element.\r
			//		Thus we must always be sure that we stay in editable or HTML.\r
			if ( env.ie && env.version < 9 ) {\r
				if ( !( that.boundary.equals( element ) || that.boundary.contains( element ) ) )\r
					return null;\r
			}\r
\r
			return element;\r
		};\r
	} )();\r
\r
	// Gets the closest parent node that belongs to triggers group.\r
	function getAscendantTrigger( that ) {\r
		var node = that.element,\r
			trigger;\r
\r
		if ( node && isHtml( node ) ) {\r
			trigger = node.getAscendant( that.triggers, true );\r
\r
			// If trigger is an element, neither editable nor editable's ascendant.\r
			if ( trigger && that.editable.contains( trigger ) ) {\r
				// Check for closest editable limit.\r
				// Don't consider trigger as a limit as it may be nested editable (includeSelf=false) (http://dev.ckeditor.com/ticket/12009).\r
				var limit = getClosestEditableLimit( trigger );\r
\r
				// Trigger in nested editable area.\r
				if ( limit.getAttribute( 'contenteditable' ) == 'true' )\r
					return trigger;\r
				// Trigger in non-editable area.\r
				else if ( limit.is( that.triggers ) )\r
					return limit;\r
				else\r
					return null;\r
			} else {\r
				return null;\r
			}\r
		}\r
\r
		return null;\r
	}\r
\r
	function getMidpoint( that, upper, lower ) {\r
		updateSize( that, upper );\r
		updateSize( that, lower );\r
\r
		var upperSizeBottom = upper.size.bottom,\r
			lowerSizeTop = lower.size.top;\r
\r
		return upperSizeBottom && lowerSizeTop ? 0 | ( upperSizeBottom + lowerSizeTop ) / 2 : upperSizeBottom || lowerSizeTop;\r
	}\r
\r
	// Get nearest node (either text or HTML), but:\r
	//	\->	Omit all empty text nodes (containing white characters only).\r
	//	\-> Omit BR elements\r
	//	\-> Omit flow breakers.\r
	function getNonEmptyNeighbour( that, node, goBack ) {\r
		node = node[ goBack ? 'getPrevious' : 'getNext' ]( function( node ) {\r
			return ( isTextNode( node ) && !isEmptyTextNode( node ) ) ||\r
				( isHtml( node ) && !isFlowBreaker( node ) && !isLine( that, node ) );\r
		} );\r
\r
		return node;\r
	}\r
\r
	function inBetween( val, lower, upper ) {\r
		return val > lower && val < upper;\r
	}\r
\r
	// Returns the closest ancestor that has contenteditable attribute.\r
	// Such ancestor is the limit of (non-)editable DOM branch that element\r
	// belongs to. This method omits editor editable.\r
	function getClosestEditableLimit( element, includeSelf ) {\r
		if ( element.data( 'cke-editable' ) )\r
			return null;\r
\r
		if ( !includeSelf )\r
			element = element.getParent();\r
\r
		while ( element ) {\r
			if ( element.data( 'cke-editable' ) )\r
				return null;\r
\r
			if ( element.hasAttribute( 'contenteditable' ) )\r
				return element;\r
\r
			element = element.getParent();\r
		}\r
\r
		return null;\r
	}\r
\r
	// Access space line consists of a few elements (spans):\r
	// 	\-> Line wrapper.\r
	// 	\-> Line.\r
	// 	\-> Line triangles: left triangle (LT), right triangle (RT).\r
	// 	\-> Button handler (BTN).\r
	//\r
	//	+--------------------------------------------------- line.wrap (span) -----+\r
	//	| +---------------------------------------------------- line (span) -----+ |\r
	//	| | +- LT \                                           +- BTN -+  / RT -+ | |\r
	//	| | |      \                                          |     | | /      | | |\r
	//	| | |      /                                          |  <__| | \      | | |\r
	//	| | +-----/                                           +-------+  \-----+ | |\r
	//	| +----------------------------------------------------------------------+ |\r
	//  +--------------------------------------------------------------------------+\r
	//\r
	function initLine( that ) {\r
		var doc = that.doc,\r
			// This the main box element that holds triangles and the insertion button\r
			line = newElementFromHtml( '<span contenteditable="false" style="' + CSS_COMMON + 'position:absolute;border-top:1px dashed ' + that.boxColor + '"></span>', doc ),\r
			iconPath = CKEDITOR.getUrl( this.path + 'images/' + ( env.hidpi ? 'hidpi/' : '' ) + 'icon' + ( that.rtl ? '-rtl' : '' ) + '.png' );\r
\r
		extend( line, {\r
\r
			attach: function() {\r
				// Only if not already attached\r
				if ( !this.wrap.getParent() )\r
					this.wrap.appendTo( that.editable, true );\r
\r
				return this;\r
			},\r
\r
			// Looks are as follows: [ LOOK_TOP, LOOK_BOTTOM, LOOK_NORMAL ].\r
			lineChildren: [\r
				extend(\r
					newElementFromHtml(\r
						'<span title="' + that.editor.lang.magicline.title +\r
						'" contenteditable="false">&#8629;</span>', doc\r
					), {\r
						base: CSS_COMMON + 'height:17px;width:17px;' + ( that.rtl ? 'left' : 'right' ) + ':17px;' +\r
								'background:url(' + iconPath + ') center no-repeat ' + that.boxColor + ';cursor:pointer;' +\r
								( env.hc ? 'font-size: 15px;line-height:14px;border:1px solid #fff;text-align:center;' : '' ) +\r
								( env.hidpi ? 'background-size: 9px 10px;' : '' ),\r
						looks: [\r
							'top:-8px; border-radius: 2px;',\r
							'top:-17px; border-radius: 2px 2px 0px 0px;',\r
							'top:-1px; border-radius: 0px 0px 2px 2px;'\r
						]\r
					}\r
				),\r
				extend( newElementFromHtml( TRIANGLE_HTML, doc ), {\r
					base: CSS_TRIANGLE + 'left:0px;border-left-color:' + that.boxColor + ';',\r
					looks: [\r
						'border-width:8px 0 8px 8px;top:-8px',\r
						'border-width:8px 0 0 8px;top:-8px',\r
						'border-width:0 0 8px 8px;top:0px'\r
					]\r
				} ),\r
				extend( newElementFromHtml( TRIANGLE_HTML, doc ), {\r
					base: CSS_TRIANGLE + 'right:0px;border-right-color:' + that.boxColor + ';',\r
					looks: [\r
						'border-width:8px 8px 8px 0;top:-8px',\r
						'border-width:8px 8px 0 0;top:-8px',\r
						'border-width:0 8px 8px 0;top:0px'\r
					]\r
				} )\r
			],\r
\r
			detach: function() {\r
				// Detach only if already attached.\r
				if ( this.wrap.getParent() )\r
					this.wrap.remove();\r
\r
				return this;\r
			},\r
\r
			// Checks whether mouseY is around an element by comparing boundaries and considering\r
			// an offset distance.\r
			mouseNear: function() {\r
				that.debug.groupStart( 'mouseNear' ); // %REMOVE_LINE%\r
\r
				updateSize( that, this );\r
				var offset = that.holdDistance,\r
					size = this.size;\r
\r
				// Determine neighborhood by element dimensions and offsets.\r
				if ( size && inBetween( that.mouse.y, size.top - offset, size.bottom + offset ) && inBetween( that.mouse.x, size.left - offset, size.right + offset ) ) {\r
					that.debug.logEnd( 'Mouse is near.' ); // %REMOVE_LINE%\r
					return true;\r
				}\r
\r
				that.debug.logEnd( 'Mouse isn\'t near.' ); // %REMOVE_LINE%\r
				return false;\r
			},\r
\r
			// Adjusts position of the box according to the trigger properties.\r
			// If also affects look of the box depending on the type of the trigger.\r
			place: function() {\r
				var view = that.view,\r
					editable = that.editable,\r
					trigger = that.trigger,\r
					upper = trigger.upper,\r
					lower = trigger.lower,\r
					any = upper || lower,\r
					parent = any.getParent(),\r
					styleSet = {};\r
\r
				// Save recent trigger for further insertion.\r
				// It is necessary due to the fact, that that.trigger may\r
				// contain different boxTrigger at the moment of insertion\r
				// or may be even null.\r
				this.trigger = trigger;\r
\r
				upper && updateSize( that, upper, true );\r
				lower && updateSize( that, lower, true );\r
				updateSize( that, parent, true );\r
\r
				// Yeah, that's gonna be useful in inline-mode case.\r
				if ( that.inInlineMode )\r
					updateEditableSize( that, true );\r
\r
				// Set X coordinate (left, right, width).\r
				if ( parent.equals( editable ) ) {\r
					styleSet.left = view.scroll.x;\r
					styleSet.right = -view.scroll.x;\r
					styleSet.width = '';\r
				} else {\r
					styleSet.left = any.size.left - any.size.margin.left + view.scroll.x - ( that.inInlineMode ? view.editable.left + view.editable.border.left : 0 );\r
					styleSet.width = any.size.outerWidth + any.size.margin.left + any.size.margin.right + view.scroll.x;\r
					styleSet.right = '';\r
				}\r
\r
				// Set Y coordinate (top) for trigger consisting of two elements.\r
				if ( upper && lower ) {\r
					// No margins at all or they're equal. Place box right between.\r
					if ( upper.size.margin.bottom === lower.size.margin.top )\r
						styleSet.top = 0 | ( upper.size.bottom + upper.size.margin.bottom / 2 );\r
					else {\r
						// Upper margin < lower margin. Place at lower margin.\r
						if ( upper.size.margin.bottom < lower.size.margin.top )\r
							styleSet.top = upper.size.bottom + upper.size.margin.bottom;\r
						// Upper margin > lower margin. Place at upper margin - lower margin.\r
						else\r
							styleSet.top = upper.size.bottom + upper.size.margin.bottom - lower.size.margin.top;\r
					}\r
				}\r
				// Set Y coordinate (top) for single-edge trigger.\r
				else if ( !upper )\r
					styleSet.top = lower.size.top - lower.size.margin.top;\r
				else if ( !lower ) {\r
					styleSet.top = upper.size.bottom + upper.size.margin.bottom;\r
				}\r
\r
				// Set box button modes if close to the viewport horizontal edge\r
				// or look forced by the trigger.\r
				if ( trigger.is( LOOK_TOP ) || inBetween( styleSet.top, view.scroll.y - 15, view.scroll.y + 5 ) ) {\r
					styleSet.top = that.inInlineMode ? 0 : view.scroll.y;\r
					this.look( LOOK_TOP );\r
				} else if ( trigger.is( LOOK_BOTTOM ) || inBetween( styleSet.top, view.pane.bottom - 5, view.pane.bottom + 15 ) ) {\r
					styleSet.top = that.inInlineMode ? (\r
							view.editable.height + view.editable.padding.top + view.editable.padding.bottom\r
						) : (\r
							view.pane.bottom - 1\r
						);\r
\r
					this.look( LOOK_BOTTOM );\r
				} else {\r
					if ( that.inInlineMode )\r
						styleSet.top -= view.editable.top + view.editable.border.top;\r
\r
					this.look( LOOK_NORMAL );\r
				}\r
\r
				if ( that.inInlineMode ) {\r
					// 1px bug here...\r
					styleSet.top--;\r
\r
					// Consider the editable to be an element with overflow:scroll\r
					// and non-zero scrollTop/scrollLeft value.\r
					// For example: divarea editable. (http://dev.ckeditor.com/ticket/9383)\r
					styleSet.top += view.editable.scroll.top;\r
					styleSet.left += view.editable.scroll.left;\r
				}\r
\r
				// Append `px` prefixes.\r
				for ( var style in styleSet )\r
					styleSet[ style ] = CKEDITOR.tools.cssLength( styleSet[ style ] );\r
\r
				this.setStyles( styleSet );\r
			},\r
\r
			// Changes look of the box according to current needs.\r
			// Three different styles are available: [ LOOK_TOP, LOOK_BOTTOM, LOOK_NORMAL ].\r
			look: function( look ) {\r
				if ( this.oldLook == look )\r
					return;\r
\r
				for ( var i = this.lineChildren.length, child; i--; )\r
					( child = this.lineChildren[ i ] ).setAttribute( 'style', child.base + child.looks[ 0 | look / 2 ] );\r
\r
				this.oldLook = look;\r
			},\r
\r
			wrap: new newElement( 'span', that.doc )\r
\r
		} );\r
\r
		// Insert children into the box.\r
		for ( var i = line.lineChildren.length; i--; )\r
			line.lineChildren[ i ].appendTo( line );\r
\r
		// Set default look of the box.\r
		line.look( LOOK_NORMAL );\r
\r
		// Using that wrapper prevents IE (8,9) from resizing editable area at the moment\r
		// of box insertion. This works thanks to the fact, that positioned box is wrapped by\r
		// an inline element. So much tricky.\r
		line.appendTo( line.wrap );\r
\r
		// Make the box unselectable.\r
		line.unselectable();\r
\r
		// Handle accessSpace node insertion.\r
		line.lineChildren[ 0 ].on( 'mouseup', function( event ) {\r
			line.detach();\r
\r
			accessFocusSpace( that, function( accessNode ) {\r
				// Use old trigger that was saved by 'place' method. Look: line.place\r
				var trigger = that.line.trigger;\r
\r
				accessNode[ trigger.is( EDGE_TOP ) ? 'insertBefore' : 'insertAfter' ](\r
					trigger.is( EDGE_TOP ) ? trigger.lower : trigger.upper );\r
			}, true );\r
\r
			that.editor.focus();\r
\r
			if ( !env.ie && that.enterMode != CKEDITOR.ENTER_BR )\r
				that.hotNode.scrollIntoView();\r
\r
			event.data.preventDefault( true );\r
		} );\r
\r
		// Prevents IE9 from displaying the resize box and disables drag'n'drop functionality.\r
		line.on( 'mousedown', function( event ) {\r
			event.data.preventDefault( true );\r
		} );\r
\r
		that.line = line;\r
	}\r
\r
	// This function allows accessing any focus space according to the insert function:\r
	// 	* For enterMode ENTER_P it creates P element filled with dummy white-space.\r
	// 	* For enterMode ENTER_DIV it creates DIV element filled with dummy white-space.\r
	// 	* For enterMode ENTER_BR it creates BR element or &nbsp; in IE.\r
	//\r
	// The node is being inserted according to insertFunction. Finally the method\r
	// selects the non-breaking space making the node ready for typing.\r
	function accessFocusSpace( that, insertFunction, doSave ) {\r
		var range = new CKEDITOR.dom.range( that.doc ),\r
			editor = that.editor,\r
			accessNode;\r
\r
		// IE requires text node of &nbsp; in ENTER_BR mode.\r
		if ( env.ie && that.enterMode == CKEDITOR.ENTER_BR )\r
			accessNode = that.doc.createText( WHITE_SPACE );\r
\r
		// In other cases a regular element is used.\r
		else {\r
			// Use the enterMode of editable's limit or editor's\r
			// enter mode if not in nested editable.\r
			var limit = getClosestEditableLimit( that.element, true ),\r
\r
				// This is an enter mode for the context. We cannot use\r
				// editor.activeEnterMode because the focused nested editable will\r
				// have a different enterMode as editor but magicline will be inserted\r
				// directly into editor's editable.\r
				enterMode = limit && limit.data( 'cke-enter-mode' ) || that.enterMode;\r
\r
			accessNode = new newElement( enterElements[ enterMode ], that.doc );\r
\r
			if ( !accessNode.is( 'br' ) ) {\r
				var dummy = that.doc.createText( WHITE_SPACE );\r
				dummy.appendTo( accessNode );\r
			}\r
		}\r
\r
		doSave && editor.fire( 'saveSnapshot' );\r
\r
		insertFunction( accessNode );\r
		//dummy.appendTo( accessNode );\r
		range.moveToPosition( accessNode, CKEDITOR.POSITION_AFTER_START );\r
		editor.getSelection().selectRanges( [ range ] );\r
		that.hotNode = accessNode;\r
\r
		doSave && editor.fire( 'saveSnapshot' );\r
	}\r
\r
	// Access focus space on demand by taking an element under the caret as a reference.\r
	// The space is accessed provided the element under the caret is trigger AND:\r
	//\r
	//  1. First/last-child of its parent:\r
	//		+----------------------- Parent element -+\r
	//		| +------------------------------ DIV -+ |	<-- Access before\r
	//		| | Foo^                               | |\r
	//		| |                                    | |\r
	//		| +------------------------------------+ |	<-- Access after\r
	//		+----------------------------------------+\r
	//\r
	//                       OR\r
	//\r
	//  2. It has a direct sibling element, which is also a trigger:\r
	//		+-------------------------------- DIV#1 -+\r
	//		| Foo^                                   |\r
	//		|                                        |\r
	//		+----------------------------------------+\r
	//                                                	<-- Access here\r
	//		+-------------------------------- DIV#2 -+\r
	//		| Bar                                    |\r
	//		|                                        |\r
	//		+----------------------------------------+\r
	//\r
	//                       OR\r
	//\r
	//  3. It has a direct sibling, which is a trigger and has a valid neighbour trigger,\r
	//     but belongs to dtd.$.empty/nonEditable:\r
	//		+------------------------------------ P -+\r
	//		| Foo^                                   |\r
	//		|                                        |\r
	//		+----------------------------------------+\r
	//		+----------------------------------- HR -+\r
	//                                                	<-- Access here\r
	//		+-------------------------------- DIV#2 -+\r
	//		| Bar                                    |\r
	//		|                                        |\r
	//		+----------------------------------------+\r
	//\r
	function accessFocusSpaceCmd( that, insertAfter ) {\r
		return {\r
			canUndo: true,\r
			modes: { wysiwyg: 1 },\r
			exec: ( function() {\r
\r
				// Inserts line (accessNode) at the position by taking target node as a reference.\r
				function doAccess( target ) {\r
					// Remove old hotNode under certain circumstances.\r
					var hotNodeChar = ( env.ie && env.version < 9 ? ' ' : WHITE_SPACE ),\r
						removeOld = that.hotNode &&							// Old hotNode must exist.\r
							that.hotNode.getText() == hotNodeChar &&		// Old hotNode hasn't been changed.\r
							that.element.equals( that.hotNode ) &&			// Caret is inside old hotNode.\r
							// Command is executed in the same direction.\r
							that.lastCmdDirection === !!insertAfter; // jshint ignore:line\r
\r
					accessFocusSpace( that, function( accessNode ) {\r
						if ( removeOld && that.hotNode )\r
							that.hotNode.remove();\r
\r
						accessNode[ insertAfter ? 'insertAfter' : 'insertBefore' ]( target );\r
\r
						// Make this element distinguishable. Also remember the direction\r
						// it's been inserted into document.\r
						accessNode.setAttributes( {\r
							'data-cke-magicline-hot': 1,\r
							'data-cke-magicline-dir': !!insertAfter\r
						} );\r
\r
						// Save last direction of the command (is insertAfter?).\r
						that.lastCmdDirection = !!insertAfter;\r
					} );\r
\r
					if ( !env.ie && that.enterMode != CKEDITOR.ENTER_BR )\r
						that.hotNode.scrollIntoView();\r
\r
					// Detach the line if was visible (previously triggered by mouse).\r
					that.line.detach();\r
				}\r
\r
				return function( editor ) {\r
					var selected = editor.getSelection().getStartElement(),\r
						limit;\r
\r
					// (http://dev.ckeditor.com/ticket/9833) Go down to the closest non-inline element in DOM structure\r
					// since inline elements don't participate in in magicline.\r
					selected = selected.getAscendant( DTD_BLOCK, 1 );\r
\r
					// Stop if selected is a child of a tabu-list element.\r
					if ( isInTabu( that, selected ) )\r
						return;\r
\r
					// Sometimes it may happen that there's no parent block below selected element\r
					// or, for example, getAscendant reaches editable or editable parent.\r
					// We must avoid such pathological cases.\r
					if ( !selected || selected.equals( that.editable ) || selected.contains( that.editable ) )\r
						return;\r
\r
					// Executing the command directly in nested editable should\r
					// access space before/after it.\r
					if ( ( limit = getClosestEditableLimit( selected ) ) && limit.getAttribute( 'contenteditable' ) == 'false' )\r
						selected = limit;\r
\r
					// That holds element from mouse. Replace it with the\r
					// element under the caret.\r
					that.element = selected;\r
\r
					// (3.) Handle the following cases where selected neighbour\r
					// is a trigger inaccessible for the caret AND:\r
					//	- Is first/last-child\r
					//	OR\r
					//	- Has a sibling, which is also a trigger.\r
					var neighbor = getNonEmptyNeighbour( that, selected, !insertAfter ),\r
						neighborSibling;\r
\r
					// Check for a neighbour that belongs to triggers.\r
					// Consider only non-accessible elements (they cannot have any children)\r
					// since they cannot be given a caret inside, to run the command\r
					// the regular way (1. & 2.).\r
					if (\r
						isHtml( neighbor ) && neighbor.is( that.triggers ) && neighbor.is( DTD_NONACCESSIBLE ) &&\r
						(\r
							// Check whether neighbor is first/last-child.\r
							!getNonEmptyNeighbour( that, neighbor, !insertAfter ) ||\r
							// Check for a sibling of a neighbour that also is a trigger.\r
							(\r
								( neighborSibling = getNonEmptyNeighbour( that, neighbor, !insertAfter ) ) &&\r
								isHtml( neighborSibling ) &&\r
								neighborSibling.is( that.triggers )\r
							)\r
						)\r
					) {\r
						doAccess( neighbor );\r
						return;\r
					}\r
\r
					// Look for possible target element DOWN "selected" DOM branch (towards editable)\r
					// that belong to that.triggers\r
					var target = getAscendantTrigger( that, selected );\r
\r
					// No HTML target -> no access.\r
					if ( !isHtml( target ) )\r
						return;\r
\r
					// (1.) Target is first/last child -> access.\r
					if ( !getNonEmptyNeighbour( that, target, !insertAfter ) ) {\r
						doAccess( target );\r
						return;\r
					}\r
\r
					var sibling = getNonEmptyNeighbour( that, target, !insertAfter );\r
\r
					// (2.) Target has a sibling that belongs to that.triggers -> access.\r
					if ( sibling && isHtml( sibling ) && sibling.is( that.triggers ) ) {\r
						doAccess( target );\r
						return;\r
					}\r
				};\r
			} )()\r
		};\r
	}\r
\r
	function isLine( that, node ) {\r
		if ( !( node && node.type == CKEDITOR.NODE_ELEMENT && node.$ ) )\r
			return false;\r
\r
		var line = that.line;\r
\r
		return line.wrap.equals( node ) || line.wrap.contains( node );\r
	}\r
\r
	// Is text node containing white-spaces only?\r
	var isEmptyTextNode = CKEDITOR.dom.walker.whitespaces();\r
\r
	// Is fully visible HTML node?\r
	function isHtml( node ) {\r
		return node && node.type == CKEDITOR.NODE_ELEMENT && node.$;	// IE requires that\r
	}\r
\r
	function isFloated( element ) {\r
		if ( !isHtml( element ) )\r
			return false;\r
\r
		var options = { left: 1, right: 1, center: 1 };\r
\r
		return !!( options[ element.getComputedStyle( 'float' ) ] || options[ element.getAttribute( 'align' ) ] );\r
	}\r
\r
	function isFlowBreaker( element ) {\r
		if ( !isHtml( element ) )\r
			return false;\r
\r
		return isPositioned( element ) || isFloated( element );\r
	}\r
\r
	// Isn't node of NODE_COMMENT type?\r
	var isComment = CKEDITOR.dom.walker.nodeType( CKEDITOR.NODE_COMMENT );\r
\r
	function isPositioned( element ) {\r
		return !!{ absolute: 1, fixed: 1 }[ element.getComputedStyle( 'position' ) ];\r
	}\r
\r
	// Is text node?\r
	function isTextNode( node ) {\r
		return node && node.type == CKEDITOR.NODE_TEXT;\r
	}\r
\r
	function isTrigger( that, element ) {\r
		return isHtml( element ) ? element.is( that.triggers ) : null;\r
	}\r
\r
	function isInTabu( that, element ) {\r
		if ( !element )\r
			return false;\r
\r
		var parents = element.getParents( 1 );\r
\r
		for ( var i = parents.length ; i-- ; ) {\r
			for ( var j = that.tabuList.length ; j-- ; ) {\r
				if ( parents[ i ].hasAttribute( that.tabuList[ j ] ) )\r
					return true;\r
			}\r
		}\r
\r
		return false;\r
	}\r
\r
	// This function checks vertically is there's a relevant child between element's edge\r
	// and the pointer.\r
	//	\-> Table contents are omitted.\r
	function isChildBetweenPointerAndEdge( that, parent, edgeBottom ) {\r
		var edgeChild = parent[ edgeBottom ? 'getLast' : 'getFirst' ]( function( node ) {\r
			return that.isRelevant( node ) && !node.is( DTD_TABLECONTENT );\r
		} );\r
\r
		if ( !edgeChild )\r
			return false;\r
\r
		updateSize( that, edgeChild );\r
\r
		return edgeBottom ? edgeChild.size.top > that.mouse.y : edgeChild.size.bottom < that.mouse.y;\r
	}\r
\r
	// This method handles edge cases:\r
	// 	\-> Mouse is around upper or lower edge of view pane.\r
	// 	\-> Also scroll position is either minimal or maximal.\r
	// 	\-> It's OK to show LOOK_TOP(BOTTOM) type line.\r
	//\r
	// This trigger doesn't need additional post-filtering.\r
	//\r
	//	+----------------------------- Editable -+  /--\r
	//	| +---------------------- First child -+ |  | <-- Top edge (first child)\r
	//	| |                                    | |  |\r
	//	| |                                    | |  |	 * Mouse activation area *\r
	//	| |                                    | |  |\r
	//	| |                 ...                | |	\-- Top edge + trigger offset\r
	//	| .                                    . |\r
	//	|                                        |\r
	//	| .                                    . |\r
	//	| |                 ...                | |  /-- Bottom edge - trigger offset\r
	//	| |                                    | |  |\r
	//	| |                                    | |  |	 * Mouse activation area *\r
	//	| |                                    | |  |\r
	//	| +----------------------- Last child -+ |  | <-- Bottom edge (last child)\r
	//	+----------------------------------------+  \--\r
	//\r
	function triggerEditable( that ) {\r
		that.debug.groupStart( 'triggerEditable' ); // %REMOVE_LINE%\r
\r
		var editable = that.editable,\r
			mouse = that.mouse,\r
			view = that.view,\r
			triggerOffset = that.triggerOffset,\r
			triggerLook;\r
\r
		// Update editable dimensions.\r
		updateEditableSize( that );\r
\r
		// This flag determines whether checking bottom trigger.\r
		var bottomTrigger = mouse.y > (\r
				that.inInlineMode ? (\r
					view.editable.top + view.editable.height / 2\r
				) : (\r
					// This is to handle case when editable.height / 2 <<< pane.height.\r
					Math.min( view.editable.height, view.pane.height ) / 2\r
				)\r
			),\r
\r
		// Edge node according to bottomTrigger.\r
		edgeNode = editable[ bottomTrigger ? 'getLast' : 'getFirst' ]( function( node ) {\r
			return !( isEmptyTextNode( node ) || isComment( node ) );\r
		} );\r
\r
		// There's no edge node. Abort.\r
		if ( !edgeNode ) {\r
			that.debug.logEnd( 'ABORT. No edge node found.' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// If the edgeNode in editable is ML, get the next one.\r
		if ( isLine( that, edgeNode ) ) {\r
			edgeNode = that.line.wrap[ bottomTrigger ? 'getPrevious' : 'getNext' ]( function( node ) {\r
				return !( isEmptyTextNode( node ) || isComment( node ) );\r
			} );\r
		}\r
\r
		// Exclude bad nodes (no ML needed then):\r
		//	\-> Edge node is text.\r
		//	\-> Edge node is floated, etc.\r
		//\r
		// Edge node *must be* a valid trigger at this stage as well.\r
		if ( !isHtml( edgeNode ) || isFlowBreaker( edgeNode ) || !isTrigger( that, edgeNode ) ) {\r
			that.debug.logEnd( 'ABORT. Invalid edge node.' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// Update size of edge node. Dimensions will be necessary.\r
		updateSize( that, edgeNode );\r
\r
		// Return appropriate trigger according to bottomTrigger.\r
		// \->	Top edge trigger case first.\r
		if ( !bottomTrigger &&													// Top trigger case.\r
			edgeNode.size.top >= 0 &&											// Check if the first element is fully visible.\r
			inBetween( mouse.y, 0, edgeNode.size.top + triggerOffset ) ) {		// Check if mouse in [0, edgeNode.top + triggerOffset].\r
\r
			// Determine trigger look.\r
			triggerLook = that.inInlineMode || view.scroll.y === 0 ?\r
				LOOK_TOP : LOOK_NORMAL;\r
\r
			that.debug.logEnd( 'SUCCESS. Created box trigger. EDGE_TOP.' ); // %REMOVE_LINE%\r
\r
			return new boxTrigger( [ null, edgeNode,\r
				EDGE_TOP,\r
				TYPE_EDGE,\r
				triggerLook\r
			] );\r
		}\r
\r
		// \->	Bottom case.\r
		else if ( bottomTrigger &&\r
			edgeNode.size.bottom <= view.pane.height &&							// Check if the last element is fully visible\r
			inBetween( mouse.y,													// Check if mouse in...\r
				edgeNode.size.bottom - triggerOffset, view.pane.height ) ) {	// [ edgeNode.bottom - triggerOffset, paneHeight ]\r
\r
			// Determine trigger look.\r
			triggerLook = that.inInlineMode ||\r
				inBetween( edgeNode.size.bottom, view.pane.height - triggerOffset, view.pane.height ) ?\r
					LOOK_BOTTOM : LOOK_NORMAL;\r
\r
			that.debug.logEnd( 'SUCCESS. Created box trigger. EDGE_BOTTOM.' ); // %REMOVE_LINE%\r
\r
			return new boxTrigger( [ edgeNode, null,\r
				EDGE_BOTTOM,\r
				TYPE_EDGE,\r
				triggerLook\r
			] );\r
		}\r
\r
		that.debug.logEnd( 'ABORT. No trigger created.' ); // %REMOVE_LINE%\r
		return null;\r
	}\r
\r
	// This method covers cases *inside* of an element:\r
	// 	\->	The pointer is in the top (bottom) area of an element and there's\r
	//		HTML node before (after) this element.\r
	// 	\-> An element being the first or last child of its parent.\r
	//\r
	//	+----------------------- Parent element -+\r
	//	| +----------------------- Element #1 -+ |  /--\r
	//	| |                                    | |  |	 * Mouse activation area (as first child) *\r
	//	| |                                    | |  \--\r
	//	| |                                    | |  /--\r
	//	| |                                    | |  |	 * Mouse activation area (Element #2) *\r
	//	| +------------------------------------+ |  \--\r
	//	|                                        |\r
	//	| +----------------------- Element #2 -+ |  /--\r
	//	| |                                    | |  |	 * Mouse activation area (Element #1) *\r
	//	| |                                    | |  \--\r
	//	| |                                    | |\r
	//	| +------------------------------------+ |\r
	//	|                                        |\r
	//	|            Text node is here.          |\r
	//	|                                        |\r
	//	| +----------------------- Element #3 -+ |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| |                                    | |  /--\r
	//	| |                                    | |  |	 * Mouse activation area (as last child) *\r
	//	| +------------------------------------+ |  \--\r
	//	+----------------------------------------+\r
	//\r
	function triggerEdge( that ) {\r
		that.debug.groupStart( 'triggerEdge' ); // %REMOVE_LINE%\r
\r
		var mouse = that.mouse,\r
			view = that.view,\r
			triggerOffset = that.triggerOffset;\r
\r
		// Get the ascendant trigger basing on elementFromMouse.\r
		var element = getAscendantTrigger( that );\r
\r
		that.debug.logElements( [ element ], [ 'Ascendant trigger' ], 'First stage' ); // %REMOVE_LINE%\r
\r
		// Abort if there's no appropriate element.\r
		if ( !element ) {\r
			that.debug.logEnd( 'ABORT. No element, element is editable or element contains editable.' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// Dimensions will be necessary.\r
		updateSize( that, element );\r
\r
		// If triggerOffset is larger than a half of element's height,\r
		// use an offset of 1/2 of element's height. If the offset wasn't reduced,\r
		// top area would cover most (all) cases.\r
		var fixedOffset = Math.min( triggerOffset,\r
				0 | ( element.size.outerHeight / 2 ) ),\r
\r
		// This variable will hold the trigger to be returned.\r
			triggerSetup = [],\r
			triggerLook,\r
\r
		// This flag determines whether dealing with a bottom trigger.\r
			bottomTrigger;\r
\r
		//	\-> Top trigger.\r
		if ( inBetween( mouse.y, element.size.top - 1, element.size.top + fixedOffset ) )\r
			bottomTrigger = false;\r
		//	\-> Bottom trigger.\r
		else if ( inBetween( mouse.y, element.size.bottom - fixedOffset, element.size.bottom + 1 ) )\r
			bottomTrigger = true;\r
		//	\-> Abort. Not in a valid trigger space.\r
		else {\r
			that.debug.logEnd( 'ABORT. Not around of any edge.' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// Reject wrong elements.\r
		// 	\-> Reject an element which is a flow breaker.\r
		// 	\-> Reject an element which has a child above/below the mouse pointer.\r
		//	\-> Reject an element which belongs to list items.\r
		if (\r
			isFlowBreaker( element ) ||\r
			isChildBetweenPointerAndEdge( that, element, bottomTrigger ) ||\r
			element.getParent().is( DTD_LISTITEM )\r
		) {\r
			that.debug.logEnd( 'ABORT. element is wrong', element ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// Get sibling according to bottomTrigger.\r
		var elementSibling = getNonEmptyNeighbour( that, element, !bottomTrigger );\r
\r
		// No sibling element.\r
		// This is a first or last child case.\r
		if ( !elementSibling ) {\r
			// No need to reject the element as it has already been done before.\r
			// Prepare a trigger.\r
\r
			// Determine trigger look.\r
			if ( element.equals( that.editable[ bottomTrigger ? 'getLast' : 'getFirst' ]( that.isRelevant ) ) ) {\r
				updateEditableSize( that );\r
\r
				if (\r
					bottomTrigger && inBetween( mouse.y,\r
					element.size.bottom - fixedOffset, view.pane.height ) &&\r
					inBetween( element.size.bottom, view.pane.height - fixedOffset, view.pane.height )\r
				) {\r
					triggerLook = LOOK_BOTTOM;\r
				} else if ( inBetween( mouse.y, 0, element.size.top + fixedOffset ) ) {\r
					triggerLook = LOOK_TOP;\r
				}\r
			} else {\r
				triggerLook = LOOK_NORMAL;\r
			}\r
\r
			triggerSetup = [ null, element ][ bottomTrigger ? 'reverse' : 'concat' ]().concat( [\r
				bottomTrigger ? EDGE_BOTTOM : EDGE_TOP,\r
				TYPE_EDGE,\r
				triggerLook,\r
				element.equals( that.editable[ bottomTrigger ? 'getLast' : 'getFirst' ]( that.isRelevant ) ) ?\r
						( bottomTrigger ? LOOK_BOTTOM : LOOK_TOP ) : LOOK_NORMAL\r
			] );\r
\r
			that.debug.log( 'Configured edge trigger of ' + ( bottomTrigger ? 'EDGE_BOTTOM' : 'EDGE_TOP' ) ); // %REMOVE_LINE%\r
		}\r
\r
		// Abort. Sibling is a text element.\r
		else if ( isTextNode( elementSibling ) ) {\r
			that.debug.logEnd( 'ABORT. Sibling is non-empty text element' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		// Check if the sibling is a HTML element.\r
		// If so, create an TYPE_EDGE, EDGE_MIDDLE trigger.\r
		else if ( isHtml( elementSibling ) ) {\r
			// Reject wrong elementSiblings.\r
			// 	\-> Reject an elementSibling which is a flow breaker.\r
			//	\-> Reject an elementSibling which isn't a trigger.\r
			//	\-> Reject an elementSibling which belongs to list items.\r
			if (\r
				isFlowBreaker( elementSibling ) ||\r
				!isTrigger( that, elementSibling ) ||\r
				elementSibling.getParent().is( DTD_LISTITEM )\r
			) {\r
				that.debug.logEnd( 'ABORT. elementSibling is wrong', elementSibling ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			// Prepare a trigger.\r
			triggerSetup = [ elementSibling, element ][ bottomTrigger ? 'reverse' : 'concat' ]().concat( [\r
				EDGE_MIDDLE,\r
				TYPE_EDGE\r
			] );\r
\r
			that.debug.log( 'Configured edge trigger of EDGE_MIDDLE' ); // %REMOVE_LINE%\r
		}\r
\r
		if ( 0 in triggerSetup ) {\r
			that.debug.logEnd( 'SUCCESS. Returning a trigger.' ); // %REMOVE_LINE%\r
			return new boxTrigger( triggerSetup );\r
		}\r
\r
		that.debug.logEnd( 'ABORT. No trigger generated.' ); // %REMOVE_LINE%\r
		return null;\r
	}\r
\r
	// Checks iteratively up and down in search for elements using elementFromMouse method.\r
	// Useful if between two triggers.\r
	//\r
	//	+----------------------- Parent element -+\r
	//	| +----------------------- Element #1 -+ |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| +------------------------------------+ |\r
	//	|                                        |  /--\r
	//	|                  .                     |  |\r
	//	|                  .      +-- Floated -+ |  |\r
	//	|                  |      |            | |  |	* Mouse activation area *\r
	//	|                  |      |   IGNORE   | |  |\r
	//	|                  X      |            | |  |	Method searches vertically for sibling elements.\r
	//	|                  |      +------------+ |  |	Start point is X (mouse-y coordinate).\r
	//	|                  |                     |  |	Floated elements, comments and empty text nodes are omitted.\r
	//	|                  .                     |  |\r
	//	|                  .                     |  |\r
	//	|                                        |  \--\r
	//	| +----------------------- Element #2 -+ |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| |                                    | |\r
	//	| +------------------------------------+ |\r
	//	+----------------------------------------+\r
	//\r
	var triggerExpand = ( function() {\r
		// The heart of the procedure. This method creates triggers that are\r
		// filtered by expandFilter method.\r
		function expandEngine( that ) {\r
			that.debug.groupStart( 'expandEngine' ); // %REMOVE_LINE%\r
\r
			var startElement = that.element,\r
				upper, lower, trigger;\r
\r
			if ( !isHtml( startElement ) || startElement.contains( that.editable ) ) {\r
				that.debug.logEnd( 'ABORT. No start element, or start element contains editable.' ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			// Stop searching if element is in non-editable branch of DOM.\r
			if ( startElement.isReadOnly() )\r
				return null;\r
\r
			trigger = verticalSearch( that,\r
				function( current, startElement ) {\r
					return !startElement.equals( current );	// stop when start element and the current one differ\r
				}, function( that, mouse ) {\r
					return elementFromMouse( that, true, mouse );\r
				}, startElement ),\r
\r
			upper = trigger.upper,\r
			lower = trigger.lower;\r
\r
			that.debug.logElements( [ upper, lower ], [ 'Upper', 'Lower' ], 'Pair found' ); // %REMOVE_LINE%\r
\r
			// Success: two siblings have been found\r
			if ( areSiblings( that, upper, lower ) ) {\r
				that.debug.logEnd( 'SUCCESS. Expand trigger created.' ); // %REMOVE_LINE%\r
				return trigger.set( EDGE_MIDDLE, TYPE_EXPAND );\r
			}\r
\r
			that.debug.logElements( [ startElement, upper, lower ], // %REMOVE_LINE%\r
				[ 'Start', 'Upper', 'Lower' ], 'Post-processing' ); // %REMOVE_LINE%\r
\r
			// Danger. Dragons ahead.\r
			// No siblings have been found during previous phase, post-processing may be necessary.\r
			// We can traverse DOM until a valid pair of elements around the pointer is found.\r
\r
			// Prepare for post-processing:\r
			// 	1. Determine if upper and lower are children of startElement.\r
			// 		1.1. If so, find their ascendants that are closest to startElement (one level deeper than startElement).\r
			// 		1.2. Otherwise use first/last-child of the startElement as upper/lower. Why?:\r
			// 			a) 	upper/lower belongs to another branch of the DOM tree.\r
			// 			b) 	verticalSearch encountered an edge of the viewport and failed.\r
			// 		1.3. Make sure upper and lower still exist. Why?:\r
			// 			a) 	Upper and lower may be not belong to the branch of the startElement (may not exist at all) and\r
			// 				startElement has no children.\r
			// 	2. Perform the post-processing.\r
			// 		2.1. Gather dimensions of an upper element.\r
			// 		2.2. Abort if lower edge of upper is already under the mouse pointer. Why?:\r
			// 			a) 	We expect upper to be above and lower below the mouse pointer.\r
			// 	3. Perform iterative search while upper != lower.\r
			// 		3.1. Find the upper-next element. If there's no such element, break current search. Why?:\r
			// 			a)	There's no point in further search if there are only text nodes ahead.\r
			// 		3.2. Calculate the distance between the middle point of ( upper, upperNext ) and mouse-y.\r
			// 		3.3. If the distance is shorter than the previous best, save it (save upper, upperNext as well).\r
			// 		3.4. If the optimal pair is found, assign it back to the trigger.\r
\r
			// 1.1., 1.2.\r
			if ( upper && startElement.contains( upper ) ) {\r
				while ( !upper.getParent().equals( startElement ) )\r
					upper = upper.getParent();\r
			} else {\r
				upper = startElement.getFirst( function( node ) {\r
					return expandSelector( that, node );\r
				} );\r
			}\r
\r
			if ( lower && startElement.contains( lower ) ) {\r
				while ( !lower.getParent().equals( startElement ) )\r
					lower = lower.getParent();\r
			} else {\r
				lower = startElement.getLast( function( node ) {\r
					return expandSelector( that, node );\r
				} );\r
			}\r
\r
			// 1.3.\r
			if ( !upper || !lower ) {\r
				that.debug.logEnd( 'ABORT. There is no upper or no lower element.' ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			// 2.1.\r
			updateSize( that, upper );\r
			updateSize( that, lower );\r
\r
			if ( !checkMouseBetweenElements( that, upper, lower ) ) {\r
				that.debug.logEnd( 'ABORT. Mouse is already above upper or below lower.' ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			var minDistance = Number.MAX_VALUE,\r
				currentDistance, upperNext, minElement, minElementNext;\r
\r
			while ( lower && !lower.equals( upper ) ) {\r
				// 3.1.\r
				if ( !( upperNext = upper.getNext( that.isRelevant ) ) )\r
					break;\r
\r
				// 3.2.\r
				currentDistance = Math.abs( getMidpoint( that, upper, upperNext ) - that.mouse.y );\r
\r
				// 3.3.\r
				if ( currentDistance < minDistance ) {\r
					minDistance = currentDistance;\r
					minElement = upper;\r
					minElementNext = upperNext;\r
				}\r
\r
				upper = upperNext;\r
				updateSize( that, upper );\r
			}\r
\r
			that.debug.logElements( [ minElement, minElementNext ], // %REMOVE_LINE%\r
				[ 'Min', 'MinNext' ], 'Post-processing results' ); // %REMOVE_LINE%\r
\r
			// 3.4.\r
			if ( !minElement || !minElementNext ) {\r
				that.debug.logEnd( 'ABORT. No Min or MinNext' ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			if ( !checkMouseBetweenElements( that, minElement, minElementNext ) ) {\r
				that.debug.logEnd( 'ABORT. Mouse is already above minElement or below minElementNext.' ); // %REMOVE_LINE%\r
				return null;\r
			}\r
\r
			// An element of minimal distance has been found. Assign it to the trigger.\r
			trigger.upper = minElement;\r
			trigger.lower = minElementNext;\r
\r
			// Success: post-processing revealed a pair of elements.\r
			that.debug.logEnd( 'SUCCESSFUL post-processing. Trigger created.' ); // %REMOVE_LINE%\r
			return trigger.set( EDGE_MIDDLE, TYPE_EXPAND );\r
		}\r
\r
		// This is default element selector used by the engine.\r
		function expandSelector( that, node ) {\r
			return !( isTextNode( node ) ||\r
				isComment( node ) ||\r
				isFlowBreaker( node ) ||\r
				isLine( that, node ) ||\r
				( node.type == CKEDITOR.NODE_ELEMENT && node.$ && node.is( 'br' ) ) );\r
		}\r
\r
		// This method checks whether mouse-y is between the top edge of upper\r
		// and bottom edge of lower.\r
		//\r
		// NOTE: This method assumes that updateSize has already been called\r
		// for the elements and is up-to-date.\r
		//\r
		//	+---------------------------- Upper -+  /--\r
		//	|                                    |  |\r
		//	+------------------------------------+  |\r
		//                                          |\r
		//                     ...                  |\r
		//                                          |\r
		//						X                   |	* Return true for mouse-y in this range *\r
		//                                          |\r
		//                     ...                  |\r
		//                                          |\r
		//	+---------------------------- Lower -+  |\r
		//	|                                    |  |\r
		//	+------------------------------------+  \--\r
		//\r
		function checkMouseBetweenElements( that, upper, lower ) {\r
			return inBetween( that.mouse.y, upper.size.top, lower.size.bottom );\r
		}\r
\r
		// A method for trigger filtering. Accepts or rejects trigger pairs\r
		// by their location in DOM etc.\r
		function expandFilter( that, trigger ) {\r
			that.debug.groupStart( 'expandFilter' ); // %REMOVE_LINE%\r
\r
			var upper = trigger.upper,\r
				lower = trigger.lower;\r
\r
			if (\r
				!upper || !lower ||											// NOT: EDGE_MIDDLE trigger ALWAYS has two elements.\r
				isFlowBreaker( lower ) || isFlowBreaker( upper ) ||			// NOT: one of the elements is floated or positioned\r
				lower.equals( upper ) || upper.equals( lower ) ||			// NOT: two trigger elements, one equals another.\r
				lower.contains( upper ) || upper.contains( lower )\r
			) {	// NOT: two trigger elements, one contains another.\r
				that.debug.logEnd( 'REJECTED. No upper or no lower or they contain each other.' ); // %REMOVE_LINE%\r
\r
				return false;\r
			}\r
\r
			// YES: two trigger elements, pure siblings.\r
			else if ( isTrigger( that, upper ) && isTrigger( that, lower ) && areSiblings( that, upper, lower ) ) {\r
				that.debug.logElementsEnd( [ upper, lower ], // %REMOVE_LINE%\r
					[ 'upper', 'lower' ], 'APPROVED EDGE_MIDDLE' ); // %REMOVE_LINE%\r
\r
				return true;\r
			}\r
\r
			that.debug.logElementsEnd( [ upper, lower ], // %REMOVE_LINE%\r
				[ 'upper', 'lower' ], 'Rejected unknown pair' ); // %REMOVE_LINE%\r
\r
			return false;\r
		}\r
\r
		// Simple wrapper for expandEngine and expandFilter.\r
		return function( that ) {\r
			that.debug.groupStart( 'triggerExpand' ); // %REMOVE_LINE%\r
\r
			var trigger = expandEngine( that );\r
\r
			that.debug.groupEnd(); // %REMOVE_LINE%\r
			return trigger && expandFilter( that, trigger ) ? trigger : null;\r
		};\r
	} )();\r
\r
	// Collects dimensions of an element.\r
	var sizePrefixes = [ 'top', 'left', 'right', 'bottom' ];\r
\r
	function getSize( that, element, ignoreScroll, force ) {\r
		var docPosition = element.getDocumentPosition(),\r
			border = {},\r
			margin = {},\r
			padding = {},\r
			box = {};\r
\r
		for ( var i = sizePrefixes.length; i--; ) {\r
			border[ sizePrefixes[ i ] ] = parseInt( getStyle( 'border-' + sizePrefixes[ i ] + '-width' ), 10 ) || 0;\r
			padding[ sizePrefixes[ i ] ] = parseInt( getStyle( 'padding-' + sizePrefixes[ i ] ), 10 ) || 0;\r
			margin[ sizePrefixes[ i ] ] = parseInt( getStyle( 'margin-' + sizePrefixes[ i ] ), 10 ) || 0;\r
		}\r
\r
		// updateWindowSize if forced to do so OR NOT ignoring scroll.\r
		if ( !ignoreScroll || force )\r
			updateWindowSize( that, force );\r
\r
		box.top = docPosition.y - ( ignoreScroll ? 0 : that.view.scroll.y ), box.left = docPosition.x - ( ignoreScroll ? 0 : that.view.scroll.x ),\r
\r
		// w/ borders and paddings.\r
		box.outerWidth = element.$.offsetWidth, box.outerHeight = element.$.offsetHeight,\r
\r
		// w/o borders and paddings.\r
		box.height = box.outerHeight - ( padding.top + padding.bottom + border.top + border.bottom ), box.width = box.outerWidth - ( padding.left + padding.right + border.left + border.right ),\r
\r
		box.bottom = box.top + box.outerHeight, box.right = box.left + box.outerWidth;\r
\r
		if ( that.inInlineMode ) {\r
			box.scroll = {\r
				top: element.$.scrollTop,\r
				left: element.$.scrollLeft\r
			};\r
		}\r
\r
		return extend( {\r
			border: border,\r
			padding: padding,\r
			margin: margin,\r
			ignoreScroll: ignoreScroll\r
		}, box, true );\r
\r
		function getStyle( propertyName ) {\r
			return element.getComputedStyle.call( element, propertyName );\r
		}\r
	}\r
\r
	function updateSize( that, element, ignoreScroll ) {\r
		if ( !isHtml( element ) ) // i.e. an element is hidden\r
			return ( element.size = null ); //	-> reset size to make it useless for other methods\r
\r
		if ( !element.size )\r
			element.size = {};\r
\r
		// Abort if there was a similar query performed recently.\r
		// This kind of caching provides great performance improvement.\r
		else if ( element.size.ignoreScroll == ignoreScroll && element.size.date > new Date() - CACHE_TIME ) {\r
			that.debug.log( 'element.size: get from cache' ); // %REMOVE_LINE%\r
			return null;\r
		}\r
\r
		that.debug.log( 'element.size: capture' ); // %REMOVE_LINE%\r
\r
		return extend( element.size, getSize( that, element, ignoreScroll ), {\r
			date: +new Date()\r
		}, true );\r
	}\r
\r
	// Updates that.view.editable object.\r
	// This one must be called separately outside of updateWindowSize\r
	// to prevent cyclic dependency getSize<->updateWindowSize.\r
	// It calls getSize with force flag to avoid getWindowSize cache (look: getSize).\r
	function updateEditableSize( that, ignoreScroll ) {\r
		that.view.editable = getSize( that, that.editable, ignoreScroll, true );\r
	}\r
\r
	function updateWindowSize( that, force ) {\r
		if ( !that.view )\r
			that.view = {};\r
\r
		var view = that.view;\r
\r
		if ( !force && view && view.date > new Date() - CACHE_TIME ) {\r
			that.debug.log( 'win.size: get from cache' ); // %REMOVE_LINE%\r
			return;\r
		}\r
\r
		that.debug.log( 'win.size: capturing' ); // %REMOVE_LINE%\r
\r
		var win = that.win,\r
			scroll = win.getScrollPosition(),\r
			paneSize = win.getViewPaneSize();\r
\r
		extend( that.view, {\r
			scroll: {\r
				x: scroll.x,\r
				y: scroll.y,\r
				width: that.doc.$.documentElement.scrollWidth - paneSize.width,\r
				height: that.doc.$.documentElement.scrollHeight - paneSize.height\r
			},\r
			pane: {\r
				width: paneSize.width,\r
				height: paneSize.height,\r
				bottom: paneSize.height + scroll.y\r
			},\r
			date: +new Date()\r
		}, true );\r
	}\r
\r
	// This method searches document vertically using given\r
	// select criterion until stop criterion is fulfilled.\r
	function verticalSearch( that, stopCondition, selectCriterion, startElement ) {\r
		var upper = startElement,\r
			lower = startElement,\r
			mouseStep = 0,\r
			upperFound = false,\r
			lowerFound = false,\r
			viewPaneHeight = that.view.pane.height,\r
			mouse = that.mouse;\r
\r
		while ( mouse.y + mouseStep < viewPaneHeight && mouse.y - mouseStep > 0 ) {\r
			if ( !upperFound )\r
				upperFound = stopCondition( upper, startElement );\r
\r
			if ( !lowerFound )\r
				lowerFound = stopCondition( lower, startElement );\r
\r
			// Still not found...\r
			if ( !upperFound && mouse.y - mouseStep > 0 )\r
				upper = selectCriterion( that, { x: mouse.x, y: mouse.y - mouseStep } );\r
\r
			if ( !lowerFound && mouse.y + mouseStep < viewPaneHeight )\r
				lower = selectCriterion( that, { x: mouse.x, y: mouse.y + mouseStep } );\r
\r
			if ( upperFound && lowerFound )\r
				break;\r
\r
			// Instead of ++ to reduce the number of invocations by half.\r
			// It's trades off accuracy in some edge cases for improved performance.\r
			mouseStep += 2;\r
		}\r
\r
		return new boxTrigger( [ upper, lower, null, null ] );\r
	}\r
\r
} )();\r
\r
/**\r
 * Sets the default vertical distance between the edge of the element and the mouse pointer that\r
 * causes the magic line to appear. This option accepts a value in pixels, without the unit (for example:\r
 * `15` for 15 pixels).\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Changes the offset to 15px.\r
 *		CKEDITOR.config.magicline_triggerOffset = 15;\r
 *\r
 * @cfg {Number} [magicline_triggerOffset=30]\r
 * @member CKEDITOR.config\r
 * @see CKEDITOR.config#magicline_holdDistance\r
 */\r
\r
/**\r
 * Defines the distance between the mouse pointer and the box within\r
 * which the magic line stays revealed and no other focus space is offered to be accessed.\r
 * This value is relative to {@link #magicline_triggerOffset}.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Increases the distance to 80% of CKEDITOR.config.magicline_triggerOffset.\r
 *		CKEDITOR.config.magicline_holdDistance = .8;\r
 *\r
 * @cfg {Number} [magicline_holdDistance=0.5]\r
 * @member CKEDITOR.config\r
 * @see CKEDITOR.config#magicline_triggerOffset\r
 */\r
\r
/**\r
 * Defines the default keystroke that accesses the closest unreachable focus space **before**\r
 * the caret (start of the selection). If there is no focus space available, the selection remains unchanged.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Changes the default keystroke to "Ctrl + ,".\r
 *		CKEDITOR.config.magicline_keystrokePrevious = CKEDITOR.CTRL + 188;\r
 *\r
 * @cfg {Number} [magicline_keystrokePrevious=CKEDITOR.CTRL + CKEDITOR.SHIFT + 51 (CTRL + SHIFT + 3)]\r
 * @member CKEDITOR.config\r
 */\r
CKEDITOR.config.magicline_keystrokePrevious = CKEDITOR.CTRL + CKEDITOR.SHIFT + 51; // CTRL + SHIFT + 3\r
\r
/**\r
 * Defines the default keystroke that accesses the closest unreachable focus space **after**\r
 * the caret (start of the selection). If there is no focus space available, the selection remains unchanged.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Changes keystroke to "Ctrl + .".\r
 *		CKEDITOR.config.magicline_keystrokeNext = CKEDITOR.CTRL + 190;\r
 *\r
 * @cfg {Number} [magicline_keystrokeNext=CKEDITOR.CTRL + CKEDITOR.SHIFT + 52 (CTRL + SHIFT + 4)]\r
 * @member CKEDITOR.config\r
 */\r
CKEDITOR.config.magicline_keystrokeNext = CKEDITOR.CTRL + CKEDITOR.SHIFT + 52; // CTRL + SHIFT + 4\r
\r
/**\r
 * Defines a list of attributes that, if assigned to some elements, prevent the magic line from being\r
 * used within these elements.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Adds the "data-tabu" attribute to the magic line tabu list.\r
 *		CKEDITOR.config.magicline_tabuList = [ 'data-tabu' ];\r
 *\r
 * @cfg {Number} [magicline_tabuList=[ 'data-widget-wrapper' ]]\r
 * @member CKEDITOR.config\r
 */\r
\r
/**\r
 * Defines the color of the magic line. The color may be adjusted to enhance readability.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Changes magic line color to blue.\r
 *		CKEDITOR.config.magicline_color = '#0000FF';\r
 *\r
 * @cfg {String} [magicline_color='#FF0000']\r
 * @member CKEDITOR.config\r
 */\r
\r
/**\r
 * Activates the special all-encompassing mode that considers all focus spaces between\r
 * {@link CKEDITOR.dtd#$block} elements as accessible by the magic line.\r
 *\r
 * Read more in the [documentation](#!/guide/dev_magicline)\r
 * and see the [SDK sample](http://sdk.ckeditor.com/samples/magicline.html).\r
 *\r
 *		// Enables the greedy "put everywhere" mode.\r
 *		CKEDITOR.config.magicline_everywhere = true;\r
 *\r
 * @cfg {Boolean} [magicline_everywhere=false]\r
 * @member CKEDITOR.config\r
 */\r