Ticket #29558: 29558.3.patch

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

@@ -993 +993 @@
                         'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ),
                         'Toolbar Toggle' => __( 'Toolbar Toggle' ),
                         'Insert Read More tag' => __( 'Insert Read More tag' ),
+                        'Insert Page Break tag' => __( 'Insert Page Break tag' ),
                         'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
                         'Distraction-free writing mode' => __( 'Distraction-free writing mode' ),
                         'No alignment' => __( 'No alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
                         'Remove' => __( 'Remove' ), // Tooltip for the 'remove' button in the image toolbar
                         'Edit ' => __( 'Edit' ), // Tooltip for the 'edit' button in the image toolbar
+                        'Focus shortcuts:' => __( 'Focus shortcuts:' ),
+                        'Image toolbar (when an image is selected)' => __( 'Image toolbar (when an image is selected)' ),
+                        'Editor menu (when enabled)' => __( 'Editor menu (when enabled)' ),
+                        'Editor toolbar' => __( 'Editor toolbar' ),
+                        'Elements path' => __( 'Elements path' )
                 );
 
                 /**

src/wp-includes/css/editor.css

@@ -79 +79 @@
         width: calc( 100% - 36px );
 }
 
-.mce-wp-help .mce-window-head {
-        border-bottom: none;
-}
-
 .mce-textbox,
 .mce-checkbox i.mce-i-checkbox,
 #wp-link .query-results {
@@ -104 +100 @@
         box-shadow: 0 0 2px rgba(30,140,190,0.8);
 }
 
+.mce-container kbd {
+        font-family: monospace;
+        padding: 3px 5px 2px 5px;
+        margin: 0 1px;
+        background: #eaeaea;
+        background: rgba(0,0,0,0.07);
+        font-size: 13px;
+}
+
+.mce-wp-help {
+        height: 400px;
+        overflow: auto;
+}
+
+.mce-wp-help td {
+        padding: 5px;
+}
+
 /* TinyMCE menus */
 .mce-menu,
 .mce-floatpanel.mce-popover {

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

@@ -4 +4 @@
 tinymce.ui.FloatPanel.zIndex = 100100;
 
 tinymce.PluginManager.add( 'wordpress', function( editor ) {
-        var DOM = tinymce.DOM, wpAdvButton, modKey, style,
+        var DOM = tinymce.DOM, wpAdvButton, style,
                 last = 0;
 
         if ( typeof window.jQuery !== 'undefined' ) {
@@ -188 +188 @@
         });
 
         editor.addCommand( 'WP_Help', function() {
+                var each = tinymce.each,
+                        column1 = [],
+                        column2 = [],
+                        rows,
+                        i,
+                        html = [],
+                        emptytd = '<td></td>',
+                        meta = tinymce.Env.mac ? 'cmd' : 'ctrl',
+                        access = tinymce.Env.mac ? 'ctrl + alt' : 'shift + alt',
+                        __ = editor.editorManager.i18n.translate;
+
+                each( {
+                        C: 'Copy',
+                        X: 'Cut',
+                        V: 'Paste',
+                        A: 'Select all',
+                        Z: 'Undo',
+                        Y: 'Redo',
+                        B: 'Bold',
+                        I: 'Italic',
+                        U: 'Underline',
+                        K: 'Insert/edit link'
+                }, function( text, key ) {
+                        column1.push( td( meta + ' + ' + key, text ) );
+                } );
+
+                each( [ 1, 2, 3, 4, 5, 6 ], function( key ) {
+                        column1.push( td( access + ' + ' + key, 'Heading ' + key ) );
+                } );
+
+                each( {
+                        L: 'Align left',
+                        C: 'Align center',
+                        R: 'Align right',
+                        J: 'Justify',
+                        D: 'Strikethrough',
+                        Q: 'Blockquote',
+                        U: 'Bullet list',
+                        O: 'Numbered list',
+                        A: 'Insert/edit link',
+                        S: 'Remove link',
+                        M: 'Insert/edit image',
+                        T: 'Insert Read More tag',
+                        H: 'Keyboard Shortcuts',
+                        X: 'Code',
+                        P: 'Insert Page Break tag',
+                        W: 'Distraction-free writing mode',
+                        N: 'Spellcheck'
+                }, function( text, key ) {
+                        column2.push( td( access + ' + ' + key, text ) );
+                } );
+
+                function td( pattern, text ) {
+                        return '<td><kbd>' + pattern + '</kbd></td><td>' + __( text ) + '</td>';
+                }
+
+                rows = Math.max( column1.length, column2.length );
+
+                for ( i = 1; i <= rows; i++ ) {
+                        html.push( '<tr>' + ( column1[ i ] || emptytd + emptytd ) + ( column2[ i ] || emptytd + emptytd ) + '</tr>' );
+                }
+
+                html = (
+                        '<table>' + html.join( '' ) + '</table>' +
+                        '<p>' + __( 'Focus shortcuts:' ) + '</p>' +
+                        '<table>' +
+                                '<tr>' + td( 'alt + F8', 'Image toolbar (when an image is selected)' ) + '</tr>' +
+                                '<tr>' + td( 'alt + F9', 'Editor menu (when enabled)' ) + '</tr>' +
+                                '<tr>' + td( 'alt + F10', 'Editor toolbar' ) + '</tr>' +
+                                '<tr>' + td( 'alt + F11', 'Elements path' ) + '</tr>' +
+                        '</table>'
+                );
+
                 editor.windowManager.open({
-                        url: tinymce.baseURL + '/wp-mce-help.php',
                         title: 'Keyboard Shortcuts',
-                        width: 450,
-                        height: 420,
-                        classes: 'wp-help',
-                        buttons: { text: 'Close', onclick: 'close' }
+                        spacing: 10,
+                        padding: 10,
+                        items: {
+                                type: 'container',
+                                classes: 'wp-help',
+                                html: html
+                        },
+                        buttons: {
+                                text: 'Close',
+                                onclick: 'close'
+                        }
                 });
         });
 
@@ -402 +481 @@
         });
 
         editor.on( 'preInit', function() {
+                var i;
+
                 // Don't replace <i> with <em> and <b> with <strong> and don't remove them when empty
                 editor.schema.addValidElements( '@[id|accesskey|class|dir|lang|style|tabindex|title|contenteditable|draggable|dropzone|hidden|spellcheck|translate],i,b' );
 
                 if ( tinymce.Env.iOS ) {
                         editor.settings.height = 300;
                 }
-        });
 
