From 9b671bdf9e7b3df9034125354b62561bf36b99f3 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Fri, 26 Jun 2015 04:39:11 +0000 Subject: [PATCH] TinyMCE: update the Keyboard Shortcuts help modal, use the TinyMCE UI API instead of an iframe. Props iseulde, azaozz. Fixes #31913. git-svn-id: https://develop.svn.wordpress.org/trunk@32951 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/class-wp-editor.php | 18 ++- src/wp-includes/css/editor.css | 67 ++++++++- .../js/tinymce/plugins/wordpress/plugin.js | 88 ++++++++++- src/wp-includes/js/tinymce/wp-mce-help.php | 142 ------------------ 4 files changed, 162 insertions(+), 153 deletions(-) delete mode 100644 src/wp-includes/js/tinymce/wp-mce-help.php diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index f782e8428d..31f0629fc9 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -1018,14 +1018,30 @@ final class _WP_Editors { 'Format' => _x( 'Format', 'TinyMCE menu' ), // WordPress strings - '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 + + // Shortcuts help modal + 'Keyboard Shortcuts' => __( 'Keyboard Shortcuts' ), + 'Default shortcuts,' => __( 'Default shortcuts,' ), + 'Additional shortcuts,' => __( 'Additional shortcuts,' ), + 'Focus shortcuts:' => __( 'Focus shortcuts:' ), + 'Inline toolbar (when an image, link or preview is selected)' => __( 'Inline toolbar (when an image, link or preview is selected)' ), + 'Editor menu (when enabled)' => __( 'Editor menu (when enabled)' ), + 'Editor toolbar' => __( 'Editor toolbar' ), + 'Elements path' => __( 'Elements path' ), + 'Ctrl + Alt + letter:' => __( 'Ctrl + Alt + letter:' ), + 'Shift + Alt + letter:' => __( 'Shift + Alt + letter:' ), + 'Cmd + letter:' => __( 'Cmd + letter:' ), + 'Ctrl + letter:' => __( 'Ctrl + letter:' ), + 'Letter' => __( 'Letter' ), + 'Action' => __( 'Action' ), ); /** diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index af2d901e59..9009d72a17 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -79,8 +79,8 @@ width: calc( 100% - 36px ); } -.mce-wp-help .mce-window-head { - border-bottom: none; +.mce-window .mce-foot { + border-top: 1px solid #dfdfdf; } .mce-textbox, @@ -104,6 +104,69 @@ box-shadow: 0 0 2px rgba(30,140,190,0.8); } +.mce-window .mce-wp-help { + height: 320px; + width: 360px; + overflow: auto; +} + +.mce-window .mce-wp-help * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.mce-window .mce-wp-help .mce-container-body.mce-undefined { + width: auto !important; +} + +.mce-window .wp-editor-help { + width: 340px; + padding: 10px 15px 0; +} + +.mce-window .wp-editor-help p { + margin: 7px 0; +} + +.mce-window .wp-editor-help table { + width: 320px; + margin-bottom: 20px; +} + +.mce-window .wp-editor-help td, +.mce-window .wp-editor-help th { + font-size: 13px; + vertical-align: middle; + +} + +.mce-window .wp-editor-help td { + padding: 5px; + word-wrap: break-word; + white-space: normal; +} + +.mce-window .wp-editor-help th { + font-weight: bold; + padding: 5px 0 0; + text-align: center; +} + +.mce-window .wp-editor-help kbd { + font-family: monospace; + padding: 2px 7px; + font-weight: bold; + margin: 0 1px; + background: #eaeaea; + background: rgba(0,0,0,0.08); +} + +.mce-window .wp-help-header td { + font-weight: bold; + padding: 0 5px; +} + /* TinyMCE menus */ .mce-menu, .mce-floatpanel.mce-popover { diff --git a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js index 9c27c53022..e294078b43 100644 --- a/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js @@ -201,15 +201,87 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { }); editor.addCommand( 'WP_Help', function() { - editor.windowManager.open({ - url: tinymce.baseURL + '/wp-mce-help.php', + var access = tinymce.Env.mac ? __( 'Ctrl + Alt + letter:' ) : __( 'Shift + Alt + letter:' ), + meta = tinymce.Env.mac ? __( 'Cmd + letter:' ) : __( 'Ctrl + letter:' ), + table1 = [], + table2 = [], + header; + + 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( row ) { + table1.push( tr( row ) ); + } ); + + each( [ + { 1: 'Heading 1', 2: 'Heading 2' }, + { 3: 'Heading 3', 4: 'Heading 4' }, + { 5: 'Heading 5', 6: 'Heading 6' }, + { 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' } + ], function( row ) { + table2.push( tr( row ) ); + } ); + + function tr( row ) { + var out = ''; + + each( row, function( text, key ) { + if ( ! text ) { + out += ''; + } else { + out += '' + key + '' + __( text ) + ''; + } + }); + + return out + ''; + } + + header = [ __( 'Letter' ), __( 'Action' ), __( 'Letter' ), __( 'Action' ) ]; + header = '' + header.join( '' ) + ''; + + editor.windowManager.open( { title: 'Keyboard Shortcuts', - width: 450, - height: 420, - classes: 'wp-help', - buttons: { text: 'Close', onclick: 'close' } - }); - }); + items: { + type: 'container', + classes: 'wp-help', + html: ( + '
' + + '

' + __( 'Default shortcuts,' ) + ' ' + meta + '

' + + '' + + header + + table1.join('') + + '
' + + '

' + __( 'Additional shortcuts,' ) + ' ' + access + '

' + + '' + + header + + table2.join('') + + '
' + + '

' + __( 'Focus shortcuts:' ) + '

' + + '' + + 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' }) + + tr({ 'Alt + F11': 'Elements path' }) + + '
' + ) + }, + buttons: { + text: 'Close', + onclick: 'close' + } + } ); + } ); editor.addCommand( 'WP_Medialib', function() { if ( wp && wp.media && wp.media.editor ) { diff --git a/src/wp-includes/js/tinymce/wp-mce-help.php b/src/wp-includes/js/tinymce/wp-mce-help.php deleted file mode 100644 index 53d649e281..0000000000 --- a/src/wp-includes/js/tinymce/wp-mce-help.php +++ /dev/null @@ -1,142 +0,0 @@ - - -> - - -<?php _e('Keyboard Shortcuts'); ?> - - - - - - - - - -
- -
-

- - - - - - - - -
cv
ax
zy
bi
uk
- -

- - -

- - - - - - - - - - - - - - - - -
12
34
56
nl
jc
dr
u• a
o1. s
qm
wt
ph
x  
- -

- - - - - - -
Alt + F8
Alt + F9
Alt + F10
Alt + F11
- -

-
- -
- -