Press This:

- Add support for the Text editor.
- Add auto-scrolling when the caret moves out of the viewport while the user is typing (similarly to editor-expand).
- Add auto-resize for the textarea.
See #32706.
Built from https://develop.svn.wordpress.org/trunk@32999


git-svn-id: http://core.svn.wordpress.org/trunk@32970 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/press-this-rtl.css

@@ -2172,3 +2172,44 @@ html {
 	top: -1px;
 	margin-right: 11px;
 }
+
+/* Text editor */
+#pressthis {
+	color: #404040;
+	resize: none;
+	padding-top: 30px;
+}
+
+.wp-editor-wrap .quicktags-toolbar {
+	background: transparent;
+	border: none;
+}
+
+/* Switch editor buttons */
+.wp-editor-wrap .wp-editor-tools {
+	z-index: 0;
+}
+
+.wp-editor-wrap .wp-editor-tabs {
+	padding: 2px;
+}
+
+.wp-editor-wrap .wp-switch-editor {
+	top: 0;
+	margin: 3px 5px 0 0;
+	background: #f5f5f5;
+	color: #555;
+	border-color: #ccc;
+}
+
+.wp-editor-wrap .wp-switch-editor:hover {
+	background: #fafafa;
+	border-color: #999;
+	color: #23282d;
+}
+
+.wp-editor-wrap.tmce-active .switch-tmce,
+.wp-editor-wrap.html-active .switch-html {
+	background: #fff;
+	border-color: #d8d8d8;
+}

wp-admin/css/press-this.css

@@ -2172,3 +2172,44 @@ html {
 	top: -1px;
 	margin-left: 11px;
 }
+
+/* Text editor */
+#pressthis {
+	color: #404040;
+	resize: none;
+	padding-top: 30px;
+}
+
+.wp-editor-wrap .quicktags-toolbar {
+	background: transparent;
+	border: none;
+}
+
+/* Switch editor buttons */
+.wp-editor-wrap .wp-editor-tools {
+	z-index: 0;
+}
+
+.wp-editor-wrap .wp-editor-tabs {
+	padding: 2px;
+}
+
+.wp-editor-wrap .wp-switch-editor {
+	top: 0;
+	margin: 3px 0 0 5px;
+	background: #f5f5f5;
+	color: #555;
+	border-color: #ccc;
+}
+
+.wp-editor-wrap .wp-switch-editor:hover {
+	background: #fafafa;
+	border-color: #999;
+	color: #23282d;
+}
+
+.wp-editor-wrap.tmce-active .switch-tmce,
+.wp-editor-wrap.html-active .switch-html {
+	background: #fff;
+	border-color: #d8d8d8;
+}

wp-admin/includes/class-wp-press-this.php

@@ -1387,7 +1387,9 @@ class WP_Press_This {
 						'toolbar1'              => 'bold,italic,bullist,numlist,blockquote,link,unlink',
 						'toolbar2'              => 'undo,redo',
 					),
-					'quicktags' => false,
+					'quicktags' => array(
+						'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more',
+					),
 				) );
 
 				?>

wp-admin/js/press-this.js

