Remove TinyMCE and browser undo shortcuts

packages/editor/src/components/rich-text/index.js

@@ -3,7 +3,6 @@
  */
 import classnames from 'classnames';
 import {
-	defer,
 	find,
 	isNil,
 	isEqual,
@@ -21,7 +20,7 @@ import {
 	getScrollContainer,
 } from '@wordpress/dom';
 import { createBlobURL } from '@wordpress/blob';
-import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN, rawShortcut } from '@wordpress/keycodes';
+import { BACKSPACE, DELETE, ENTER, LEFT, RIGHT, UP, DOWN } from '@wordpress/keycodes';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { rawHandler, children, getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
@@ -56,6 +55,7 @@ import TinyMCE, { TINYMCE_ZWSP } from './tinymce';
 import { pickAriaProps } from './aria';
 import { getPatterns } from './patterns';
 import { withBlockEditContext } from '../block-edit/context';
+import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 
 /**
  * Browser dependencies
@@ -75,7 +75,6 @@ export class RichText extends Component {
 			this.multilineWrapperTags = [ 'ul', 'ol' ];
 		}
 
-		this.onInit = this.onInit.bind( this );
 		this.getSettings = this.getSettings.bind( this );
 		this.onSetup = this.onSetup.bind( this );
 		this.onFocus = this.onFocus.bind( this );
@@ -84,7 +83,6 @@ export class RichText extends Component {
 		this.onDeleteKeyDown = this.onDeleteKeyDown.bind( this );
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.onKeyUp = this.onKeyUp.bind( this );
-		this.onPropagateUndo = this.onPropagateUndo.bind( this );
 		this.onPaste = this.onPaste.bind( this );
 		this.onCreateUndoLevel = this.onCreateUndoLevel.bind( this );
 		this.setFocusedElement = this.setFocusedElement.bind( this );
@@ -172,9 +170,7 @@ export class RichText extends Component {
 	onSetup( editor ) {
 		this.editor = editor;
 
-		editor.on( 'init', this.onInit );
 		editor.on( 'nodechange', this.onNodeChange );
-		editor.on( 'BeforeExecCommand', this.onPropagateUndo );
 
 		const { unstableOnSetup } = this.props;
 		if ( unstableOnSetup ) {
@@ -188,35 +184,6 @@ export class RichText extends Component {
 		}
 	}
 
-	onInit() {
-		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' );
-	}
-
-	/**
-	 * Handles an undo event from TinyMCE.
-	 *
-	 * @param {UndoEvent} event The undo event as triggered by TinyMCE.
-	 */
-	onPropagateUndo( event ) {
-		const { onUndo, onRedo } = this.props;
-		const { command } = event;
-
-		if ( command === 'Undo' && onUndo ) {
-			defer( onUndo );
-			event.preventDefault();
-		}
-
-		if ( command === 'Redo' && onRedo ) {
-			defer( onRedo );
-			event.preventDefault();
-		}
-	}
-
 	/**
 	 * Get the current record (value and selection) from props and state.
 	 *
@@ -916,6 +883,7 @@ export class RichText extends Component {
 						</Fragment>
 					) }
 				</Autocomplete>
+				<RemoveBrowserShortcuts />
 			</div>
 		);
 	}

packages/editor/src/components/rich-text/remove-browser-shortcuts.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { rawShortcut } from '@wordpress/keycodes';
+import { KeyboardShortcuts } from '@wordpress/components';
+
+export function RemoveBrowserShortcuts() {
+	return (
+		<KeyboardShortcuts
+			bindGlobal
+			shortcuts={ {
+				[ rawShortcut.primary( 'z' ) ]: () => false,
+				[ rawShortcut.primaryShift( 'z' ) ]: () => false,
+				[ rawShortcut.primary( 'y' ) ]: () => false,
+			} }
+		/>
+	);
+}

packages/editor/src/components/rich-text/tinymce.js

@@ -209,13 +209,15 @@ export default class TinyMCE extends Component {
 
 				editor.on( 'init', () => {
 					// See https://github.com/tinymce/tinymce/blob/master/src/core/main/ts/keyboard/FormatShortcuts.ts
-					[ 'b', 'i', 'u' ].forEach( ( character ) => {
+					[ 'b', 'i', 'u', 'z', 'y', 'z' ].forEach( ( character ) => {
 						editor.shortcuts.remove( `meta+${ character }` );
 					} );
 					[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ].forEach( ( number ) => {
 						editor.shortcuts.remove( `access+${ number }` );
 					} );
 
+					editor.shortcuts.remove( 'meta+shift+z' );
+
 					editor.dom.setHTML = setHTML;
 				} );