From 752f99c5dfda8cc81ce4bf0415b52f448a505713 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Fri, 29 Mar 2019 00:48:31 +0000 Subject: [PATCH] TinyMCE: - Fix adding the keyboard shortcuts to all button tooltips in the classic editor and classic block. - Fix translating the aria labels for all buttons. Fixes #35710; git-svn-id: https://develop.svn.wordpress.org/trunk@45066 602fd350-edb4-49c9-b593-d223f7449a82 --- .../tinymce/plugins/wordpress/plugin.js | 134 +++++++++++++----- src/wp-includes/class-wp-editor.php | 1 - 2 files changed, 98 insertions(+), 37 deletions(-) diff --git a/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js b/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js index 790fad6265..b93e936b09 100644 --- a/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js +++ b/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js @@ -12,7 +12,8 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { __ = editor.editorManager.i18n.translate, $ = window.jQuery, wp = window.wp, - hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ); + hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ), + wpTooltips = false; if ( $ ) { $( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] ); @@ -581,41 +582,6 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { } }); } - - if ( editor.settings.wp_shortcut_labels && editor.theme.panel ) { - var labels = {}; - var access = 'Shift+Alt+'; - var meta = 'Ctrl+'; - - // For Mac: ctrl = \u2303, cmd = \u2318, alt = \u2325 - - if ( tinymce.Env.mac ) { - access = '\u2303\u2325'; - meta = '\u2318'; - } - - each( editor.settings.wp_shortcut_labels, function( value, name ) { - labels[ name ] = value.replace( 'access', access ).replace( 'meta', meta ); - } ); - - each( editor.theme.panel.find('button'), function( button ) { - if ( button && button.settings.tooltip && labels.hasOwnProperty( button.settings.tooltip ) ) { - // Need to translate now. We are changing the string so it won't match and cannot be translated later. - button.settings.tooltip = editor.translate( button.settings.tooltip ) + ' (' + labels[ button.settings.tooltip ] + ')'; - } - } ); - - // listbox for the "blocks" drop-down - each( editor.theme.panel.find('listbox'), function( listbox ) { - if ( listbox && listbox.settings.text === 'Paragraph' ) { - each( listbox.settings.values, function( item ) { - if ( item.text && labels.hasOwnProperty( item.text ) ) { - item.shortcut = '(' + labels[ item.text ] + ')'; - } - } ); - } - } ); - } }); editor.on( 'SaveContent', function( event ) { @@ -718,6 +684,95 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { } }); + editor.on( 'beforerenderui', function() { + if ( editor.theme.panel ) { + each( [ 'button', 'colorbutton', 'splitbutton' ], function( buttonType ) { + replaceButtonsTooltips( editor.theme.panel.find( buttonType ) ); + } ); + + addShortcutsToListbox(); + } + } ); + + function prepareTooltips() { + var access = 'Shift+Alt+'; + var meta = 'Ctrl+'; + + wpTooltips = {}; + + // For MacOS: ctrl = \u2303, cmd = \u2318, alt = \u2325 + if ( tinymce.Env.mac ) { + access = '\u2303\u2325'; + meta = '\u2318'; + } + + // Some tooltips are translated, others are not... + if ( editor.settings.wp_shortcut_labels ) { + each( editor.settings.wp_shortcut_labels, function( value, tooltip ) { + var translated = editor.translate( tooltip ); + + value = value.replace( 'access', access ).replace( 'meta', meta ); + wpTooltips[ tooltip ] = value; + + // Add the translated so we can match all of them. + if ( tooltip !== translated ) { + wpTooltips[ translated ] = value; + } + } ); + } + } + + function getTooltip( tooltip ) { + var translated = editor.translate( tooltip ); + var label; + + if ( ! wpTooltips ) { + prepareTooltips(); + } + + if ( wpTooltips.hasOwnProperty( translated ) ) { + label = wpTooltips[ translated ]; + } else if ( wpTooltips.hasOwnProperty( tooltip ) ) { + label = wpTooltips[ tooltip ]; + } + + return label ? translated + ' (' + label + ')' : translated; + } + + function replaceButtonsTooltips( buttons ) { + + if ( ! buttons ) { + return; + } + + each( buttons, function( button ) { + var tooltip; + + if ( button && button.settings.tooltip ) { + tooltip = getTooltip( button.settings.tooltip ); + button.settings.tooltip = tooltip; + + // Override the aria label wiht the translated tooltip + shortcut. + if ( button._aria && button._aria.label ) { + button._aria.label = tooltip; + } + } + } ); + } + + function addShortcutsToListbox() { + // listbox for the "blocks" drop-down + each( editor.theme.panel.find( 'listbox' ), function( listbox ) { + if ( listbox && listbox.settings.text === 'Paragraph' ) { + each( listbox.settings.values, function( item ) { + if ( item.text && wpTooltips.hasOwnProperty( item.text ) ) { + item.shortcut = '(' + wpTooltips[ item.text ] + ')'; + } + } ); + } + } ); + } + /** * Experimental: create a floating toolbar. * This functionality will change in the next releases. Not recommended for use by plugins. @@ -752,6 +807,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { each( buttons, function( item ) { var itemName; + var tooltip; function bindSelectorChanged() { var selection = editor.selection; @@ -842,6 +898,12 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) { item.size = settings.toolbar_items_size; } + tooltip = item.tooltip || item.title; + + if ( tooltip ) { + item.tooltip = getTooltip( tooltip ); + } + item = Factory.create( item ); buttonGroup.items.push( item ); diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 03eb8a39d9..c3cb7e7241 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -1151,7 +1151,6 @@ final class _WP_Editors { // Link plugin 'Link' => __( 'Link' ), 'Insert link' => __( 'Insert link' ), - 'Insert/edit link' => __( 'Insert/edit link' ), 'Target' => __( 'Target' ), 'New window' => __( 'New window' ), 'Text to display' => __( 'Text to display' ),