TinyMCE textpattern:

- Add description of the new patterns to the Shortcuts help modal.
- Fix the layout a bit and make the patterns in two columns.
- Disable the `textpatterns` plugin in IE < 9.

See #33300.

git-svn-id: https://develop.svn.wordpress.org/trunk@36761 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/class-wp-editor.php

@@ -1066,6 +1066,8 @@ final class _WP_Editors {
 				__( 'When starting a new paragraph with one of these formatting shortcuts followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ),
 			'The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.' =>
 				__( 'The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.' ),
+			'The next group of formatting shortcuts are applied as you type or when you insert them around plain text in the same paragraph. Press Escape or the Undo button to undo.' =>
+				__( 'The next group of formatting shortcuts are applied as you type or when you insert them around plain text in the same paragraph. Press Escape or the Undo button to undo.' ),
 		);
 
 		/**

src/wp-includes/css/editor.css

@@ -136,6 +136,28 @@
 	margin-bottom: 20px;
 }
 
+.mce-window .wp-editor-help table.wp-help-single {
+	margin: 0 8px 20px;
+}
+
+.mce-window .wp-editor-help table.fixed {
+	table-layout: fixed;
+}
+
+.mce-window .wp-editor-help table.fixed th:nth-child(odd),
+.mce-window .wp-editor-help table.fixed td:nth-child(odd) {
+	width: 12%;
+}
+
+.mce-window .wp-editor-help table.fixed th:nth-child(even),
+.mce-window .wp-editor-help table.fixed td:nth-child(even) {
+	width: 38%;
+}
+
+.mce-window .wp-editor-help table.fixed th:nth-child(odd) {
+	padding: 5px 0 0;
+}
+
 .mce-window .wp-editor-help td,
 .mce-window .wp-editor-help th {
 	font-size: 13px;
@@ -159,11 +181,6 @@
 	background: rgba(0,0,0,0.08);
 }
 
-.mce-window .wp-help-header td {
-	font-weight: bold;
-	padding: 0 5px;
-}
-
 .mce-window .wp-help-th-center td:nth-child(odd),
 .mce-window .wp-help-th-center th:nth-child(odd) {
     text-align: center;

src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -262,43 +262,51 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 		// Main section, default and additional shortcuts
 		html = html +
 			'<h2>' + __( 'Default shortcuts,' ) + ' ' + meta + '</h2>' +
-			'<table class="wp-help-th-center">' +
+			'<table class="wp-help-th-center fixed">' +
 				header +
 				table1.join('') +
 			'</table>' +
 			'<h2>' + __( 'Additional shortcuts,' ) + ' ' + access + '</h2>' +
-			'<table class="wp-help-th-center">' +
+			'<table class="wp-help-th-center fixed">' +
 				header +
 				table2.join('') +
 			'</table>';
 
-		if ( editor.plugins.wptextpattern ) {
+		if ( editor.plugins.wptextpattern && ( ! tinymce.Env.ie || tinymce.Env.ie > 8 ) ) {
 			// Text pattern section
 			html = html +
 				'<h2>' + __( 'When starting a new paragraph with one of these formatting shortcuts followed by a space, the formatting will be applied automatically. Press Backspace or Escape to undo.' ) + '</h2>' +
-				'<table>' +
-					tr({ '*':  'Bullet list' }) +
-					tr({ '-':  'Bullet list' }) +
-					tr({ '1.':  'Numbered list' }) +
-					tr({ '1)':  'Numbered list' }) +
+				'<table class="wp-help-th-center fixed">' +
+					tr({ '*':  'Bullet list', '1.':  'Numbered list' }) +
+					tr({ '-':  'Bullet list', '1)':  'Numbered list' }) +
 				'</table>';
 
 			html = html +
 				'<h2>' + __( 'The following formatting shortcuts are replaced when pressing Enter. Press Escape or the Undo button to undo.' ) + '</h2>' +
-				'<table>' +
+				'<table class="wp-help-single">' +
 					tr({ '>': 'Blockquote' }) +
 					tr({ '##': 'Heading 2' }) +
 					tr({ '###': 'Heading 3' }) +
 					tr({ '####': 'Heading 4' }) +
 					tr({ '#####': 'Heading 5' }) +
 					tr({ '######': 'Heading 6' }) +
+					tr({ '---': 'Horizontal rule' }) +
+					tr({ '***': 'Horizontal rule' }) +
+				'</table>';
+
+			html = html +
+				'<h2>' + __( 'The next group of formatting shortcuts are applied as you type or when you insert them around plain text in the same paragraph. Press Escape or the Undo button to undo.' ) + '</h2>' +
+				'<table class="wp-help-th-center fixed">' +
+					tr({ '*': 'Italic', '**': 'Bold' }) +
+					tr({ '_': 'Italic', '__': 'Bold' }) +
+					tr({ '`': 'Code', empty: '' }) +
 				'</table>';
 		}
 
 		// Focus management section
 		html = html +
 			'<h2>' + __( 'Focus shortcuts:' ) + '</h2>' +
-			'<table>' +
+			'<table class="wp-help-single">' +
 				tr({ 'Alt + F8':  'Inline toolbar (when an image, link or preview is selected)' }) +
 				tr({ 'Alt + F9':  'Editor menu (when enabled)' }) +
 				tr({ 'Alt + F10': 'Editor toolbar' }) +

src/wp-includes/js/tinymce/plugins/wptextpattern/plugin.js

@@ -11,6 +11,10 @@
  * using the undo shortcut, or the undo button in the toolbar.
  */
 ( function( tinymce, setTimeout ) {
+	if ( tinymce.Env.ie && tinymce.Env.ie < 9 ) {
+		return;
+	}
+
 	tinymce.PluginManager.add( 'wptextpattern', function( editor ) {
 		var VK = tinymce.util.VK;
 
@@ -82,7 +86,7 @@
 			var format;
 			var zero;
 
-			if ( node.nodeType !== 3 || ! node.data.length || ! offset ) {
+			if ( ! node || node.nodeType !== 3 || ! node.data.length || ! offset ) {
 				return;
 			}