-        // Add custom shortcuts
-        modKey = 'alt+shift';
+                for ( i = 1; i <= 9; i++ ) {
+                        editor.shortcuts.remove( 'meta+shift+' + i );
+                }
 
-        editor.addShortcut( modKey + '+c', '', 'JustifyCenter' );
-        editor.addShortcut( modKey + '+r', '', 'JustifyRight' );
-        editor.addShortcut( modKey + '+l', '', 'JustifyLeft' );
-        editor.addShortcut( modKey + '+j', '', 'JustifyFull' );
-        editor.addShortcut( modKey + '+q', '', 'mceBlockQuote' );
-        editor.addShortcut( modKey + '+u', '', 'InsertUnorderedList' );
-        editor.addShortcut( modKey + '+o', '', 'InsertOrderedList' );
-        editor.addShortcut( modKey + '+n', '', 'mceSpellCheck' );
-        editor.addShortcut( modKey + '+s', '', 'unlink' );
-        editor.addShortcut( modKey + '+m', '', 'WP_Medialib' );
-        editor.addShortcut( modKey + '+z', '', 'WP_Adv' );
-        editor.addShortcut( modKey + '+t', '', 'WP_More' );
-        editor.addShortcut( modKey + '+d', '', 'Strikethrough' );
-        editor.addShortcut( modKey + '+h', '', 'WP_Help' );
-        editor.addShortcut( modKey + '+p', '', 'WP_Page' );
-        editor.addShortcut( modKey + '+x', '', 'WP_Code' );
-        editor.addShortcut( 'ctrl+s', '', function() {
-                if ( typeof wp !== 'undefined' && wp.autosave ) {
-                        wp.autosave.server.triggerSave();
+                for ( i = 1; i <= 6; i++ ) {
+                        editor.shortcuts.add( 'access+' + i, '', [ 'FormatBlock', false, 'h' + i ] );
                 }
-        });
-        
+
+                tinymce.each( {
+                        c: 'JustifyCenter',
+                        r: 'JustifyRight',
+                        l: 'JustifyLeft',
+                        j: 'JustifyFull',
+                        q: 'mceBlockQuote',
+                        u: 'InsertUnorderedList',
+                        o: 'InsertOrderedList',
+                        n: 'mceSpellCheck',
+                        s: 'unlink',
+                        m: 'WP_Medialib',
+                        z: 'WP_Adv',
+                        t: 'WP_More',
+                        d: 'Strikethrough',
+                        h: 'WP_Help',
+                        p: 'WP_Page',
+                        x: 'WP_Code'
+                }, function( command, key ) {
+                        editor.shortcuts.add( 'access+' + key, '', command );
+                } );
+
+                editor.addShortcut( 'ctrl+s', '', function() {
+                        if ( typeof wp !== 'undefined' && wp.autosave ) {
+                                wp.autosave.server.triggerSave();
+                        }
+                } );
+        } );
+
         /**
          * Experimental: create a floating toolbar.
-         * This functionality will change in the next releases. Not recommennded for use by plugins.
-         */             
+         * This functionality will change in the next releases. Not recommended for use by plugins.
+         */
         ( function() {
                 var DOM = tinymce.DOM,
                         each = tinymce.each,