@@ -5,6 +5,8 @@
 ( function( $, window ) {
 	var PressThis = function() {
 		var editor, $mediaList, $mediaThumbWrap,
+			$window               = $( window ),
+			$document             = $( document ),
 			saveAlert             = false,
 			textarea              = document.createElement( 'textarea' ),
 			sidebarIsOpen         = false,
@@ -17,6 +19,10 @@
 			isHidden              = 'is-hidden',
 			offscreenHidden       = isOffScreen + ' ' + isHidden,
 			iOS                   = /iPad|iPod|iPhone/.test( window.navigator.userAgent ),
+			$textEditor           = $( '#pressthis' ),
+			textEditor            = $textEditor[0],
+			textEditorMinHeight   = 600,
+			textLength            = 0,
 			transitionEndEvent    = ( function() {
 				var style = document.documentElement.style;
 
@@ -114,6 +120,99 @@
 			$( '.post-actions button' ).removeAttr( 'disabled' );
 		}
 
+		function textEditorResize( reset ) {
+			var pageYOffset, height;
+
+			if ( editor && ! editor.isHidden() ) {
+ 				return;
+ 			}
+
+			reset = ( reset === 'reset' ) || ( textLength && textLength > textEditor.value.length );
+			height = textEditor.style.height;
+
+			if ( reset ) {
+				pageYOffset = window.pageYOffset;
+
+				textEditor.style.height = 'auto';
+				textEditor.style.height = Math.max( textEditor.scrollHeight, textEditorMinHeight ) + 'px';
+				window.scrollTo( window.pageXOffset, pageYOffset );
+			} else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
+				textEditor.style.height = textEditor.scrollHeight + 'px';
+ 			}
+
+ 			textLength = textEditor.value.length;
+ 		}
+
+ 		function mceGetCursorOffset() {
+			if ( ! editor ) {
+				return false;
+			}
+
+			var node = editor.selection.getNode(),
+				range, view, offset;
+
+			if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
+				offset = view.getBoundingClientRect();
+			} else {
+				range = editor.selection.getRng();
+
+				try {
+					offset = range.getClientRects()[0];
+				} catch( er ) {}
+
+				if ( ! offset ) {
+					offset = node.getBoundingClientRect();
+				}
+			}
+
+			return offset.height ? offset : false;
+		}
+
+		// Make sure the caret is always visible.
+		function mceKeyup( event ) {
+			var VK = window.tinymce.util.VK,
+				key = event.keyCode;
+
+			// Bail on special keys.
+			if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) {
+				return;
+			// OS keys, function keys, num lock, scroll lock
+			} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
+				return;
+			}
+
+			mceScroll( key );
+		}
+
+		function mceScroll( key ) {
+			var cursorTop, cursorBottom, editorBottom,
+				offset = mceGetCursorOffset(),
+				bufferTop = 50,
+				bufferBottom = 65,
+				VK = window.tinymce.util.VK;
+
+			if ( ! offset ) {
+				return;
+			}
+
+			cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
+			cursorBottom = cursorTop + offset.height;
+			cursorTop = cursorTop - bufferTop;
+			cursorBottom = cursorBottom + bufferBottom;
+			editorBottom = $window.height();
+
+			// Don't scroll if the node is taller than the visible part of the editor
+			if ( editorBottom < offset.height ) {
+				return;
+			}
+
+			if ( cursorTop < 0 && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
+				window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset );
+			} else if ( cursorBottom > editorBottom ) {
+				window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
+			}
+		}
+
 		/**
 		 * Replace emoji images with chars and sanitize the text content.
 		 */
@@ -216,10 +315,6 @@
 		function insertSelectedMedia( $element ) {
 			var src, link, newContent = '';
 
-			if ( ! editor ) {
-				return;
-			}
-
 			src = checkUrl( $element.attr( 'data-wp-src' ) || '' );
 			link = checkUrl( data.u );
 
@@ -233,11 +328,15 @@
 				newContent = '[embed]' + src + '[/embed]';
 			}
 
+			if ( editor && ! editor.isHidden() ) {
 				if ( ! hasSetFocus ) {
 					editor.setContent( '<p>' + newContent + '</p>' + editor.getContent() );
 				} else {
 					editor.execCommand( 'mceInsertContent', false, newContent );
 				}
+			} else if ( window.QTags ) {
+				window.QTags.insertContent( newContent );
+			}
 		}
 
 		/**
@@ -636,7 +735,7 @@
 		function monitor() {
 			var $splitButton = $( '.split-button' );
 
-			$( document ).on( 'tinymce-editor-init', function( event, ed ) {
+			$document.on( 'tinymce-editor-init', function( event, ed ) {
 				editor = ed;
 
 				editor.on( 'nodechange', function() {
@@ -646,6 +745,22 @@
 				editor.on( 'focus', function() {
 					splitButtonClose();
 				});
+
+				editor.on( 'show', function() {
+					setTimeout( function() {
+						editor.execCommand( 'wpAutoResize' );
+					}, 300 );
+				});
+
+				editor.on( 'hide', function() {
+					setTimeout( function() {
+						textEditorResize( 'reset' );
+					}, 100 );
+				});
+
+				editor.on( 'keyup', mceKeyup );
+				editor.on( 'undo redo', mceScroll );
+
 			}).on( 'click.press-this keypress.press-this', '.suggested-media-thumbnail', function( event ) {
 				if ( event.type === 'click' || event.keyCode === 13 ) {
 					insertSelectedMedia( $( this ) );
@@ -727,10 +842,14 @@
 				}
 			} );
 
-			$( window ).on( 'beforeunload.press-this', function() {
+			$window.on( 'beforeunload.press-this', function() {
 				if ( saveAlert || ( editor && editor.isDirty() ) ) {
 					return __( 'saveAlert' );
 				}
+			} ).on( 'resize.press-this', function() {
+				if ( ! editor || editor.isHidden() ) {
+					textEditorResize( 'reset' );
+				}
 			});
 
 			$( 'button.add-cat-toggle' ).on( 'click.press-this', function() {
@@ -766,6 +885,8 @@
 				}
 			} );
 
+			$textEditor.on( 'focus.press-this input.press-this propertychange.press-this', textEditorResize );
+
 			return true;
 		}
 
@@ -782,7 +903,7 @@
 		}
 
 		// Let's go!
-		$( document ).ready( function() {
+		$document.ready( function() {
 			render();
 			monitor();
 			refreshCatsCache();

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32998';
+$wp_version = '4.3-alpha-32999';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.