diff --git a/blocks/rich-text/format-toolbar/index.js b/blocks/rich-text/format-toolbar/index.js index a175906e5171b..a987d203606f4 100644 --- a/blocks/rich-text/format-toolbar/index.js +++ b/blocks/rich-text/format-toolbar/index.js @@ -16,36 +16,35 @@ import { prependHTTP } from '@wordpress/url'; /** * Internal dependencies */ -import { accessShortcut, primaryShortcut } from 'utils/keycodes'; import './style.scss'; import UrlInput from '../../url-input'; import { filterURLForDisplay } from '../../../editor/utils/url'; -const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } = keycodes; +const { ESCAPE, LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER, displayShortcut } = keycodes; const FORMATTING_CONTROLS = [ { icon: 'editor-bold', title: __( 'Bold' ), - shortcut: primaryShortcut( 'B' ), + shortcut: displayShortcut.primary( 'b' ), format: 'bold', }, { icon: 'editor-italic', title: __( 'Italic' ), - shortcut: primaryShortcut( 'I' ), + shortcut: displayShortcut.primary( 'i' ), format: 'italic', }, { icon: 'editor-strikethrough', title: __( 'Strikethrough' ), - shortcut: accessShortcut( 'D' ), + shortcut: displayShortcut.access( 'd' ), format: 'strikethrough', }, { icon: 'admin-links', title: __( 'Link' ), - shortcut: primaryShortcut( 'K' ), + shortcut: displayShortcut.primary( 'k' ), format: 'link', }, ]; diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js index b3baabd779295..56931e4029aa1 100644 --- a/blocks/rich-text/index.js +++ b/blocks/rich-text/index.js @@ -45,7 +45,7 @@ import { EVENTS } from './constants'; import { withBlockEditContext } from '../block-edit/context'; import { domToFormat, valueToString } from './format'; -const { BACKSPACE, DELETE, ENTER } = keycodes; +const { BACKSPACE, DELETE, ENTER, rawShortcut } = keycodes; /** * Returns true if the node is the inline node boundary. This is used in node @@ -193,12 +193,6 @@ export class RichText extends Component { if ( this.props.onSetup ) { this.props.onSetup( editor ); } - - editor.shortcuts.add( 'meta+k', '', () => this.changeFormats( { link: { isAdding: true } } ) ); - editor.shortcuts.add( 'access+a', '', () => this.changeFormats( { link: { isAdding: true } } ) ); - editor.shortcuts.add( 'access+s', '', () => this.changeFormats( { link: undefined } ) ); - editor.shortcuts.add( 'access+d', '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) ); - editor.shortcuts.add( 'access+x', '', () => this.changeFormats( { code: ! this.state.formats.code } ) ); } /** @@ -226,6 +220,18 @@ export class RichText extends Component { onInit() { this.registerCustomFormatters(); + + this.editor.shortcuts.add( rawShortcut.primary( 'k' ), '', () => this.changeFormats( { link: { isAdding: true } } ) ); + this.editor.shortcuts.add( rawShortcut.access( 'a' ), '', () => this.changeFormats( { link: { isAdding: true } } ) ); + this.editor.shortcuts.add( rawShortcut.access( 's' ), '', () => this.changeFormats( { link: undefined } ) ); + this.editor.shortcuts.add( rawShortcut.access( 'd' ), '', () => this.changeFormats( { strikethrough: ! this.state.formats.strikethrough } ) ); + this.editor.shortcuts.add( rawShortcut.access( 'x' ), '', () => this.changeFormats( { code: ! this.state.formats.code } ) ); + this.editor.shortcuts.add( rawShortcut.primary( 'z' ), '', 'Undo' ); + this.editor.shortcuts.add( rawShortcut.primaryShift( 'z' ), '', 'Redo' ); + + // Remove TinyMCE Core shortcut for consistency with global editor + // shortcuts. Also clashes with Mac browsers. + this.editor.shortcuts.remove( 'meta+y', '', 'Redo' ); } adaptFormatter( options ) { diff --git a/components/icon-button/index.js b/components/icon-button/index.js index 34a9a820b89f1..c6c35863bab98 100644 --- a/components/icon-button/index.js +++ b/components/icon-button/index.js @@ -25,14 +25,21 @@ class IconButton extends Component { const classes = classnames( 'components-icon-button', className ); const tooltipText = tooltip || label; - // Should show the tooltip if an explicit tooltip is passed - // or if there's a label and the children are empty and the tooltip is not explicitely disabled - const showTooltip = !! tooltip || + // Should show the tooltip if... + const showTooltip = ( + // an explicit tooltip is passed or... + tooltip || + // there's a shortcut or... + shortcut || ( - label && + // there's a label and... + !! label && + // the children are empty and... ( ! children || ( isArray( children ) && ! children.length ) ) && + // the tooltip is not explicitly disabled. false !== tooltip - ); + ) + ); let element = (